Cara membuat menu horisontal keren bag 1
M
enu adalah sebuah wadah atau tempat untuk menampung semua isi blog ,baik dalam bentuk label ataupun kategories ,tentu saja tidak sembarangan kita membuat sebuah menu ,karena menu itu sendirilah yang akan membuat tampilan blog kita akan terlihat Istimewa...!!!!!,menu itu sendiri dapat kita kategorikan menjadi 2 macam :- Menu Horisontal /yaitu menu yang penataan nya dalam bentuk horisontal yang biasanya terletak di bawah header
- Menu Vertikal / yaitu menu yang sering kita jumpai dalam bentuk Vertikal yang biasanya terletak di bagian kanan / kiri Template .
- Loggin ke blogger.com
- Setelah masuk dasboard pilih EDIT HTML jangan lupa download lengkap dulu template untuk menjaga kemungkinan salah dalam penempatan script
- Cari kode ]]></b:skin> lalu taruh kode Css di bawah ini tepat di atas kode ]]></b:skin> berikut kodenya:
- Lalu save template
- selanjutnya untuk pemanggilan HTML nya adalah sebagai berikut :
- masih ada di dasbor pilih bagian tata letak
- Tambah Gadget (pilih yang di bagian bawah header)pilih HTML Java Script lalu masukkan kode di bawah ini
<ul>
<li><a href="#">Tutorial Blog </a></li>
<li><a href="#">Css Code</a></li>
<li><a href="#">Kode Warna</a></li>
<li><a href="#">PhotoShop</a></li>
<li><a href="#">Free Download</a></li>
</ul> - Lalu save
/*menu horisontal*/
ul {
display: table;
width: 800px;
}
li {
display: table-cell;
width: 150px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;border-radius:10px;
}
ul:hover li {
width: 15%;
}
li:hover {
width: 35% !important;
opacity: 0.8;
}
ul li:nth-of-type(1) { background: #FF4C4C;/*http://kumpulan-aneka-tutorial.blogspot.com/*/ }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }
/*menu horisontal and*/
0 komentar:
Posting Komentar
Posting Komentar
Silah kan berkomentar yang hanya berhubungan dengan isi Artikel