Hallo sahabat Unbee kali ini saya akan membahas cara membuat atau mendesain template tampilan website keren ala Unbee. nah tahu kah kalian bahwa tampilan sebuah website juga berpengaruh terhadapat trafik pengunjung. jika suatu website dengan desain dan script terlalu banyak maka loading pada site tersebut akan lelet dan akhirnya pengunjung akan keluar dari site.
Oke tampilan desain yang akan kita buat nanti akan seperti ini :
oke pertama kalian buat file .html dengan cara buka natepad save as dengan nama.html
Kalo gak mau ribet dengan penjelasan dibawah langsung saja download File lengkap+gambar
masukan Kerangka dasar HTML
<html>
<head>
</head>
<body>
</body>
</html>
nah kode diatas wajib ada ya sahabat unbee karena itu kerangka dasar dari sebuat HTMl
Masukan kode ini tepat dibawah <head> :
<title>Anime Droit</title>
fungsi untuk memberi judul
Lalu masukan CSS ini tepat dibawah <head> juga :
<style>
#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a { margin: 0; padding: 0; position: relative;}
#cssmenu {width: 1280px; height: 49px; border-radius: 0px 0px 0 0; -moz-border-radius: 0px 0px 0 0; -webkit-border-radius: 0px 0px 0 0; background: #141414; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0); border-bottom: 2px solid #0fa1e0; }
#cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; }
#cssmenu a { background: #141414; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0); color: #ffffff; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; }
#cssmenu ul { list-style: none; }
#cssmenu > ul { float: left; }
#cssmenu > ul > li { float: left; }
#cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0fa1e0; margin-left: -10px; }
#cssmenu > ul > li:first-child > a { border-radius: 0px 0 0 0; -moz-border-radius: 0px 0 0 0; -webkit-border-radius: 0px 0 0 0; } #cssmenu > ul > li:last-child > a { border-radius: 0 5px 0 0; -moz-border-radius: 0 0px 0 0; -webkit-border-radius: 0 0px 0 0; } #cssmenu > ul > li.active > a { box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; background: #070707; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0); }
#cssmenu > ul > li:hover > a { background: #070707; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0); box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; }
#cssmenu .has-sub { z-index: 1; }
#cssmenu .has-sub:hover > ul { display: block; }
#cssmenu .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; }
#cssmenu .has-sub ul li { *margin-bottom: -1px; }
#cssmenu .has-sub ul li a { background: #0fa1e0; border-bottom: 1px dotted #6fc7ec; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; } #cssmenu .has-sub ul li:hover a { background: #0c7fb0; } #cssmenu .has-sub .has-sub:hover > ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li a { background: #0c7fb0; border-bottom: 1px dotted #6db2d0; } #cssmenu .has-sub .has-sub ul li a:hover { background: #095c80; }
#table{ box-shadow:0 0 30px}
#kanan .extra {position:absolute;left:-5px;top:30px}
#kiri .extra {position:absolute;right:35px;top:10px}
#jalan .extra {position:absolute;right:35px;top:419px}
</style>
wah panjang juga ya hehe ini adalah css untuk bagian menu navigasi, jika kalian ingin merubah warna dan lain-lain silahkan diedit saja.
Next masukan kode dibawah ini tepat dibawah <body> :
<div id="jalan">
<div class="extra"><font color='FFD700'><marquee width="928">SELAMAT DATANG | WWW.ANIME-DROIT.COM | FOLLOW INSTAGRAM : @DAMARWULAN12 | SUBSCRIBE YOUTUBE : #DAMARWULAN | TERUSLAH MENCIPTAKAN SESUATU DILUAR BATAS KEMAMPUAN | MIMPI YANG INDAH AKAN SEGERA DATANG |</marquee></font></b></div>
</div>
<div id='cssmenu'> <ul> <li class='active '>
<a href='home.html'><span>Home</span></a></li>
<li><a href='https://www.facebook.com/hac.xzx'><span>Facebook</span></a></li>
<li><a href='https://twitter.com/damarwulan99'><span>Twitter</span></a></li>
<li><a href='https://www.instagram.com/damarwulan12/'><span>Instagram</span></a></li>
<li><a href='https://plus.google.com/+damarwulan99'><span>Google+</span></a></li> </ul>
</div>
<table>
<td id='table'><center><img src="gambar/kepala.jpg"width="1280"height="336"</center></td>
</table>
<div id="kanan">
<div class="extra"><img src="gambar/cewe.png" width="380" height="380" alt=""/></div>
</div>
<div id="kiri">
<div class="extra"><img src="gambar/cowo.png" width="440" height="385" alt=""/></div>
</div>
<div id='cssmenu'> <ul> <li class='active '>
<a href='home.html'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>Products</span></a> <ul>
<li class='has-sub '><a href='film.html'><span>Film</span></a> </ul> </li>
<li><a href='kontak.html'><span>Kontak</span></a></li>
<li><a href='iklan.html'><span>Pasang iklan</span></a></li> </ul>
</div>
Wah tambah panjang ya hehehe,kode diatas untuk membuat menu navigas dan header, untuk nama-nama silahkan kalian ganti sesuai selerah
Sekarang bagian terakhir untuk membuat bagian isi dan iklan jika mau. copy dan paste tepat setelah kode navigasi diatas :
<table border="0" width="1280" height="400">
<tr>
<td bgcolor='black' id='table'>
<font Color='white'>
<a href="#" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" img src="gambar/gambar1.jpg" width="600" height="300" /></a><br />
<br>Nama : Guilty Craw<br />
<br />
Kategori : Pertualangan<br />
<br />
Episode : episode 1-250<br />
<br />
Hobi : Bertualang dan Mencari teman<br />
<br />
<div style="text-align: justify;">
Anime ini adalah salah satu anime yang bertema pertualangan, misi adalah menciptakan perdamaian diseluruh dunia</div>
<div style="text-align: justify;">
<br>
<br>
<br>
<br>
<hr color='00BFFF'>
<a href="#" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" img src="gambar/gambar2.jpg" width="600" height="300" /></a><br />
<br>Nama : Guilty Craw<br />
<br />
Kategori : Pertualangan<br />
<br />
Episode : episode 1-250<br />
<br />
Hobi : Bertualang dan Mencari teman<br />
<br />
<div style="text-align: justify;">
Anime ini adalah salah satu anime yang bertema pertualangan, misi adalah menciptakan perdamaian diseluruh dunia</div>
<div style="text-align: justify;">
<br>
<br>
<br>
<br>
<hr color='00BFFF'>
<a href="#" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" img src="gambar/gambar3.jpg" width="600" height="300" /></a><br />
<br>Nama : Guilty Craw<br />
<br />
Kategori : Pertualangan<br />
<br />
Episode : episode 1-250<br />
<br />
Hobi : Bertualang dan Mencari teman<br />
<br />
<div style="text-align: justify;">
Anime ini adalah salah satu anime yang bertema pertualangan, misi adalah menciptakan perdamaian diseluruh dunia</div>
<div style="text-align: justify;">
<br>
<br>
<br>
<hr color='00BFFF'>
</font></td>
<td width="336"height="600" id='table' bgcolor='black'>
<img src="gambar/damar.gif" width="336"height="360" >
<br><br>
<hr color='00BFFF'><br>
<img src="gambar/iklan.jpg" width="336"height="600" ><br><br><br>
<br>
<br></td>
</tr>
<table border="0" width="1280" height="50">
<td width="1280" id='table'><img src="gambar/1.gif" width="1280">
<tr>
<td bgcolor="black" id='table'><font color="00BFFF"><b><center>COPYRIGHT 2016 - ANIME DROIT - Desain Template : DAMAR WULAN</center></td>
</tr>
Save dan liat hasilnya :) jangan lupa download gambar sebagai pelengkap jika tidak maka tampilan akan kosong melompong :)
Ni link Komplitnya tinggal kalian Edit-edit saja :