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.

Blogger Team made millions of tutorials blog looks like a "foolish tutorial"

I am too late knowing a great news, because just today I know that 11 days ago I got an email from Blogger Team, whose contents are as follows:

We’re excited to announce that the Blogger Template Designer is now available on Blogger in draft, Blogger’s experimental playground.



The Blogger Template Designer makes it easy to customize the look and feel of your blog without knowing any HTML or CSS. Here are a few of the new features available in the Blogger Template Designer :



    * Beautiful new templates to start from

    * Custom blog layouts with one, two and three columns

    * Hundreds of background images

    * Customizable colors, fonts, and more...



What are you waiting for? Express yourself in style with the Blogger Template Designer. Learn more at www.blogger.com/templates.



The Blogger Team

With great enthusiasm I hurried to follow the link provided in the email ..



Wow .. If prior to the date 03-27-2010 Blogger only offers standard templates as we already know (rather boring) since last few days, the Blogger add facilities to enhance your display settings templates.



There are quite a lot of facilities added to the Blogger settings, ranging from the addition of templates with different variations, a variety of background images, to the layout settings, and other settings such as the division of the column footer into 2 or 3 columns.



Everything we can do with an easy step in a few clicks, yes .. exactly like the contents of an email from the blogger team, we can modify our templates without needing to know HTML or CSS code.



This could be a "big punch" to many "tutorial blogs" that so far has a busy traffic because of the many novice bloggers who are looking for information about the articles that contain how to modify the blogspot template (by modifying the template CSS and HTML code).

Blogger Team made millions of tutorials blog looks like a "foolish tutorial", killing mosquitoes with a shotgun.



Although not apply yet to my personal blog because of my limited time to explore, but this is really great news, additional facilities have been long-awaited by millions of users Blogspot.



I hope I could write my experience in using of these Blogger latest facilities as soon as possible