Monday 24 September 2012

How to add Scrollbar within the Blogger Post contents

Sometimes your blog post contents or text gets too long and you wants to add some blog post paragraphs or certain lines of text into the ScrollBox. If you add the text in scrollbox, it improves the appearance of your blog post page length.

Look at the screenshot below for actual scrollbox within the post contents - 
Or Click on image to see the live example. 

BlogSpotHelp4u - ScrollBox
If your blog post contains long text and you want to add scrollbar then follow below steps –

1)       Log in into the blogger account.
2)       Go to you desired blog listed in 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 –

/* Comments

7)       Just above it, paste following stylesheet code –

.blogspotHelp4u_ScrollBox {
height:400px;
width:480px;
overflow:auto;
}

Note: You can change the height and width of scrollbox by modifying the bolded px value in above code.

8)       Save the Template by clicking Save Template button.
9)       Now, the next step is to add actual post contents in ScrollBox. Create a new blog post or open existing post contents.
10)   Click on HTML button. Your blog post text will be displayed in HTML format.
11)   Now find the place where you want add the ScrollBox. Paste following code before the start of the contents that you want to display in ScrollBox. -

<div class="blogspotHelp4u_ScrollBox">

12)   At the end of the post contents that you want to display in ScrollBox, paste following code. –

</div>

13)   That’s all. You have added the ScrollBox successfully in blog post. Now open your blog post and check the scrollbox appearing or not.

If you want to adjust the height and width of the ScrollBox just go to step 7 and change the height and width values as per your requirement.