How To Add Scrollbar To Your Blog Post On Blogger

You may have been seeing some blog post in other blogs or even here with scrollbars besides them. In this post i shall elaborate on and let you know how to add the scrollbars within each blog post. The scrollbars can be made to automatically appear when the content overflow a certain specified width or height settings.

This is so easy and its a self-explanatory article, this is divided into two part as bellow, which i shall break into the two one after the other.

1. Adding Scrollbars To Blog Post Body
2. Adding Scrollbars Within Your Blog Post

Adding Scrollbars To Blog Post Body

As we have mention in our article, to add the scrollbars to each of the blog posts

1. Login to your Blogger Account

2. Go to Design/Layout/Template

3. Click Edit HTML and check Expand widget template.

4. Press CTRL+F and search for .post{ and immediately after that code add the following code.
height:400px; overflow:auto;
and will now look like bellow
.post{height:400px; overflow:auto;

5. Now save changes and preview your blog.

This add scrollbar to your entire post body.

How To Add Scrollbar Within Blog Post

Concerning the above scrollbar on all over your post body you may not want to have the scrollbars in all the blog posts, but only for several paragraph within a post.

Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylsheet.

Once the text overflows this settings, scrollbars will automatically appear.

1. Go to Design/Layout/Template

2. Click Edit HTML and check Expand widget template.

3. Press CTRL+F and search for ]] and right above it add the following code.
.scrollbox {height:200px; width:400; overflow:auto;}

4. Save the template.

Now when you are writing a new post, just add the bellow piece of tag before and after the part of the text that you want to enclose withing the scrollbox.

< d i v c l a s s = " s c r o l l b o x " > YOUR TEXT HERE < / d i v >

After you’re done, publish your post and check the post and you’ll see that only the part of the text comprised with the tag will be in a scrrollbox.

Note: You can Adjust the size of the scrollbox(height) in the stylsheet accordingly. You can also also consider having HTML text box to enclose certain text which will be published soon.