How To Make A Scroolbar Within Blog Post

This trick is rather similar with How To Make A Spoiler In Second on purposed and the final display, Each technique have their "positive and negative" factor. I don't want to discuss the "more and less" of each trick, is up to you to decided which one that will fit to your purpose. Scrollbars will be very useful to minimized the text area and allowing readers to view the full contents by clicking the bar. We usually saw this technique implemented  for Terms of Service, User Agreements, Rules, or Privacy Policy.



To make a scrollbar within the blog post, first we must define a class (write into HTML Template), this action is giving the "name" to this class and setting the display when it show, and then to applied within the blog post, we must "call" the class (by writing the class in our blog post).



Log in to Blogger >> In your Dashboard choose your Lay out blog >> Edit HTML >> and Find /* Sidebar Content */ and put this script to define a class below it:

.scrollingpostbar {

height:350px;

width:450px;

border:0;

overflow:auto;

}

You can rename .scrollingpostbar as you like, as long as you remember the "name", set the height and weight and border by adjust 350, 450 and 0 to make it fit with your post.





After finished, then we can type the text, although the tittle is How To Make A Scroolbar Within Blog Post, actually we can use this scrollbar mode in the page element in our template, exactly the same as How To Make A Spoiler In Second .



To show up in our blog post, after we have typed the TEXTARTICLE in the Post Editor, then click “Edit HTML” and paste these tags, exactly as this position:

<div class="scrollingpostbar">TEXTARTICLE</div>

I wrote this article again and applied this trick to show up how is the final display for example:

This trick is rather similar with How To Make A Spoiler In Second on purposed and the final display, Each technique have their "positive and negative" factor. I don't want to discuss the "more and less" of each trick, is up to you to decided which one that will fit to your purpose. Scrollbars will be very useful to minimized the text area and allowing readers to view the full contents by clicking the bar. We usually saw this technique implemented  for Terms of Service, User Agreements, Rules, or Privacy Policy.



To make a scrollbar within the blog post, first we must define a class (write into HTML Template), this action is giving the "name" to this class and setting the display when it show, and then to applied within the blog post, we must "call" the class (by writing the class in our blog post).



Log in to Blogger >> In your Dashboard choose your Lay out blog >> Edit HTML >> and Find /* Sidebar Content */ and put this script to define a class below it:

.scrollingpostbar {

height:350px;

width:450px;

border:0;

overflow:auto;

}

You can rename .scrollingpostbar as you like, as long as you remember the "name", set the height and weight and border by adjust 350, 450 and 0 to make it fit with your post.





After finished, then we can type the text, although the tittle is How To Make A Scroolbar Within Blog Post, actually we can use this scrollbar mode in the page element in our template, exactly the same as How To Make A Spoiler In Second .



To show up in our blog post, after we have typed the TEXTARTICLE in the Post Editor, then click “Edit HTML” and paste these tags, exactly as this position:

<div class="scrollingpostbar">TEXTARTICLE</div>

To make a scrollbar in page element.  Our Text or HTML/Javascript Code can be inserted directly into the template via Layout -> Page Elements -> Add a Gadget >> Text or HTML/JavaScript. Similarly, if we have typed it in the rich editor mode, we can click the “Edit HTML” link at the top right corner and insert the above tags.



After publishing the post or saving the page element, you will be able to see the text or HTML/JavaScript gadget within a box and the scrollbars automatically inserted. 

Note : this trick only works on Text or HTML/JavaScript gadget.