Tuesday, May 14, 2013

Cara Membuat Menu yang Super Keren di blogspot

ok sobat kali ini saya ingin memposting Arikel Cara Membuat Menu yang Super Keren di blogspot. ini postingan permintaan dari teman TKJ yang beberapa hari lalu meminta tutorial ini, tapi saya baru bisa posting sekarang hehehehe sebelum nya saya juga sudah buat postingan cara membuat menu dropdown yang keren bisa di lihat di Cara Membuat Menu Fixed yang keren atau bisa lihat postingan Cara Membuat Menu Drop Down yang Keren dengan Menu Search
tanpa basa basi langsung saja lihat penampakan menu nya


kalau anda yang tertarik langsung saja kita mulai ke cara pembuatan nya
  • pertama login ke blog dan masuk ke Edit HTML
  • setelah itu cari code  ]]></b:skin> dan copy code di bawah ini pas di atas code ]]></b:skin>
    .container {
        height: 571px;
        margin: 30px auto;
        width: 957px;
    }

    #nav,#nav ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #nav {
        background: url(http://bit.ly/14Chqrv) no-repeat scroll 0 0 transparent;
        clear: both;
        font-size: 12px;
        height: 58px;
        padding: 0 0 0 9px;
        position: relative;
        width: 957px;
    }
    #nav ul {
        background-color: #222;
        border:1px solid #222;
        border-radius: 0 5px 5px 5px;
        border-width: 0 1px 1px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
        left: -9999px;
        overflow: hidden;
        position: absolute;
        top: -9999px;
        z-index: 2;

        transform: scaleY(0);
    }
    #nav li {
        background: url('http://bit.ly/178rdD6') no-repeat scroll right 5px transparent;
        float: left;
        position: relative;
    }
    #nav li a {
        color: #FFFFFF;
        display: block;
        float: left;
        font-weight: normal;
        height: 30px;
        padding: 23px 20px 0;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 1px #000000;
    }
    #nav li:hover > a {
        color: #00B4FF;
    }
    #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
        background: none repeat scroll 0 0 #121212;
        outline: 0 none;
    }
    #nav li:hover ul.subs {
        left: 0;
        top: 53px;
        width: 180px;

        transform: scaleY(1);
    }
    #nav ul li {
        background: none;
        width: 100%;
    }
    #nav ul li a {
        float: none;
    }
    #nav ul li:hover > a {
        background-color: #121212;
        color: #00B4FF;
    }
    #lavalamp {
        background: url('http://bit.ly/17LIFi4') no-repeat scroll 0 0 transparent;
        height: 16px;
        left: 13px;
        position: absolute;
        top: 0px;
        width: 64px;

        transition: all 300ms ease;
    }
    #lavalamp:hover {
        transition-duration: 3000s;
    }

    #nav li:nth-of-type(1):hover ~ #lavalamp {
        left: 13px;
    }
    #nav li:nth-of-type(2):hover ~ #lavalamp {
        left: 90px;
    }
    #nav li:nth-of-type(3):hover ~ #lavalamp {
        left: 172px;
    }
    #nav li:nth-of-type(4):hover ~ #lavalamp {
        left: 253px;
    }
    #nav li:nth-of-type(5):hover ~ #lavalamp {
        left: 334px;
    }
    #nav li:nth-of-type(6):hover ~ #lavalamp {
        left: 415px;
    }
    #nav li:nth-of-type(7):hover ~ #lavalamp {
        left: 495px;
    }
    #nav li:nth-of-type(8):hover ~ #lavalamp {
        left: 570px;
    }

    keterangan pada script #nav li:nth-of-type(1):hover ~ #lavalamp { left :13px; } sampai yang #nav li:nth-of-type(8):hover di ganti agar gambar yang mengikuti images sesuai dengan letak menu nya
  • ok setelah itu cari code </head> atau langsung saja save template, dan paste code html di bawah ini di gedget javascript/HTML
    <div class="container">
    <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a class='hsubs' href='#'>About</a>
          <ul class='subs'>
            <li><a href='http://yudhacomunity.blogspot.com/p/about-us.html'>About Us</a></li>
            <li><a href='http://yudhacomunity.blogspot.com/p/contact-us.html'>Contact Us</a></li>
          </ul>
        </li>
        <li><a href='http://yudhacomunity.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
        <li><a href='http://yudhacomunity.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>
        <li><a href='http://yudhacomunity.blogspot.com/2011/12/cara-memasang-iklan-diblog-komunitas-anak-tkj.html'>Put Banner</a></li>
        <li><a class='hsubs' href='#'>IT Knowledge</a>
          <ul class='subs'>
            <li><a href='http://yudhacomunity.blogspot.com/search/label/hacking'>Hacking</a></li>
            <li><a href='http://yudhacomunity.blogspot.com/search/label/programing'>Programing</a></li>
            <li><a href='http://yudhacomunity.blogspot.com/search/label/jaringan'>Networking</a></li>
          </ul>
        </li>
        <li><a class='hsubs' href='#'>Blogger Tips</a>
          <ul class='subs'>
            <li><a href='http://yudhacomunity.blogspot.com/search/label/Cara%20membuat%20website'>Making a Website</a></li>
            <li><a href='http://yudhacomunity.blogspot.com/search/label/Domain'>Domain</a></li>
            <li><a href='http://yudhacomunity.blogspot.com/search/label/kontes%20blog'>Kontes Blog</a></li>

          </ul>
        </li>
        <li><a href='#'>ETC</a>
        <ul class='subs'>
          <li><a href='http://yudhacomunity.blogspot.com/2012/02/link-blog-sahabat.html'>Link Exchange</a></li>
    <li><a href='http://yudhacomunity.blogspot.com/2012/07/daftar-sebagai-penulis-blog-ini_25.html' title='Masukkan Artikel mu dan jadikan blog ini sebagai SosBok'>Be Writer</a></li>
    <li><a href='http://yudhacomunity.blogspot.com/2011/08/cara-update-status-via-terserah-kita.html'>Update Status Via</a> </li>

          </ul>
        </li>
        <div id='lavalamp'/>
      </ul>
    </div>

    rubah la Link URL dan Nama Menu nya sesuai dengan yang kalian inginkan, jika ingin buat di bawah code </head> boleh, yang mau buat di gedget javascript/HTML juga boleh
Happy coding !!!!!
Sekian lah artikel saya, semoga bisa bermanfaat bagi sobat sobat sekalian.. jika ingin blog nya saya kunjungi, berkomentar lah dengan sopan dan sesuai aturan,.. saya tidak memperbolehkan live link, jika kamu sopan saya segan salam blogger dan tetap semangat

Ditulis Oleh : Yudha Situmorang ~ Komunitas Anak TKJ

Yudha situmorang Sobat sedang membaca artikel tentang Cara Membuat Menu yang Super Keren di blogspot. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya Review oleh: Yudha Situmorang
Update pada: 3:34 PM | Rating: 4.5
 
Copyright © 2013. Komunitas Anak TKJ . All Rights Reserved
Home | Contact Us | About Me | Privacy policy | Disclaimer | Site map
Design by Yudha Situmorang .