How to: Create a Scroll Bar

Wednesday, September 16, 2009

Due to insistent public demands heheh Here's the how to as promised, just don't forget to link back :)To save space on our blog page, here's how to create a scroll bar to any of your links or images:

REMINDER: Before you edit your template make sure you have your previous template saved so incase something ugly happens after applying this changes, you can revert back to your previous working template :)

  • First, login to your Blogger account, go to Layout, then Edit HTML. Check the box that states

  • Now look for the part where you wanted to have a scroll bar on, for example mine is on Labels and I have it named as "Got Blogs On..". So I just do a ctrl-f for "blogs" and look for that html portion.

<b:widget id='Label1' locked='false' title='Got blogs on..' type='Label'>

  • Now below that, you will find a code similar to this:

 <div class='label-list-container' expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;' expr:id='data:widget.instanceId + &quot;_container&quot;'>

  • Look on that div class, look for the last " or ' before the > sign. I have that highlighted in red in the example above.
  • Then insert the following code right before the > :

style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll;width:220px;height:400px;'

  • To give you an idea on how to change the values, here's a brief description of each attributes:
    • overflow: auto this allows you to add as many list as you can
    • overflow-x: no setting it to no won't give you a scroll bar at the bottom while setting it to scroll will. (horizontal scroll bar)
    • overflow-y: scroll this is for vertical scroll. 
    • width:220px you need to make sure this isn't more than the settings of your sidebar
    • height:400px this depends on you :)
Hope I have explained it clearly. In case you still have questions, feel free to leave a comment. Don't forget to link back if it works for you :)

6 lovely thoughts on this:

Anonymous,  September 16, 2009 at 11:23 AM  

hi marice! sorry didn't mean to spam, nagkaproblema kasi ako sa pagpost ng previews comment ko. na post ba sha? anyway, in case not, i was just trying to comment sana that i also saw another way to do it:

textarea rows="10" cols="10"

just put the sign "<" before "textarea" and "/textarea" and the sign ">" after "10" and "/textarea".

i saw it in this site: after i googled it, before ko nakita ang post mo. hehehe.

nway, you've done a great job here in your blog! keep it up!! :)

Marice September 16, 2009 at 9:36 PM  

no prob sissy :) yup actually there are lots of ways to do it.. i just matched it and share the one that i used :)

goodluck on pimping your blog!

rjs mama September 16, 2009 at 10:52 PM  

hi sis! thanks for sharing :) can i post this on my blog and add a link to your main page and this post (para 2 backlinks mo)

seth November 27, 2009 at 7:14 PM  

sis d ko talaga sya magawa palaging error...eto yung lumalabas na error

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "b:if" must be followed by either attribute specifications, ">" or "/>".

anu ba ibig sabihin nito? sorry ha...ignorant kasi..:-)


vivapinay March 25, 2010 at 11:36 AM  

Thanks for sharing sis.. will apply your tips soon in my blog!

Post a Comment

Thanks for leaving some love :) and for not spamming ;) Muahugzzzz!

Related Posts with Thumbnails

Thanks for Visiting :)

Link/Badges Collections

About Me

My photo
Alabang, Philippines
The Sexy Wife of Chichi, a Loving Mom of our little tot and a certified Super GirlTalker! Thanks all for dropping by and leaving some love! Please don't forget to FOLLOW me, its on my sidebar. And to those who already followed me, I'll definitely return the favor :) If ever I failed, please don't hesitate to grab my attention. I prolly just missed it. Thanks again! Smooches to all! Don't forget to leave me some love when you drop by :)

Awards That Were Shared to Me

Get your own free Blogoversary button!

Thanks For Visiting Guys!

  © Blogger template On The Road by 2009

Back to TOP