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



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.
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



Jika sobat sudah mengenal kode diatas mari melihat contoh hasil yang sudah saya edit dan berhasil saya pasang pada blog teman teman yang lain hasilnya seperti berikut,
Nah, tentunya sedikit ada beberapa perubahan baik code HTML aslinya , MENU dan LINKNYA mungkin ketika mengeditnya mungkin terjadi beberapa kesalahan namun jangan takut karna untuk editan HTML versi baru biasanya di tandai dengan warna merah, tinggal sobat perhatikan aja sebagai mana warna kuning berikut ada sedikit berbedah yang di atas. Pada saat sobat mengedit code atau menu nantinya yang perlu di perhatikan adalah code ini: </a></li> dan </ul> , </li> ,</div> , ditambah ataupun di kurangi anda bisa perhatikan sekali lagi dengan code aslinya oke.


 <div class='tabs-outer'><div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>HALAMAN DEPAN</a></li>
<li><a href='http://LINKYANGDITUJU.blogspot.com/'>MENU 1</a>
<ul>
<li><a href='http://LINKYANGDITUJU.blogspot.com/'>TAB MENU 1</a></li>
<li><a href='http://LINKYANGDITUJU.blogspot.com/'>TAB MENU 2</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 3</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 4</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 5</a></li>
<li><a href='http://LINKYANGDITUJU.blogspot.com/'>TAB MENU 6</a></li>
<li><a href='http://LINKYANGDITUJU.blogspot.com/'>TAB MENU 7</a></li>
<li><a href='http://LINKYANGDITUJU.blogspot.com/'>TAB MENU 8</a></li>
</ul>
</li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>MENU 2</a>
<ul>
<li><a href='http://LINKYANGDITUJU.blogspot.com/'>TAB MENU 1</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 2</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 3</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 4</a></li>
</ul>
</li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>MENU 3</a>
<ul>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 1</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 2</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 3</a></li>
</ul>
</li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>MENU 4</a>
<ul>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TEB MENU 1</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 2</a></li>
<li><a href='http://LINKYANGDITUJUblogspot.com/'>TAB MENU 3</a></li>
</ul>
</li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>


Semua warna merah di atas,silahkan di ganti ( http://LINKYANGDITUJUblogspot.com/) untuk yang ini ganti dengan Link yang di tuju. yaitu link yang di tuju pada saat di klik menunya contoh anda menggklik TAB MENU 1 maka sobat akan menuju kepada artikel TAB MENU 1

Oiya , tab menu 1 dan seterusnya adalah cabang2 menu. oke sobat itu aja lain kali di sambung lagi.silahkan di ikuti caranya dengan benar semoga berhasil tanks.....



5 komentar:

Jika ada sembarang pertanyaan silahkan komentar disini.