USEFUL TRICKS- InVaDeR: HOW TO ADD SCROLL-BARS TO BLOG POST

Although many of us are very much aware about the read more button to make the post to virtually shrink but if you want to show the whole post on the same page without increasing the page height then the first thing comes is scroll bars. In this tutorial you will get to know how to place all post under scroll bars automatically.

FOLLOW THE BELOW MENTIONED STEPS:

Log into Blogger account

Go to Template -> Edit HTML and scroll to this code.

Add the portion shown in red:

.post {
height:200px;
overflow:auto;
}

This will give you scroll-bars to every post:-

Scroll-bars within Blog Post:
Sometimes, you may not want to have the scroll-bars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scroll-box, you have to first define a class within the style-sheet.

For example, we can insert in the style-sheet this code to specify the maximum height and width of the scroll-box. Once the text overflows this setting, scroll-bars will automatically appear:-

.scrollbox {
height:100px;
width:400px;
overflow:auto;
}

Save the template. Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode.

Add these tags (shown in red) before and after the part of the text that you want to enclose within the scrollbox.

<div class="scrollbox">TEXT TO BE INCLUDED IN THE SCROLLBOX.</div>

You can continue typing the post by switching back to the “Compose” mode.

After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scroll-box, like this:-