Hindi Tech - तकनीक हिंदी में

साल 2009 के आखिरी दिन पर एक खुबसूरत स्लाईडिंग साइडबार विजेट आपके ब्लॉग के लिए ।

इसमें आप अपनी पसंद के लिंक लगा सकते है जैसे अपने लेबल या किसी पोस्ट के लिंक ।



इसे अपने ब्लॉग में लगाने के लिए

ब्लॉगर अकाउंट में लोग इन करें

लेआउट पर क्लिक करें page element पर जायें

Add a Gadget पर क्लिक कर HTML/JavaScript चुने

अब नीचे दिया गया कोड उस बॉक्स में पेस्ट कर सेव कर दें

<script src="http://www.mydatanest.com/files/compu/42972_b9uss/prototypeN.js" type="text/javascript"></script>
<script src="http://www.mydatanest.com/files/compu/42971_ow318/effectsN.js" type="text/javascript"></script>
<script src="http://www.mydatanest.com/files/compu/42973_3mfec/side-barN.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://i49.tinypic.com/121abrq.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>side<span>bar</span></h2>

<ul>
<li><a href="http://www.yourlink.com">Link Ka Naam</a></li>
<li><a href="http://www.yourlink.com">Link Ka Naam</a></li>
<li><a href="http://www.yourlink.com">Link Ka Naam</a></li>
<li><a href="http://www.yourlink.com">Link Ka Naam</a></li>
<li><a href="http://www.yourlink.com">Link Ka Naam</a></li>

</ul>

</div>
</div>

<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>

</div>





ध्यान रखें की
नीले रंग से दिए लिंक की जगह पर अपने ब्लॉग का पता लगाये
( जैसे मेरे लेबल वालपेपर का लिंक है http://computerlife2.blogspot.com/search/label/%E0%A4%B5%E0%A4%BE%E0%A4%B2%E0%A4%AA%E0%A5%87%E0%A4%AA%E0%A4%B0 )
और हरे रंग पर दिए लिंक के नाम के स्थान पर अपने लेबल का नाम जैसे वालपेपर लिख दें ।

लिंक आपको लगाने होंगे नीले और हरे रंग की जगह पर
कुछ इस तरह से

<li><a href="http://computerlife2.blogspot.com">Hindi Tech Blog</a></li>

सेव करें और आपका विजेट तैयार है ।