CSS3 Menu Bar Keren Untuk Blogger

Kali ini Blog Gado Gado akan menampilkan artikel berjudul CSS3 Menu Bar Keren Untuk Blogger. Dengan artikel CSS3 Menu Bar Keren Untuk Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci CSS3 Menu Bar Keren Untuk Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel CSS3 Menu Bar Keren Untuk Blogger selengkapnya:

D-Copy Blog | Selamat siang (19-10-2012 - 12:07) sahabat Blogger, tutorial kali ini kita akan membahas bagaimana membuat CSS Menu Bar keren untuk Blogger, seperti pada postingan sebelummnya tentang menu versi 1, versi 2 dan versi 3. Menu ini tidak menggunakan dropdown, jadi menu ini sangat cocok digunakan untuk pages saja.

Ok langsung saja :

1. Buka akun Blogger sobat.
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 :

#menu1 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 0.8em;
    border:2px solid #000;
    border-left:none;
    float:left;
    clear:both;
    margin:10px;
}
#menu1 ul li{
    float:left;
}
#menu1 ul li a{
    display:block;
    text-decoration:none;
    background-color:#444;
    padding:5px 10px;
    color:#fff;
    width:140px;
    border-right:1px solid #666;
    border-left:1px solid #000;
}
#menu1 ul li a span{
    display:block;
}
#menu1 ul li a span.title{
    border-bottom:1px solid #444;
}
#menu1 ul li a:hover span.title{
    border-bottom:1px dashed #f0f0f0;
    color:#ef0000;
}
#menu1 ul li a span.text{
    visibility:hidden;
    font-size:12px;
    text-align:right;
}
#menu1 ul li a:hover span.text{
    visibility:visible;
}

     5.  Save Template Anda
     6.  Masuk ke Menu Layout > add Gadget > HTML/Javascript dan pastekan kod dibawah ini :

<div id="menu1">
            <ul>
                <li><a href="">
                        <span class="title">About</span>
                        <span class="text">Who we are</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Portfolio</span>
                        <span class="text">What we do</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Blog</span>
                        <span class="text">What we talk about</span>                    </a>
                </li>
                <li><a href="">
                        <span class="title">Contact</span>
                        <span class="text">How to get in touch</span>
                    </a>
                </li>
                 <li><a href="http://d-copy.blogspot.com">
                        <span class="title">AddThis</span>
                        <span class="text">Add This to blogger</span>
                    </a>
                </li>            
            </ul>
        </div>

Keterangan :

• Ganti kode yang diwarnai pada kode diatas

     7.  Save.

Sumber Artikel : http://www.bloggertrix.com/2012/10/simple-css3-blogger-menubar-with-nice.html

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul CSS3 Menu Bar Keren Untuk Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.