Navigation Bar stay on top

Assalamualaikum and hello buddies.. ;-) Well, the title seem weird though..huhu Don't mind it
What I really mean about the navigation bar is it will stay on top of the webpage when you scroll your blog passing the navigation bar. If you had no idea what's I am talking about, VIEW IT HERE.

I don't know how to make a tutorial about this actually, because the code required your self modification to make it work for your blog.
If the navigation does not seem  to perfectly suit your blog, you may need to edit the position, margin, size, or padding.

1. Firstly, Log in your blogger account.
2. Go to Dashboard > Layout > Add  a Gadget ( Below header ) > HTML/JavaScript

Copy below code and paste it on the HTML/Javascipt content.
If you wish to customize it first, paste it here first.Next, paste the edited code to the HTML/Javascript

<head></head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// If you have jQuery directly, then skip next line
google.load("jquery", "1");
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('nav')
else
$('#sticky').removeClass('nav');
}
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
<style>
/* Custom Tabs
----------------------------------------------- */
#navigation {
    left: 0px;
    position: absolute;
    background-color: #F7CDFF;
    background-image:url( http://colourlovers.com.s3.amazonaws.com/images/patterns/3827/3827607.png);
    width: 100%;
    margin-top: 0px;
    text-align: center;
    z-index: 999;
    height: 40px;
}

#nav {
    left: 0px;
    position: absolute;
    width: 100%;
    padding-top:5px;
    text-align: center;
    z-index: 999;
}

#nav a {
font-weight:bold;
width:90px;
background-color: #B4E3C8;
border: 2px solid #F1D5CF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#222222;
display:inline-block;
-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;
padding-top:5px; padding-bottom:5px;
display:inline-block;
}

#nav a:hover {
    border: 2px solid #DFA3A3;
    color: #B49F80;
    background-color: #C7F4E0;
}

#sticky {
    background-color: transparent;
    padding: 0px;
    width: 100%;
}

#sticky.nav {
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: .5;
    -webkit-transition: all 0.5s ease-in-out;
    -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;
}

#sticky.nav:hover{
    opacity: 1;
}
</style>
<center>
<div id="navigation"><div id="nav"><div id="nav-anchor"><div id="sticky">
<a href="https://LINK">HOME</a>
<a href="https://LINK">ABOUT</a>
<a href="https://LINK">TUTORS</a>
<a href="https://LINK">EXTRAS</a>
<a href="https://LINK">THEME</a>
<a href="https://LINK" >LINKIES</a>
</div></div></div></div>
</center>

After you paste the code, save it.

The Note :
Color code here

Red Text : Background URL find HERE
Blue Text : Background Color
Orange Text : Border Color
Fuchsia Text : Text Color
Green Text : Link URL
Purple Text : Link Title

All done now, see the result on your blog
Do comment dear for any inquiries or request ^^,

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

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...^^,

Four navigation style

Assalamualikum dan hai semua....setelah bereksperiment dengan kod akhirnya terhasilah empat style navigation ini... (over pulak)

boleh guna code ni tapi credit taw... penat saya ubah suai code...

This is an updated style on 11 October 2013

For blogskin / classic tempate paste the navigation code  anywhere you want it to appear...for template designer Layout --> Add gadget --> HTML/Javascript 

Live preview Here

Style  number one

<style>
.tablo{
font-size:12px;
color:black;
text-transform:uppercase;
background:#FFF9FA;
font-family:century gothic;
text-decoration:none;
padding:3px;
width: 50px;
display:inline-block;
border:1px solid #FFE3E6;
margin-top: 5px;margin-bottom: 5px;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tablo:hover {
background:#FFC6CF;
color:white;
}
</style>
<center>
<div style="background: #FFEBED;width:260px;border: 2px solid #FFEEEE;margin-bottom:7px; margin-top:7px;box-shadow:0px 2px 2px 2px #ffeeee;border:3px solid #ffffff;">
<a class="tablo" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">About</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Linky</a>
</div>
</center>

Style number two :

<style>

.haha{

width:60px;height:40px;

box-shadow:0px 0px 2px 3px #FFE9C6;

background:#FFF9E1;

font:12px century gothic;

text-align:center;

Text-decoration:none;

color:#888888;

display:inline-block;

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

padding-bottom:5px;

padding-top:20px;padding-left:0px;padding-right:0px;

display:inline-block;

border-bottom-left-radius: 35px;

border-bottom-right-radius: 35px;

}

.haha:hover{

background:#FFFFFF;

color:#777;

border-top-right-radius: 35px;

-webkit-transform: rotate(-50deg) ;

-moz-transform: rotate(-50deg) ;

-o-transform: rotate(-50deg) ;

-ms-transform: rotate(-50deg) ;

}

</style>

<center>

<a class="haha" href="http://kawaiilady.blogspot.com/">Home</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">About</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">Stuff</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">Linky</a>

</center>

Style number three :

<style>
.lola{
width:51px;height:35px;
padding-top:17px;
text-transform:uppercase;
border: 1px solid #E7F4FF;
background:#EFF8FF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-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;
margin:5px;margin-bottom:20px;
display:inline-block;
border-radius: 100%;
}
.lola:hover{
background:#FFFFFF;
color:#FFFFFF;text-shadow:0px 37px 0px #333333;
-webkit-transform: rotate(-360deg) ;
-moz-transform: rotate(-360deg) ;
-o-transform: rotate(-360deg) ;
-ms-transform: rotate(-360deg) ;
}
</style>
<center>
<a class="lola" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">About</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Linky</a>
</center>

Style number 4 :

<style>

.leaf {

width:45px;height:30px;

padding-top:15px;

text-transform:uppercase;

border: 3px solid #E2FFD5;

background:#E8FFE1;

font:11px century gothic;

text-align:center;

Text-decoration:none;

color:#333333;

display:inline-block;

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

margin:3px;

display:inline-block;

border-radius: 100%;

border-top-right-radius:0px;

}

.leaf:hover{

background:#FFFFFF;

color:#000000;

border: 3px solid #E8FFE1;

background:#E2FFD5;

border-top-right-radius:100%;

border-bottom-left-radius:0px;

}

</style>

<center>

<div style="width:240px;padding:5px;background:#FFFCF2;box-shadow:0px 0px 2px 3px #FFF9E7;border:2px solid #ffffff;">

<a class="leaf" href="http://kawaiilady.blogspot.com/">Home</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">About</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">Stuff</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">Linky</a>

</div>

</center>

Kalau dah jadi comment taw... kalau tak jadik pon comment jugak...