Cara Membuat Menu Tab/Bar Keren sekaligus kotak pencarian

Lama rasanya gak perna update ni sobat, so sekarang ini Iyagus ingin berbagi tutorial kembali tentang cara membuat MENU TAB/ BAR KEREN SEKALIGUS KOTAK PENCARIAN. Jika sobat sudah memiliki artikel yang banyak dan ingin mengganti menunya dengan yang lebih keren silahkan dicobah dengan mengikuti langkah-langkahnya.

Jadi kenapa iyagus mengatakan Menu Keren karena bentuknya yang mempunyai banyak cabang-cabang dan dapat dimodifikasi sesuai jumlah cabang yang kita inginkan. Bilah sobat meletakkan kursor pada salah satu Menu maka akan secara automatic akan terlihat semua cabang-cabang menu kebawah.

Mungkin sobat agak kesulitan membuatnya untuk bagi yang pemulah tapi disini Iyagus akan menjelaskan secara detail dengan versi tampilan template blogger yang baru dan perlu sedikit ketelitian dalam membuatnya. Oke kita mulai ya caranya sebagai berikut!

(1).Pastikan sobat sudah masuk terlebih dahulu ke blog-nya!
(2).Kemudian klik tanda pana disamping ( View Blog ) cari dan klik template atau intinya langsung ke edit HTML.
(3).Silahkan klik terlebih dahulu ( jump to widget ) pilih  HTML10 atau HTML2 atau pilih mana aja
(4).Lansung Ctrl F akan muncul kotak pencarian, Kopi  ]]></b:skin> 
Kemudian paste kedalam kotak pencarian tersebut, setelah itu langsung tekan Enter jika kode diatas belum muncul tekan kembali Enter  2 atau 3 kali pokoknya sampai dapat begitulah cara mencari code HTML versi tampilan template blogger yang baru. namun jika belum muncul juga silahkan cari code diatas karna kemungkinan kotak pencarian anda belum beruntung/ berhasil tapi Iyagus rasa anda berhasil.

(5).Jika sudah dapat kode dia atas, kopi kode berikut

#menubar{ width:920px; height:38px; background:#222; border-radius:2px; float:center; margin:0px auto; } #menubar-left{ float:left; width:720px; padding:0 0 2px 2px; } #menubar-right{ float:right; width:170px; padding-top:8px; padding-right:18px } #menubar ul{ float:left; margin:0; padding:0; } #menubar li{ float:left; list-style:none; margin:0; padding:0; } #menubar li a, #menubar li a:link{ float:left; padding:12px 10px; color:#fff; position:relative; font-weight:bold !important; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:12px; } #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a { text-decoration:none; background:#222; } #menubar li li a, #menubar li li a:link, #menubar li li a:visited{ font-size: 12px; background: #222; color: #fff; text-decoration:none; width: 150px; padding: 0px 10px; line-height:35px; } #menubar li li a:hover, #menubar li li a:active { background: #222; } #menubar li ul{ z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin-top:37px; border:1px solid #222; border-radius:0px 0px 8px 8px; } #menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{ left:auto } #menubar li:hover, #menubar li.sfhover{ position:static } #search{ border:1px solid #222; height:20px; width:180px; background:#f6f4f4; } #search input{ color:#777; border:none; } #s-m{ font-size:11px; width:180px; padding-left:4px; padding-top:5px; margin:0; } #search-t #search{ background-color:#FFFFFF; border:1px solid #222; border-radius:4px 4px 4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; } #search-t #s-m{ width:155px; padding-top:3px; }

Kemudian paste diatas kode

(6). Kemudian cari kode ini: <div id="content-wrapper"> kalau tidak dapat cari kode <div id="header-wrapper"> kalau belum muncul juga cari kode ini <div id="outer-wrapper"> kalau belum muncul juga cobah kode ini <div class='tabs-outer'> tapi kalau belum muncul juga, cari aja kode ini, <div class='tabs-cap-top cap-top'> kalau gak ada yang muncul gak usa dipasang menunya sob, anda belum beruntung hehe...
jika suda dapat salah satu kode diatas kopi kode berikut ! kemudian paste sebelum kode salah satu diatas.

<div id='menubar'> <div id='menubar-left'> <ul> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 1</a></li> <li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 2</a></li> <li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 3</a> <ul> <li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 1</a></li> <li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 2</a></li> </ul> </li> <li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 4</a></li> <li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 5</a></li> </ul> </div> <div id='menubar-right'> <div id='search-t'> <div id='search'> <form action='/search' method='search' target='_blank'> <input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Cari artikel disini..";}' onfocus='if (this.value == "Cari artikel disini..") {this.value = ""}' type='text' value='Cari artikel disini..'/> <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2AXOOLYMAejLFsilnpkeP2FbqWrSdg0NoVpwvPHog9QBcPWTKIw0eA8VzSiZ6BrHHblUTtcF2xi1KtoQIHYAeWeZDwXtrN6Xcq5LMFlMXEZTzr8K6TAQ7niakzmWvkYVgIkOOoTcxPQ/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/> </form> </div> </div> </div> </div>

Sebelum kepenjelasan berikutnya silahkan terlebih dahulu klik paratinjau atau Preview Template kalau berhasil Preview atau para tinjau dan telah muncul menunya disana, silahkan cepat-cepat SAVE TEMPLATE terlebih dahulu. kemudian kita lanjutkan ketahap penjelasan berikutnya.

Jadi yang Iyagus ingin jelaskan bagaimana cara menambah/ memasang Link atau cabang-cabang menu diatas. Mari kita perhatikan,  kenapa ini perlu soalnya banyak sobat-sobat kita yang telah berhasil memasangnya tapi mereka mengeluh serta kesulitan cara memasang Link-nya serta cara menambah cabang cabang menu-Nya oke.

Mari belajar mengotak atik kode diatas yaitu kode yang kedua namun sebelum itu mari berhatikan terlebih dahulu kode-kodenya cobah andah kenali terlebih dahulu

Share this article :

Share on FB Tweet Share on G+ Submit to Digg

Ditulis Oleh : irmansah ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Menu Tab/Bar Keren sekaligus kotak pencarian. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://blog-denai.blogspot.com/2012/03/cara-membuat-menu-tabbar-keren.html" target="_blank">Cara Membuat Menu Tab/Bar Keren sekaligus kotak pencarian</a>

:: Dapatkan widget ini! ::