Breaking

Sunday, May 04, 2014

Cara Membuat MenuBar dan Sub Menu pada Blogger Baru

Beberapa Desain template yang uda di desain oleh para pembuat template kadang kadang banyak yang kurang memuaskan kita sendiri .. seperti kurangnya ataupun tanpa adanya Menubar yang  kita suka .. dan walaupun ada menubar .. terkadang ada beberapa dari blogger yang ingin membuat menubar sendiri .. maka dari itu saya posting Cara Membuat Menubar pada Blog . engga cuma Menubar .. saya juga menyertakan Sub nya .. nah kalian juga ntar bisa nambah2 sendiri neh .. dan tanpa ribet2 ngedit HTML nya blog anda :)).

Berikut caranya : 


1.  Pertama, buka Blogger, dan masuk ke menu Template.
2.    Backup template blog ente dulu, dan klik tombol Edit HTML.
3.  Cari kode ]]></b:skin> , dan pastekan kode berikut tepat Diatas/sebelumnya.
#navbarmenu{width:auto; float:left; font-size:12px; background:#fff; font-weight:bold; margin:0 auto; padding:0 auto} #nav{margin:0; padding:0} #nav ul{float:left; list-style:none; margin:0; padding:0} #nav li{list-style:none; margin:0; padding:0; background:none} #nav li a, #nav li a:link, #nav li a:visited{color:#000000; display:block; font-weight:normal; text-transform:normal; margin:0; padding:5px 15px 5px} #nav li a:hover{background:#99FF00; color:#FFF; margin:0; -moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#FFF; -moz-border-radius:8px; width:150px; color:#00000; font-weight:normal; text-transform:normal; float:none; margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff} #nav li li a:hover{background: #99ff00; color:#FFF; padding:5px 10px 5px 15px} #nav li{float:left; padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0} #nav li ul a{width:140px} #nav li ul ul{margin:-25px 0 0 171px} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto} #nav li:hover, #nav li.sfhover{position:static}
      4. Simpen Template
      5. Trus masuk ke TATA LETAK 
      6. Trus klik Tambah Gadget
      7.  Pilih add HTML / JavaScript
      8. Copas Script di bawah .. judul kosongin aja.

    <div id='menu'>
    <div id='menu-wrap'>
    <div id='navbarmenu'>
    <ul id='nav'>
    <li><a href=‘http://zippien.us’>Home</a></li>
    <li><a href='http://zippien.us/search/label/tips%20trik'>Tips Trik Blogging</a></li>
    <li><a href='http://zippien.us/search/label/movie'>movie</a></li>
    <li><a href='http://zippien.us/search/label/Blog%20Tools'>Blog Tools</a></li>
    <li><a href=‘http://zippien.us/search/label/anime’>anime</a></li>
    <li><a href=‘#’>Etc ...</a>
    <ul>
    <li><a href=‘http://zippien.us/p/daftar isi.html>Daftar isi</a></li>
    <li><a href=‘http://zippien.us/p/sitemap.html’>Sitemap</a></li>
    <li><a href='http://zippien.us/p/blog-page_1.html'>About Me</a></li>
    </ul>
    </li>
    <li><a href='http://www.facebook.com/zippien.teamphan'>Fanspage</a></li>
    <li><a href='http://www.twitter.com/zippien'>Twitter</a></li>
    </ul>

Nah selesai .. tar buat yang warna merah merah itu ganti aja dengan link blog kalian ...
Sekian saja .. buat yang masih blum ngarti bisa komentar aja :D ntar biar saya jelasin selengkapnya..

No comments:

Post a Comment