Bloguna tiklaninca beliren menu ekle

Uzun zaman oldu blog icin eklenti paylasmadigim..bilgisayarimi temizleyip biraz hafifleteyim derken klasorlerde duran notlar ve eklentiler arasinda bu guzel eklentiye denk geldim..bugun bunu paylasamak istedim :)
Fazla yer tutmayan menumuzu toparlayi daha hos bir goruntuye sebep olacagini dusunuyorum..eklemesi de kolay uygulamasi da kullanimi da..

Canli olarak gormek icin tiklayin:CANLI GOR-DEMO
peki nasil yapacagiz?..

Bismillah..

Kumanda paneli<Yerlesim>GADGET EKLE diyelim karsimiza cikan pencereden HTML/Javascript'i sectikten sonra asagidaki kodun tumunu icine yapistiralim dostlar..

<script src="https://sites.google.com/site/everythingaboutblogging/Home/prototype.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/everythingaboutblogging/Home/effects.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/everythingaboutblogging/Home/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://i36.tinypic.com/2wejg37.jpg);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2><div style="text-align: justify;"><span style="font-family:verdana;">Useful Links</span>
</div></h2>
<ul>
<li><a href="#">LINKINIZ 1</a></li>
<li><a href="#">LINKINIZ 2</a></li>
<li><a href="#">LINKINIZ 3</a></li>
<li><a href="#">LINKINIZ 4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i38.tinypic.com/260g2g9.gif" title="sideBar"/></a>
</div>

Kodun son satirlarinda  "#"  isaretine eklemek istediginiz link-adresi,LINKINIZ kisimlarina menunuzde yer almasini istediginiz linkin adini ekleyebilirsiniz..

Bu tur eklentilerin nasil eklendigini gorsel olarak ogrenmek isteyenler asagidaki linke tiklayabilirler..

Gadget/Eklenti Nasil Eklenir

Sevgilerimle..

..