ingin membuat newticker seperti di bawah ini silahkan lihat di sini

Membuat MenuBlog Statis berada di atas

Kawan kawan blogger pasti sering menemui menu blog yang berada di atas, namun jarang sekali menemui menu blog yang statis berada di tas blog, meskipun scroll naik turun, menu tetap statis di atas.
kali ini saya ingin membahas menu statis melayang di atas. untuk kawan kawan bloger, contohnya hasil dari pembuatan menu seperti menu diatas blog ini.jika ada ingin membuat seperti ini ikuti langkah langkah ini.
  1. pertama login dusboard blog
  2. pilih menu rancangan lalu pilih tab edit HTML
  3. download dulu script anda
  4. centang
  5. cari ]]></b:skin>
  6. lalu paste kode di bawah ini setelah kode diatas ]]></b:skin>
  7. #trik_top{background:#99C9FF url(http://2.bp.blogspot.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top; position:fixed; _position:absolute; Top:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth)} 
  8. dan kopi kode di bawah ini dan paste setelah langkah ke 6
  9. /* ----- NAVBAR MENU ----- */
    #NavbarMenu{width:1102px; height:30px; float:left; background:#99C9FF url(http://2.bp.blogspot.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top; color:#3D81EEmargin:0 auto 0; padding:0; font:bold 11px Arial,Tahoma,Verdana; border-top:1px solid #AFAFAF; border-bottom:1px solid #FFF}
    #NavbarMenuleft{background:#99C9FF url(http://2.bp.blogspot.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top; width:1102px; float:left; margin:0; padding:0}
    #navright{width:210px; font-size:11px; float:right; margin:0px; padding:3px 5px 0px 0px}
    #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}
    #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:capitalize; margin:0; padding:9px 15px; font:normal 14px ARIAL}
    #nav li a:hover, #nav li a:active{background:#99C9FF url(http://2.bp.blogspot.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top; color:#fff; margin:0; padding:9px 15px; text-decoration:none}
    #nav li li a, #nav li li a:link, #nav li li a:visited{background:#3D81EE url(http://2.bp.blogspot.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top; width:150px; color:#fff; text-transform:capitalize; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #99C9FF; border-left:1px solid #99C9FF; border-right:1px solid #99C9FF; font:normal 15px,}

    #nav li li a:hover, #nav li li a:active{background:#99C9FF url(http://2.bp.blogspot.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top; color:#3D81EE; padding:7px 10px}
    #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:-32px 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}
  10. setelah itu cari kode </body> dan paste kode di bawah ini di atas kode</body>
  11. <div id='trik_pojok'>
    <div id='navbarmenu'>
    <div id='navbarmenuleft'>
    <ul id='nav'>
    <li><a href="http://the-plick.blogspot.com">Home</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Hardware">Hardware</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Software">Software</a>
    <ul>
    <li><a href="http://the-plick.blogspot.com/search/label/Antivirus">Antivirus</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Billing">Billing</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Driver">Driver</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Utility">Utility</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Browser">Browser</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Theme">Theme</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/OtherSoftware">Other Software</a></li>
    </ul>
    </li>
    <li><a href="http://the-plick.blogspot.com/search/label/Tutorial">Tutorial</a>
    <ul>
    <li><a href="http://the-plick.blogspot.com/search/label/Troubleshooting">Troubleshooting</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Maintenance">Maintenance</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Design">Design</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Trick">Trick</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Programing">Programing</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Networking">Networking</a></li>
    </ul>
    </li>
    <li><a href="http://the-plick.blogspot.com/search/label/Entertainment">Entertainment</a>
    <ul>
    <li><a href="http://the-plick.blogspot.com/search/label/Music">Music</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Film">Film</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Galery">Galery</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Game">Game</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Sport">Sport</a></li>
    </ul>
    </li>
    <li><a href="http://the-plick.blogspot.com/search/label/Archives">Archives</a>
    <ul>
    <li><a href="http://the-plick.blogspot.com/search/label/Education">Education</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Ebook">E-book</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Literature">Literature</a></li>
    <li><a href="http://the-plick.blogspot.com/search/label/Motivation">Motivation</a></li>
    </ul>
    </li>
    <li><a href='http://the-plick.blogspot.com/#'>About Me</a>
    <ul>
    <li><a href='http://www.facebook.com/fendy.uye'>Facebook</a></li>
    <li><a href='http://twitter.com/fendy_uye'>Twitter</a></li>
    </ul>
    </li>
    <li><a href='http://www.blogger.com'>Log In</a></li>
    <div id='navright'>
    <form action='http://the-plick.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id="s" name="q" type="text" value="" /> <input id="searchsubmit" type="submit" value="Search" />
    </form>
    </div>
    </ul>

    </div>
    </div>
    </div>
  12. keterangan: ganti http://the-plick.blogspot.com dengan alamat blog anda
  13. untuk mengedit panjang menu anda cari script ini #NavbarMenu{width:1102px; ubah ukuran wide sesuai kebutuhan
  14. untuk mengedit letak dari menu anda cari kode ini _position:absolute; Top:0px; left:0px ubah posisi sebelah kiri atau atas.
  15. untuk menu silahkan anda edit sendiri sesuai dengan kebutuhan menu blog anda.
  16. simpan template dan lihat hasilnya 
  17. akhir kata selamat mencoba dan terima kasih udah membaca tutorial yang kuno ini


FOLLOW and JOIN to Get Update!

Social Media Widget SM Widgets




The Plick Updated at: 3:50 PM

6 komentar :

  1. bagus nih... ntar kapan2 aq coba deh..

    ReplyDelete
  2. sep bos...coba aja...terus berkreasi

    ReplyDelete
  3. Mantaf master ,,,,,
    thanks Atas Ilmu Ngeblognya ,,,,,

    ReplyDelete
  4. Saya pernah nyoba buat variasi malah jadi berantakan :) masih gaptek keknya :D

    ReplyDelete
  5. @pulsa elektrik termurahuntuk contoh nya dapat dilihat di sini om. itu aku yang buat. http://kricho.blogspot.com/

    ReplyDelete

Silahkan Comment dan Tinggalkan link, Blog Ini DoFollow sehingga anda mendapatkan backling dari blog ini. Terima Kasih

Back to top