Cara Membuat Menu Di Blogspot Dengan Hover Effect Css
Wednesday, May 29, 2013
Edit
|
Cara Menu Di Blogspot Dengan Hover Effect Css - Ini adalah Menu Blogspot Dengan Underline Hover Efek Css Navigasi Bar. Pada tutorial ini saya akan menjelaskan, bagaimana caranya menambahkannya ke blogger. Menu ini bisa bekerja dengan setiap browser modern yang sobat pakai. Sobat dapat menghubungkan dengan halaman utama sobat dengan menggunakan
bar navigasi ini. Menu ini menggunakan CSS3 dan HTML. Untuk lebih jelasnya lihat demo nya langsung ya :
Okey, berikut ini cara memasang Menu Di Blogspot Dengan Hover Effect Css :
1. Log in to blogger account and Click drop down.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin> tag
/* The CSS Code for the menu starts here bloggertrix.com */
#arrowunderlinebtrix{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font: bold 16px Georgia;
}
#arrowunderlinebtrix li{
display:inline;
margin-right:25px;
}
#arrowunderlinebtrix li a{
position:relative;
color:black;
padding-bottom:8px;
text-decoration:none;
}
#arrowunderlinebtrix li a:hover{
border-bottom:3px solid #25bd0d;
}
#arrowunderlinebtrix li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent #25bd0d transparent;
}
6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<div id="arrowunderline"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Download</span></a></li> <li><a href="#"><span>CSS</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="http://www.bloggertrix.com/"><span>Contact Us</span></a></li> </ul> </div>
Replace # with your links.
9. Sekarang save HTML/Javascript'.
Nah, saya rasa sudah cukup sob, selamat mencoba membuat menu Di Blogspot Dengan Hover Effect Css.
Semoga bermanfaat