CSS3 Menu Bar Keren Untuk Blogger

Tweet

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