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
Cara Buat Menu ZooM Drop Down 10out of 10 ratings.
Powered by Blogger.