Home Blog Cara Membuat Menu Dropdown Versi 2 di Blog Keren

Saturday, April 5, 2014

Cara Membuat Menu Dropdown Versi 2 di Blog Keren

✔ Terbaur Diterbitkan
Tags

Menu Dropdown Versi 2 Keren
Hello Teman-Teman,di sini saya akan sharing tentang cara membuat menu Dropdown Versi 2 keren di blog,versi 2 ini saya membuat 2 warna,yaitu warna biru dan warna hitam,pasti teman-teman semua pengen kan blognya slalu di kunjungi banyak orang,salah satu caranya adalah dengan membuat menu dropdown di blog.kenapa?? karena dengan adanya menu dropdown pembaca atau pengunjung blog sobat tidak bingung,jadi intinya menu dropdown itu fsungsinya untuk mempermudah pembaca,jadi kalau mereka mudah mencari info apa yang mereka butuhkan dari blog sobat maka mereka akan sering mengunjungi blog teman-teman semua.oke langsung saja gini caranya.
silahkan sobat Login Ke Blogger terlebih dahulu.

  • pilih blog yang akan sobat edit,lalu klik
  • klik template,template terletak di samping kiri blog.
  • klik edit HTML.
  • kemudian tekan Ctrl + F di didalam kotak edit html.fungsinya untuk menampilkan kotak pencarian.
  • kemudian copy code ini  ]]></b:skin> ke dalam kotak pencarian,lalu enter.
  • kemudian copy code di bawah ini lalu paste diatas code ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCrqt0iX0qQEswZ6_90eM__50HfSz10l3Q1kcaBwhEyDb8xl7uhfUQKWgMuuDp86P1P-_9q7bPHTgNZ3g1JB0F9oX-jiXs5FxQb_1GS-JepFygbn2ckjBMLb-tTIhy3QLMScm3cT3kTba6/s1600/aaay.png) repeat-x;width:830px;margin:0 auto;padding:0 auto} #menuwrapper{width:830px;height:30px;margin:0 auto} #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:11px;font-weight:700;text-transform:uppercase;color:#F3F3FA;border-right:0px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfHHbzZoAlXLQoTKWM9dK9livLrwotH4ugz4nQo1GfLNYV9StDXlUFQW2ttXTh7iZHnQfKrVs2M3OgHsr7_Dx9wUM4jA4k3lkKX7k_QqXWHW35QGQV6CBAfv_KKMguE5JQjs0AA7IG71w/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:#0C9FF4;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:#0C9FF4;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:0px solid #444;border-top:0px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#0C9FF4!important;color:#fff!important;text-decoration:none}
  •  Kemudian carilah code <Body>  ,
  •  Setelah ketemu,copy code di bawah ini dibawah <Body>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWzv4j4BoSl_Zf2NVHMjaLEmTqMtdzchsPBabCKQ-hS7s4SBloUpjlQRNq6IU3sELFISRyViVjsuGm6nqX3x4eWF_h1oG9LXuDTJhKeC6_I49Xi_dtIw132ZiohTBVexZIcazHJ_eXPA8/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='http://www.blogger.com' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/Twitter Anda' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.facebook.com/Facebook anda' target='new'>Facebook</a></li>
</ul>
</li>
<li><a href='URL BLOG' target='new'>Nama Menu</a></li>
<li><a class='trigger'>Nama Menu</a>
<ul>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Nama Menu</a>
<ul>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
</ul>
</li>
</ul></div></div>
  • Kemudian Ganti tulisan yang berwarna HIJAU dengan url link menubar yang diinginkan, contohnya : link postingan sobat,link halaman blog sobat yang lainnya.
  • Kemudian Ganti tulisan yang berwarna Biru dengan judul-judul tulisan yang akan di tampilkan di menubar tersebut,
  • kemudian simpan,jadi dech...
semoga dengan ilmu yang saya berikan,bermanfaat untuk teman-teman,dan semoga blog teman-teman semua akan banyak pengunjungnya.Terimakasih telah mengunjungi blog saya.
teman-teman bisa memberikan saran warna apa yang bagus untuk menu dropdownnya,kalau teman-teman pengen tinggal kan komentar nya ya sob.

Artikel Terkait

Terbaur

Next Post
Previous Post


EmoticonEmoticon

Subscribe to: Post Comments (Atom)