Side Menu Menegak Terapung di tepi Untuk Blogger

Jadi banyak tempat kita lawati kini mempunyai menu navigasi disisi halaman untuk akses mudah untuk pages.Ini penting kerana mempunyai menu yang sangat bergaya dan berwarna-warni, anda boleh menetapkan sebelah halaman pada blog.

Menu terdiri hampir sepenuhnya CSS3 dengan hanya satu imej dan adalah cepat dan mudah untuk install. 

Langkah 1

Klik Dashboard Anda  ≥ Template  ≥ Template ≥ Customize ≥ Advanced ≥ Scroll ke bawah dan klik Add Css Option seperti ditunjuk dibawah.

Letakkan kode ini didalam Css:

Anda pastikan copy kesemua kode dibawah sebelum paste didalam css.

/* CSS Style for Horizontal Menu - info @ http://www.jeritanblog.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;  
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;  
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;  


}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}        

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;  
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;  
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
}  


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6TwIbICQlI5xxuQ34mGpKVWpMD0MD1kGLC7qqFpVlBGvE1eeP0DVJVlpz_6rQHZlp1y-OCBdec4dt3RuCn597SJAu3_s3RvTHP_EVx03LBuwwaLF3-EwVFvuB9FQWc4nG9bv2vc7osbE/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End menu css - info @ http://www.jeritanblog.com */

Selepas itu klik save.


Langkah 2

Pergi ke  Layout blog anda dan klik Add A Gadget ≥ Html / Javascript 

Salin dan tampal kod berikut ke dalam alat Html / Javascript:

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://www.jeritanblog.com">
<span>Home</span>
</a>
</li>

<li>

<a class="about" href="http://www.jeritanblog.com/p/about-spice-up-your-blog.html">
<span>About</span>
</a>
</li>

<li>
<a class="services" href="http://www.jeritanblog.com/p/hire-us_08.html">
<span>Services</span>
</a>

</li>

<li>
<a class="portfolio" href="http://www.jeritanblog.com/">
<span>Portfolio</span>
</a>
</li>

<li>
<a class="contact" href="http://www.jeritanblog.com/2009/09/contact-us.html">

<span>Contact us</span>
</a>
</li>
</ul>

Nota Tukar URL merah dengan link anda dan Anda boleh menukar keluar tatal teks dalam warna kuning di atas.

Selepas itu klik save, anda boleh seret dan letak dibawah halaman reka bentuk.