Header Ads

How to add Scrollbars within Blogger Blog Posts


If you have several paragraphs within the blogger post that need  to show inside a scrollbox.Here is a little trick to insert a scrollbar with in blog posts.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.Here is the way to do this.




Steps:-

1.Go to Blogger Template
2.Click Edit HTML
3.Put following piece code just above  ]]></b:skin> tag.

Tip: To find ]]></b:skin> press Ctrl + F button in your keyboard then a search box will pop up.Enter ]]></b:skin> and it will automatically show the place where  ]]></b:skin> tag in your template

<!-- SCROLL BOX-->
.scrollbox {
height:100px;
width:400px;
overflow:auto;
}
<!-- SCROLL BOX->


4.Save the template.

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

6.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 SCROLL BOX.</div>

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

TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.TEXT TO BE INCLUDED IN THE SCROLLBOX.
www,techgossip.ml. Powered by Blogger.