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

132 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. Makasih infonya gan sangat bermanfaat bagi saya.

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

    BalasHapus
  16. Komentar ini telah dihapus oleh pengarang.

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

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

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

    BalasHapus
  20. Terimakasih artikelnya, work :)

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

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

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

    BalasHapus
  24. mantap tapi jika template dowload untuk mengabungkannya bagaimana

    BalasHapus
  25. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  26. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  27. 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
  28. Thanks gan infonya...

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

    BalasHapus
  29. 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
  30. Thanks gan sangat membantu saya :)

    BalasHapus
  31. 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
  32. THANK'S GAN,100%WORK.
    http://myinggrisku.blogspot.co.id/

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

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

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

    BalasHapus
  36. 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
  37. kok logonya ga ada ya? ga sesuai dengan demo? scriptnya beda atau gimana ya?
    www.indoblazer.com

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

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

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

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

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

    BalasHapus
  43. 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
  44. wah wah wah agan madam keren kalo suruh membuat tutorial hehe thx gan. kunjungi juga blog saya yah di vanoverhelsing.blogspot.co.id

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

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

    BalasHapus
  47. Komentar ini telah dihapus oleh pengarang.

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

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

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

    BalasHapus
  51. terima kasih info dan pencerahanya

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

    BalasHapus
  53. template blog nya bagus :D

    BalasHapus
  54. bagus informasi nya bermanfaat bagi blogger.

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

    BalasHapus
  55. 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
  56. thanks jangan lupa kunjungi http://orangindonesia1987.blogspot.co.id/

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

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

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

    Tksh

    BalasHapus
  60. makasih mas sangat membantu.

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

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

    BalasHapus
  62. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  63. 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
  64. Komentar ini telah dihapus oleh pengarang.

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

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

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

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

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

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

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

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

    BalasHapus
  73. 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
  74. 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
  75. Thanks infonya gan...
    Monggo visit
    Http://ahzavanitour.blogspot.com

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

    BalasHapus
  77. 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
  78. terimaksih gan informasinya sangat bermanfaat.
    http://androidkana.blogspot.co.id/

    BalasHapus
  79. TQ SANGAT BERMANFAAT BAGI SAYA

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

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

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

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

    BalasHapus
  83. 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
  84. Komentar ini telah dihapus oleh pengarang.

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

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

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

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

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

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

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

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

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

    BalasHapus
  94. makasih guru..

    mohon saran dan bimbingan adiesetyadi.blogspot.co.id

    BalasHapus
  95. makasih gan jangan lupa mampir di bog ku

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

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

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

    BalasHapus
  98. Komentar ini telah dihapus oleh pengarang.

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

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

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

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

    BalasHapus