Cara Membuat Menubar Multi Dropdown Di Blog

Cara Membuat Menubar Multi Dropdown Di Blog. Sobat blogger, kembali lagi untuk berbagi tutorial, kali ini saya akan membagikan sebuah tutorial bagaiman cara membuat menubar multi dropdown di blog,tutorial ini saya ambil dari blog mbak Arlina, :) dan terimakasih sebelumnya buat mbak arlina yang sudah berbagi, sobat blogger menubar ini selain tampilannya elegant juga di desain menjadi responsive oleh mbak arlina tentu dengan kelebihan multi dropdown menu atau multi sub menu.

Baca Juga : Membuat menubar dropdown keren diblog bagian 2

Menu multi dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau bisa juga untuk meringkas artikle yang terkait yang di masukan ke menubar tersebut. jika anda ingin menerapkan menubar ini di blog anda,silahkan ikuti tutorialnya.

4 Model Menubar Berikut Tutorial


Cara Membuat Menubar Multi Dropdown Di Blog

Baca Juga : Cara Membuat Popular Post Simple Keren

Cara Membuat Menu Bar Multi Dropdown Versi 1.

1. Buka akun blogger anda.
2. Pilih menu template > klik Edit Html
3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>

 nav {
    display: block;
    margin-top: 100px;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #9ca3da;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #9ca3da;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #9ca3da;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #9ca3da;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

5. Selanjutnya letakan kode html di bawah ini tepat di bawah kode </header>

 <nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>   
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav> 

5. Langkah terakhir simpan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
//]]>
</script>

6. Jika sudah, silahkan klik pertinjau terlebih dahulu,kalo sudah ok, save template anda.

Menubar Multi Dropdown Versi Ke 2 



Letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>
 #menutop ul,
#menutop li,
#menutop span,
#menutop a {
  margin: 0;
  padding: 0;
  position: relative;
}
#menutop {
  height: 49px;
  background: #D5D5D5;
  border-bottom: 4px solid #59c5ff;
  width: auto;
}
#menutop:after,
#menutop ul:after {
  content: '';
  display: block;
  clear: both;
}
#menutop a {
  background: #D5D5D5;
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#menutop ul {
  list-style: none;
}
#menutop > ul,#menutop > ul > li {
  float: left;
}
#menutop > ul > li > a {
  color: #000;
  font-size: 12px;
}
#menutop > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
  background: #ececec;
}
#menutop .menu-sub {
  z-index: 1;
}
#menutop .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#menutop .menu-sub ul li {
  margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
  background: #59c5ff;
  border-bottom: 1px solid #8cd7ff;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
  background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub .menu-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
  background: #26b3ff;
  border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
  background: #0daaff;
}

Selanjutnya letakan  kode HTML di bawah ini tepat di bawah kode </header>

 <div id='menutop'>
<ul>
   <li class='active'><a href='/' target='_blank'><span>Home</span></a></li>
   <li class='menu-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
       <li class='menu-sub'><a href='#'><span>More Menu</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>More Menu 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Menu 1</span></a></li>
               <li class='last'><a href='#'><span>Sub Menu 2</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>More Menu 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div> 
Save Template.

Menubar Dropdown Versi Ke 3

Cara Membuat Menubar Multi Dropdown Di Blog


Menubar Dropdown Versi Ke 4


Klik untuk melihat dan tutorial

Oke sobat saya rasa sudah selesai di tutorial cara membuat menubar multi dropdown di blog,untuk lebih dan kurangnya saya mohon maaf,semoga sukses. :)

Artikle terkait

139 Responses to "Cara Membuat Menubar Multi Dropdown Di Blog"

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. thanks buat tutornya gan,, sangat memabantu sekali.. http://goo.gl/Pt4u71

    BalasHapus
    Balasan
    1. http://www.prediksibola-parlay.com/

      sangat membantu artikel anda mksi ya

      Hapus
  4. cine post gan, terimakasih, kunjung balik ya :)
    http://goo.gl/hSnIaa

    BalasHapus
  5. udah jadi submenunya, cara masukin postingan di submenu gimana caranya??

    BalasHapus
  6. Gan kok ,, Menu bar nya berbeda dengan yang ada di DEMO nya ,, bisa cek blog saya gak ?? http://yonnatafajarismaharja.blogspot.com/

    BalasHapus
  7. Terima Kasih mas Tutorialnya. Kalau bisa kunjungi ya http://manutdpedia.blogspot.com/

    BalasHapus
    Balasan
    1. gan gimana cara ngubah sub-menu. jadi menu yang kita inginkan?

      kalau bisa visit ya http://koncara86.blogspot.com/

      Hapus
    2. tinggal ganti yang pagar dengan link blog ente, sub menu 1 atau seterusnya ganti misal permainan :D

      Hapus
  8. artikel yg bermanfaat,terimah kasih

    BalasHapus
  9. saya coba dulu gan. thanks tutor nya... klo ada waktu mampir gan. kopi luwak siap menyambut. sxan kasih ide buat blog saya biar lebih keren gan. hehehe

    BalasHapus
  10. gan kok sub sub menu nya kepotong ya? sub sub menu 1 ok. tapi sub sub menu 2 dan 3 kepotong depan nya. mohon pencerahan nya gan. di blog saya bagian menu 'bisnis' > sub menu 'jamur' > sub sub menu 'budidaya jamur' terpotong depan nya.
    script agan yg diatas ga saya otak atik.

    BalasHapus
  11. blog saya di http://jamurjangkrik.blogspot.com gan. mohon di koreksi dan pencerahan nya gan. soalnya sub menu di bawah nya gak kepotong. di tunggu koreksi nya gan.

    BalasHapus
  12. Terima Kasih pencerahannya , Kunjungi saya di gasruk.com

    BalasHapus
  13. . thnkz gan http://tkjloverz-billy.blogspot.com

    BalasHapus
  14. setelh aku pratinjautemplate ko loadig nya lama sh

    BalasHapus
  15. Makasih infonya gan sangat bermanfaat bagi saya.

    BalasHapus
  16. Makasih Info nya gan blog saya : http://lalerputih.blogspot.com/

    BalasHapus
  17. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  18. Terima kasih atas informasinya.. ijin coba dulu semoga work.. salam kenal dari saya min sharing with syafi alqudsy
    http://www.cahkudus.tk/

    BalasHapus
  19. Ok banget tips nya terima kasih sangat bermanfaat, salam kenal dari saya

    BalasHapus
  20. Terimakasih infonya gan. Artikel yang benar benar keren. Sudah diaplikasikan di blog saya
    rifalnurkholiq.blogspot.com

    BalasHapus
  21. Terimakasih artikelnya, work :)

    BalasHapus
  22. Thanks Gan, Kalau untuk mengatur lebar dan panjang gimana caranya gan

    BalasHapus
  23. gan cara merubah warna menu dan huruf menu gimana caranya gan,
    mtsn-witihama.blogspot.com

    BalasHapus
  24. thanks gan infonya. kunjungi blog kami,
    http://hurdjantowibisono.blogspot.co.id/

    BalasHapus
  25. mantap tapi jika template dowload untuk mengabungkannya bagaimana

    BalasHapus
  26. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  27. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  28. Terimakasih tutornya boss....saya pakai menu dropdown-nya untuk blog saya. Jika sudi silahkan mampir di http://den-ibnar.blogspot.co.id/2015/09/disini-den-ibnar-bisa-input-apapun.html

    BalasHapus
  29. Thanks gan infonya...

    Biar di menu home ada icon nya gitu gimana gan?? kok di blog ane ga ada, http://lensul.blogspot.com/

    BalasHapus
  30. Mas tanya, sy sudah coba terapkan di blog saya http://saliagu.blogspot.com tapi kenapa icon menu nya tidak muncul yah, tulisan doang yang muncul, please di reply, thanks.

    BalasHapus
  31. Thanks gan sangat membantu saya :)

    BalasHapus
  32. terima kasih gan, sukses saya coba
    cuma saya cari cari untuk mengurangi tinggi menunya gak nemu, gmana ya?
    keliatan gak ramping menuny
    mohon pencerahnnya Gan
    ini blog saya
    masagusmin.blogspot.co.id

    BalasHapus
  33. THANK'S GAN,100%WORK.
    http://myinggrisku.blogspot.co.id/

    BalasHapus
  34. punya gw kok gx ada header lalu gmana?

    BalasHapus
  35. sipp mantaap madam,..thank infonya yaa

    BalasHapus
  36. trima kasih info nya gan..
    tapi saya masih bingung buat nerapin dropdown untuk menu yang sudah ada..

    BalasHapus
  37. trima kasih info nya gan..
    tapi saya masih bingung buat nerapin dropdown untuk menu yang sudah ada..

    BalasHapus
    Balasan
    1. tutorialnya ada di blog saya sis, search aja : Menubar

      Hapus
  38. kok logonya ga ada ya? ga sesuai dengan demo? scriptnya beda atau gimana ya?
    www.indoblazer.com

    BalasHapus
  39. iya cara edit posnya,bingung euyy
    http://3nrtechnology.blogspot.co.id

    BalasHapus
  40. gan.. kok submenu yang home selalu ter block warna biru.. cara ubahnya gi mana ?

    BalasHapus
  41. Thanks buat tutorialnya kunjungi juga goyangpensil.blogspot.com ya mas

    BalasHapus
  42. woooooooooooow seharian penuh baru dapat artikel ini.
    man......................tap tap tap
    Thanks......................................

    BalasHapus
  43. Dapat cash lewat lockscreen hp? Buruan download!
    Flash Cash: 10 Des 12:33 WIB (Rp 518) https://invite.cashtree.id/qityme

    BalasHapus
  44. tengkyu tengkyu tengkyu!!! bro, udah ku terapkan ilmu mas bro ke my blog coba blog mas bro ada iklanya, alo ada mau ku klik sebanyak banyaknya sebagai rasa tengkyu gue

    BalasHapus
  45. wah wah wah agan madam keren kalo suruh membuat tutorial hehe thx gan. kunjungi juga blog saya yah di vanoverhelsing.blogspot.co.id

    BalasHapus
  46. thx gan
    http://caraspasi.blogspot.co.id

    BalasHapus
  47. ijin ia
    salam sukses selalu - by. hargaviagra.com

    BalasHapus
  48. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  49. Thx Gan... Keren tutorialnya. Kunjungi blog saya ya.. di
    http://gw-octashop.blogspot.co.id/

    BalasHapus
  50. keren dan terima kasih artikelnya yang okee punya dehh..

    BalasHapus
  51. That's nice post's! Helpme full! Thanks.
    Feed back please http://animesakuin.blogspot.co.id/

    BalasHapus
  52. terima kasih info dan pencerahanya

    BalasHapus
  53. makasih bnyak nih infonya, penting banget untuk blogger pemula seperti saya. hehe

    BalasHapus
  54. template blog nya bagus :D

    BalasHapus
  55. bagus informasi nya bermanfaat bagi blogger.

    mohon feedback http://brrrwisata.blogspot.co.id/

    BalasHapus
  56. Trimakasih atas kebaikannya membagikan tutorial ini, sya sdh menerapkannya dan alhamdulillah jadi, tinggal meulai membuat postingan yang sesuai dengan label sehingga dapat terisi semua sub dan sub menunya. Ada sedikit yg kurang ditampilan saya, gambar disamping tulisan tidak muncul, namun demikian sy puas dengan tampilannya. Mohon kunjungannya di http://mitrakesmas.blogspot.co.id/ untuk melihat hasil yg sy terima dari blog ini. Mohon komentnya di blog tsbt. trimakasih, smoga blog ini selalu jaya. amin.

    BalasHapus
  57. thanks jangan lupa kunjungi http://orangindonesia1987.blogspot.co.id/

    BalasHapus
  58. thanks gan work ! :)
    Kunjungi balik ya gan http://zakkyv.blogspot.co.id/

    BalasHapus
  59. beneran mirip sama demo , sampe ga dijelasin cara ngerubah sub menu masing2

    BalasHapus
  60. Nice posting...
    mampir ke blog sy
    http://fastudio28-jasa-arsitektur.blogspot.co.id/

    Tksh

    BalasHapus
  61. jika mau yang gratisan dan ada jasa webhosting yang bagi bagi cPanel dengan domain gratis .bos.la, seperti di microcyber.net dan webhosting.web.id, dan golog.biz namun disana TOS nya sangat ketat sekali. selamat mencoba

    BalasHapus
  62. makasih mas sangat membantu.

    jangan lupa kunjungi juga blog ane. http://puyoku.blogspot.com

    BalasHapus
  63. Thank ya gan kunjungi juga blog ane
    http://artikel-lengkap2016.blogspot.com/

    BalasHapus
  64. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  65. car script skin style dan header

    kok gak ktemu ya gan?
    sory masih newbie
    mohon pencerahanya agn..
    udah pusing bgt nie browsing kemana2
    thanks
    di tunggu balasanya gan

    BalasHapus
  66. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  67. BANYAK PENGUNJUNG DAN RINGAN ITU IDAMAN BLOG SAYA
    KUNJUNGAN BALIK DAN TUKERAN LINK YUK DI REDREWEL.COM

    BalasHapus
  68. ane selalu gagal waktu edit sub menunya, (kalau dihapus

    BalasHapus
  69. Bagus infonya tapi aku takut ngerubah kode di template...jangan lupa mampir diblog saya,,,http://pantunjenaka1.blogspot.co.id.. salam bloger..

    BalasHapus
  70. thank artikel e sangat bermanfaat kunbal www.p4won.blogspot.com

    BalasHapus
  71. Sedikit koresi, ga ada kode header yang ada head. tapi terimakasih. mampir-mapir ke technohoho.blogspot.co.id

    BalasHapus
  72. wihh ini yang ane cari-cari..
    terima kasih banyak gan!!
    visit juga http://www.awbatch.us

    BalasHapus
  73. Terus kalo mau tambah artikel yang masuk dalam dropdown itu gimana???

    BalasHapus
  74. sangat membantu,,,,
    ditunggu kunjungannya
    https://gudangsgala.blogspot.co.id

    BalasHapus
  75. Haloo Madamvia.saya punya sotware Easibotton .untuk membuat sub menudropdown.tapi setelah saya coba dan sesudah jadi .saya bingung cara menerapkan nya ke blog saya gimanaya. Mohon pencerahannya kalo madam berminat nanti saya uplod softwarenya...........

    BalasHapus
  76. terimakasih atas artikel yang sangat membantu ini, karena artikel ini sangat membantu blogger saya dengan menggunakan menu dropdown tampilan blog saya jadi enak dipandang, dan artikel anda sangat jelas, saya juga menerapkan menu bar untuk blog saya http://www.gooblogi.com/2016/06/cara-buat-menu-bar-di-atas-laman-blog.html jangan lupa kunbalnya.

    BalasHapus
  77. Thanks infonya gan...
    Monggo visit
    Http://ahzavanitour.blogspot.com

    BalasHapus
  78. IRI DENGAN BLOG INI YANG POPULER
    REDREWEL.COM MASIH BERJUANG

    BalasHapus
  79. lumayan bagus menu drop downnya :)
    saya juga punya berbagai macam menu dropdown full color :). bisa dipilih
    hanya di http://www.aquillien.ml/2016/08/memasang-menu-drop-down-full-color.html

    BalasHapus
  80. terimaksih gan informasinya sangat bermanfaat.
    http://androidkana.blogspot.co.id/

    BalasHapus
  81. TQ SANGAT BERMANFAAT BAGI SAYA

    BalasHapus
  82. itu yang letakin kode dibawah tag /header, boleh di tempatin di bawah /head doang gak?

    BalasHapus
  83. thanks gan jangan lupa kunjungi blog ane
    http://squadinformationnasional.blogspot.co.id/

    BalasHapus
  84. gan cara atur tinggi dan lebar menunya gmn ?,

    Jejak : http://r-animelist.blogspot.com

    BalasHapus
  85. Salam kenal dan persahabatan untuk semua, khususnya untuk admin pada blog ini. Dan bagi bloggers java tetap berjuang walau banyak kendalanya. Ada beberapa solusi yang sudah dibuat dan silahkan anda coba. trimakasih admin.

    BalasHapus
  86. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  87. Wogh ! ! !
    MANTAP DAH.....
    Thx atas infonya, sangat berguna sekali artikelnya

    BalasHapus
  88. Mantap gann
    plz Kunbalnya ya.. :D www.ahyar-aquariuz07.tk

    BalasHapus
  89. cara ubah fontnya gimana yah??
    www.najmaape.blogspot.com

    BalasHapus
  90. Makasi gan nice info, berhasil gan..!!!
    http://zafthyipmonitor.blogspot.co.id/

    BalasHapus
  91. mantap mas .. kun bal www.triksimpel.ga

    BalasHapus
  92. mantap mas .. kun bal www.triksimpel.ga

    BalasHapus
  93. mantep gan ditunggu kunbalnya..
    Https://eko-sg.blogspot.com

    BalasHapus
  94. bookmark dlu lah , hehe
    kunbalnya gan https://yogithesymbian.blogspot.com

    BalasHapus
  95. Terima kasih, setelah cari-cari beberapa referensi. Postingnya ini yg paling pas di blog saya. https://tulisenwae.blogspot.co.id/

    BalasHapus
  96. makasih guru..

    mohon saran dan bimbingan adiesetyadi.blogspot.co.id

    BalasHapus
  97. makasih gan jangan lupa mampir di bog ku

    BalasHapus
  98. paten kak postingannya langsung saya terapkan di blog baru saya

    https://parantinatech.blogspot.co.id/

    BalasHapus
  99. bisa tapi sulit untuk d edit-edit lgi

    BalasHapus
  100. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  101. GAN BISA NGAK MENUNYA DIBUAT RATA TENGAH......

    BalasHapus
  102. Oke Artikelnya ; butuh mobil honda kunjungi web saya yah gan : https://www.hondamobilbandung.web.id/

    BalasHapus
  103. mantabh gan,, langsung eksekusi berhasill,,, di tempat lain pusng

    BalasHapus
  104. gan kok menunya gerak2 ya?? itu jd semua artikel ga kebaca

    BalasHapus
  105. Gabung yuk di situs judi kami,

    terpercaya, Domino 99, bandarQ, Hanya di

    CebanQQ, c*m
    Bonus cashback: 0.4%
    Refferal: 20%
    Bagi member baru tingkat kemenangan diatas 78%+

    berdasarkan statistik bosku :)
    tunggu promo menarik dari kami :)

    BalasHapus
  106. Min cara Merubah Ukurannya Gimana Min.? Back Min https://mrbooh.blogspot.com/

    BalasHapus