अपने ब्लॉग के लिये फिसलने वाला साइड मेनू बार कैसे तैयार करें ?

क्या आप कभी अपने ब्लॉग या साइट के लिए एक फिसलने वाला साइड मेनू बार की सुविधा चाहते थे ? यदि हाँ तो अब आपकी ये फरमाइश अब पूरी हो सकती है , आज मैं इसी विषय पे बताने जा रहा हू कि आपको करना क्या है

 अपने ब्लॉगर खाते में लॉग ऑन करें और अपने डैशबोर्ड पृष्ठ पर, 'लेआउट' चुने  ,
 अब  'एक गैजेट जोड़ें' पर क्लिक करें , अब गैजेट  की सूची पर, 'एचटीएमएल / जावास्क्रिप्ट' चुनें. .

अब नीचे दिए गए कोड को कॉपी करें........

कोड ---><script src="http://dl.dropboxusercontent.com/s/dxv8pj5mvc74vyw/prototype.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/wvyae56sr0hic2n/effects.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/8t6uvuz6r1xzpnz/side-bar.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
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 5px 5px 10px;
padding: 0 0 0 10px;
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:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXxqmp8iOPb0GyeJxEvWxRjJ502JDMZgOrraquiSs6ZMXBvaRM56I4r730zE4NoXCaBShnzK7FQVHIRshOlt_N_3F8G4tvJ_PEvtZNpoksyHVyfMV0H5GG1OHod7l-gx8iKaqC9htBkIE/s320/left.collapse.border.png);
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>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCFkCJeadreioB5pLB5HQlA3rE5ZFZtOODAJuSCHFTcmZVFlAjW82TBAOc-MjB_SrV7clsOL1xNZ_tBmEqFJHkkWyyWwFyo_qpvRhEA9pC6wHp1zzGUD-D2qMGgjsYQyQVh-ZTdmobnavR/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

 और जहाँ " content " लिखा है उस खाली बाक्स में पेस्ट कर दे......

याद रखें--->  ( जहाँ कोड में Link One Link Two Link Three Link Four  लिखा है उसको हटा कर अपना लिंक्स लिखें )

ध्यान रहे--->  (अब आपका  'फिसलने वाला साइड मेनू गैजेट तैयार है 

अपने नए गैजेट को बचाने के लिए SAVE पे क्लिक करना ना भूलें ) अब अपने ब्लॉग का पूर्वावलोकन देखें . अब आपका फिसलने वाला साइड मेनू ' बॉक्स तैयार है !

ये कई वेबसाइट और ब्लोगों के गहन अध्यन के बाद ही , ये तरीका पेश किया गया है , इसके लिए हम 24work वालों को धन्यवाद देते है
  

मित्रों ये जानकारी आपको हिंदी में कैसी लगी , कमेन्ट जरूर करें !