0 Trik Blogger : Cara Membuat Menu Horizontal Blog Drop Down Search Engine

Cara Membuat Menu Horizontal Blog Drop Down Search Engine :
1. Masuk ke akun blogger anda
2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
3. Cari kode ]]></b:skin>
4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>

#menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI6JEURqB91qAAnCNDp4HZ2-hKB5RI7eAP0qtAL8jnsQvbPf7el0pH-gMM15VmMquHua4chzipIiPj-q7TgQPw0hnwxhTAoscKoGiHL50Hh3Ewpm5AbYLHVKq9EI50XqsN5EuXzGM6c2s/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/AVvXsEiHqei12TOiRYxYCgCZQR-WUCu2KrJbuLXxZyIvGmmLfWgyCuDLwVWGEvmn5ktZummWbLvzFHrOlG6SWfyEQ30ALJT68BnLpWd2TJmCCnMuudSy9PcdgQabOlOXB-F42idoLekSdeleDp4/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}

5. Cari kode seperti berikut ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Panduan Template Blog(Header)' type='Header'/>
</b:section>
</div>
6. Letakkan kode menu horizontal berikut dengan memperhatikan dua pilihan ini :
Jika anda ingin menampilkan menu horizontal diatas judul blog, letakkan kode menu horizontal dibawah <div id='header-wrapper'>

Jika anda ingin menampilkan menu horizontal dibawah judul blog, letakkan kode menu horizontal dibawah </b:section>
9. Kode Menu Horizontal Blog Drop Down Dengan Search Engine

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-yeFVlwKp_abAyG8VxlDcb0xPYtr222dxqqLDcPk-L7sWaFP3x1gi6uDhghDw_u9SKdhAeGv3a0PQz9ivk0BGMLFvMB8n7d1mzMSQ_laUByW3OQWU6juchi17Blf1HtIsxsxHYRxBYgM/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<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:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLH2FnvUAr8_TzV4s3onFoYmyisFy3e-Ai4yJHhES4rDpQacEisIPqslTwvalE9RLl-8G8Du-KLqgV5I9VwtTTlkg0gLGJOE-_WzZnPXLuzJaGHbeZQ2jkwUP5jvYISUnuzD-eAWmg4xo/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5znnPbf65RFa2Ek39pIWHoGGOAwAnzFvZ6W3bantUeuoryn7o1jqKhwrJnrp22_9VzJPflQqco4hILQazcjlwUoYByIdzwsY7EdD3SZEN-DAkZ0Frqpc6o8dL4FX8qMvkbofdjBiP-Vo/s1600/bg_search.gif' type='image' value='Search'/>

</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Komentar →