Cara Membuat Menu Bar pada Blog tanpa Dropdown

Halo sobat blogger, pada postingan ini saya akan share Cara Membuat Menu Bar pada Blog tanpa Dropdown

Selamat Membaca!!!

 

Menu bar bawaan template blog biasanya tidak support sama Dropdown (submenu yang turun kebawah). oke dah kalo gitu langsung aja kita ketahap pembuatannya yah kawan :

• Login pada blogger.
• masuk ke halaman Template.
• Edit Template HTML lalu download template lengkap.
• Klik centang pada Expand Template Widget.
• Cari kode ]]></b:skin> (gunakan ctrl+f).
• Pasang kode di bawah ini tepat di atas kode ]]></b:skin> 
#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;
}
• Save Template Anda
• Masuk ke Menu Layout > add Gadget > HTML/Javascript dan pastekan kode 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>
• Save. (Untuk kode yang berwarna merah bisa diganti sendiri ) 

Ditulis Oleh : Unknown ~ Blogger Pemula

Sobat sedang membaca artikel tentang Cara Membuat Menu Bar pada Blog tanpa Dropdown. Artikel ini dilindungi oleh DMCA Protection. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Apabila melanggar akan diadukan ke DMCA Takedown <a href="http://bekicot-sangar.blogspot.com/2013/01/cara-membuat-menu-bar-pada-blog-tanpa.html" target="_blank">Cara Membuat Menu Bar pada Blog tanpa Dropdown</a>