Sliding Sidebar Widget ( Hack ) For Blogger

This item was filled under [ News ]

Hi! I have good news to tell you nice people , i have found how to add sliding sidebar menu to blogger xml templates , im 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 :


Demo :

Do not forget to subscribe for latest articles!

Be Sociable, Share!
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Comments on “Sliding Sidebar Widget ( Hack ) For Blogger”

  • Ladyheart
    8 June, 2008, 12:27

    hum… sorry. but I can’t see any sliding items? huhu.

  • Gosu
    8 June, 2008, 12:36

    because the bandwidth exceed , the poll on the right slides down

  • 7 March, 2009, 15:00

    cheers for the fantastic tutorial. spot on…just what the doctor ordered.

  • Mar
    1 June, 2009, 18:01

    can you please clarify exactly where do I need to paste the red code, after which part of the code? also what relevance does the rest of the code that you haven’t highlighted in red, do I copy it too or not. It just doesn’t work so , don’t know if I’m putting it in the right place.Tnx

  • 19 December, 2009, 12:00

    Hi bro… i dont see any scrolling sidebars in the demo…. why so??

Leave a Comment