Memasang Menu Horizontal Drop Down Pada Blog

Halo sobat Blogger Semua, bagaimana kabar anda hari ini? saya harap kita semua dalam keadaan sehat sehingga kegiatan blogging kita lancar.. :D

Kali ini, saya ingin sedikit berbagi tentang Cara Memasang Menu Horizontal Drop Down Pada Blog , Mungkin tutorial semacam ini sudah ratusan banyaknya di google bila kita search. Namun, tidak ada salahnya saling berbagi kan? mungkin ada dari sobat0sobat semua yang ingin mencobanya,,,

Langsung saja kita Ke TKP..

Contoh ganbar Menu Horizontal Drop Down Pada BLog :

 

 Langkah-Langkahnya :

• Login dengan akun Blogger sobat
• Pilih Rancangan-Edit HTML (Design - Template - Edit HTML)
• Centang pada tulisan seperti ini Expand Template Widget, disarankan download terlebih dahulu template sobat untu mengantisipasi bila terjadi kesalahan.
• didalam Template -&gt;Edit HTML cari Kode ]]></b:skin> lakukan pencarian cepat dengan menekan tombol Ctrl+F pada Keyboard
• kemudian copy kode dibawah ini, dan pastekan tepat diatas kode
  ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5qq4d0rn7pMccSrizaj84Mq3BrKYoCq40vnIMs07mxu0lFUOlg3I9ryimZz5QiYISRvTXndJKpOqcLrcTxo5cG7u9g2AqGP_mqRFC0me3oiCa-_r79oQIlPosP18poZZ7ehyphenhyphenDN9TG74/s1600/nav.png) repeat-x; width:970px; margin:0 auto; padding:0 auto}
#menuwrapper{width:970px; height:30px; margin:0 auto}
.menusearch{width:180px; float:right; margin:0 auto; padding:0 auto}
.clearit{clear:both; height:0; line-height:0.0; font-size:0}
#menubar{width:100%}
#menubar, #menubar ul{list-style:none; font-family:Arial,serif; margin:0; padding:0}
#menubar a{display:block; text-decoration:none; font-size:12px; font-weight:700; text-transform:uppercase; text-shadow:0px 1px 1px #000; color:#f2f1f1; border-right:1px solid #666; padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihMuq2STzYUchY2iqRrIK31V3jXPj2X3X-8mIMMBA9Qnya06JwkKMXRnti1_a2K3enWrd8byZuljoFvOmT64VKx6vgjjGmICG2fTdfAP5eGVyKIoxhPLpkaLeDgMTdsSaCoFBajjPWIMU/s1600/arrow_white.gif); background-repeat:no-repeat; background-position:right center; padding:9px 24px 8px 10px}
#menubar li{float:left; position:static; width:auto}
#menubar li ul, #menubar ul li{width:170px}
#menubar ul li a{text-align:left; color:#fff; font-size:12px; font-weight:400; text-transform:none; font-family:Arial; border:none; padding:5px 10px}
#menubar li ul{z-index:100; position:absolute; display:none; background:#222; padding-bottom:5px; -moz-box-shadow:0 2px 2px rgba(0,0,0,0.6); -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#222; color:#E98C0A}
#menubar li:hover ul, #menubar li.hvr ul{display:block}
#menubar li:hover ul a, #menubar li.hvr ul a{color:#edfdfd; background-color:transparent; text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444; border-top:1px solid #000; display:block; font-size:1px; height:0; line-height:0; margin:4px 0}
#menubar ul a:hover{background-color:#555!important; color:#fff!important; text-decoration:none}
.rbbox{-moz-box-shadow:inset 0 0 20px #f10c0c; -webkit-box-shadow:inset 0 0 20px #f10c0c; box-shadow:inset 0 0 20px #f10c0c; .rbbox:hover{background-color:#000)}

•  Setelah itu cari kode
  </b:widget>
  </b:section>
   </div>
  
  -------ISI KODE DISINI-------
  
  </div>
  <div class='header-cap-bottom cap-bottom'>

• kemudian Copy Kode dibawah ini dan paste tepat diantara kode diatas 

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTB3_g7TBl4mxPbm_rChyphenhyphenGn8OlyMbtvz9jlaDyAp7Drvvi2UUmbGvheWzDP4IFlqT8NL8L664TbgFBssn4ZGNd2MPTkl1KEYDuyw5GZTUcm8yERGLfRc9Quha7TAddiQtEEaodRx9_Wr4/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a class='trigger' href='#'>Contact </a>
<ul>
<li><a href='http://Link URL Sobat/'>Profil BLoGGer </a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>Contact on Twitter</a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>Contact on Google Plus</a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>Contact on FeedBurner</a></li>
</ul>
</li>

<li><a href='http://Link URL Sobat/'>TuKar LinK</a></li>
<li><a class='trigger' href='#'>DoWnLoAd</a>
<ul>
<li><a href='http://Link URL Sobat/'>Music</a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>FiLm</a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>Game</a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>NoVeL</a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>E-BooK</a></li>
<li class='hr'/>
<li><a href='http://Link URL Sobat/'>Software</a></li>
</ul>
</li>
<li><a href='http://Link URL Sobat/'>E-book Reader</a></li>
<li><a href='http://Link URL Sobat/'>Daftar ISi</a></li>
<li><a href='http://Link URL Sobat/'>BISNIS ONLINE</a></li>


<li><a href='http://beasiswaindo.com'>Info Beasiswa</a></li>

</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://URL BLOG Sobat/'>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:80px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdU7VIZwtlRU1Au-jHLWft_F8IGY9STI_5BmkPzt7Mjox7YRypzCfXStQrHEq4XcB2S2cgl_J2_6iHPmjB_pzAvWvpgMgR8j2Zx06JPbpvYEckOQ1WfrLIQd_sGr7KSRTQUBJk-bC2Mb4/s1600/field-bg.gif) no-repeat;' type='text' value='Search ...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjURywCsaz2vhWhpKCGAKraNhyphenhyphenG97vLpxw8z3DsqBBdS9roG-zM1156mXZibYwcQ3xBrMc70mlQiIYhb4IST7q2Rv7ocX-uJtxUPFj6vCbu1TL3aDZA7xOZQS7OT5yUr6RZbJ-TuaTnqts/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

• Setelah selesai semua, Simpan Template.

SELAMAT MENCOBA..^_^

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post