15 September 2013

Cara memasang menu dropdown keren di blog

Pada beberapa templates blog standar, sebagian tidak dilengkapi dengan menu navigasi. Seperti Menu Dropdown/Drop Down Menu. Padahal, fitur tersebut cukup menujang Page View pada blog. Artinya bagian dari langkah SEO.

Secara spesifik, menu dropdown adalah fitur yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul submenu lainnya yang memanjang kebawah. Untuk contohnya bisa dilihat,  seperti gambar menu drop down pada blog; all about blogspot template milik saya ini.

cara memasang widget menu drop down di blog
Menu dropdown keren di blog


Style atau gaya menu dropdown tersebut, bisa dipasang sesuai dengan minat kita masing-masing. Untuk  Cara Membuat Menu Dropdown Di Atas Header/Judul Blog secara sederhana click disini. Sedangkan untuk memasang menu navigasi keren pada blog, anda bisa mengikuti langkah-langkah berikut.

Langkah-langkah memasang menu drop down keren di blog :

1. Login ke akun blogger
2. Klik Template 
3. Klik Edit HTML    
4. Cari kode berikut : 
]]></b:skin>
5. Jika kode tersebut sudah ditemukan, silahkan copy kode CSS dibawah ini kemudian letakan tepat diatas kode ]]></b:skin>  :
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 35px;
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 #ff4500;
}
#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: Domine, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 35px;
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 #ff4500;
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 0px 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: #ff4500;
border-bottom: 1px solid #aad06d;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #ff0000;
}
#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: #ff0000;
border-bottom: 1px solid #97b36b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #345105;
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px double #696969;font-weight:normal}
}
 
6. Kemudian anda cari kode berikut :
 </header>
7. Jika kode tersebut sudah ditemukan, kemudian copy kode dibawah ini, lalu letakan tepat dibawah kode </header> :


<div id='cssmenu'>
<ul>
<li class='active '><a href='/'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>SEO Artilce</span></a>
<ul>
<li><a href='http://redaksiexpo2012.blogspot.com/search/label/SEO%20TIps'><span>SEO Tips</span></a></li>
<li><a href='http://redaksiexpo2012.blogspot.com/search/label/SEOquake'><span>SEOquake</span></a></li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Blog Artilce</span></a>
<ul>
<li><a href='http://redaksiexpo2012.blogspot.com/search/label/widget'><span>Widget Blog</span></a></li>
<li><a href='http://redaksiexpo2012.blogspot.com/search/label/Blooger%20News'><span>Blogger News</span></a></li>
</ul>
</li>
<li><a href='http://redaksiexpo2012.blogspot.com/p/site-map.html'><span>Sitemap</span></a></li>
</ul>
</div>
Keterangan :
    Ganti kode yang berwarna ORANGE dengan       :  Alamat / URL Tujuan
    Ganti kode yang berwarna MERAH dengan  :  nama menu yang anda inginkan
8. Kemudian Save Template. Selesai

Demikian cara memasang menu drop down keren di blog. Semoga bermanfaat dan terimakasih atas kunjungannya.

30 komentar:

  1. gan klo kyak drop box tampilan blog agan ini gmn gan crany .? hehe

    BalasHapus
    Balasan
    1. Itu bawaan templates yang udah jadi gan... tapi struktur HTML nya gak jauh berbeda

      Hapus
  2. Keren gan thx banget.
    p4ndoo.blogspot.com

    BalasHapus
  3. ijin copas ,terima kasih semuanya, dan sangat bermanfaat.

    BalasHapus
  4. Gan, kalau di template udah ada menunya, ntar gimana jadinya gan,...??
    Thanks

    www.com27.blogspot.com

    BalasHapus
  5. keren

    http://bemostpopular.blogspot.com/

    BalasHapus
  6. oke deh bosss www.mahadewapulsa.com

    BalasHapus
  7. keren gan, thanks infonya, entar ana tes ke blog ane :D

    artikeldanmusik.blogspot.com

    BalasHapus
  8. Izin cekidot gan..
    thx before....

    zyandlove.blogspot.com

    BalasHapus
  9. gan klo mau pakai sub menu gmn css nya?
    thx

    BalasHapus
  10. mantab gan, makasih

    http://cv-pengobatan.com/

    BalasHapus
  11. gan cara setting ukuran lebar dan posisi gimana

    BalasHapus
  12. Terima Kasih Banyak !!!

    http://rayya-riziq-cuyz.blogspot.com/

    BalasHapus
  13. artikelnya keren gan, kunjungi balik ya http://tulisan-kaktegar.blogspot.co.id/2014/07/cara-membuat-menu-navigasi-seperti-fast.html
    salam blogger

    BalasHapus
  14. GAN nambahin masukan klo ada contoh nya pasti tambah good

    BalasHapus
  15. Salam Kenal Gan...! Makasih Dan Sukses terus untuk Agan.

    BalasHapus
  16. awas template editan kebnyakan celah

    BalasHapus
  17. Wah... Mantap banget Tutorialnya....
    Kalau berkenan, silahkan mampir ke blogku yang sederhana di
    KOLEKSI LAGU KESUKAAN
    by: Tinjakstar

    BalasHapus
  18. kan misalnya dropdown nya isi foto
    cara masukin foto ke dropdown gmna gan??

    BalasHapus
  19. gan caranya ngubah ukurannya biar agak gede gi mana

    BalasHapus