RSS
Mungkin banyak teman-teman blogger newbie yang belum tahu apa sih itu tab menu dropdown.
Sedikit saya akan jelaskan tentang tab menu dropdown blogger kepada
teman-teman semua, mungkin teman-teman pernah lihat menu yang berada
dibawah header atau diatas header dengan posisi horisontal? nah itulah
tab menu, lantas apakah yang dimaksud dropdown? yang dimaksud adalah
ketika kursor kita diletakkan ke salah satu menu tersebut maka akan
muncul list menu lain secara vertikal kebawah. Untuk lebih jelasnya
lihat pada gambar di bawah.
Pasti udah ngerti, sekarang bagaimana cara menambahkan tab menu dropdown pada template blogger? silakan follow tips dibawah:
Login ke account blogger anda dan masuk ke tata letak dan pilih edit html kemudian cari kode dibawah ini jangan lupa centang expand template widget :
untuk memudahkan pencarian tekapn control F lalu paste kode diatas, tapi jangan lupa untuk mengganti angka dua dengan garis miring kalau tidak saya yakin anda tidak akan menemukannya sampai kiamat. Kalau kodenya sudah anda dapatkan kodennya, selanjutnya silakan Download script Berikut CLICK ME.
Pasti udah ngerti, sekarang bagaimana cara menambahkan tab menu dropdown pada template blogger? silakan follow tips dibawah:
Login ke account blogger anda dan masuk ke tata letak dan pilih edit html kemudian cari kode dibawah ini jangan lupa centang expand template widget :
]]></b:skin>
untuk memudahkan pencarian tekapn control F lalu paste kode diatas, tapi jangan lupa untuk mengganti angka dua dengan garis miring kalau tidak saya yakin anda tidak akan menemukannya sampai kiamat. Kalau kodenya sudah anda dapatkan kodennya, selanjutnya silakan Download script Berikut CLICK ME.
/*---------------------
menufs3 ateonsoft.com
------------------------*/
#menufs3-wrapper {width:100%; height:27px; background: #000000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3bg.gif') repeat-x top left;
border-top:1px solid #333; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3-wrapper h2 {display:none}
#menufs3, #menufs3 ul {padding: 0px; margin: 0; list-style: none; font: normal 0.95em arial; color:#fff;}
#menufs3 a {display: block;text-decoration: none; border-right: 1px solid #000; border-left: 1px solid #202020; color: #fff;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3bg.gif') repeat-x top left;; padding-left:9px; padding-right:9px; padding-top:6px; padding-bottom:7px}
#menufs3 a.awal {padding: 0px; border-left: 0px none;width: 90px; height:27px;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3Awal.gif') no-repeat;}
#menufs3 a.awal:hover{background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3Awalhvr.gif') no-repeat;}
#menufs3 a.awal em {display:none;}
#menufs3 a.IndukMenu {font-weight:bold; text-transform:uppercase;}
#menufs3 a.akhir {padding: 0px; border-left: 0px none; border-right: 0px none; width: 27px; height:27px;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3logoVisited.gif') no-repeat;}
#menufs3 a.akhir:hover {background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3logoHvr.gif') no-repeat;}
#menufs3 a.akhir em {display:none;}
#menufs3 li {float: left;width: 9em;}
#menufs3 li.akhir{border-left: 1px solid #202020; height:27px; width: 1px; padding: 0px}
#menufs3 li.akhir em{display:none;}
#menufs3 li.kanan{float: right; border-left: 0px none;}
#menufs3 li ul, #menufs3 ul li {width: 14em;}
#menufs3 ul li a {color: #565656;border-left: 0px none; border-right: 0px none; padding-left:5px; padding-right:10px; padding-top:5px; padding-bottom:5px}
#menufs3 li ul {position: absolute; display: none; background-color: #000000; z-index:200;border-right: 1px solid #141414; border-left: 1px solid #141414; border-bottom: 1px solid #141414; margin-left:-1px;text-align: left;}
#menufs3 li:hover a, #menufs3 a:focus, #menufs3 a:active{color: #ffff00; background-color: #000;
background-image:url('http://www.geocities.com/f_415_47/HMenuImage/menufs3hvr.gif'); background-repeat:repeat-x}
#menufs3 li:hover ul{display: block;}
#menufs3 li:hover ul a{color: #fff; border-top:1px solid #141414; background-image:url('none');}
#menufs3 ul a:hover {background-color: #202020!important;color: #ffff00!important;}
#menufs3 li {width: auto;}
Copy script yang anda download tadi dan paste tepat diatas kode yang anda cari tadi, kemudian save template.
Setelah itu kita masuk ke step ke dua, tapi terlebih dahulu download script yang kedua DISINI
<div id="menufs3-wrapper">
<ul id="menufs3">
<li><a class="awal" href="http://www.ateonsoft.com/"><em>Home</em></a></li><!-- Menu Home -->
<li><a class="IndukMenu" href="#" title="silahkan pilih sub menu dibawah">Games</a>
<ul>
<li><a href="http://www.ateonsoft.com/2008/09/tes-hebat-untuk-pribadimu.html">Tes Pribadimu</a></li>
<li><a href="http://www.ateonsoft.com/2008/09/tipuan-mata.html">Tipuan Mata</a></li>
<li><a href="http://www.ateonsoft.com/2008/08/aplikasi-sulap.html">File Sulap</a></li>
<li><a href="http://www.ateonsoft.com/2008/05/aplikasi-tebak-pikiran.html">Tebak Pikiran</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="http://www.albachrawi.co.cc/">Islami</a>
<ul>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Hikmah">Hikmah</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kajian%20Islam">Kajian Islam</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kisah%20Islami">Kisah Islami</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kisah%20Nabi">Kisah Nabi</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Nasihat">Nasihat</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Renungan">Renungan</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/TAFSIR">TAFSIR</a>
</li>
</ul>
</li>
<li><a class="IndukMenu" href="http://www.ateonsoft.com/2008/08/guest-book-shoutmix.html">Guest Book</a>
<ul>
<li><a href="http://www.ateonsoft.com/2008/01/email-me.html">Contact me via direct email</a></li>
</ul>
</li>
<li class="akhir"><em>Akhir dari li (bullet) menufs1 Induk</em></li><!-- Penutup Menu jangan diedit-->
<li class="kanan"><a class="akhir" href="http://www.ateonsoft.com" target="_blank" title="Menu Design by Ateonsoft"><em>ateonsoft</em></a></li>
</ul><!-- end ul menufs3 -->
</div><!-- end menufs3-wrapper -->
kalau anda sudah mendapatkan scriptnya, langkah selanjutnya anda masuk Elemen Halaman -->tambah gadget lalau pilih HTML/JavaScript, dan paste Script kedua yang anda download tadi kedalamnya kemudia save. Jangan lupa letakkan widget (gadget) pada posisi atas. Silakan Edit script yang kedua tadi sesuai dengan keinginan anda berdasarkan label yang ingin anda letakkan pada tab menu tersebut. Silakan Mencoba untuk lebih jelasnya silakan tinggalkan komentar anda.
menufs3 ateonsoft.com
------------------------*/
#menufs3-wrapper {width:100%; height:27px; background: #000000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3bg.gif') repeat-x top left;
border-top:1px solid #333; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3-wrapper h2 {display:none}
#menufs3, #menufs3 ul {padding: 0px; margin: 0; list-style: none; font: normal 0.95em arial; color:#fff;}
#menufs3 a {display: block;text-decoration: none; border-right: 1px solid #000; border-left: 1px solid #202020; color: #fff;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3bg.gif') repeat-x top left;; padding-left:9px; padding-right:9px; padding-top:6px; padding-bottom:7px}
#menufs3 a.awal {padding: 0px; border-left: 0px none;width: 90px; height:27px;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3Awal.gif') no-repeat;}
#menufs3 a.awal:hover{background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3Awalhvr.gif') no-repeat;}
#menufs3 a.awal em {display:none;}
#menufs3 a.IndukMenu {font-weight:bold; text-transform:uppercase;}
#menufs3 a.akhir {padding: 0px; border-left: 0px none; border-right: 0px none; width: 27px; height:27px;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3logoVisited.gif') no-repeat;}
#menufs3 a.akhir:hover {background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3logoHvr.gif') no-repeat;}
#menufs3 a.akhir em {display:none;}
#menufs3 li {float: left;width: 9em;}
#menufs3 li.akhir{border-left: 1px solid #202020; height:27px; width: 1px; padding: 0px}
#menufs3 li.akhir em{display:none;}
#menufs3 li.kanan{float: right; border-left: 0px none;}
#menufs3 li ul, #menufs3 ul li {width: 14em;}
#menufs3 ul li a {color: #565656;border-left: 0px none; border-right: 0px none; padding-left:5px; padding-right:10px; padding-top:5px; padding-bottom:5px}
#menufs3 li ul {position: absolute; display: none; background-color: #000000; z-index:200;border-right: 1px solid #141414; border-left: 1px solid #141414; border-bottom: 1px solid #141414; margin-left:-1px;text-align: left;}
#menufs3 li:hover a, #menufs3 a:focus, #menufs3 a:active{color: #ffff00; background-color: #000;
background-image:url('http://www.geocities.com/f_415_47/HMenuImage/menufs3hvr.gif'); background-repeat:repeat-x}
#menufs3 li:hover ul{display: block;}
#menufs3 li:hover ul a{color: #fff; border-top:1px solid #141414; background-image:url('none');}
#menufs3 ul a:hover {background-color: #202020!important;color: #ffff00!important;}
#menufs3 li {width: auto;}
Copy script yang anda download tadi dan paste tepat diatas kode yang anda cari tadi, kemudian save template.
Setelah itu kita masuk ke step ke dua, tapi terlebih dahulu download script yang kedua DISINI
<div id="menufs3-wrapper">
<ul id="menufs3">
<li><a class="awal" href="http://www.ateonsoft.com/"><em>Home</em></a></li><!-- Menu Home -->
<li><a class="IndukMenu" href="#" title="silahkan pilih sub menu dibawah">Games</a>
<ul>
<li><a href="http://www.ateonsoft.com/2008/09/tes-hebat-untuk-pribadimu.html">Tes Pribadimu</a></li>
<li><a href="http://www.ateonsoft.com/2008/09/tipuan-mata.html">Tipuan Mata</a></li>
<li><a href="http://www.ateonsoft.com/2008/08/aplikasi-sulap.html">File Sulap</a></li>
<li><a href="http://www.ateonsoft.com/2008/05/aplikasi-tebak-pikiran.html">Tebak Pikiran</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="http://www.albachrawi.co.cc/">Islami</a>
<ul>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Hikmah">Hikmah</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kajian%20Islam">Kajian Islam</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kisah%20Islami">Kisah Islami</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kisah%20Nabi">Kisah Nabi</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Nasihat">Nasihat</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Renungan">Renungan</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/TAFSIR">TAFSIR</a>
</li>
</ul>
</li>
<li><a class="IndukMenu" href="http://www.ateonsoft.com/2008/08/guest-book-shoutmix.html">Guest Book</a>
<ul>
<li><a href="http://www.ateonsoft.com/2008/01/email-me.html">Contact me via direct email</a></li>
</ul>
</li>
<li class="akhir"><em>Akhir dari li (bullet) menufs1 Induk</em></li><!-- Penutup Menu jangan diedit-->
<li class="kanan"><a class="akhir" href="http://www.ateonsoft.com" target="_blank" title="Menu Design by Ateonsoft"><em>ateonsoft</em></a></li>
</ul><!-- end ul menufs3 -->
</div><!-- end menufs3-wrapper -->
kalau anda sudah mendapatkan scriptnya, langkah selanjutnya anda masuk Elemen Halaman -->tambah gadget lalau pilih HTML/JavaScript, dan paste Script kedua yang anda download tadi kedalamnya kemudia save. Jangan lupa letakkan widget (gadget) pada posisi atas. Silakan Edit script yang kedua tadi sesuai dengan keinginan anda berdasarkan label yang ingin anda letakkan pada tab menu tersebut. Silakan Mencoba untuk lebih jelasnya silakan tinggalkan komentar anda.
