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.

How To Make A Scrollbar In Your Blogger Widgets III : Each Widget Scrollbar

T his article is the end of my "trilogy" How To Make A Scrollbar In Your Blogger Widget I, II, and III.

As I mention in HTMS II  The best result of the "scrollbar mode" is when applied to each widget, because we can full-controlled which of our widget that we want to make it in "scrollbar mode" and which one is not.. This method is a bit complicated but give us the best results.

The technique of "how to make it scrollbar mode" is the same as HTMS I and II. But the secret of this method is "to find the name of each of our widget".

The following are some examples of the widget "name":

Adsense
Blog
BlogArchive
Followers
Header
HTML
Label
Linklist
Text

 Those "name" represents the widget, so in the application, we can estimate the  widget (location) by their name. Actually those "name" are following by the number as an complete "Id" eg. Adsense1, HTML4. If we only have one widget in our template than the following number is 1 eg. Adsense1, if we add a second same widget eg. we put another adsense into our template than the widget name will be Adsense2 and so on. Note : Blog means the blog post.

If you not sure with which one is? Take it easy, just try it and preview it, if you find it wrong than you can delete the script and try the other, you just make sure to remember what you have done before to corrected it later.

To be more easily understood, I will use my HTML Template for the explaination.

I want to make my "BLOGGER TIPS ARCHIVE" in "scrollbar mode" From the "name" this widget must be the BlogArchive, because I don't have another archive widget, I can assure that the widget Name/Id in my template is BlogArchive1. So I Go to my Dashboard >> Layout >> Edit HTML.
To make it sure that I maybe forgot have been installed another blog archive and or have "wrong script blog archive"then I try to find BlogArchive (I use Ctrl+F in my FF Browser).
After sure that I've only got BlogArchive1. Next... I find /* Sidebar Content */ (in some case, may be you'll found like mine, with ----- ) and add the script right after it:

/* Sidebar Content */
#BlogArchive1{
height:200px;
overflow:auto;
} 

This is before:

And this is after:

 How To Overcome The Third-Party Display Rules Widget.

As we've discussed in HTMS I, when installing third-party widgets eg Google Adsense, we are forbidden to cut display or display them truncated. 
By knowing the name of our widget, then we can set the height and weight for each of our widget. We can also set the scrollbar to all of our widget (like HTMS I) or by sidebar (like HTMS II) and make exceptions to certain widget.
For example, if our AdSense unit is a 160x600 Vertical Wide Banner, then we must set the height of the widget as 600px. Because the contents fit nicely into this size, then the scrollbars should not appear. So it will not break the Third Paty rules.

/* Sidebar Content */
#AdSense1{
height:600px;
}

That's All.. You have another trick about scrollbar ? Please share with us..

How To Make A Scrollbar In Your Blogger Widgets II

In How To Make A Scrollbar I, we have discussed about making the scrollbar on the whole widget (Sidebar), unfortunately this situation will be a problem if we install a third-party widgets that forbids us to change / cut their display widget (eg Google Adsense).

To overcome that problem we need advanced trick.

One Sidebar "Scrollbar Mode"

If your template has been modified to have 2 sidebar (like this blog), then we only need to put the third-party widgets on the first sidebar along with other widgets to apply non "scrollbar mode" sidebar, and to place the other widgets on the second sidebar to be made "scrollbar mode". In the other words, we classify the widgets into 2 groups and put into the separate sidebar, non "scrollbar mode" sidebar and "scrollbar mode" sidebar.
This method is the same as we do in How To Make A Scrollbar I, but we have to insert the script below one of the "sidebar-id's" that we will create a "scrollbar mode" sidebar.

The most important is you must know and find  your "modification (add) sidebar name", cause this is the key of this method,  so you can put the script below it. Let us use my blog as a sample, I make 3 modification sidebar, named #sidebar-wrapper, #second-sidebar1-wrapper, and #second-sidebar2-wrapper (please look at the position..!).

 So, depend of my choice to make a scrollbar mode on one of my sidebar, than The script that can be inserted into my template will be like this (Go to your Dashboard >> Layout >> Edit HTML and find /* Sidebar Content */ in some case, may be you'll found like mine, with -----  and add this script right after it) :

/* Sidebar Content */
#sidebar-wrapper{
height:200px;
overflow:auto;
}

The display will be like this:

Or this,

/* Sidebar Content */
#second-sidebar1-wrapper{
height:200px;
overflow:auto;
}

Or this,

/* Sidebar Content */
#second-sidebar2-wrapper{
height:200px;
overflow:auto;
}

Unfortunately, all of your widget in your "scrollbar mode" sidebar  become only "one scrollbar".

Actually, the best result of the "scrollbar mode" is when applied to each widget, this method is a bit complicated but give us the best results.
We will discuss it in the next post...

How To Make A Scrollbar In Your Blogger Widgets I : In Second

There are several ways to customize the look of widgets that are too long in our blog pages. Two of them have been discussed in How To Make A Dropdown List I and II.

If in How To Make A Dropdown List I and II. we abbreviate the display of labels and other widgets with a dropdown list, then in this article we will discuss how to adjust our widget display in the form of scrollbar.

According to Wikipedia, a scrollbar (Also known as a handle in the very first GUIs) is a graphical object in a graphical user interface (GUI) with which continuous text, pictures or anything else can be scrolled  including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or viewport.

With scrollbarr method, we can set how long the display of our widgets, so that the view from our blog pages will become more neatly arranged.

Actually, it's very easy to make a scrollbar in our widget.  Log in to your Blogger Blog, Go to your Dashboard >> Layout >> Edit HTML and find /* Sidebar Content */ (in some case, may be you'll found like mine, with ----- ), we only need to add this simple script code. just below /* Sidebar Content */

/* Sidebar Content
----------------------------------------------- */
.sidebar .widget{
height:250px;
overflow:auto;
}

This is my blog page views before :

And this is after :

We can set the height of the scrollbar to fit our blog page by change the value 250 (px), Please try  to change into 200px or 300px, you'll know the differences and will be found your match lenght...

When there is a sentence in the widget contents that exceed the sidebar limit, like in my NEW BLOGGER TIPS LABELS, then there will be a horisontal scrollbar automatically show up.

If you want to (I personally do not need it because there is already wide settings sidebar), you can also add Horisontal Scrollbar deliberately to set the width of the widget, by copy this script code width: 200px; (change the number 200 as you want) and paste right under height:250px;, so it will look like,

/* Sidebar Content
----------------------------------------------- */
.sidebar .widget{
height:250px;
width:200px;
overflow:auto;
}

ATTENTION : This trick will set all of our widget in sidebar being a scrollbar mode, So please make sure if you have installed widgets from third parties (like Google Adsense), this scrollbar tricks does not violate their Term Of Service or their rules. I am not responsible if you get in trouble because of this trick...!!!

To overcome those problems, we can make a scrollbar in our blogger widget separately one by one... We will discuss it soon in my next post.. How To Make A Scrollbar In Your Blogger Widgets II and III.