Home Blog Cara Membuat Menu Dropdown keren di Blog

Wednesday, April 2, 2014

Cara Membuat Menu Dropdown keren di Blog

✔ Terbaur Diterbitkan
Tags

Cara Membuat Menu Dropdown keren di Blog


Hello Teman-Teman,di sini saya akan sharing tentang cara membuat menu Dropdown keren di blog,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/AVvXsEi2BM60SQsnUfb4k-N2xsLHLmCS3PINp3AMRLjopXHwWumkPbyzWwrdkvzY87_0byMQHgfn0Ir8XPx-B0pquPTyQA0384lbJr57Z9N6KScIQ9p4gtZm9ZZG-ph3aKv0zbqHR9lJRwtDRPSL/s1600/Untitled-1.jpg) 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.

Artikel Terkait

Terbaur

Next Post
Previous Post

1 komentar so far

avatar
Balas
Unknown delete February 6, 2015 at 8:19 PM

thanks sob, sangat membantu tutorialnya...

http://cv-pengobatan.com/


EmoticonEmoticon

Subscribe to: Post Comments (Atom)