Cara Mudah Dapat Uang di Internet Lewat Blog, Twitter, Facebook
» , » CSS Menu Dropdown Keren untuk Blogger

CSS Menu Dropdown Keren untuk Blogger


D-Copy Blog | Seperti pada postingan sebelumnya mengenai cara membuat menu mega dropdown dibawah header blog kali ini  saya ingin menunjukkan lain CSS3 murni terbang menu navigasi murni dirancang dengan menggunakan teknik terbaru CSS3 dan tanpa menggunakan JavaScript atau Gambar. Menu ini memiliki beberapa efek bernyawa yang bagus, seperti ketika Anda mengarahkan mouse pada menu Anda akan melihat efek jantung berdetak dengan animasi terbang. Menu ini kompatibel dengan semua browser modern terbaru ini dengan CSS3 dukungan. Dalam tutorial ini saya akan menunjukkan bagaimana Anda dapat menambahkan menu ini terbang indah untuk blog Anda, hanya dengan mengikuti langkah-langkah berikut mudah.
Menu CSS


Langkah :
  1. Buka akun Blogger Anda
  2. Masuk ke Menu edit HTML, jangan lupa centang Expand Template Widget
  3. Cari kode dibawah ini :
]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;
    /* border radius */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    /* box shadow */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#nav li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {
        -webkit-transform: scale(1);
    }
    30% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes animation1 {
    0% {
        -moz-transform: scale(1);
    }
    30% {
        -moz-transform: scale(1.3);
    }
    100% {
        -moz-transform: scale(1);
    }
}
#nav li > a:hover {
    /* css3 animation */
    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#nav li:hover > a {
    z-index: 4;
}
#nav li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#nav ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
@-moz-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
#nav li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#nav li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#nav li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#nav li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#nav li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#nav li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#nav li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#nav li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#nav li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}
   4.   Save Template Anda.
   5.  Masuk ke Menu Layout > Add Gadget dan pastekan kode dibawah ini :

Add Gadget

<ul id="nav">
    <li><a href="http://www.script-tutorials.com/">Home</a></li>
    <li><a class="hsubs" href="Your Links">Menu 1</a>

        <ul class="subs">
            <li><a href="Your Links">Submenu 1</a></li>
            <li><a href="Your Links">Submenu 2</a></li>
            <li><a href="Your Links">Submenu 3</a></li>
            <li><a href="Your Links">Submenu 4</a></li>
            <li><a href="Your Links">Submenu 5</a></li>

        </ul>
    </li>
    <li><a class="hsubs" href="Your Links">Menu 2</a>
        <ul class="subs">
            <li><a href="Your Links">Submenu 2-1</a></li>
            <li><a href="Your Links">Submenu 2-2</a></li>
            <li><a href="Your Links">Submenu 2-3</a></li>
            <li><a href="Your Links">Submenu 2-4</a></li>
            <li><a href="Your Links">Submenu 2-5</a></li>
            <li><a href="Your Links">Submenu 2-6</a></li>
            <li><a href="Your Links">Submenu 2-7</a></li>
            <li><a href="Your Links">Submenu 2-8</a></li>

        </ul>
    </li>
    <li><a class="hsubs" href="Your Links">Menu 3</a>
        <ul class="subs">
            <li><a href="Your Links">Submenu 3-1</a></li>
            <li><a href="Your Links">Submenu 3-2</a></li>
            <li><a href="Your Links">Submenu 3-3</a></li>
            <li><a href="Your Links">Submenu 3-4</a></li>
            <li><a href="Your Links">Submenu 3-5</a></li>

        </ul>
    </li>
    <li><a href="Your Links">Menu 4</a></li>
    <li><a href="Your Links">Menu 5</a></li>
    <li><a href="Your Links">Menu 6</a></li>

</ul>
Keterangan :

  • Ganti URL dan Title dengan yang Anda inginkan dan Save jika sudah selesai.


Semoga bermanfaat. Thanks.
Odii Siitohang
Judul: CSS Menu Dropdown Keren untuk Blogger;
Ditulis oleh: Anonymous;
Rating Blog: 5 dari 5





Anda sedang membaca Artikel tentang CSS Menu Dropdown Keren untuk Blogger dengan url http://d-copy.blogspot.com/2012/10/css-menu-dropdown-keren-untuk-blogger.html, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
D-Copy Reader DMCA
[9] Komentar untuk CSS Menu Dropdown Keren untuk Blogger:
  1. Terima Kasih Teman, Bisa di pasang di edit html g ya ?
    terima kasih, Mac os banget cssnya

    ReplyDelete
    Replies
    1. Bisa, itu sudah saya jelaskan...

      Delete
  2. Replies
    1. Perhatikan langkah 2 dan nya sobat.

      Delete
  3. terima kasih boss baru belajar nich ? trus cara isi menu-menunya gimana ya ?

    ReplyDelete
  4. mas saya mau tanya..
    sudah saya contoh CSS menu drop down ini,,
    tp kenapa yang muncul kok ga' sama mas..?!
    tolong penjelasanya..
    ( whambe.blogspot.com )

    ReplyDelete
  5. selama aku cari menu navigasi drop down, cuma di blog agan ini yang menurut aku paling keren,,thank's

    kunjung balik ya !!
    http://tutorial-all-in1.blogspot.com

    ReplyDelete
    Replies
    1. oiia satu lagi, kalo pengen warnanya diganti,, ubah yang mana y ?? kan itu warnanya abu2 tua sama muda,,

      Delete

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode[code]KODE ANDA[/code]
Untuk menyisipkan quote[blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar[img]URL Gambar[/img]
Untuk menyisipkan video[youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

 
D-Copy Blog © 2013 - All Rights Reserved Design : Creating Website Published : Mas Template