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.

How To Change Dofollow Attribute Comments in Blogger

Dofollow is a term given to web page or sites / blog which provides (outbound) links to the comments. whereas Nofollow is the opposite.

Here are the advantages and disadvantages of each, Dofollow and Nofollow..

Dofollow
The advantages of the dofollow blogs (sites) is able to increase the blog traffic, as will a lot of visitors who leave their "link traces", that will attract more advertisers who are interested in displaying their ads
The risk of dofollow blogs is that you should be ready to receive comments from spammers who comment without reading the contents of your article or put not relevant link.

Nofollow
The advantages of nofollow blogs is able to filter out spam comments from visitors, The comments obtained truly reflects what the visitors (readers) opinion and not just a "polite" comments and wanted to leave a link. 
The disadvantages is the visitors and advertisers will be reduced from your blog, because usually they will find DoFollow blogs to enhance their position in search engines.

Actually default setting attribute comments from blogger is Nofollow. To tun it into Dofollow, here are the steps we have to do.

Log in to your Blogger >> Dashboard >> Layout >> Edit HTML >> and check the Expand Widget Templates.
Find this script

href='data:comment.authorUrl' rel='nofollow'

and deleted  rel='nofollow', and save template. simply as that...

Note:
To determine whether a blog, is DoFollow or Nofollow. just View their page source, right click on a web page, and select page source, find the href code, if followed by the code rel = 'nofollow' it means that the blog is nofollow, if not there is DoFollow. For an easier way just find rel = 'nofollow' if we do not find then that blog is dofollow.

How To Make A Dropdown List Label Menu (II)

In How To Make A Dropdown List Label Menu (I) we discuss about How To Make A Dropdown List Label Menu  by modification The Label Gadget setting.
Although it was quite simple, this method could only make a dropdown list of Label and must have All list, we can not choose display exactly what we need.

In this article, we will discuss How To Make A Dropdown List Menu (II) that we can totally control what we want to display in the dropdown menu not just the label, although we must work a little hard than the first method.
How we can do it...? Yup.. by write the link one by one. Don't worry..., actualy this method is still simple but very usable, because with this method we could make a dropdown menu, whatever we want, not just a label list.

First.. we pick up the name or title of your dropdown menu, then you must note the URL address all of your link list.
The next step, we use our "Add a Gadget" facilities and add "HTML/JavaScript" to put the Code to make a dropdown menu.
Go to your Dashboard >> Layout >> Page Elements >> and click "Add a Gadget" >> than click HTML/JavaScript.

Copy this simple Script below, and Paste into the content column..

<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected> Your Menu Title  </option>
<option value=" Your Link Address "> Your Link Title </option>

</select>
</form> 

Please replace the Red, Blue and Purple with your menu title, link address that you've prepared before, and title to represented your link. After finished your work, don't forget to save it.

Here is an example:

<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected>-New Blogger Tips-</option>
<option value="http://doit2us.blogspot.com/2010/03/how-to-make-dropdown-list-label-menu.html">how to make a dropdown list</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-spoiler-in-second.html">how to make a spoiler</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-sticky-post-in-your-blogger.html">how to make a sticky post</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-drop-capital-letter-drop.html">how to make a dropcap</option>
<option value="http://doit2us.blogspot.com/2010/01/how-to-make-navigation-menu-bar-on.html">how to make a navigation menu</option>
<option value="http://doit2us.blogspot.com/2009/12/how-to-change-blogger-favicon-ico.html">how to change blogger favico</option>
<option value="http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html">how to add the add a gadget facilities</option>

</select>
</form>

And the Dropdown menu will look like this:

-New Blogger Tips-how to make a dropdown list how to make a spoilerhow to make a sticky posthow to make a dropcaphow to make a navigation menuhow to change blogger favico  how to add the add a gadget facilities

You can change Your Menu Title with instruction sentence like "click here to show", and put your menu title into HTML/JavaScript Title column.

We could also make a dropdown menu not only in a sidebar. but in the blog post too, exactly like in this article.. Simply.. Just write your code inside your blog post and tara... you,ve got your dropdown menu in your post.

How To Make A Dropdown List Label Menu (I)

A drop-down list is a user interface control GUI element, similar to a list box, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value (Wikipedia). In this case we will make a Label List.

This simple tricks is based on changing the Label Gadget settings. So the first step of course, you must already have to use or instal the Label Gadget in your blog.
If you have not install yet, then: Go to your Dashboard >> Layout >> Add a Gadget >> Choose Label and name it, ex: Blogger New Tips Label.
Note: Please choose/click the List Display

The next step is to change the display setting of our Label, by modidying the HTML Label Code.
Go to Layout >> Edit HTML >> and check your Expand Widget Template (Don't forget to backup your template first).
Search and find your Label codes, the easiest way is to find your "Label name", use ctrl+F to find it (Blogger New Tips Label). 
You will find similar code like this:

<b:widget id='Label1' locked='false' title='New Blogger Tips Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot;   data:display   &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot;   data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

To make a drop-down list label, just replace the red script with this blue one

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose The Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>

So the final script will be like this:

<b:widget id='Label1' locked='false' title='New Blogger Tips Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot;   data:display   &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
  
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose The Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>
 
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot;   data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/> 

And will be displayed like this:

That's all... Enjoy to make a dropdown list label menu...