Menu Dropdown dengan Background

Diposkan oleh Madie Zha on 22 February 2012 at 1:18 PM

Menu Dropdown dengan Background | Tutorial Blog

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.
Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :
  • Login ke blogger Anda, klik menu Design > Edit HTML.
  • Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
  • Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
    <script>
    var last_expanded = &#39;&#39;;
    function showHide(id)
    {
    var obj = document.getElementById(id);
    var status = obj.className;
    if (status == &#39;hide&#39;) {
    if (last_expanded != &#39;&#39;) {
    var last_obj = document.getElementById(last_expanded);
    last_obj.className = &#39;hide&#39;;
    }
    obj.className = &#39;show&#39;;
    last_expanded = id;
    } else {
    obj.className = &#39;hide&#39;;
    }
    }
    </script>
  • Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
    .dropdown-b {
    background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom: 10px;
    margin-top: 4px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .dropdown-bg {
    background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:13px;
    padding-bottom: 10px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .hide{
    display: none;
    }
    .show{
    display: block;
    }
    a{cursor: hand}
  • Lalu klik Save Template.
  • Kemudian klik menu Design > Page Element > Add a Gadget.
  • Pilih HTML/Javascript, lalu masukkan kode berikut ini :
    <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
    <div id="dropdown-b-1" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
    <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
    <div id="dropdown-b-2" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
    <div id="dropdown-b-3" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
    <div id="dropdown-b-4" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
     <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
  • Terakhir klik tombol Save. Selesai...
Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

.:. 71 komentar .:.Post a Comment

  1. link anda sudah saya pasang dan saya follow
    back link n fool back ye :D
    ceek di
    http://newornews.blogspot.com/p/exchange-link.html

    ReplyDelete
  2. gan buat kotak di bawahnya free backlink gimana, di share donk

    ReplyDelete
  3. Mantap cocok bagi pemula seperti saya..
    di tunggu kunjungan baliknya gan..
    http://agoesthasigit.blogspot.com/

    ReplyDelete
  4. thanks banget gan atas infonya. . .

    www.myofblogs.blogspot.com

    ReplyDelete
  5. informasinya luar biasa sangat bermanfaat sekali...
    Banyak sekali ilmu pengetahuan yang saya dapatkan
    Terimakasih banyak atas informasinya ...
    Semoga semakin sukses

    ReplyDelete

  6. informasi yang sangat menambah wawasan saya makasih ga,.

    ReplyDelete
  7. Her posts are very dance gan,,

    ReplyDelete
  8. cool article, thanks gan his info .

    ReplyDelete
  9. thanks for the info may be useful gan

    ReplyDelete
  10. continued success gan, awaited further atikel ..

    ReplyDelete
  11. trimakasi info, useful ... add to my knowledge ...

    ReplyDelete

  12. thanks for the info may be useful for everyone ..

    ReplyDelete
  13. ikut komen gan,, infonya sangat menarik gan... thanks

    ReplyDelete


  14. information is very interesting to observe, hopefully useful,

    ReplyDelete
  15. gan cool info, thanks gan broaden my

    ReplyDelete
  16. success continues to sob, wait again next article,,

    ReplyDelete
  17. waah infonya kangat kereeennn gan :p

    ReplyDelete
  18. infonya benar-benar sangat menarik gan thanks

    ReplyDelete
  19. ditunggu ea gan artikel slanjutnya :)

    ReplyDelete
  20. thanks for the info may be useful ganv

    ReplyDelete
  21. continued success gan, awaited further atikel ..

    ReplyDelete

  22. thanks for the info may be useful for everyone ..

    ReplyDelete

  23. Her comments come gan article, I think the info is very interesting to observe ...

    ReplyDelete

  24. ikut komen gan,, infonya sangat menarik gan... thanks

    ReplyDelete

  25. stelah saya baca memang artikelnya sangat menarik untuk disimak, sukses terus gan

    ReplyDelete
  26. stelah sayan baca artikelnya sangat menarikkk thanks gan

    ReplyDelete

  27. ikut komentar ea gan infonya sangat bagus

    ReplyDelete

  28. sukses terus gan ditunggu artikel selanjutnya

    ReplyDelete


  29. artikel yang sangat bagus sekali dan tentunya sangat bermanfaat untuk pembaca khususnya saya pribadi, terima kasih salam kenal dan sukses selalu.

    ReplyDelete
  30. setelah saya baca artikelnya sangat menarik dan menambah pengetahuan saya, sukses terus gan ditunggu artikel selanjutnya

    ReplyDelete


  31. infonya sangat menarik untuk saya simak,, nice infonya gan. sukses terus!!!!

    ReplyDelete
  32. artikel yang sangat menarik dan tentunya sangat membantu saya dalam belajar, makasih banyak ya lam sukses selalu

    ReplyDelete
  33. artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    ReplyDelete
  34. terima kasih banyak atas imformasinya ini sangat bermanfaat khususnya untuk saya pribadi, sukses ya gan..

    ReplyDelete
  35. makasih infonya sangat menarik

    ReplyDelete
  36. . artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    ReplyDelete
  37. sangat menarik sekali infonya :)

    ReplyDelete
  38. terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga sukses...

    ReplyDelete
  39. Thanks infonya sangat bermanfaat sekali buat saya, di tunggu ea artikel selanjutnya :D

    ReplyDelete

  40. Informasinya sangat keren....

    ReplyDelete
  41. Informasinya sangat bermanfaat makasih gan,,,

    ReplyDelete
  42. wah infonya kerennnnn sob suksek selalu ea,,,

    ReplyDelete
  43. Mantappppp infonya gan thankas ea :D

    ReplyDelete
  44. . terima kasih banyak atas imformasinya ini sangat bermanfaat khususnya untuk saya pribadi, sukses ya gan..

    ReplyDelete
  45. kereen bangettt sok artikelnya thanks infonya...

    ReplyDelete

  46. thanks ea, kerennn bangettt infonya.... sukses selalu ea sob

    ReplyDelete
  47. Bro mau tanya ..
    kan ada tuh yang dah bawaan dari tample kyk beranda ,daftar isi,home dan lain lain diatas ...
    Gimana aktifin nya asal di tekan bisa ganti halaman bro ..
    Mksd biar bisa ganti halman tapi dah dari bawaan nya

    ReplyDelete
  48. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete
  49. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete

 
Alexa Certified Traffic Ranking for http://wadahtutorial.blogspot.com
Follow
back to top
Home
back to bottom