Membuat menu DropDown (Edit HTML)


Hai Sobat, salam untuk semuanya para Blogger dan WordPress, maaf postingan agak terlambat untuk menu membuat dropdown di Bolg Blogger, kali ini akan Saya selesaikan untuk memenuhi keinginan menerapkan menu ini. Pada menu tersebut dengan tampilan cukup lumayan dan bisa disesuaikan atau diganti baik warna backgroung / latar belakang maupun font nya. Sobat juga bisa menambah lebih banyak menu dan lebih panjang hingga menjulur ke bawah. Lihat contoh menu dropdown yang ditempelkan di blog Saya. Menu ini akan muncul di bawah Header Blog Sobat.

Silahkan code  Script HTML di bawah:

Perlu diingat!

  •  Sobat harus masuk ke Blogger
  • Pilih dan klik Design/Rancangan lalu klik lagi Edit HTML
  • Untuk menghindari kesalahan, centang tombol “Expand Template Widget”
  • Cari code ]]></b:skin> , dan letakkan code HTML tepat di atasnya

/* Menu Horizontal Dropdown ———————————————– */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Sudah selesai dengan langkah pertama? Setelah Sobat paste di atas code ]]></b:skin> tadi,  sekarang bagian ke dua yaitu:

Copy lagi codenya di bawah ini,

Untuk menyimpan atau paste, cari code </header> paste di bawah code </header>

Code Script HTML

  1. <div id=’menuwrapperpic’>
  2. <div id=’menuwrapper’>
  3. <ul id=’menubar’>
  4. <li><a href=’/’><img border=’0′ src=’http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png&#8217; style=’padding:0px;’/> Beranda</a></li>
  5. <li><a href=’https://readmoremyblog.wordpress.com/category/seo-read-more-my-blog/‘ target=’new>SEO</a></li>
  6. <li><a class=’trigger’>Kategori</a>
  7. <ul>
  8. <li><a href=’https://readmoremyblog.wordpress.com/cara-membuat-akun-gmail/‘ target=’new’>Buat Akun</a></li>
  9. <li class=’hr’/>
  10. <li><a href=’https://readmoremyblog.wordpress.com/cara-membuat-akun-youtube/&#8217; target=’new’>Akun YouTube</a></li>
  11. <li><a href=’https://readmoremyblog.wordpress.com/cara-membuat-rss-untuk-wordpress/‘ target=’new’>RSS untuk Blog</a></li>
  12. <li><a href=’https://readmoremyblog.wordpress.com/cara-edit-postingan-halaman-page/‘ target=’new’>Edit Halaman</a></li>
  13. </ul>
  14. </li>
  15. <li><a href=’http://en.gravatar.com/sarino66‘ target=’new’>S’ 66</a></li>
  16. <li><a class=’trigger’>Panduan</a>
  17. <ul>
  18. <li><a href=’https://readmoremyblog.wordpress.com/2012/04/30/cara-edit-video-youtube/‘>Edit Vidoe YouTube</a></li>
  19. <li class=’hr’/>
  20. <li><a href=’https://readmoremyblog.wordpress.com/2012/03/11/cara-membuat-teks-atau-anotasi-pada-video-youtube/‘>Anotasi YouTube</a></li>
  21. <li class=’hr’/>
  22. <li><a href=’https://readmoremyblog.wordpress.com/category/cara-memgunggah-video-di-wordpress/‘>Posting Video Wordpress</a></li>
  23. <li class=’hr’/>
  24. </ul>
  25. </li>
  26. <li><a class=’trigger’>Pilhan</a>
  27. <ul>
  28. <li><a href=’https://readmoremyblog.wordpress.com/cara-posting-baru-di-wordpress/‘>Posting WordPress</a></li>
  29. <li class=’hr’/>
  30. <li><a href=’https://readmoremyblog.wordpress.com/2012/04/28/cara-posting-baru-blog-blogger-blogspot/‘>Posting Blogger</a></li>
  31. <li class=’hr’/>
  32. <li><a href=’https://readmoremyblog.wordpress.com/2012/05/08/cara-membuat-gadget-recent-post-blog/‘>Gadget Recent Post</a></li>
  33. <li class=’hr’/>
  34. <li><a href=’https://readmoremyblog.wordpress.com/cara-membuat-akun-gmail/cara-mendaftar-blog-di-bing-webmaster/‘>Daftar Blog</a></li>
  35. <li class=’hr’/>
  36. <li><a href=’https://readmoremyblog.wordpress.com/cara-menghubungkan-blog-ke-jaringan-sosial-secara-otomatis/’>Jaringan Otomatis</a></li>
  37. <li class=’hr’/>
  38. <li><a href=’https://readmoremyblog.wordpress.com/category/cara-posting-video-pada-blogger/‘>Posting Video Blogger</a></li>
  39. <li class=’hr’/>
  40. <li><a href=’https://readmoremyblog.wordpress.com/2012/04/20/cara-merubah-tampilan-dashboard-blogger/‘>Merubah Dashboard Blog</a></li>
  41. <li class=’hr’/>
  42. </ul>
  43. </li>
  44.  
  45. <li><a href=’http://www.google.com/reader/play/#item/feed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2FReadMoreMyBlog/0&#8242; target=’new’>Google reader</a></li>
  46.  
  47. <li><a class=’trigger’>Blog</a>
  48. <ul>
  49. <li><a href=’http://urlblogsobat.com/‘>Judul Blog</a></li>
  50. <li class=’hr’/>
  51. <li><a href=’http://urlblogsobat.com/‘>Judul Blog</a></li>
  52. <li class=’hr’/>
  53. <li><a href=’http://urlblogsobat.com/‘>Judul Blog</a></li>
  54. <li class=’hr’/>
  55. <li><a href=’http://urlblogsobat.com/‘>Judul Blog</a></li>
  56. <li class=’hr’/>
  57. <li><a href=’http://urlblogsobat.com/‘>Judul Blog</a></li>
  58. <li class=’hr’/>
  59. <li><a href=’http://urlblogsobat.com/‘>Judul Blog</a></li>
  60. <li class=’hr’/>
  61. <li><a href=’http://urlblogsobat.com/‘>Judul Blog</a></li>
  62. <li class=’hr’/>
  63. </ul>
  64. </li>

Keterangan: A

lamat blog? URL yang berwarna orange seperti contoh: https://readmoremyblog.wordpress.com/category/cara-posting-video-pada-blogger/ atau http://urlblogsobat.com/ ganti dengan alamat blog Sobat.

Dan Judul Blog atau sejenisnya pun bisa Sobat ganti dengan judul blog Sobat.

Untuk edi HtML ada di sini, selamat mengedit semoga berhasil. Sekian, semoga berguna…………

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s