Cara Buat Menu Dropdown Horizontal Blogger Dengan CSS3

Untuk membuat menu atau menambah menu pada blog tidaklah sulit, banyak cara dan tools untuk membuat menu dropdown blogger, menu vertikal ataupun menu horizontal untuk blogger. Sarab terbaik adalah yang simple, artinya tanpa menggunakan image hanya dengan CSS. Alasannya mengurangi beban image yang harus diloading suatutemplate. Begitu juga layout templates blog akan lebih baik dengan templates CSS. Selain membuat templates simple juga akan lebih berpengaruh pada pagespeed blog dan juga akan berpengaruh dengan SEO.

Membuat menu dropdown dengan CSS3 pada blogspot/blogger entah itu menu vertikal atau menu harizontal sama saja. Nah ini contoh menu halaman dropdown horizontal menggunakan CSS3, contoh pada menu blog ini, untuk membuat menu dropdown horizontal dengan CSS3 seperti blog cybermales ini caranya begini :

1. Login dulu ke blogger.com
2. Pilih template ---> Edit html ---> backup ---> beri centang pada expand
3. Cari kode ]]></b:skin> 
4. Copy  kode CSS dibawah ini lalu letaktkan diatas kode  ]]></b:skin> :

#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#00AEEE; background:-moz-linear-gradient(top,  #EB0099 0%, #FC34AC 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0541d), color-stop(100%,#c23919)); background:-webkit-linear-gradient(top,  #e0541d 0%,#c23919 100%); background:-o-linear-gradient(top,  #e0541d 0%,#c23919 100%); background:-ms-linear-gradient(top,  #e0541d 0%,#c23919 100%); background:linear-gradient(top,  #e0541d 0%,#c23919 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0541d', endColorstr='#c23919',GradientType=0 ); }
#cssmenu{border-color:#912b14;}
#cssmenu > ul > li > a{border-right:1px solid #912b14; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#ff723b;}
#cssmenu > ul > li > a:hover{background:#06A8E8;}

5. Copy kode HTML menu dropdown horizontal CSS3 dibawah ini :

<div id='cssmenu'>
<ul>
<li class='active'><a href='http://Your.blogspot.com'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>POSTS Dropdwon</span></a>
<ul>
<li><a href='link POSTS Dropdwon1'><span>POSTS Dropdwon1</span></a></li>
<li class='last'><a href='Link POSTS Dropdwon2'><span>POSTS Dropdwon2</span></a></li>
</ul>
</li>
<li><a href='link about you'><span>About</span></a></li>
<li><a href='contact'><span>Contact</span></a></li>
</ul>
</div>

6. Lalu cari kode <div id='main-wrapper'> kemudian letakan kode html tersebut diatas <div id='main-wrapper'>  ini.

Untuk menempatkan kode htmlnya bisa banyak cara disesuaikan saja nanti posisinya sesuai templates blogger sobat. Biasanya ditempatkan diatas kode <div id='main-wrapper'>. Bisa juga diletakan diatas atau dibawah kode <div id='content-wrapper'> Atau bisa juga disesuaikan posisi menu dropdown nya sesuai templates blogger sobat.

Contohnya akan jadi seperti ini :

<div id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Cybermales
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>Asal Paling Lebih Pusat Terminal Informasi Dan Hiburan</span></p>
</div>
</div>
</div></div>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<div class='crosscol section' id='crosscol'></div>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='http://Your.blogspot.com'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>POSTS Dropdwon</span></a>
<ul>
<li><a href='link POSTS Dropdwon1'><span>POSTS Dropdwon1</span></a></li>
<li class='last'><a href='Link POSTS Dropdwon2'><span>POSTS Dropdwon2</span></a></li>
</ul>
</li>
<li><a href='link about you'><span>About</span></a></li>
<li><a href='contact'><span>Contact</span></a></li>
</ul>
</div>
<div id='main-wrapper'>

5. Save templates, selesai

Keterangan :

a. Untuk menjadikan menu diatas menjadi menu horizontal CSS cukup dibuang bagian dropdownnya saja,
cara merubah dari menu horinzontal dropdown css menjadi menu horizontal css tanpa dropdown cukup hapus kode menu dropdown dibawah ini :

<li class='has-sub'><a href='#'><span>POSTS Dropdwon</span></a>
<ul>
<li><a href='link POSTS Dropdwon1'><span>POSTS Dropdwon1</span></a></li>
<li class='last'><a href='Link POSTS Dropdwon2'><span>POSTS Dropdwon2</span></a></li>
</ul>
</li>

b. Begitu juga untuk menambah menu dropdwon css nya cukup menambahkan kode dropdown nya saja. Caranya copy kode html menu dropdown nya saja dan tambahkan pada rangkaian kode html menu horizontal dropdwon css tadi, kemudian tinggal merubah kalimat didalamnya sesuai kehendak hati.

c. Untuk memodifikasi tampilan warna menu horizontal dropdwon CSS, cukup merubah kode warnanya pada kode css nya saja. Untuk blog ini Cybermales menggunakan warna #EB0099 ( pink manja ). tinggal ganti saja dengan kode warna #000000 ( hitam )    #EE005B ( merah ), #BB00E0 ( ungu ),#7400E0 ( biru facebook ),#00B3E0 ( biru windows8 ),#00E092 ( hijau lembut ), #EBE400 ( kuning ), #EB8D00 ( orange ),#F50000 ( merah ferrari ) atau sesuai kesukaan masing masing.

Demikian sobat cybermales begitu cara membuat menu horizontal dropdown dengan CSS3 untuk blogger. Semoga berguna untuk sahabat sesama blogger pemula walau penjelasan rada ribet.