If you check out my Blogroll at the bottom of this page, you'll see it's scrolling. Easy, right? But, it also has a QuickEdit function where I can simply add links of the blogs that I want to add to the list. And, it doesn't take much space in my blog.I've been looking all over for a Blogger trick like this but I was unsuccessful. Most of the techniques I found were complicated (you have to make a separate HTML file, iframes, javascript, etc). Some didn't give me the results I wanted. So, I tinkered with Blogger's BlogList / Blogroll widget and I made it a scrolling, editable Blogroll.
I know most of us have a long list of Blogs we want to visit everyday and we want to keep that list as accessible as possible, so we place them on our blogs for everyone to see. And as time goes by, we discover other blogs that we want to add to the list.
So, I'll show you how I did a Scrolling Blogroll / BlogList in Blogger.
Step #1: Add the BlogList widget or element from your Page Elements tab in Blogger Layout settings. Place it wherever you want. Then, make sure your settings are like this, well, except for the title:
For Sort, you can choose "Most Recently Updated" so the blogroll will list first those blogs that were, well, most recently updated.SAVE the changes you made.
Step #2: Go to Edit HTML tab. Make sure you BACKUP your template BEFORE you do anything.
Step #3: Make sure the Expand Widget Templates is checked.
Step #4: Look for these lines of codes in your HTML:
Take note the lines in RED might be different in your HTML codes.
<b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == "true"'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == "true"'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == "true"'>
<b:if cond='data:showItemTitle == "true"'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
<a href='javascript:void(0)'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + "_show-all"' style='margin-left: 5px;'>
<a href='javascript:void(0)'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
Step #5: Since this will be a simple BlogRoll, no icons, no latest post, etc., REPLACE all these lines of codes with this:
<b:widget id='BlogList1' locked='false' title='Just Another BlogRoll' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title' style='border:none;'><data:title/></h2>
</div>
</b:if>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 150px; width:250px;'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'><div class='blog-title'><a expr:href='data:item.blogUrl' target='_blank'><data:item.blogTitle/></a></div></li></b:loop></ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
The line of code in PINK is actually the one that makes the blogroll scroll. So, if you have other Blogger widgets you want to scroll (awards or collection of photos, etc.), just add that line right there. If you're not sure how to do it, show me the source or script of your template or just the widget and I'll help you fix it.
Take note of the codes in YELLOW. You can change their values:
title='Just Another BlogRoll' - This can be changed using QuickEdit (the pencil button on the lower right side of the widget) or Page Elements tab. Name it whatever you like.
height: 150px; width:250px; - Change the values to your preferred height and width, depending on where you're going to place it.
SAVE your template.
Step #6: Now, if you don't want your BlogRoll to have indents on every line, I suggest you place this between your <head> and </head> tags. Now, this will depend on where you're placing your BlogRoll. Mine is at the #footer part so if you place it on your sidebar, just change #footer to #sidebar.
#footer ul {
margin: 0;
padding: 0;
}
#footer ul li {
list-style: none;
margin: 2px;
padding: 2px;
border: none;
}
Save your template.
It's as simple as that. Phew!
Now, you can simply add your fave blogs to your Blogroll using the QuickEdit or Page Elements tab in Blogger. No need to create a separate HTML or anything that complicated. The list can be as longggg as you want it to be and it won't take much space on your blog.
Leave me a comment if you have any problems implementing this to your blog.
If you use this, please link me to your blog. That's all I'm asking.
OR, if you're feeling generous... give me a tip. :)
I hope you like it!
Related Tutorial:
Scrolling Comments for Blogger
