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 !!



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

  1.  For template designer : Log in blogger --> Layout --> Add Gadget --> HTML/Javascript
  2.  For blogskin : Log in blogger --> Template
  3.  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...^^,

4 comments:

  1. Akak X Fhm La Yng Part Page Tu . Huhuh Dashboard Kan Dah 'Corak' baru :( :3

    My Blog - http://aisyaarahman.blogspot.com/

    ReplyDelete
  2. Can i ask? what is 'tittle two'? Pls tell me. i don't know more..

    ReplyDelete
    Replies
    1. Title two is for the tooltip title

      Delete