JQuery İle Sol Tarafa Dikey Menü Yapmak

Merhaba arkadaşlar,JQuery çalışmalarına başladım ufaktan...Çok iyi değilim ama hazır kodları düzenliyor veya kendime 1-2 kod yapıp internetten okuduğum yazılar ile onları düzenliyorum :) Bugün şu an sitemin sol tarafın da görmüş olduğunuz(kaldırıldı) dikey menünün kodlarını vereceğim size :)




Menüyü eklemek için takip edeceğimiz 3 adım var :)

Blogunuzun, Tasarım > HTML'yi Düzenle > Widget Şablonlarını Genişlet




1.Adım: CTRL+F yardımı ile ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları hemen üzerine yapıştırıyoruz.

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px; 
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: 

url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: 

url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .komentar a{
background-image: 

url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: 

url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: 

url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: 

url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

2.Adım:Tekrar CTRL+F yardımı ile </head> kodunu buluyoruz ve hemen üzerine aşağıdaki kodu yapıştırıyoruz.

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
$(function() {
$(&#39;#menusisi a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000);
$(&#39;#menusisi &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},200);
}
);
});
</script>

3.Adım:Yine aynı yöntem ile </body> kodunu buluyoruz ve üzerine aşağıda bulunan kodu yapıştırıyoruz.

<ul id='menusisi'>
<li class='beranda'><a href='http://aerakman.blogspot.com' title='Ana Sayfa'/></li>
<li class='tentang'><a href='http://aerakman.blogspot.com/p/rakman-kimdir.html' title='ærakman Kimdir?'/></li>
<li class='alat'><a href='http://aerakman.blogspot.com/p/rakman-v1.html' title='ærakman v1'/></li>
<li class='rssfeed'><a href='http://feeds2.feedburner.com/aerakmanBlog' title='Abone Ol'/></li>
<li class='kontak'><a href='http://aerakman.blogspot.com/p/iletisim.html' title='İletişim'/></li>
</ul>

Not:
1.Adımdaki Kodlar İle Yükseklik/Genişlik ve Renk Değişimleri Yapabilirsiniz.
2.Adımdaki Kodlar İle Menü de Bulunan İconları Değiştirebilirsiniz.
3.Adımdaki Kodlar İle Menünün Yönlendirdiği Adresleri ve Başlıklarını Değiştirebilirsiniz.