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 scroll boxes

Interested?
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.
   </div>
   
   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 apply	CSS 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 colour	background-color: pink;
Text colour	color: maroon;
Font family	font-family: arial;
Font size	font-size: 12px;
Text align	text-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