Sidebar Navigation

Saturday, 28 September 2013

Sidebar Navigation

Assalamualaikum and hi everyone...i'm back with a new tutorial...okay this tutorial is about the navigation bar that can be put at the sidebar of blog...

NO RE-POST / RE-TUTORIAL !!

Here the preview

Interested with the navigation bar? let's add it to your blog

For template designer : Log in blogger --> Layout --> Add Gadget --> HTML/Javascript
For blogskin : Log in blogger --> Template
Copy below code and paste it in HTML/Javascript gadget or between sidebar code for blogskin...

<head>
<link href="http://fonts.googleapis.com/css?family=Chewy" rel="stylesheet" type="text/css"></link>
</head>

<style>
a.navbar {
font:11px arial;
text-transform:uppercase;
letter-spacing:4px;
text-align:center;
text-decoration:none;
color:#444444;padding:6px;
background-color:#FFFCFD;
width:160px;display:block;
border-left:10px solid #FFFDD3;
border-right:10px solid #FFFDD3;
border-bottom:1px solid #FFEBEB;
border-top:none;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a.navbar:hover{
background:#FFE5E5;
border-right:10px solid #FFD2D2;
border-left:10px solid #FFD2D2;
border-bottom:1px solid #FFD2D2;
box-shadow:none;
}
</style>
<center><div style="background:#FFDCDF;color:#FFFFFF;text-shadow:0px 1px 1px #777777;padding:3px;font:20px chewy;width:187px;align:center;">Navigation</div>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
</center>
<center><div style="background: #FFFDD3;color:#FFFFFF; text-shadow:0px 1px 5px #888888;height:9px;font:20px chewy;width:193px;align:center;"></div>

Customize the style :

Fuchsia text : Color of the font

Red text : Background color

Blue text : Color of the border

Orange text : Title of the navigation

Purple text :Title of link

Green text : Title number two

Orange highlighted : Link of page
Blue highlighted : Width of the navigation

How to get the page link ?

Home --> Page --> view --> Copy the link --> replace the link given ( refer below picture )

Okay after everything is done, save it happily...for template designer don't click on rich text on the HTML/Javascript gadget to avoid messing the code...

Comments and credit are really, truly appreciated...^^,