Article | Add Scrollbars to Blog Posts

If you have followed our main article Add Scrollbars to Blog Widgets, you would be able to introduce horizontal and vertical scrollbars to all or any of the widgets in the Blogger template. These scrollbars can be made to automatically appear when the contents overflow a certain specified width or height setting. We have also talked about how scrollbars can be added to the Blog Post body. We shall in this tutorial elaborate on that and let you know how to add the scrollbars within each Blog Post.



Scrollbars to Blog Post body



As we had mentioned in our article, to have the scrollbars to each of the blog posts, once you are logged 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 scrollbars to every post:-







Scrollbars within Blog Post



Sometimes, you may not want to have the scrollbars 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 scrollbox, you have to first define a class within the stylesheet.



For example, we can insert in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows this setting, scrollbars 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 scrollbox, like this:-







Adjust the size of the scrollbox in the stylesheet accordingly. You can also consider having a HTML text box to enclose certain text.

Loading...