साल 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>

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

3 comments:

  1. बेहद खूबसूरत विजेट । आभार ।
    लगाया है । पर डिस्प्ले होकर लेबल्स नहीं दिख रहे । फिक्स है केवल !

    ReplyDelete
  2. हिमांशु जी
    लिंक आपको लगाने होंगे नीले और हरे रंग की जगह पर
    कुछ इस तरह से
    <li><a href="http://computerlife2.blogspot.com">Hindi Tech Blog</a></li>
    इससे आपकी समस्या दूर हो जाएगी

    ReplyDelete
  3. बेहद खूबसूरत विजेट । आभार ।
    लगाया है । पर डिस्प्ले होकर लेबल्स नहीं दिख रहे । फिक्स है केवल !

    ReplyDelete

पिछले लेख ..

Powered by Blogger.

इस ब्लॉग में ढूँढें

लोगो आपके ब्लॉग पर

ये ब्लॉग पसंद आया तो इसे अपने ब्लॉग का हिस्सा बनाइये ये लोगो अपने ब्लॉग पर लगाकर. Hindi Tech

परिवहन

counter

संकलक

www.hamarivani.com

जो ये कोशिश पसंद करते हैं

मेरा कोना

About Me

My Photo
खरोरा, रायपुर, छत्तीसगढ़, India
बस एक कोशिश है जो थोडी बहुत जानकारियां मुझे है चाहता हूँ की आप सभी के साथ बांटी जाए। आप मुझे मेल भी कर सकते है hinditechblog(a)gmail.com पर .

Google Badge

;