Cara Membuat Layout [Tata Letak] Website

Cara Membuat Layout Dengan Javascript ( Javascript di Dalam Html )

Ada keuntungan tersendiri ketika Anda membuat layout untuk web menggunakan javascript,tetapi ada juga kekurangannya.

Karena setiap browser ada fitur non aktifkan javascript maka tampilannya jelas rusak,tetapi ketika fitur javascript hidup maka tampilan seperti yang di tulis.

Selain itu orang juga tidak akan melihat kode yang di buat jika javascript tersebut di samarkan dengan bantuan situs obuscate javascript.

Namum jika Anda ingin membuat layout dengan javascript silahkan silahkan lihat kodenya di bawah :

<html>  
<head>
<title>Theme Javascript</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/> 
<style>html{font-family:sans-serif;padding:8px 8px;color:red;} #top h1{margin-top:0;font-size:28px;} 
@media(max-width:600px){ 
#left,#right{float:none;width:100%;}
} </style>
</head>
<body id="body">
<div class="wrap">
<div class="top" id="top">  
<h1>Theme Javascript</h1>	 
<div id="u"/>  
</div> 
   
<div id="left">	 
<p>Ini Adalah Tema dengan gaya javascript</p>	 
</div>	 
<div id="right">
<p>Ini adalah bagian kanan</p>	   
</div>
</div></div>
<script>  
var a=document.getElementById("top");   
a.style.background="pink";   
a.style.width="100%";   
a.style.top="0";   
a.style.left="0";   
a.style.right="0"; 
a.style.position="fixed"; 
a.style.height="40px";   
a.style.padding="5px 8px"; 
var b=document.getElementById("body");
b.style.font="sans-serif";   
b.style.padding="50px 0 0 0"; 
b.style.margin="0";   
var c=new Image (50, 50); 	
c.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPO5arA8doukY-N7S5z9AWuj-QufNe77HngqBiAWY0VTfcrlRUJxwb9dz_Eh7H3l9CHgQtRerM43NAyYrZMsDnrZP-IIq0Lrka6zSk6VmuBWLGxQ_8iRDvWic92Z3hhib5NWTB0cTYcOs/s1600/_20180412_205739.JPG'; 	
var x=document.getElementById("u"); 
x.appendChild(c);
x.style.background="transparent"; 	
x.style.width="50px"; 	
x.style.position="absolute"; 	
x.style.top="0"; 	
x.style.right="35px"; 	
var l=document.getElementById("left"); 	
l.style.width="60%"; 	
l.style.float="left"; 	
l.style.background="pink"; 	
l.style.height="200px"; 	
l.style.padding="4px 7px"; 	
l.style.color="black"; 	
var r=document.getElementById("right"); 	
r.style.width="32%"; 	
r.style.float="right"; 	
r.style.background="pink"; 	
r.style.height="200px"; 	
r.style.padding="4px 7px"; 	
r.style.color="black"; 	
r.style.margin="0 24px 0 0"; 	
if (window.matchMedia("(max-width: 700px)").matches) 
{  
r.style.width="90%";   
r.style.float="none";   
r.style.margin="0 0 10px 0";   
l.style.width="90%";   
l.style.float="none";   
l,r.style.overflow="hidden";   
r.style.border="1px solid #fff"; 	
}  
</script>
</body>
</html>

Bacaan Baca-Baca

Cara Membuat Layout [Tata Letak] Website

Cara Membuat Layout Dengan Javascript ( Javascript di Dalam Html )

Search This Blog