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 ]]>
  6. lalu paste kode di bawah ini setelah kode diatas ]]>
  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 dan paste kode di bawah ini di atas kode




  11. Home

  12. Hardware

  13. Software


    • Antivirus

    • Billing

    • Driver

    • Utility

    • Browser

    • Theme

    • Other Software



    • Tutorial


      • Troubleshooting

      • Maintenance

      • Design

      • Trick

      • Programing

      • Networking



      • Entertainment


        • Music

        • Film

        • Galery

        • Game

        • Sport



        • Archives


          • Education

          • E-book

          • Literature

          • Motivation



          • About Me


            • Facebook

            • Twitter



            • Log In










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

            3 thoughts on “Membuat MenuBlog Statis berada di atas

            Leave a Reply

            Fill in your details below or click an icon to log in:

            WordPress.com Logo

            You are commenting using your WordPress.com account. Log Out / Change )

            Twitter picture

            You are commenting using your Twitter account. Log Out / Change )

            Facebook photo

            You are commenting using your Facebook account. Log Out / Change )

            Google+ photo

            You are commenting using your Google+ account. Log Out / Change )

            Connecting to %s