Sliding Sidebar Widget ( Hack ) For Blogger

From gosublogger

Hi! I have good news to tell you nice people , i have found how to add sliding sidebar menu to blogger xml templates , I'm sure you're going to boost your ads and referral income with this amazing blogger widget , you know what to do , click Read More button to read rest of this article!

Check Demo of This blogger widget ( look right sidebar of template )

Before telling you how to use this blogger widget i want to tell what can you do with this blogger widget :

• You can put a referral images to get revenue from your visitors.
• You can add image or text ads.
• You can add page elements.

Features of Widget :

• Can be added to right or left side of your template
  
• It slides down as your visitors scroll down their mouse
• Can easily be added to blogger xml templates

Adding Widget :

• Go to Edit HTML from your blogger dashboard
• Leave widgets NOT expanded
• And add the codes shown in red like this :

.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
position: absolute;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}


]]></b:skin>

<script src='http://goasou.googlepages.com/smenu.js' type='text/javascript'/>

</head>

Adding Sidebar Div :

• Now add the codes shown in red like this :
• If you want to show sliding bar on left change the "right" text in blue , to left.
  

<div class='wireframemenu' id='staticmenu' style='right: 10px; top: 20px'> <b:section id='slidingbar' showaddelement='yes'/> </div>
</body>
</html>

Result :

Do not forget to subscribe for latest articles!