Sunday, October 08, 2006

How to make a scrollable box

A reader of my blog Testing Blogger Beta asked how to make scrollable box or scroll down box (or scroll box, I don't know what exactly to call it). To see what I mean by scrollable box, surf over to this post: Testing adding of Google AdSense search box in Blogger Beta. There are some scroll boxes there in which I had to put some HTML codes, which if done any other way, will cause the sidebar to slide the bottom of the page because it is too wide for the main column width.

One of the way do this is to paste this code in your post editor (there is another way further down the post):

<div style="overflow:auto; height:300px; width:400px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td>Put your stuff here</td>
</tr>
</table>
</div>



Type or paste whatever text or HTML you want in the place where you see "Put your stuff here" (and of course then delete "Put your stuff here" and publish your post).

Note: The width and the height of the box can be changed by changing the numbers in height:300px; width:400px". Note also that there is a large space above the first line of the text. I don't know what is causing this, and am trying to find a solution to it. When I do, I will put an update or redo the post. The trouble is, I am trying to do so many things at the same time. If this is troubling you, do remind me.

UPDATE: 21 November 2007: A blogger provide the solution by putting all the codes in a single line. Read the comments. There is also a second solution. Read another update lower down the post

The reader also ask if that will work for pictures. That is an interesting question. I will have to test it. (This has been done. See post Testing if scroll box works for images. (Click the "back" button to get back to this page).

UPDATE: A reader of this post has commented and given a link to a scroll box generator. For that generator, you will have to enter variables like width of box (important), height, font size, color, etc. I have tried it and it works. But haven't had the time to test it more thoroughly. The generator is at this site: Scrollbox Generator. (Close the new window to get back to this page). The tip is given by Luigi who have made a scroll box here: Trovamiunnome (close new window to get back to this page).

If you surf to that scroll box generator, you will see the variables you will have to select in the screenshot below:

scroll box generator

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

copy from the file, paste it into the post editor, adjust the width: 395px; height: 100px; to suit the occasion and paste the codes I want to display just before the last </div> tag.

To make it clearer, I will put in some text in red where you are supposed to type or paste what you want to appear in the scroll box:

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;">Paste what you want to appear in the scroll box here</div>


UPDATE: 21 November 2007: What I have been doing for a long time is to generate the script once, save it into a Notepad file. Now whenever I need a scroll box, I just open the Notepad file, copy-paste the script into the post editor window, edit the width and height according to what I want (the width will normally depend on the width of the main column, ie., posts while the height will depend on the length of the stuff I put inside the scroll box and/or how high I want the scroll box to be. If you don't know the width of the template you use for your blog, refer to How to find the widths of the blog Header, main column (posts), sidebar of your blog (click BACK button to get back to this page)

Update 27 July 2007: A reader has asked if the scroll box border color can be changed. That is very easily done if you use the scroll box generator mentioned above. If you look at the screenshot, at the last line, you have the choice to chose the border color. You can either "select from chart" or enter a hexadecimal color code for a greater variety of colors. If you chose the last option, the free ColorPic tool will be very handy. Type or copy-paste "colorpic" into the search box above, tick "Web" and search. I believe the site from where you can download the tool will be the first result of the SERP (search engine result page)

RELATED POST:

Scroll box FAQ

NEWER POST    OLDER POST

75 comments:

  1. Anonymous10/11/2006

    Hi Peter,
    Thanks so much for this post and the one placing pics in the scroll (down) box.
    I can't wait to try it out!
    S.

    ReplyDelete
  2. This is a great tool - however, if you go to my blog (http://WestAndCenter.blogspot.com), you'll see the problem I'm having. ANy suggestions?

    ReplyDelete
  3. I don't see any problem except that there is a large space above the first line of the text. This is also seen in the examples in my post. I am trying to find the cause of this and to find a solution to this.

    ReplyDelete
  4. That is the problem I was referring to. I'll keep checking back to see if you find a cause and solution.

    Otherwise, really, an awesome tool. Thanks for it! Saved me a lot of space.

    ReplyDelete
  5. Anonymous10/18/2006

    I googled "scroll box" and found a number of code generators;
    this is the one i tried; the code I got works fine (no large space above first line).
    I only need to add a "float" value to place the box in the centre of my page.

    ReplyDelete
  6. Hi Luigi,

    Thanks for the tip. I will try it when I have the time, and after I do, I will probably update the post and credit it to you.

    ReplyDelete
  7. Anonymous10/20/2006

    I found out that there is no "float: center" option; the scroll box can only be left or right aligned;

    I have used a scroll box in this post of mine; the only control I could use on its placement was ... to size it as close as possible to the same width of the text column I was going to publish.

    Now I hope you can find out there is some trick to center it.

    ReplyDelete
  8. Hi Luigi,

    While making a box for another post, and trying to solve some problem, I did follow your lead, but I selected "left". Haven't tried the rest. Wish I have more time to test, but plenty of files in my "to do" folder waiting for me.

    ReplyDelete
  9. Anonymous10/22/2006

    Hi Peter

    Thank you for your comment in my Italian blog; i have just started updating its English version, which i have not switched to Beta Blogger, yet; you may want to check what i have tried ... to achieve a centering effect for the scroll box: i have inserted "blockquote" tags.
    It's far from perfection but .. not bad for and old beginner ;)
    Ciao, Luigi

    ReplyDelete
  10. Congrats on your success.

    ReplyDelete
  11. Thanks a lot for writing this post!!!

    ReplyDelete
  12. Thank so so so much for that post

    I had been looking for that for more that an hour and I began to feel depressed... and finally... here it was!!

    Thank you so much :)

    ReplyDelete
  13. Hi Peter,
    This scroll bar really helped. I needed to put some icons on a page of mine but they took up to much space. but i put them in this and it took care of the problem. THANKS AGAIN!

    ReplyDelete
  14. Thanks for this! I got rid of some of the space up top by putting the beginning of the code all on one line. Doesn't Blogspot automatically insert a {br} for every time there's a line break? Thanks again!

    ReplyDelete
  15. Hi Armie,

    I am afraid I don't fully understand what you are getting at. Are you complaining that Blogger don't put a new line on a different line when you press the ENTER key when you prepare a post or are you referring to what is being displayed in the scroll box.

    If the first, you will have to go to SETTINGS > FORMATTING and confirm that "Convert line break" have been set to "Yes". Sometimes Blogger changes the setting without us doing anything.

    If you are referring to what is inside the scroll box, all I can say is I am quite happy with the situation as it is. If I want to save space, I adjust the height="H" to a value I am happy with, and if a reader wants to see what is not visible, he/she can use the scroll bar.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  16. I think you meant to say "overflow:scroll". Also, the the person who wants to float center, there is no float:center, but you can do this: "div align="center">content

    ReplyDelete
  17. hi there!

    thanks so much for this information. though, i still have a question as to how to change the border color of the scrollbox? would that be possible?

    ReplyDelete
  18. Hi petjology,

    Please refer to the update at the bottom of the post.

    Peter (Blog*Star 2006 and 2007)
    Blogger for Dummies

    ReplyDelete
  19. Hi peter,
    I am wanting to put a scrollbox in a blog of mine, with the code of an image inside it. But when I simply put the HTML for the image, the image itself appears instead of the code. I have been searching for a long time but I could not find a solution. Could you help me?
    Thanks in advance!

    ReplyDelete
  20. Never mind, I found out already, did some more searching.
    Guess I'm just lazy.
    But is there a way to change the color of the text area?

    ReplyDelete
  21. Hi Danial,

    Glad you found the solution to your first problem. Sorry I was late in approving comments and responding to them. I had to finish a lot of other things first and left approving to later.

    Regarding changing the scroll box area color (text area), if you use the scroll box generator, you have the provision of selecting the color from a palette or using the hexadecimal color code for a wider choice of color. See update in the post. The update is for the border color (I think) but it should be the same for the text area color.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  22. thank youu...very much, your tips and tricks for blogging is very usefull.
    specifically for an scrollbar tips...i try to place in my posting with the solfing of the problem to from http://www.123mycodes.com/scrollbox-generator.php

    thank...may be you want to see my blog
    www.ismailhidayat.blogspot.com

    ReplyDelete
  23. Hi Peter,
    super useful post - thanks!
    Any idea if you can use a scrollable box in the sidebar of a blog (new blogger)? E.g. to place my labels.
    Many thanks!
    S.

    ReplyDelete
  24. Hi Sandra,

    Have a look at Natural Remedies, the right sidebar, second from the top (may change as I add, subtract or move things around later). I put the title as "Scroll down to see topics", but it can be anything you want. If you are interested in getting instruction on how to do it, comment again.

    Peter (Blog*Star)
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  25. Hi Peter,
    thanks for the quick reply. Yup, I'd definitely be very interested in knowing how you did that!

    As for pics, I try to post them all on flickr (accessible from my blog) and you are welcome to use the ones of countries/places you have visited without a digital camera ;-)

    I'm in Vienna right now, but will be back in Geneva next week so will try to take some pics of the lake and the jet d'eau (the "fountain in the lake" as you put it)for you.

    S.

    ReplyDelete
  26. Hi Sandra,

    Thanks for the offer for the digital photos. Mighty grateful, but would need to know your Flickr ID. If you feel uncomfortable doing that, you can either get my email address from PDF book for Blogger Tips and Tricks which is an image, or you can click the "Contact me" link in the sidebar of my major blogs, which will take you direct to the compose mail editor of your email service. I will likely replace that with an image to cut email harvesting, but it is going to make things a bit more difficult as they will have to type the email address themself. This would be easiest if they open a Notepad file, minimise it and while viewing the image, type the email address, copy and paste into the TO in the email message editor.

    Regarding the post, hopefully I can do it before I go to sleep tonight (my time zone GMT+8).

    Peter (Blog*Star)
    What a grateful blogger did for me
    (no one should feel obligated. Everthing completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  27. Hi Peter,
    You can find me on flickr via links from my blog or here
    As for the Creative Commons, I guess strictly speaking you're right, the pics shouldn't be used on a commercial site/blog by a third party, but I think in this case we can make an exception... ;-)
    my creative commons attribution specifies that conditions can be waved if you get permission by the author... and you have.

    ReplyDelete
  28. Hi Peter,
    Thanx for providing tips on making scroll box!
    This is so helpful!
    yea i also having problem with a large space above the first line >,<

    Free do drop by...
    Thanx so much

    ReplyDelete
  29. Btw, i agree with amie by putting the beginning of the code all on one line. The large space above is gone!

    ReplyDelete
  30. Hi Karen,

    Did you read the second method? What I did is use the scroll box generator once, paste the script into Notepad file, save it. Now whenever I need a scroll box, I just open the file, copy-paste into the post editor, depending on the template (ie the width provided for the main column, ie. posts, I change the width, and depending on what I put inside the scroll box and also how high I want the scroll box, I change the height. Now I never visit the scroll box generator site anymore PLUS there is no large space above the stuff I put into the scroll box.

    I have been meaning to update the post to include this. I think I will do it after publishing this comment.

    Peter Blog*Star
    Generating Revenue from your Website

    ReplyDelete
  31. Yea Peter...I did try the second method. It is very convenient to use.
    Even without HTML knowledge also can construct a scroll box!
    Great tool!

    Really appreciate the info you share!

    ReplyDelete
  32. Hi Karen,

    Glad it worked for you but still I would encourage you to learn some basic HTML. If you continue reading my posts, I think you will pick up some. It really is not that difficult and it will help you make better posts and better blogs.

    Peter Blog*Star
    Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks" slotted for conversion to custom domain

    ReplyDelete
  33. Yea Peter...I'm reading the tips currently since my exam was over. I would like to learn more cuz i find out my HTML code quite messy...haha.
    Picking up now! Thank so much for your comment!

    Have a nice day!

    ReplyDelete
  34. Easy to implement, works like a charm, thanks!

    ReplyDelete
  35. Hi Peter, first, thanks for coming on my blogs to respond to my comments!

    I have a question after having tried the scrollbars in different places. One thing that is happening on one of my pages is that the background color code somehow gets converted into RGB when I publish the post. I've fixed it by re-entering the correct values (I just want a standard white background) and it keeps changing it back if ever I go back to re-edit something and ends up as BLACK.

    One thing I need to explain is that there are already quite a few elements on this page and I'll have to keep going back in to add more so fixing the scrollbars every time is already becoming a serious problem. I'm sure it's just a very small thing that maybe I'm not doing correctly.

    Please let me know what you think!

    ReplyDelete
  36. Hi Peter! Your Blogger Tips have helped me enormously in the past, so I'm hoping you can help again.

    Sandra asked if there was a way to add a scroll box in the sidebar and you answered there is, but am I missing your instructions? Does it work the same way as a scroll box in the post?

    I've got a book blog and my sidebar link lists are out of control. The scroll box sounds like it would help a lot- unless you've got another one of your amazing ideas.

    Thank you.
    Bev(QB)

    ReplyDelete
  37. Hi qb,

    There is already a post for Scroll box for Label List and one should be able to adapt the instructions there for scroll box for link list. If not, you will have to ask for step-by-step instructions.

    Peter Blog*Star
    Earn with blogs

    ReplyDelete
  38. Oh this is lovely. I was wondering, however, how I could put all of my entries in a scroll box. I used it on my myspace page (http://www.myspace.com/katelynian) and would like to do someting similar on the blogger. Is there also a way to make my widgets fixed, essentially making the only thing that scrolls are the entries in the box?

    Hopefully this makes sense to you. I can give you an illustration of my layout if that would help.

    ReplyDelete
  39. Hi Katelynian,

    I am assuming you mean the sidebar when you refer to widgets. There is a way to make the background image fixed while you scroll down the page, but to the best of my knowledge, there is no way to make the sidebar fixed. If you find a way, hope you will remember me and point me to that method.

    Peter Blog*Star
    Blogger Dough, a temporary blog for bloggers who want to earn from their blogging efforts until final website ready

    ReplyDelete
  40. For Smiler,

    I can only guess a solution for your problem. Do have a look at Scroll box for putting long URL, large photos, scripts with long unbroken lines, etc. as I may not have a template the same as yours plus I am pressed for time, so cannot put it to test. If you try it, will greatly appreciate some feedback.

    Peter Blog*Star
    Alternatives to Google AdSense

    ReplyDelete
  41. Hi Peter,

    I should have gotten back to you, as I found a solution to my problem. However it's been a while now, so I can't remember how I fixed it. Thanks for the additional links. I'll be sure to refer to them as needed.

    ReplyDelete
  42. thanks for the tip... it worked for me if u have time can check on my blog the results... but cant change the sidebar color on the referred site u give generator... no problem.. i'm happy like that. thankx

    ReplyDelete
  43. Hi Peter,
    I have coded my own scroll box. The problem I am having is now that I have it on my sidebar, all the page elements I add that are links, are the same color as I have the links coded in the scrollbox. How can I correct this?

    ReplyDelete
  44. Hi Peter!
    I've been reading your blog eversince..It sure is very helpful.......anyways,can you help me with a problem? i placed
    a scrollbox with the code of an image inside it. The image itself appears instead of the code.....what should i do?
    Many thanks

    ReplyDelete
  45. Hi Mae Fortuna,

    Refer to HTML codes for special characters.

    Briefly, instead of typing < or >, replace it with the HTML codes for these 2 special characters instead. Easiest done with Notepad, Edit > replace.

    Peter Chen Blog*Star
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  46. Hi Peter!
    Thanks a lot to take your time for helping desperate bloggers :)
    I also wondered how to create a scrollable box not in the field where the posts appear, but rather where you can open my profile etc. (I mean, where you can add gadgets when you go to "layout - page elements").
    Is it possible to make scrollable bos there? At least when I search for "scrollable box" in the gadgets window, it appears that someone made it: it shows the being five comics in a scrollable box...
    how did he do it? that's exactly what I want for my blog...
    thanks for helping! :)
    clemens

    ReplyDelete
  47. Hi Clemens,

    Do you have the URL of the blog where you saw it?

    ReplyDelete
  48. Hey peter,
    well, as I said, you have to go to "customize" and add a new gadget. to see how this works you'd probably have to add it on you own page, than click into the graphic to enlarge it which makes it to big for the box and which will cause the scroll bar to appear...
    hear is a link anyway:
    http://www.blogger.com/rearrange?blogID=8987917728656995530&sectionId=sidebar&action=editWidget&widgetType=Gadget&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F115093700817327742995%2Fbeingfive.xml&referrer=directory
    I'm looking forward to your findings :)
    btw, the box I'm writing this comment in at this very moment would be perfect if I had it on my page :)

    ReplyDelete
  49. sorry, just saw, that you were asking for the page of the guy who created the gadget:
    http://beingfive.blogspot.com

    ReplyDelete
  50. Just put blogroll inside scroll box and edit the width of scroll box to fit the width of sidebar.

    ReplyDelete
  51. when I try to add a scroll box I get a scroll box within a scroll box. WHY???

    ReplyDelete
  52. I do not know what you did. You will have to explain in detail step by step what you did to enable us to see where you went wrong. Explain also what you are trying to achieve.

    ReplyDelete
  53. I copy and pasted your code and adjusted the width to 130px and height to 40px....plus I kept playing around with different numbers but tii got the same result. You can see the scroll box HERE. If you can, please tell me how to fix this.

    ReplyDelete
  54. I do not know exactly what you did Blessed Mom, but I suspect what you have done is encoded the HTML tag before putting them into the scroll box. If you want your links to be active, do not encode them.

    ReplyDelete
  55. I'm trying to change the default settings of my scrollbar on my blog. In other words, I want to change the color of my Internet Explorer scrollbar, so that when people visit my blog, the scrollbar will be colored; you know like they have on Myspace. What html tags or CSS would I use in order to change the scrollbar of my entire page not for just a table within my page?

    ReplyDelete
  56. I followed your directions and made a wonderful scrollbox. However, I have 2 problems one is that there is an arrow to go right to left but not up and down on the side. Do you know how to fix this? The other is that when I put "my stuff" in the "put your stuff here" section instead of reading as text, it shows the picture of the html I'm referring to. Does that make sense? If you could help that would be awesome!

    ReplyDelete
  57. If the length (height) of the scroll box is more than sufficient to display all, then there will be no vertical scroll bar. A vertical scroll bar will only occur when what you put in is longer the height of the scroll box. You can change the height of the scroll box by editing the code.
    ============================
    when I put "my stuff" in the "put your stuff here" section instead of reading as text, it shows the picture of the html I'm referring to.
    ============================
    Are you trying to display the HTML for displaying an image? If so, you will have to refer to How to display special characters

    ReplyDelete
  58. can the blog direction be changed. Right now i have it in my side column and instead of scrolling up and down, its scrolling side to side...is this an easy fix?
    please email me
    mjf926 at gmail dot com
    thanks!

    ReplyDelete
  59. Blog direction? What is that? You mean what happen when you click on the vertical scroll bar on the right side of the screen? And that is causing the display to scroll left-right direction? Is so that is strange behaviour. You need to call in Ghost Buster.

    ReplyDelete
  60. Oh about emailing. You would do better subscribing to email follow-up comments

    ReplyDelete
  61. Dear friend,
    i did try scrollable post. i want to put some HTML code then i use not work come error like this how i fix please help me

    ERROR
    Your HTML cannot be accepted: Tag is not allowed:

    ReplyDelete
  62. it is very useful for me... thanks for your information...

    http://chillapple.blogspot.com

    ReplyDelete
  63. How do you make a box that does'nt scroll? How do you make two columns of text in one box? --> Does it work with pictures?

    ReplyDelete
  64. Yes it works with images. See Testing to see if scroll box works for images.

    "How do you make a box that does'nt scroll"

    Sorry please elaborate. Perhaps you are referring to the fact that when one of the side content does not exceed the scroll box width/height, there will be no scroll bar.

    ReplyDelete
  65. hey how can you make a scroll box, with pictures and the pictures have there own urls? I want to make a scroll box with "buttons" (pictures that advertise other sites and when you click on them they take you to that site) but I can't find any program or HTML to do this with! I see other sites with it, so do you know what I'm talking about???????????

    ReplyDelete
  66. Since you are already in this post, assume you know how to put stuff in a scroll box. I have shown that it is possible to put pictures in scroll box with an example at Testing pictures in scroll box

    The next step is to learn How to make clickable pictures

    ReplyDelete
  67. Thank you so much for help. It helped tremendously! I knew I needed something, but I couldn't figure out the exact code.

    kristen @ alltheproofineed.blogspot.com

    ReplyDelete
  68. i replaced td with tr to make it horizontal :)

    Greetings from http://picxy.blogspot.com

    ReplyDelete
  69. Thanks for Sharing very useful information

    Thanks,
    Wiki
    http://infodirectory.blogspot.com/
    www.wikiconsole.com

    ReplyDelete
  70. thank you!!!!

    http://ourunexpectedmoments.blogspot.com/

    ReplyDelete
  71. I am really search for this type of post which is really help full for me in my blog work.thaks

    ReplyDelete
  72. thanks peter for giving such a wonderful information.download

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics