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