Scroll Bar for Blog Post Body

Adding Scrollbar to Blog Post body
once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in red:-

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;
Set 2 : Search for .post ( by browser Search) and Put the Red Portion in Curly Bracket. { }

.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 [...]

This will give you scrollbars to every post:-

Scrollbars within Blog Post

This setting, scrollbars will automatically appear according to your need:-
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

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;
Set 2 : Search for by Browser search place the below code before it.

.scrollbox {

height:100px;

width:400px;

overflow:auto;

}
Step 3: Save the template.

Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode and put the below code where your want to appear scrolling bar.


<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:-

0 comments: