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-

--

AddThis Widget & New Blogger Templates - HOWTO

I tried adding the "cool" new version of the AddThis bookmarking widget to this blog and found that it did not work as advertised. It was shown to have a dropdown menu, but that was not the case.

This is most likely due to the new lingo blogger's new templates use.

I searched for a bit until my patience timer ran out and having found no information with a fix -- I wrote one myself.

Rather than have a lot of people ask me how to make it work I thought I'd save myself a ton of time and just post a short HOWTO right here where you can see it working.

First register yourself with AddThis if you haven't already.

Now follow these instructions:

1.) Log into your Blogger account
2.) Go to 'Edit HTML'
3.) Click 'Expand Widget Templates'
4.) Search for: <!-- quickedit pencil -->
5.) Add the following code immediately above it -- no edits required

<!-- AddThis Bookmark Button BEGIN -->
<div class="snarf-border">
<script type = 'text/javascript'>
  addthis_url   = '<data:post.url/>';
  addthis_title = '<data:post.title/>';
  addthis_pub   = '<data:blog.url/>';
</script><script
 src='http://s7.addthis.com/js/addthis_widget.php?v=12'
 type='text/javascript' />
</div>
<!-- AddThis Bookmark Button END -->

If your template adds borders to images and you don't want this widget to have a border then go to the top of the template and search for:

body {

then find the closing brace '}' for the 'body {' block and right beneath it add the following code:

.snarf-border a img { border: none; }

-frank-

--