CommentLuv enables you to reward your blog readers by leaving a titled link to their last post automatically whenever they comment thus encouraging more comments by more people on more posts! CommentLuv.com

As we all know, commentluv feature was initially available in Wordpress blogs as a plugin. At first, it was designed in a way that it would automatically retrieve the commentator's last blog post. Last September, Andy Bailey released his AJAX version where the commenter can then choose which among the posts would he/she prefers to display.


It's getting better and so much friendlier! Many blogspot authors, including your truly, have been anxiously waiting for a blogspot release version. And there was one. On that same month (i.e. September), Andy Bailey posted an option for Blogspot owners to install Commentluv. This option though requires owners to use Haloscan commenting system in their blogger blogs.


Although it may be a little limiting as one needs to signup in Haloscan first before one can use Commentluv in Blogspot, personally, I found the idea a little too tempting. ^_^


Well now, worry no more as Andy Bailey did it again. With the help of JS-kit commenting system, installation of BLOGGER COMMENTLUV has never been SO easy!


Here is a live demo of how BLOGGER COMMENTLUV works for blogspot blogs.

How To Install CommentLuv In Blogger.

Visit CommentLuv For Blogger / Blogspot Blogs page and follow the step by step procedure.

Supported Platforms

Oh yes. Not only does it support Blogger now. It also works on Dotclear and Typepad. Check out Andy Bailey's New Platforms Supported for Commentluv post for more info.


How cool can this be? ^_^

On my side, I may need to work on my XML template first before this can be fully integrated in my blog. Will post a more detailed entry once I had it installed in mine.


Meanwhile, why not give it a try on yours. If you find the BLOGGER COMMENTLUV integration in Do I Have To Spell It Out blog real cool, wait till it works on your own blog. ^_^


Resources:
http://www.fiddyp.co.uk/a-commentluv-option-for-blogspot-owners/
http://www.fiddyp.co.uk/commentluv-wordpress-plugin/
http://js-kit.com/comments/blogger.cgi
http://hollyjahangiri.blogspot.com/2008/10/sunday-stupidity.html
http://www.fiddyp.co.uk/new-platforms-supported-for-commentluv/
http://www.commentluv.com/wp-content/uploads/commentluv-blogger.gif

Mozilla Firefox is one of the most popular and friendliest browsers on the web. Its functionality is hard to beat as there are lots of useful and cool variety of add-ons one can choose to install.

Didn't you ever wonder if its possible to have multiple homepages in firefox?

Wonder no more as the answer to that is... yes. It is possible.


Thanks to AbhiTech post, the procedure is so simple. It only involves using a pipeline (|) and voila, multiple homepages in an instant.

Wanna learn how? Check out AbhiTech's Multiple Homepages in Firefox.

Popular Posts Widget is one of the most useful and popular widget a blogger can include in his/her blog. With this widget, not only do one get to see which posts garnered the most reactions from the readers, it is also a helpful tool for first time visitors as this serves as a quick guide to see which among the posts would most likely capture his/her interests.

Thanks to Yahoo Pipes and Anoxya, I was able to come up with my first blogger widget.

A sample is the POPULAR ENTRIES section in my sidebar.

How It Works. What Makes It Different.

This widget uses Yahoo Pipes to gather and manipulate Blogger Posts and Comments Feeds. Like other popular posts widget, it sorts the blog posts based on popularity as per number of post's comments. It can parse up to 1000 comments, and is easy to install. What makes it different though is that it has a comment counter and the text along with it can be customized as well, e.g. 15 votes... or 30 reactions... or 25 hails.

How To Install Most Commented Posts Widget (with Comment Counter) In Blogger.

Part One. Add Page Element.

(1) Go to Layout. Page Elements.
(2) Add A Gadget.
(3) Select HTML/Javascript Gadget.
(4) Copy and paste this script:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<span style="text-transform: capitalize;">');
var i;
for (i = 0; i < 15; i++)
{

var href = "'" + obj.value.items[i].link + "'";
var item = "<a href=" + href + ">" + obj.value.items[i].title + "</a> ";
document.write(item);
}

document.write('</span>');
document.write('<br/>');
}
</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=
pipeCallback&_id=9a4c2da57ff7dd25009beedf68f5c7aa&blogurl=
http://yourblog.blogspot.com
&numpost=10" type="text/javascript"></script>
<br/>

<p style="font-size: 8px;line-height:6pt"> Widget by <a style="font-size:8px;line-height:6pt" href="http://technicaldotcom.blogspot.com/" target="_blank">Techniqueal T. </a></p>

(5) Look for this part of the script

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=
pipeCallback&_id=9a4c2da57ff7dd25009beedf68f5c7aa&blogurl=
http://yourblog.blogspot.com
&numpost=10" type="text/javascript"></script>
<br/>

NOTE THE BOLD FACED TEXTS.

to change the default blog URL, find this code and replace it with yours.

blogurl=http://yourblog.blogspot.com

to adjust the maximum number of posts to be displayed, search for this code and replace with desired number of posts.

&numpost=10

(6) Click OK.
(7) View Blog.



Part Two. How Customize the Comment Count Text.

NOTE: In order to make this work, you must have a Yahoo account first.

(1) Click and go to my YAHOO PIPES url.
(2) Click "CLONE".
(3) Choose "Edit Source".




(4) Scroll down to the LOOP Module added in this pipe.



Click "open".

(5) Go to the "STRING BUILDER" module. Change the text as desired.



Save a copy.

(6) To go back to previous pipe, click the "Most Commented Post Widget (with Number of Comments) by Techniqueal T." link which is located on the upper portion to the right of Yahoo Pipes Logo.

(7) If the whole source seemed to have disappeared, just drag down the Debugger panel.



Note the change (new name).
Save.

(8) Run this Pipe.
(9) TAKE NOTE OF YOUR NEWLY CREATED PIPE ID. Check your browser's address bar. You would see something like this.

http://pipes.yahoo.com/pipes/pipe.info?_id=
f96140abe2e1c6963b149b9b50b7f1d0

copy and paste the bold-faced ID in notepad (or similar).



Part Three. How To Change Yahoo Pipe Address.
(1) To change the default pipe address so you can use your newly created pipe (with customized comment counter text), go to Layout. Page Element.
(2) Edit the HTML/Javascript gadget where you placed the Popular Posts Widget.
(3) look for this code:

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=
pipeCallback&_id=9a4c2da57ff7dd25009beedf68f5c7aa

NOTE THE BOLD FACED TEXT.
change the default ID with your new Yahoo Pipe ID.



If you prefer to let go of the comment counter and stick with the usual Popular Posts Widget, you can either edit the pipe (just kindly let me know if you need assistance) or you can check this blog for other alternative:
Blogger Buster: Popular Posts (Most Commented) Widget For Blogger Blogs


If you have heard of issues where Blogger Widgets that use Yahoo Pipes do not work after certain number of pipe runs, you can always resolve this by "cloning" the original pipe and using your own.

Shortcut.

I just learned that there is a shortcut to adding this pipe to your blog.
(1) Just go to my YAHOO PIPES url.
(2) Type in your blog URL and maximum number of posts.
(3) Run Pipe.
(4) Get as Badge. Add it to Blogger.

Tooltips are small boxes that appear when you roll over an icon or text that contains a brief text message identifying the object. Below are examples.

Roll over your mouse on the text.

Rollover me!


This is an image that shows tooltip.




With Nate's Nicer Titles, you can easily customize the default tooltips on your blog. His version of tooltip is pretty nice to look at. Moreover, this is by far, the easiest to install in blogger.

How It Works.

Hide Sidenotes

Nate's Nicer Titles are automatically shown in all HTML elements that have TITLE attributes. These TITLE attributes can be applied to links, images and other kinds of elements.

Example code:

<a href='http://technicaldotcom.blogspot.com/' title='Home: The Technical Thought Of You'><img alt='home' height='64' src='http://lh5.ggpht.com/techniquealtechie/SMwVx4qtIwI/AAAAAAAAASg/K7uXHWd-ER0/cssdockmenublack-home3.jpg' width='64'/></a>

Result:

What's great about Nate's Nicer Titles, it also works on image maps!


Example code:

<img border="0" usemap="#imap_35" alt="subscribe" width="223" src="http://lh4.ggpht.com/techniquealtechie/SMaR8GEFL_I/AAAAAAAAALc/NSL311-zAD8/subscribe7.jpg" height="160"/>
<map id="imap_35" name="imap_35">
<area shape="rect" coords="141,34,219,100" alt="Subscribe to RSS" href="http://feeds.feedburner.com/technicaldotcom" target="_blank" title="Subscribe to RSS"/>
</map>

Result:

How To Add Nicer Titles in Blogger.

Part One.

(1) DOWNLOAD this zipped file (right click and choose "Save As")
(2) uncompress or unzip.
(3) upload "nicetitle.js" and "nicetitle.css" to your site (e.g. Google Pages if you have one).


Part Two.

NOTE: BACKUP YOUR TEMPLATE!

(1) Go to Layout. Edit HTML.
(2) Before the closing tag of

</head>

insert the following code:

<src="http://yourgooglepageusername.googlepages.com/nicetitle.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://yourgooglepageusername.googlepages.com/nicetitle.css">

(3) Save template.
(4) Create a new post.
(5) To use the customized tooltip on texts, type a text link.

Example:

<a href="URL here" title="put your tooltip message here">Read Me!</a>

(6) To use the customized tooltip on images, insert an image link.

Example:

<a href="URL here" title="put your tooltip message here"><img src="URL of the image here"></a>

(7) Publish Post.
(8) View Blog.

How To Make Nice Titles Work On Image Maps.

If you would like to make it work on image maps just like how it worked on my SUBSCRIBE section, we just need to make a little tweak.

(1) make a backup copy of "nicetitles.js". keep it somewhere safe. ^_^
(2) open the original "nicetitles.js" in notepad or textpad.
(3) before this code:

addEvent(window, "load", NiceTitles.autoCreation);

insert this line of script:

function niceTitlesOnAreaElements(){
var niceTitle = new NiceTitles("<p class=\"titletext\">attr(nicetitle)? <span class=\"accesskey\">[attr(accesskey)]</span>?</p><p class=\"destination\">attr(href)</p>", 600);
niceTitle.addElements(document.getElementsByTagName("area"), "title");
}
addEvent(window, "load", niceTitlesOnAreaElements);

(4) Save.
(5) Upload the edited "nicetitles.js" to your site.


To learn more on how to create image maps, kindly check out my post:
Image Mapping and Online Image Mappers


Enjoy tweaking!


Resources:
http://neo.dzygn.com/archive/2003/12/nicer-titles
http://neo.dzygn.com/downloads/code/nicetitle.zip
http://www.web-graphics.com/mtarchive/000778.php#chatty001219
http://htmlhelp.com/reference/html40/attrs.html
http://www.kryogenix.org/code/browser/nicetitle/
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html

Hide Sidenotes

Google Dance: A period of time when Google indexes are updated which often results in fluctuations in the index side and some noticeable changes in search engine result positions.

With all the google dance happening once in a while, don't you sometimes wish you can request Google to reconsider your Page Rank?

Bloganol has the step-by-step procedure on how to do this.

Check out this article:
How to request Google for your Blog's PR reconsideration?


Resources:
http://www.seoglossary.com/cat/G#632
http://www.techterms.com/definition/index
http://www.bloganol.com/2008/10/how-to-request-google-for-your-blogs-pr.html

Have you ever wondered how to create an animated text that looks like it was being handwritten?




Thanks to Fence Post's tutorial, you can easily create one using GIMP.


Hide Sidenotes

The GNU Image Manipulation Program, or GIMP, is a free raster graphics editor used to process digital graphics and photographs. It is often used as a free software replacement for Adobe Photoshop; however, it is not designed to be a Photoshop clone. Wikipedia

It is light-weight. Easy to use. You can create animated GIFs too!


You can download the GIMP software from these sites:
GIMP for Windows
GIMP for MAC OS X
GIMP for Linux


For installation instructions, check out these articles:
How to Install GIMP on Windows XP
How to Install GIMP on MAC OS X 10.5.2 or greater
How to Install GIMP 2.6 on Linux


Once you have GIMP installed in your system, you are now ready to create animated handwritten texts or signatures.

How to Create Animated Signatures using GIMP

Part One.
(1) Open GIMP. Go to FILE > NEW. Set the image size. (ex. 640x480).
(2) Click on the TEXT ICON, choose your desired font, size, color. Click on the paint area and add your text.




(3) Go to your layer window. Right click on the text layer (i.e. Enjoy!). Choose ALPHA TO SELECTION.
(4) This is how your image would look like afterwards.




(5) With the text selection still active, go back to the layer window, hide the text layer and choose background. Your image will now look like this:





Part Two.
(1) Set foreground color with anything you want.
(2) Grab the brush (or Draw in Ink). Adjust the brush size as desired. Add a dab of color on a portion of the first letter of your word.




(3) On the layer window, click Duplicate Layer. Add another dab of color in continuation of the portion you have colored in the previous step.




(4) Repeat STEP 3 over and over again until you have colored each letter of your word.




Part Three.
(1) Go to the layer window. Right-click the TEXT LAYER (i.e. Enjoy!), choose DELETE.
(2) Go to FILTER > ANIMATION > PLAYBACK.

Part Four.
(1) Go to FILE > SAVE or SAVE AS. Choose GIF as File type.
(2) On the EXPORT FILE Message box, select SAVE AS ANIMATION. EXPORT.




(3) Choose your desired speed. Default is 100 ms. Click OK.





Here is the result.





Notes:
If you'd like to have a different background color (besides white), fill in the background with the desired color right after STEP 1 of PART 1.
You may crop your image by going to the layer window, choosing the bottom-most layer, and clicking IMAGE > CROP.


If you're having difficulty following this method, check out how Fence Post did it.


Resources:
http://en.wikipedia.org/wiki/GIMP
http://fence-post.deviantart.com/art/Handwritten-Text-in-GIMP-36791055
http://graphicdesign.learnhub.com/lesson/video/115-how-to-install-gimp-on-windows-xp
http://darwingimp.sourceforge.net/guides/install_leopard/
http://phorolinux.com/how-to-install-gimp-26-on-linux.html

No doubt that every blogger in the blogosphere wishes to have his/her entries read, enjoyed, appreciated by his/her readers. At some point, maybe some only wish to make their readers feel what they, the blog authors, feel about the topic. Nevertheless, it all boils down to one thing. When one person blogs, sooner or later, one way or another, there will always be someone out there who would read what you've written. (unless of course, you opted to limit the viewers of your blog to no one but yourself ^_^)

Here are some tips I've personally organized in creating effective blog posts or entries.

(1) TITLE

-Create catchy titles. As much as possible, use W5H. WHO. WHAT. WHERE. WHEN. WHY. HOW. Why Blogs have No Traffic Policemen. How To Earn A Million Dollar In Blogging. From Which Planets Do Hackers Come From. What Kind Of A Homo Sapien Are You. Catchy. Something that would capture everyone's interest.

-Numbered List. Include Numbers in Title. Numbers signify ranks.
The Top 40 Free AJAX and Javascript Codes for Web Designers. 53 CSS Techniques You Couldn't Live Without.

-Use adjectives.
10 Finger Licking Linux Desktop Themes. 30 Exceptional CSS Techniques and Examples.

-Add some emotion. Humor. Drama. You name it.
The Most Overused Word on the Internet. Confessions of A Broken Microchip. My Big Gutsy Geek Wedding.

-Think like Search Engines. Be Friendly!
Use common words that would most likely yield search engine results. Instead of using "Featuring: GMAIL Notifiers", why not try "How To Open Multiple GMAIL Accounts" instead. For online users who are unaware of the add-on name, they would more or less tend to type "open multiple gmail accounts" in Google or Yahoo to gather information.

(2) CONTENT

-is the king! Make sure that your content is really worth spending time to read on. Check out the web for writing tips, Do's and Dont's.

-Be original. Creativity is the key. As blog press suggested, do a niche topic research for creative content.

-Think of ways on how readers can relate to your posts. Make them participate. Add a hanging question in the end as needed. "How about you? Which one works best for you?" "Are you in or out?"

-Add your targeted keywords on the main content. When we say keywords, these are the words that would help search engines find your post over billions, zillions of published entries in the blogosphere. If your topic is about "Customizing a Blogger Widget", add words like "add background color", "put border" or any phrases that would define what kind of customization were you referring to.

-Create an element of surprise. Stun the readers with a "plot" twist.

(3) IMAGE/ALT TAGS

-Find images that would be most appropriate to your post. Images that would liven up and capture readers' attention.





-Add ALT TAGS on the image so search engines would find it easier and faster. To add ALT tags on the newly added image, go to EDIT HTML portion of your "Create New Post", look for

<img src="http://sourceURLhere">

change it to

<img src="http://sourceURLhere" alt="keyword or tag here">

(4) LABELS/TAGS

-Use label names or category names that would be closest in relevance to the topic of your entry. This will aid the readers to understand your entry better. Tag as much as you can.

(5) RESOURCES/RELATED POSTS/BOOKMARKS

-Show your resources on each entry. If you can install related posts (by category), much better!

-Add social media icons for easy bookmarks. Digg. StumbleUpon. Reddit. Join the buzz!


For more information about the topic, you may check these resources out.
How To Create Great Blog Content
24 Simple Tips For Creatinng Great Blog Content
10 Tips of Writing Bookmarkable Content


Resources:
http://acronyms.thefreedictionary.com/Who+What+Where+When+Why+How
http://digg.com/technology
http://www.lifereboot.com/2007/avoid-bad-blog-posts-with-these-3-writing-tips/
http://weblogs.about.com/od/bloggingtips/tp/TipsWriteBlogPosts.htm
http://ezinearticles.com/?How-To-Write-Fresh-And-Creative-Posts&id=597848
http://www.conveneit.co.uk/pictures/ist2_318029_alert_icon.jpg

5 Google News Feeds Gadget. 10 Recent Technology DIGGs. 5 Latest Slashdot News Snippets. Three separate feed widgets on your sidebar. Is there a way to put them all together in one widget?

Blogger currently offers two feed gadgets:
(1) FEED GADGET
where you can add content (maximum of 5 entries) from ONE RSS or Atom feed to your blog.
(2) BLOG LIST GADGET
where you can add MULTIPLE FEEDS (with ONE/latest entry for each feed) of your favorite blogs.


Don't you sometimes wish you can combine both and display MULTIPLE FEEDS with MULTIPLE ENTRIES for each feed?


Thanks to Dynamic Drive's gAjax RSS Feeds Displayer, this is possible.


To be specific, you may find it in action at my sidebar: TECH NEWS FEEDS section. Here, my subscription list includes feeds with multiple entries from DIGG Technology, PC Magazine, Reuter's Technology, SEObook, SEOmoz, Slashdot, and Yahoo Security.

Using gAjax RSS Feeds Displayer, you can display results from multiple feeds intermixed, sort them in a variety of ways, specify which components of each RSS entry to display, and more. Dynamic Drive

How to add it in Blogger? Here's how.


Before you start editing your template, make sure to DOWNLOAD
(1) gfeedfetcher.js (right click and choose "Save As") first and upload to your site (e.g. Google Pages if you have one).
(2) (right click and choose "Save Image As") and upload to your image hosting site (e.g. Photobucket or Imageshack. I use PicasaWeb)

Now, let's get started.


NOTE: BACKUP YOUR TEMPLATE!


1. Go to Layout. Edit HTML.
2. Before the closing tag of

</head>

insert the following code:

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>

<script type="text/javascript" src="gfeedfetcher.js">
/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

NOTE: Please look at the above code closely. For your API Key, go to Google Ajax API Key Page, type in your blog URL and click Generate API Key. Then, on the below code:

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">

replace "YOUR-API-KEY" with the CODE YOU RECEIVED from Google Ajax API Key Page.


3. Before the closing tag of

]]></b:skin>

insert this code to apply CSS.

.labelfield {
color:brown;
font-size: 90%;
}

.datefield {
color:gray;
font-size: 90%;
}

#example2 div {
margin-bottom: 5px;
}

#example2 div a {
text-decoration: none;
}

4. Save template.
5. Go to Layout. Page Elements.
6. Add A Gadget.
7. Choose HTML/Javascript.
8. Copy the code below and paste it on the HTML/Javascript gadget.

<script type="text/javascript">
var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml")
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div")
socialfeed.filterfeed(6, "label")
socialfeed.init()
</script>

9. Save.
10. View Blog.

How to customize the Feed script

<script type="text/javascript">
var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml")
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div")
socialfeed.filterfeed(6, "label")
socialfeed.init()
</script>

Below are the only codes that you need to change:

One.

socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")

where "Slashdot" is the title of your feed and
"http://rss.slashdot.org/Slashdot/slashdot" is the feed URL.


Two.

socialfeed.displayoptions("label datetime snippet")

where the display options can be set to include feed title ("label"), feed publishing date and time ("datetime"), and preview of feed ("snippet"). If you wish to include only the title and feed preview, kindly set the option to ("label snippet")


Three.

socialfeed.filterfeed(6, "label")

where 6 is the number of entries to be displayed and "label" is the sorting config meaning all feed entries will be sorted alphabetically by label.



To learn more about this displayer and view other options, visit Dynamic Drive's gAjax RSS Feeds Displayer.


Resources:
http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html

Wanting to add some border or light background on your newly installed Followers Widget? Perhaps do some simple customization like text alignment or font style changes like the image below?





Here's how.

NOTE: BACKUP YOUR TEMPLATE!

1. Go to Layout. Edit HTML.
2. Make sure that the "Expand Widget Templates" checkbox is UNCHECKED.
3. Look for this line of code:

<b:widget id='Followers1' locked='false' title='' type='Followers'/>

4. Replace the above code with this:

<b:widget id='Followers1' locked='false' title='' type='Followers'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>

<div expr:id='data:widget.instanceId + "-wrapper"'>
<br/>

<div class='followerbox'>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a class='followthisblog' expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<a class='followthisblog' expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>
</b:if>

<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>
<!--
Relies on the js written out in navbar.gxp
-->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>

<div class='followers-canvas profile-link'>
<data:followersFooterMessage/><br/>
<span class='item-control following-not-admin'>
<a class='showallfollowers' expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>
</div>

<b:include name='quickedit'/>
</div>

</div>
</b:includable>
</b:widget>

Now, for the CSS part.

(1) Before the closing tag of

]]></b:skin>
</head>

place the following codes:

.followerbox {
text-align: center;
width: 200px;
background-color: #ffffff;
border: 6px ridge #1566a7;
}

.followthisblog {
font-weight:bold;
font-size:16px;
}

.showallfollowers {
font-size:11px;
}

(2) Save template.
(3) View Blog.

An explanation on the CSS Part.

.followerbox {
text-align: center;
width: 200px;
background-color: #ffffff;
border: 6px ridge #1566a7;
}

The "followerbox" class pertains to the div where the whole Followers widget was placed. Here, you may adjust how wide or how long you prefer your widget to be, apply background color and even borders.

.followthisblog {
font-weight:bold;
font-size:16px;
}

.showallfollowers {
font-size:11px;
}

The "followthisblog" and "showallfollowers" classes pertain to the anchor link properties where you may change how the "Follow this blog" and "View All" texts would appear.

Change the VIEW ALL text

If you want to change the "View All" text, just look for this line of code:

<data:viewAllMessage/>

and replace it with the text of your choice.

Add Image Opacity Effects

If you want to have an image opacity onhover effects like the one on my Followers widget, follow this three simple steps:
(1) add this line after the css properties declared earlier:

a.followeropacity img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

a.followeropacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity:1.0;
}

You may adjust the opacity value from 0 (lightest) to 100 (normal) according to your preference.

(2) CHECK the "Expand Widget Templates" and look for this line of code:

<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

(3) Replace it with this:

<a class='followeropacity' expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

The bold-faced text was the css class inserted.

Have fun in tweaking!

Last week of August, Blogger released the new feature: Blogger's Followers. With this widget, bloggers can easily keep track who regularly reads and enjoys their blog and at the same time, be up-to-date with the latest post activities of their favorite blogs straight from the Blogger Dashboard or Google Reader.

There are those who are quite thrilled with this gadget whereas others, think otherwise.

For those who consider this a cool feature and would like to add their own list of blogs to follow but were unable to because there were no "Follow This Blog" widgets on the much liked blogs, just follow this simple steps:

(1) Login to your Blogger Account.
(2) On the Dashboard under the Reading List section, click on ADD Button.
(3) Enter the URL of the blog you would like to follow and choose NEXT.





(4) Choose whether you would like to follow publicly or anonymously.
(5) Then voila, the newly added blog will be seen on the Dashboard's Reading List.

Note: You may also enter non-blogger blog URLs to follow for as long as their feeds are active and full. The only difference between the blogger hosted and non-blogger hosted blogs is that when you go to the MANAGE section, the latter won't show off its number of followers.

Here are a few things that can be done upon clicking the MANAGE Button:
a. view a blog's total number of followers
b. toggle between following publicly or anonymously
c. stop following a blog

For more details and updates, you may check:
Blogger Buzz's Show off Your Followers


Resources:
http://buzz.blogger.com/2008/08/show-off-your-followers.html
http://googleblog.blogspot.com/2008/09/follow-your-favorite-blogs.html
http://www.bloggerbuster.com/2008/09/using-bloggers-new-followers-feature.html