• put your amazing slogan here!

    Membuat Top Menu di atas dan di bawah Header


    Cara membuat top menu di atas header, mungkin hal ini perlu di lakukan, supaya pengunjung mudah mencari halaman yang ada di blog, jadi buat anda yang pengen buat top menu, ikutilah tutorial di bawah ini dengan baik,………

    Pertama anda sharus dilakukan adalah Login di blogger dengan Kemudian Klik menu Layout lalu Edit HTML, supaya aman lebih baik anda download Template lengkap anda biar lebih aman, Kemudian anda contreng Expand Template Widget agar code dapat terlihat semua. letakan kode di bawah ini tepat dibawah     <b:skin><![CDATA[


    <b:skin><![CDATA[
    /*The top Menu*/
    #top{
    margin:auto;
    padding: 0;
    width: 100%;
    background:transparent;
    border-bottom:1px solid #373127;
    }
    #top-wrap{
    margin:auto;
    padding: 0;
    width: 960px;
    background:transparent;
    }
    #navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
    .topnav ul {list-style:none;margin:0;padding:0px; float:left;}
    .topnav li {float:left;margin:0;text-align:center;}
    .topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
    .topnav li a {background:none; }
    .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
    /*The top Menu*/
    #med{
    margin:auto;
    padding: 0;
    width: 100%;
    background:#000000;
    }
    #med-wrap{
    margin:auto;
    padding: 0;
    width: 960px;
    }
    .mednav ul {list-style:none;margin:0;padding:0px; float:left;}
    .mednav li {float:left;margin:0;text-align:center;}
    .mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
    .mednav li a {background:none; }
    .mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
    #navbar-iframe {
    display: none !important;
    }

       
    Berikutnya anda tinggal meletakan kode dibawah ini, letakan di bawah kode <body>. Atau anda bisa mencoba letakan kode ini sesuai dengan yang anda inginkan, anda bisa mencobanya hingga anda menemukan tempat yang anda inginkan, seperti contoh yang saya lakukan, saya meletakan kode tersebut tepat di bawah
    <div class='clearfix' id='primary-nav'>
    <div id='top'>
    <div id='top-wrap'>
    <div class='topnav'>
    <ul id='topnav'>
    <li><a href='http://blusion92.blogspot.com/'>Home</a></li>
    <blink><li><a href='http://blusion92.blogspot.com/p/tentang-saya.html' title='Contact Us'>Contact Us</a></li></blink>
    <li><a href='http://blusion92.blogspot.com/p/ebook.html' title='Download E-book'>Download E-book</a></li>
    <li><a href='http://blusion92.blogspot.com/p/template.html' title='Template Blogger'>Template Blogger</a> </li>
    <li><a href='http://blusion92.blogspot.com/p/download.html' title='Download'>Download</a></li>
    <li><a href='http://blusion92.blogspot.com/p/tukar-link.html' title='Tukar Link'>Tukar Link</a> </li>
    <li><a href='http://couldy.blogspot.com' title='Tutorial Blog'>Tutorial Blog</a></li>        
    </ul>
    </div>
    </div>
    <div style='clear: both;'/>
    </div>

    Warna Biru anda ganti denga alamat URL anda, dan warna Pink anda ganti dengan nama top menu anda.

    Sekarang anda bisa mencobanya,,,,,anda pasti berhasil......
    Diposkan oleh Unknown

    1 komentar:

    Tinggalkan Komentar anda untuk masukan pada blog ini.

    Subscribe to: Post Comments (Atom)
     

    Meet The Author

    Sekilas ShoutMix Isi Blog
    Rekomendasiklik

    ShoutMix chat widget

    Experience

    Contoh Banner

    Blog Penghasil Dollar

    About Me