Blogunuz için Sabit Açılır Yan Menü

     Blogger siteniz için, sitenin solunda sayfayı kaydırsanız da sabit olarak duracak, üzerine geldiğinizde açılacak şık bir menü eklentisi. Menünün çalışır halini sitemizin solunda görüp deneyebilirsiniz. Bu eklentiyi sitenize eklemek için yapmanız gerekenleri de aşağıda 2 adımda anlatacağız..

 
1. Adım
Öncelikle Şablon menüsünden HTML'yi Düzenle seçeneğiyle sayfamızın kod kısmını açtıktan sonra ]]></b:skin> kodunu aratıp bu kodun üstüne aşağıdaki kodları yapıştırıyoruz.

/* CSS Style for Horizontal Menu - info @ http://radikalmedya.blogspot.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/AVvXsEiNu1QFu73M-GQIO7-QqslM6ABkn8xwX-Inugk-nsU6R9nNdOgUVNo-Q1HsKdlI993mM9f2Nm9B8NPLvEXukNKvRwGkeZUC3HZ5pYp7wuHAUnXllhu3H1gYW7uZmncx09u4Gg7y6whY_rw/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://radikalmedya.blogspot.com */

2. Adım
Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğiyle aşağıdaki kodu gadget olarak sitemize ekliyoruz. Kod içerisinde maviyle yazılan yerleri sitenize göre değiştirebilirsiniz.

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="home" href="http://radikalmedya.blogspot.com">
<span>Ana Sayfa</span>
</a>
</li>

<li>

<a class="about" href="Link">
<span>Hakkımızda</span>
</a>
</li>

<li>
<a class="services" href="Link">
<span>Servisler</span>
</a>

</li>

<li>
<a class="portfolio" href="Link">
<span>Portfolyo</span>
</a>
</li>

<li>
<a class="contact" href="Link">
<span>İletişim</span>
</a>
</li>
</ul>
</div>