Create HTML Scroll Box on Blogger for Post

We are going to learn How we can create different type of HTML Scroll box for our blogger's post. 

Why need it ? - If you are blogger and if you want to show some kind of script code to your readers then this is very useful for you. 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.

Different Type of HTML Scroll Box Code:

1. Most Simple Scroll Box Code :

<!-- Codes by geekyshows.com -->
<center><div style="text-align:left;width:150px;height:150px;overflow:scroll;padding:5px;">
WRITE YOUR TEXT HERE. 
</div>
</center>

How to Do :
A. First of all Copy the above code then Create a New Post. Click on HTML then Paste the above code

(Click on image for large view)

B. Click on Compose and Edit the Text as per your requirement 

(Click on Image for large view)

Editing The Code :

text-align:left - Your text will be start from left side. You can change it in center and right.

width:150px - If you want to change width of your scroll box just replace size of width as per your requirement. For Example width:400px

height:150px - If you want to change height of your scroll box just replace size of height as per your requirement. For Example height:300px

overflow:scroll - To tell the browser to add scrollbars to the box.

Changing Text - You can change your Text style color etc by using your blogger toolbar.

2. Auto Scrollbars - In the above example we used overflow:scroll to add scrollbars to the box. Another option is to use overflow:auto.

By using overflow:auto, the box will only grow scrollbars if the contents are too big to fit inside. In other words, scrollbars will only appear when they're needed.

Code A : Small line of Text so you will unable to see scrollbar with output 

<!-- Codes by geekyshows.com -->
<center>
<div style="text-align:left;width:250px;height:150px;overflow:auto;padding:5px;">
One small line of text by geekyshow. 
</div>
</center>

How to Do : Method is same as I have explained in 1st code
Output : This is our output as you can see there is no scrollbar because we have small line of text.

Code B : More Text of lines so this we will create a scrollbar automatically. see the output 

<!-- Codes by geekyshows.com -->
<center>
<div style="text-align:left;width:150px;height:50px;overflow:auto;padding:5px;">
This contains more text of line than the previous one. Because there's too much text to fit into the box, the box grows scrollbars. by geekyshow. 
</div>
</center>

How to Do : Method is same as I have explained in 1st code
Output : This is our output as you can see there is scrollbar because we have more line of text.

3. Scroll Box With color and border 

Code :

<!-- Codes by geekyshows.com -->
<center>
<div style="text-align:left;width:300px;height:150px;overflow:scroll;padding:5px;background-color:#FCFADD;color:#714D03;border:4px double #DEBB07;">
WRITE YOUR TEXT HERE BY GEEKYSHOWS. 
</div>
</center>

How to Do : Method is same as I have explained in 1st code
Output : This is our scroll box with color and border.

Editing Code :

background-color:#FCFADD - If you want to change your background color simply replace #FCFADD code with your own color code. For more color code Click Here

color:#714D03 - If you want to change Text color simply replace #714D03 with your own color code. 

border:4px double #DEBB07 - You can resize your border.

Like it ? Share it.