Scrolling Sections & New Blogger Templates - HOWTO

I decided to add a keyword for the name of each artist/band I've blogged. When I finished my 'Group by Keyword' section was a mile long. My solution was to make that section scrollable. Here's HOWTO do it yourself.

1.) Log into your Blogger account
2.) Go to 'Edit HTML'
3.) Save your current template
4.) Click 'Expand Widget Templates'
5.) Search for the section title 'Group by Keyword'

Note in blue below I have shown the beginning and end of the 'Group by Keyword' section.

6.) Add the two lines shown in green

<b:widget id='Label1' locked='false' title='Group by Keyword' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<!-- KEYWORD SCROLL begin --><div style='height: 200px; overflow: auto'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>
<!-- KEYWORD SCROLL end --></div>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

7.) Save your template

What this does is it encapsulates everything between those two green lines onto a 'div' then forces that div to a fixed height. In this case I chose 200 pixels (200px).

The 'overflow: auto;' is what tells that div -- if there is more data than can be displayed then slap a scrollbar on it.

I left everything else to default (width etc.) but you could, if you're feeling fancy, customize the scrollbar (color, style, etc..) using further CSS. Explore that on your own.

DO NOT place those green lines within a loop. This widget has a loop -- shown in red. I didn't try it but I suspect you'll get a 200 pixel high div for every single keyword and no scrollbars. That would be bad.

Though I did this for my 'Group by Keyword' section it should, in theory, work for just about any section. Again -- explore that on your own.

-frank-

--