One of the most important is, we have to design
our blog attractive. So, for making attractive,
menu bar is come-up first,You have to choose
nice menu bar for blogger.In this post , im going
to explain how to add stylish css3 menu bar
for your blog, Im using CSS and HTML for this
tutorial. If you want you can check my earlier
menu bar post by clicking here
Demo
1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
10. Now save your HTML/Javascript'.
You are done...
our blog attractive. So, for making attractive,
menu bar is come-up first,You have to choose
nice menu bar for blogger.In this post , im going
to explain how to add stylish css3 menu bar
for your blog, Im using CSS and HTML for this
tutorial. If you want you can check my earlier
menu bar post by clicking here
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
/* The CSS Code for the menu starts here */
nav ul{ padding: 0;
margin: 0;
list-style: none;
}
nav li
{ float: left;}
nav a{
float: left;
color: #FFFFFF;
margin: 0 5px;
padding: 3px;
text-decoration: none;
border: 1px solid #831608;
font: bold 14px Arial, Helvetica;
background-color: #831608;
background-image: -moz-linear-gradient(#bb413b, #831608);
background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));
background-image: -webkit-linear-gradient(#bb413b, #831608);
background-image: -o-linear-gradient(#bb413b, #831608);
background-image: -ms-linear-gradient(#bb413b, #831608);
background-image: linear-gradient(#bb413b, #831608);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0,0,0,.8);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
nav a:hover
{
background-color: #bb413b;
background-image: -moz-linear-gradient(#831608, #bb413b);
background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));
background-image: -webkit-linear-gradient(#831608, #bb413b);
background-image: -o-linear-gradient(#831608, #bb413b);
background-image: -ms-linear-gradient(#831608, #bb413b);
background-image: linear-gradient(#831608, #bb413b);
}
nav a:active
{
background: #bb413b;
position: relative;
top: 2px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}
nav span
{
border: 1px dashed #eba1a3;
display: inline-block;
padding: 4px 15px;
cursor: pointer;
background-color: #bb413b;
background-image: -moz-linear-gradient(#d4463c, #aa2618);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));
background-image: -webkit-linear-gradient(#d4463c, #aa2618);
background-image: -o-linear-gradient(#d4463c, #aa2618);
background-image: -ms-linear-gradient(#d4463c, #aa2618);
background-image: linear-gradient(#d4463c, #aa2618);
}
nav a:hover span
{
background-color: #bb413b;
background-image: -moz-linear-gradient(#aa2618, #d4463c);
background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));
background-image: -webkit-linear-gradient(#aa2618, #d4463c);
background-image: -o-linear-gradient(#aa2618, #d4463c);
background-image: -ms-linear-gradient(#aa2618, #d4463c);
background-image: linear-gradient(#aa2618, #d4463c);
}
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
<nav>
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Categories</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="http://www.bloggertrix.com"><span>Add this</span></a></li>
</ul>
</nav>
10. Now save your HTML/Javascript'.
You are done...
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang Add Stylish CSS3 Menu Bar For Blogger . Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment