Judul : Cara Buat Menu ZooM Drop Down
link : Cara Buat Menu ZooM Drop Down
Cara Buat Menu ZooM Drop Down
Sudah banyak tutorial cara pasang |Buat Menu di Blogspot dengan berbagai jenis dan bentuk, tapi pada intinya semua fungsinya sama.Kembali menemani sobat blogger untuk membuat menu zoom drop down yang tampilannya lumayan keren, terlepas nanti sobat ingin pakai atau tidak di blog tercinta ada baiknya nyimak dulu atau di simpan dulu karena mungkin suatu saat mau di coba.
Silahkan intip demo nya dimari : D E M O
Berikut langkahnya
Pertama
SIlahkan menuju Dasbord lalu klik Template ---> Edit HTML
Silahkan Cari kode ]]></b:skin>
Letakkan Code berikut diatas ]]></b:skin>
.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0; /* Show only top and bottom border for main menu container */
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */
border-left: 1px solid #BBB; /* add border to left side of first menu link */
padding-left:25px;
background: url(media/onebit_home.png) 1px center no-repeat; /* Add icon */
}
.shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(media/onebit_bulb.png) 1px center no-repeat; /* Add icon */
}
.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item */
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}Silahkan di Simpan
Kedua
Sobat Sebaiknya pasang Menu ini pada widget di kiri atau kanan Blog supaya terlihat serasi.
Sekarang silahkan menuju Tata Letak + Tambah Gadget + HTML/JavaScript
Masukkanlah Code berikut kedalamnya
<ul class="menu">
<li class="p1"><a href="Masukkan Link disini kawan "><span>Judul menu di sini</span></a></li>
<li class="p2"><a href="Masukkan Link disini kawan"><span>Judul menu di sini</span></a></li>
<li class="p3"><a href="Masukkan Link disini kawan"><span>Judul menu di sini</span></a></li>
<li class="p4"><a href="Masukkan Link disini kawan"><span>Judul menu di sini</span></a></li>
<li class="p5"><a href="Masukkan Link disini kawan"><span>Judul menu di sini</span></a></li>
<li class="p6"><a href="Masukkan Link disini kawan"><span>Judul menu di sini</span></a></li>
<li class="p7"><a href="Masukkan Link disini kawan"><span>Judul menu di sini</span></a></li>
<li class="p8"><a href="Masukkan Link disini kawan"><span>Judul menu di sini</span></a></li>
<li class="icons">
<b class="m1">Judul menu di sini</b>
<b class="m2">Judul menu di sini</b>
<b class="m3">Judul menu di sini</b>
<b class="m4">Judul menu di sini</b>
<b class="m5">Judul menu di sini</b>
<b class="m6">Judul menu di sini</b>
<b class="m7">Judul menu di sini</b>
<b class="m8">Judul menu di sini</b>
</li>
</ul>
Terakhir setelah selesai tentunya di Simpan
Selamat Mencoba dan Jangan lupa Komentarnya Kawan
Demikianlah Artikel Cara Buat Menu ZooM Drop Down
Sekian Cara Buat Menu ZooM Drop Down, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.
