Make Scroll Column On Blog Label

To make scroll column on the blog label or categories is use the same code basic scroll column code. But to make it we must create it on our template HTML code,before your edit the template HTML code, don"t forget to back up your template code to your computer. If you have problem after editing the blog template html code, we can up load back the old html code. And now we start to create the scroll column on the blog label or categories :
1- Log in to your blogger dashbord.
2-Select"lay Out"and click "Page Element".
3-Add Label with a unique title. Example ;"Categories-1".
4-Go to"Desaign" on Lay out menu click "Edit HTML" and don't forget to click "Expand Widget.

5-Then find the label title you write on step 3, is "Categories-1" that you have made before.
Note : Use CTRL + F on your keybord to easy find "Categories-1" by copy paste to the search bos under your windows.
6-Look at the "Red Code" you must insert or adding the red code in to your label html code with a position like on my Example code :

<div class='clearfloat' id='sidebar-middle'>
<div id='sidebar-left'>
<b:section class='sidebar' id='sidebar5' preferred='yes'>
<b:widget id='Label1' locked='false' title='Categories-1' 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;'>
"><div style='overflow:auto; width:ancho; height:">250px;">'>

    <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></div>
</b:includable>
</b:widget>
</b:section>
</div>

7-If you are finishing the red code on your label html code,don't forget to click "Save Template".
Note : The number"250px" with green text is the scroll column height, you can change the number with your.And the "Categories-1" i write with green text is the your label name, so you can changes it with unique name by you.
The other scroll column you can make it on you blog sidebar,footer or any where on your blog page. Do not need to edit your template html code, just Add a new gadget "HTML/JAVA SCRIPT" on your Page Element.
1-Log in on your blogger dashbord.
2-Select "Lay Out" and click "Page Element".
3-Add a new gadget "HTML/JAVA SCRIPT".
4-Copy and paste the code on "HTML/JAVA SCRIPT" column, See the code :

<div style="overflow:auto;width:ancho;height:250px;padding:5px;border:1px solid #ffff00">

Add Your Link Here..............................


</div>

Note : With 250px is the scroll column width fixed size on your scroll column, you can change with number size to follow your page column.The text "ffff00" with red colour is the scroll column border colours you change it with your colour.
Find html colours code by click http://webdesigncode.themes7.net/.
5-Save your template.
Your scroll column is ready to your blog.