CSS3 Menu Bar Keren Untuk Blogger

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.

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