"Keep learning ~~ keep smiling ~~ keep sharing"     

Wednesday, September 1, 2010

Create easy HTML Scroll Box on Blogger

When I wanted to do a tutorial on how to install a related posts widget for Blogger recently, I was forced into learning how to create a scroll box to contain the exceptionally long script codes. And, mighty glad about that because I managed to learn how to make a scroll box and much more in the process, and get to document and share it here for the benefit of others as well!

Scroll box is very handy when you have a lot of data or text but limited space to display them. Besides text, the scroll box can contain images and HTML codes too! And, it's so easy to create one that can be located within your blog post or pages and even at the sidebar, footer or below a header for announcement and the like! It helps to save valuable space in your blog, giving a professional touch too!

2 examples of HTML scroll boxes
2 examples of scroll boxes

Just follow these easy steps on
how-to create a scroll box :
  1. To make one, you just need to use simple HTML code (highlighted in orange) to enclose your text as follows :

    <div style="height: 100px; width: 350px; overflow: auto;">PLACE YOUR TEXT HERE</div>

    The values of the height and width of the scroll box can be changed to fit your needs. So adjust them accordingly.

    Go on, try scrolling to see the rest of the content!

    Here's to demonstrate how the simple HTML codes were placed to generate this scroll box:

    <div style="height: 150px; overflow: auto; width: 300px;">
    Place the text or your content between the div tags as shown here. And this scroll box is the result with the default alignment to the left and the font will follow that where the scroll box is placed.

    Tips: Take note that the scroll bar will automatically show, only when the contents within the box exceed the settings of the width and height, not otherwise. And, the scroll box can contain images as well. So, just type in (or copy and paste) the HTML of the image that you want included.

  2. By default, the scroll box will be aligned to the left. If you wish to place the entire scroll box in the center, just add the 'center' tags to enclose the scroll box 'div' tags as follows:

    <center><div style="......</div></center>

  3. That's all to it! Fast and easy, right?
Nevertheless, if you want to restyle or change the appearance of the scroll box and its contents within, just include the related CSS property, such as these variables below :

Changes you may want to applyCSS codes to add are highlighted in orange.
The px value, color, etc. that is bold-faced below can be changed as desired. For color, use either the name or hex value.

(Know more about CSS color names/hex from W3Schools)
Add a coloured border around the scroll box border: 1px solid darkblue;
Add background colourbackground-color: pink;
Text colourcolor: maroon;
Font familyfont-family: arial;
Font sizefont-size: 12px;
Text aligntext-align: center;
Add space around the text/content inside the border padding: 4px;
To position the entire scroll box position: relative; left: 50px;
(Relative positioning moves it relative to its original left position. The higher the value, the further away from the left the box will move)

Here's an example to show how the HTML was configured to create a modified scroll box, using the codes in orange below : <div style="background-color: #efd9f8; border: 2px solid darkmagenta; color: mediumblue; font-family: 'lucida handwriting', cursive; font-size: 12px; text-align: center; height: 100px; overflow: auto; padding: 4px; width: 350px; position: relative; left: 60px;">TEXT HERE</div>

and ta da...the result!

Inspirational Quotes "The secret of health for both mind and body is not to mourn for the past, not to worry about the future, or not to anticipate troubles, but to live in the present moment wisely and earnestly." Buddha "Quotations help us remember the simple yet profound truths that give life perspective and meaning. When it comes to life's most important lessons, we can all use gentle reminders." Chriswell Freeman

Easy, huh? Why not try to create your own stylish scroll box for your blog right now!

Keep learning~~keep smiling~~keep sharing!!

Update: Sept. 5 2010 Next, learn how to place HTML code in a scroll box e.g. image code for a blog's button!

Last edit: April 20 2013


  1. hi Jacqs:
    Probably related to this post , I would like to ask a favour of you- I have 2 events currently running on my blog and I would like to run a horizontal scroller (not a scroll box, but arunning text like a display board ) at the foot of the Blog header to make it more prominent. I also want to make it dynamic enough that when I complete an event, the scroller should be 'delete'able :)

  2. Hi Mom Chef! Why not just add a text or html/javascript gadget below your header, to announce your event in large-sized text and include a link to a post specially written to elaborate further the details of the event. One gadget for each event and just remove it when it's over. Should your text be long, I'm suggesting a scroll box with width increased to fit horizontally across the page as well as to accommodate the message.

  3. Any slow problem after adding this code.

  4. hi,
    i want to know how adda option to copy the text for users in the code box

  5. Hi Arshia! Sorry, I'm somewhat unclear on what you want. However, you may want to check 2 other articles related to scroll box as follows:

    Probably the above may help you.

  6. Hi Jacqs, On the example it show not only vertical scroll but also Horizontal scroll

    1. Yes, Lucas! You just need to play around with the px value, that is, decrease the width and increase the height if you want a vertical scroll and vice versa for a horizontal one.

  7. Hi Jacs, I 'm John.., how to place the box in center? not in left post...

    1. Hi John! To position the scroll box in the center, just enclose the scroll box codes with the 'center' tags. I've updated my tutorial above to include the example at step 2.
      Hope this helps.

  8. BRILLIANT!!! Thank you for posting this article :)

  9. Hello here,I am permanently exploring online for articles that can benefit me, and I am seriously benefited by this article! Best regards and gratefulness for the article writer.
    website design

  10. Hi there, one of my codes had worked successfully, but the other one (the search bar under Codes) became displayed the actual thing, instead of the code for that thing. Can you help?


Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search