Add Scrollbar within Blogger Post
Scrollbar for blogger posts is an important feature of your Blog and helps you out when your blog post contents or text gets too long. I came across the problem when i was writing a post for my Blog and had to display some HTML code in the post.The HTML code was a bit lengthy and was eating up lots of my post height area.So i decided to add a scroll bar for the code and this way my post looked more logical and understandable.
 |
Adding scrollbar to your blog post is very simple.Just you have to follow two steps.
- Add few lines of HTML code in Template–>HTML code
- Add two lines of code in your POST for the text you want to display in scrollbars
1. Log in your blogger account.
2. Go to dashboard.
3. Now Click on Template which is in left pane.
4. Click on Edit HTML.
5. Click on Proceed.
6. Now find below code (clicking in HTML code area and press control+F and type in /* comments):
/* Comments
7. Just above it, paste following code:
.pakcreative_ScrollBox {
height:400px;
width:480px;
overflow:auto;
}
8. You can changed the width and height parameters to the desired ones
9. Save the template.
10. Now you have to add scroll bar to your post.So compose a new post or select already posted post by clicking edit..There are two options in the upper left corner for a post one is compose and other is HTML.Select the HTML tab.
10. Now put the following code at start and end of the text which you want to be displayed in the scrollbars.
11. At the start point
12. At the End point
13. That’s all now your desired text will be displayed in scrollbars.
14. if you have problems in finding the start and end points of your text where you want to put the above mentioned code in HTML format. You first select the compose format.Copy the starting line you want to put in scroll bar.Then go to HTML format.press control+F.Pate the copied line in it. This way you will be directed to the first line you want to start the scroll bar in HTML format. Just put the code as shown at Point 11 above the highlighted line. Do the same for the end line.
Note.
You can add additional attributes to the above code like you can change the font and back ground color or even display background image in the scrollbar.Your main code for template is
.pakcreative_ScrollBox {
height:400px;
width:480px;
background-color:#67F152;
overflow:auto;
}