Sobat Bloger sekalian, pada artikel kali ini akan kita bahas cara memasang Dropdown menu Horizontal diatas header Blog.
Langkah pertama setelah kamu masuk ke Blog, langsung saja klik Dashbord, lalu pilih template,
kemudian pilih Edit HTML, jangan lupa centang terlebih dahulu Expand Template Widget lalu
kamu cari kode ini ]]></b:skin> setelah ketemu selanjutnya
letakan kode script dibawah ini tepat
diatas kode ]]></b:skin> .
#menuwrapperpic{background: url(http://ikhwan-em.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;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;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwB3Q1T3tB8-vXpDahF5ES3i_MIQ5zyhNUsKDgK8aR6iOJCP3uNLBmnGF4raCsU4r6Or8U_9GSC_RvP6tUrLJHLSiiz2C2qFPaOP5Wu-bhLmKWaBCjznsUm__ySiAYlRxZt-sIxIQXndU/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 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}
Langkah selanjutnya kamu cari kode <header> setelah ketemu kode tersebut ' letakan
script dibawah ini tepat diatas atau dibawah kode <header>.
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a class='trigger'>SiEmy LBS kidul blok Masjid</a>
<ul>
<li class='hr'/>
<li><a href='http://twitter.com/modrakula' target='new'>My Twitter</a></li>
<li><a href='http://www.facebook.com/sesuhemy' target='new'>My Facebook</a></li>
</ul>
</li>
<li><a class='trigger'>Wawasan Islam</a>
<ul>
<li><a href='http://ikhwan-em.blogspot.com/search/label/sejarah%20islam'>sejarahislam</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/muslimsh'>muslimah</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/renungan'>renungan</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Untaian%20Mutiara'>Untaian Kata Mutiara</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kumpulan Trik Dan Tips</a>
<ul>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/tips%20facebook'>tips facebook</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/computer'>computer</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/belajar%20ngeblog'>tips blog</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/istilah%20hacking'>istilah hacking</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Tips%Internet'>Tips Internet</a></li>
</ul>
</li>
<li><a class='trigger'>Fiqih</a>
<ul>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Thaharah'>Thaharah</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Sholat'>Sholat</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Zakat'>Zakat</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Riba'>Riba</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Puasa'>Puasa</a></li>
</ul>
</li>
<li><a class='trigger'>Percikan Iman</a>
<ul>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Tauhid'>Tauhid</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Kisah%20Tauladan'>Kisah tauladan</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/UlamaSalaf'>Ulama Salaf</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Jihad'>Jihad</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Taqdir'>Taqdir</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Dakwah'>Dakwah</a></li>
<li class='hr'/>
<li><a href='http://ikhwan-em.blogspot.com/search/label/Syirik'>Syirik</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://ikhwan-em.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://ikhwan-em.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:red; background:url(http://ikhwan-em.blogspot.comkmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Cari Artikel Disini...'/><input align='top' id='search-btn' src='http://ikhwan-em.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
Keterangan:
Ganti tulisan yang berwarna merah dengan url Blog kamu, dan sesuaikan dengan search label
yang ada di Blog kamu. kalau sudah selesai klik pratinjau, dan kalau sudah yakin klik
Save Template.
Selamat Mencoba.
BACA JUGA :
0 Comments