How to modify the Popular Posts widget to suit your blog's style

In this previous post, I explained how to use the Affiliatebrand Popular Posts widget. As you can probably tell, I've modified this widget in my own blog so that it matches the overall look of my template. My method is far from being perfect, but as my original post has attracted many readers, I've decided to share this method with you in order for you to customize your own widgets.

The widget code provided by AffiliateBrand links to a javascript file which is unique to your blog, and contains all the code nescessary for constructing the widget style. The default widget is made up of images and "iframes" in order to give it a "Web 2.0" style.

Unfortunately the appearance of this widget is not something that suits the style of all blog templates!

So, in order to be able to style the look of the widget, we need to strip the javascript of all image-related code, and feature only the useful elements instead.

But before you do this, be sure to make a backup of the original widget code as you will need to use this later!

To create a modified "Popular posts" widget, you will need to edit the javascript file which your original widget code is linked to. The best way to do this is to highlight the URL to the javascript file, paste this into your browser, and save the javascript file to your computer so you can edit it with Notepad. Here is an example of what the original widget code will look like; the URL of the javascript file is highlighted in red:

<div style="display:none"><script src="http://AffiliateBrand.com/img/559140890-265v2.js" type="text/javascript"></script></div>

However, you must be sure to use the file url of your own widget as this is unique to your blog!

Now, once you have the Javascript file and have opened it in Notepad (or a different simple text editor), you will need to locate and copy two of the three "iframes" within the code. The easiest way to do this is to press CTRL+F and search for "iframe". The iframe lines should look something like this:

<iframe src="http://AffiliateBrand.com/BlogWindow/Title2.aspx?w=195&style=http://kunoichi.info/bloggerbuster_templates/bb_popular_posts.css&t='+escape('Most Popular Posts') + '" width="195px" height=35px"275px" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>


<iframe src="http://AffiliateBrand.com/BlogWindow/WidgetBlank.aspx?r=559140890-265&style=http://kunoichi.info/bloggerbuster_templates/bb_popular_posts.css" width="200px" height="275px" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>


<iframe src="http://AffiliateBrand.com/BlogWindow/PoweredByV2.aspx?r=559140890-265&w=190" height="40" width="195" scrolling="no" frameborder="0" style="margin-top:5px" ></iframe>

The first iframe in the script (highlighted in blue) is unnecessary since it only refers to the title of your widget, which you can easily configure using the title of your newly configured widget later on. The second iframe is the most important, since this is where your most popular posts are highlighted. The third iframe provides authorship details of the widget and a link back to AffiliateBrand. You really should include this in your modified widget as I will explain later.

Once you have copied the necessary iframe lines to Notepad, you can then begin to create your modified "Popular posts" widget!

To do this, create a new HTML/Javascript element in your blog sidebar, and name it "Popular Posts" or something similar. Next you need to create boundaries for the iframes in order to style the way they are displayed. My own Popular Posts widget is styled using DIV tags like this:

<div style="width: 230px; background:#ffffff; padding: 9px;" class="widget-mid">

insert iframe 2 here...

<div style="clear: both; height: 1px; font-size: 0.1px; border: none; margin: -1px 0 0 0; padding: 0; background: transparent;" class="clear"></div>

<div style="width: 200px; background: #ffffff; padding: 0;" class="widget-mid">

insert iframe 3 here...

<div style="clear: both; height: 1px; font-size: 0.1px; border: none; margin: -1px 0 0 0; padding: 0; background: transparent;" class="clear"></div>

</div>

<div style="width: 200px; height:7px; background: #ffffff;" class="widget-bottom"></div>

<div style="clear: both; height: 1px; font-size: 0.1px; border: none; margin: -1px 0 0 0; padding: 0; background: transparent;" class="clear"></div>

</div>

You can use this as a template for your own widget if you like, making sure that you include the iframe code where specified. The background color can be altered to suit your own blog colors. If you have a good grasp of HTML code, you can easily enclose the iframes in a different style, or even in a table.

Once you've configured your customised widget, save the element and take a look at your blog's sidebar: the "Popular posts" widget you created should now be visible in the template!

However, there is one more thing you should do in order to ensure your widget works correctly. Remember how I said earlier that you'd need the original widget code later on? You need to use this now. Create another HTML/Javascript element in your sidebar, but don't give this one a name. Paste the original code into the element, but wrap it in styled <div> tags, like this:

<div style="display:none"><script src="http://AffiliateBrand.com/img/559140890-265v2.js" type="text/javascript"></script></div>

The part "display:none" ensures that the widget is not actually displayed in your blog. But you still need the extra widget present in order for your new customized widget to work properly! For some reason, the modified version of the widget doesn't update AffiliateBrand with the data of your most popular posts. After looking through the original javascript, I am yet unable to tell which line is used to gather this data, so by including the "non-viewable" second widget, we can still ensure that the customized widget is updated.

I must warn you before that AffiliateBrand does state that you should not modify the contents of the javascript file, and should implement the widget code in your blog as it is provided to you. The most likely reason for this is to stop people from deleting the link back to AffiliateBrand. Personally, I would consider deletion of this iframe unfair since AffiliateBrand do provide the widget free of charge, without the need to sign up as a member! This is in fact the reason that I think you should retain the third iframe code for use in your customized widget. If you do decide to delete the link back from your own widget, do so at your own risk! This could result in the javascript relating to your blog's popular post widget being deleted from the server, in which case your widget will cease to work!

In using the method I have described here (retaining the link back and including a second, non-viewable customized widget), you can be more sure that the necessary components are still in place.

Technorati Tags: widget | popular+posts | affiliate+brand | customize

How to change the comment link in your Blogger template

You can easily change the comment link at the bottom of your blog posts to read something different to "(n) Comments (where "n" is the number of comments). Instead, you could change it to say "Post your comments here", or even "Comments (4)", as I have done in this blog. This post explains how this can be achieved.

To change the text for your comment link, open the HTML editor for your blog template (Dashboard>Layout>Edit HTML), tick the "Expand widget templates" option, and find this section of code:

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>


<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>

</b:if>

</span>

The parts we need to change are highlighted in red. This basically tells Blogger that if there is one comment, to write only "Comment" beside the number one, and if there are 0 or any other number of comments, to instead write "Comments" (the plural form). If you don't want to show how many comments you have for each post, and instead only want to write a new phrase (eg: "Post a comment"), you should replace the whole of the red section with your chosen phrase, like this:

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>


<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a comment</a>

</b:if>

</b:if>

</span>

However, if you'd prefer to retain the number of comments in the link, you may prefer to rearrange the sections instead, like this:

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>


<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>Post a comment (1) <b:else/> Post a comment (<data:post.numComments/>)</b:if></a>

</b:if>

</b:if>

</span>

This will produce the following:

• If there is one comment, it will read "Post a comment (1)"


• If there are 0 comments, the link will read "Post a comment (0)"


• If there are more than one comment, it will read "Post a comment (n) where "n" is the number of comments already present.

You can of course change the text to read anything you want. If you prefer not to have the brackets around the number of comments, simply remove them from the code.

I hope this tutorial has helped you better understand how to change the comment link in your posts. Please feel free to leave your own comments and opinions below!

Loads of free Classic Blogger Templates

For those of you still using Classic Blogger templates, I've just come across a great site featuring loads of beautiful template designs for you: Isnaini.com.

At Isnaini.com you'll find literally dozens of beautiful and original blog templates to download. Each template downloads as a zip file, which contains the template code.

Even "New" Bloggers can take advantage of these designs: to use Classic templates in your blog, you can revert to Classic templates using the link right at the bottom of your "Edit HTML" page in your Blogger dashboard. Then you can simply copy and paste your new classic template code in the editing box.

If you're looking for "new" Blogger templates, be sure to check out my Blogger Templates Downloads page where you'll find a wide variety of original templates, updated regularly to showcase new content.

Technorati Tags: blogger+templates | classic+blogger+templates | layouts | html

Free Blogger Templates (A Complete List)

Here you will find listings of all the Blogger Templates designed by Amanda for Blogger Buster, organized by release date (newest first).

For full installation instructions, please refer to these articles:

• How to install a new XML template to your Blogger blog.


• How to install a Blogger template using the HTML code.


• How to copy widgets from one template to another.

---

My Valentine

Demo | Download

A wide, two column template with a feminine feel. Features extra widget areas in the header and a unique calendar widget.

Super Custom

Demo | Download (XML)

This is the most customizable template I've ever created (hence the strange name!). Using this template, you can change all of the colors and fonts through the Fonts and Colors section of your dashboard, making this appear exactly the way you would like it!

Lament

Demo | Download

Here is a spooky themed template, based on the the "Lament" configuration many of you will recognize from the Hellraiser series...

Halloween Skulls

Demo | Download

A basic, three column template with a spooky feel which was designed in celebration of Halloween

Cool Blue (Web 2.0)

Demo | Download

A blue themed, Web 2.0 style template, featuring a calendar widget and split sidebar columns.

Red Silver (Web 2.0)

Demo | Download

A red themed, Web 2.0 style template featuring calendar widgets and a split sidebar.

Girly Pink (Web 2.0)

Demo | Download

A feminine pink web 2.0 style template with calendar widget and split sidebars.

Shinobi

Demo | Download

This is a slick, dark themed template with a Web 2.0 feel.

TicTac Green (Three Column Version)

Read more and download

A three column version of the classic Blogger theme

TicTac Blue (Three Column Version)

Read more and download

A three column version of the blue TicTac theme.

Gourmet Menu

Demo | Download

A classy three column theme styled to appear like a menu.

Mobile (Tech)

Demo | Download

A simple, technical themed template with three columns.

Rounders4 (Three Column Version)

Demo | Download

A three column conversion of the original Rounders 4 template.

Rounders3 (Three Column Version)

Demo | Download

A three column conversion of the original Rounders 3 theme.

Rounders 2 (Three Column Version)

Demo | Download

A three column conversion of the Rounders 2 theme.

Rounders (Three Column Version)

Demo | Download

A three column conversion of the classic Rounders Blogger template.

Magical

Demo | Download

This template was inspired the Harry Potter books, and would be the ideal choice for any fan of fantasy fiction.

Butterfly

Demo | Download

A dark yet feminine theme in black and red, with three columns and animated butterflies.

Sweet Dreams (3 Column Version)

Demo | Download

A three column version of the Sweet Dreams template.

Sunset

Demo | Download

A dramatic sunset theme with three columns and a unique layout.

Sweet Dreams (Original Version)

Demo | Download

A black and white theme with animation in the header and sidebars. Also features optional background music...

Blues

Demo | Download

A classy three column theme in shades of blue.

897 Three Column Version

Download

Here is a three column conversion of the original 897 Blogger template.

Girly Pink three column template

Download

A fresh and feminime theme with three columns.

A new tagging bookmarklet for Bloggers

Tags are useful to feature in your blog posts as they help your blog be spidered and categorised by social bookmarking sites like Technorati, Del.icio.us and BlogMarks. Tag links usually look something like this:

<a href="http://www.technorati.com/posts/tag/bookmarklet?from=http://www.bloggerbuster.com" target="_blank" rel="tag">bookmarklet</a>

. The most important feature of the tag link is the 'rel="tag"' part, which informs bookmarking services that the link is a "tag" and not just a regular link. Blogger labels are defined in a similar way. As you can imagine, it is a rather time consuming process to write out each tag individually, so instead I use a "bookmarklet" to do most of the coding for me.

As I discussed in this previous post, I have been a faithful user of Oddiophile's technorati bookmarklet: this acts like a bookmark in my browser, yet when I click on the link it brings up a javascript window, into which I type the words I want to make into tag links. You can read all about Oddiophile's bookmarklet here.

This creates tags which link to Technorati and displays lists of posts which have also been tagged with the same word or phrase. However, I wanted to know how to create tag links which would only display results from my own blog, so that readers can find the information they need here at Blogger Buster. So I've modified the javascript of Oddiophile's original bookmarklet to ensure the results page from Technorati only displays posts from my site.

Perhaps the best way to explain the difference is by example. Here are some original Technorati tags, as you may have seen at the end of previous posts (these will open in a new window, which you can easily close to get back to this page):

Technorati Tags: technorati | tags | blogger | bookmarklet

Now here are the same tags, revised so that they only return results from Blogger Buster:

Technorati Tags: technorati | tags | blogger | bookmarklet

The first set of tags returned results from all websites, whereas the second set returned results only from this site.

The original Javascript of Oddiophile's bookmarklet looks something like this:

javascript:(function(){var a='';var t=prompt('Enter Tags:','');var tr=t.split(' ');a+='<span class='+unescape('%22')+'technoratitag'+unescape('%22')+'>Technorati Tags: ';for(var i=0;i<tr.length;i++){if(i > 0){a+=' | ';}a+='<a href='+unescape('%22')+'http://www.technorati.com/tags/'+tr[i]+unescape('%22')+' rel='+unescape('%22')+'tag'+unescape('%22')+'>'+tr[i]+'</a>';}a+='</span>';prompt('Copy this code, press OK, then paste to your blog entry:',a);})()

I've modified the code highlighted in blue to that highlighted in red as follows:

javascript:(function(){var a='';var t=prompt('Enter Tags:','');var tr=t.split(' ');a+='<span class='+unescape('%22')+'technoratitag'+unescape('%22')+'>Technorati Tags: ';for(var i=0;i<tr.length;i++){if(i > 0){a+=' | ';}a+='<a href='+unescape('%22')+'http://www.technorati.com/posts/tag/'+tr[i]+'?from=http://www.bloggerbuster.com'+unescape('%22')+' rel='+unescape('%22')+'tag'+unescape('%22')+'>'+tr[i]+'</a>';}a+='</span>';prompt('Copy this code, press OK, then paste to your blog entry:',a);})()

This instead provides a link to Technorati which only shows posts from my blog which are tagged with the words/phrases I used.

If you like, you can test my bookmarklet my clicking on the following link. A window will pop up into which you can type "tags"; then click "OK" to be presented with the code you can copy and paste into your blog post. Preview this to see the tag links appear in your blog.

Amanda's Technorati Bookmarklet for Blogger

If you like how this bookmarklet works, you can right click the link to save it as a bookmark, or drag the link to your favorite's section in your browser. Unfortunately it's not ready for you to use as it is: you will need to edit the URL it contains to match that of your blog. To do this, first save the bookmarklet to your browser favorites, then right click on the link to view the properties. You will then be able to see the javascript content of the bookmarklet. Copy and paste this script into a simple text editor, like Notepad. Now, find my url within the script, and replace this with the URL of your own blog (eg: http://yourblog.blogspot.com). Once you've done this, highlight the code and copy it, then replace the original script in the properties of your bookmarklet with this modified script. Then test out your bookmarklet by clicking the link and inserting your tags. The code you receive should create links to all of your blog posts which have been tagged at Technorati!

Please note that your blog should already be indexed by Technorati for this to work. If you haven't already claimed your blog, do go ahead and do so at Technorati, as being indexed by this hugely popular site has great benefits for your blog!

I would like to point out that there are also other bookmarklets for tagging your posts, such as the excellent GreaseMonkey plugin for Firefox, and of course Oddiophile's classic bookmarklet. However, none of the other methods I have tried worked the way I wanted them to within my Blogger posts: the GreaseMonkey script came the closest, as it offered a way to search within Technorati tags assigned to your username. For me, this wasn't a viable option, as I have many blogs and I only wanted the tags to refer to this particular blog. Also, I find my method much simpler, and compatible across all browsers.

Your feedback is always appreciated, so please leave your comments and opinions below.

A "time of day image greeting" widget for your blog

I've created a widget which displays a different image greeting depending on the time of day: morning, day, evening or night. You can see this in action below:

Try visiting this page at a different time of day to see the other images.

This widget uses the local time of your computer to display the correct image for the time of day. Until 10am, the image will say "Good Morning", until 5pm it will be "Good Day"; until 8pm it will be "Good evening", and then finally, "Good Night".

To install this widget in your blog, you can either use the widget installer button, or copy and paste the code further down the page into an HTML/Javascript widget of your blog.

Here is the code to copy and paste into your blog if you prefer to install the widget manually (or would like to display this in a post:

<div align="center"><script src="http://kunoichi.info/bloggerbuster_templates/greeting.js" type="text/javascript"></script></div>

You can copy and paste this code intop an HTML/Javascript widget in your blog sidebar, or in the HTML editor of your post. The image displayed is 200px wide, so it should fit neatly in most sidebars.

I hope you enjoy this widget! As you may have noticed, I've been experimenting with Javascript and widget creation these past few days, and have posted some of my successful creations here. I'm actually working towards a much larger project which I'll post about closer to completion.

Please feel free to leave your comments and suggestions below.

Technorati Tags: widget | time | greeting | blogger+widget | template | image

"Butterfly": a new girly 3 column Blogger template

Here's a new "girly" 3 column template for you lady bloggers! It's called "Butterfly", featuring floral and butterfly styled images against a dark background. Here's a screenshot for you:

The "Butterfly" template features:

• Left and right sidebars


• Unique girly design and header background


• Animated butterfly in sidebar


• Customized AddThis social bookmark buttons in each post to match the template color scheme


• Butterfly styled dividers between each post


• Customizable colours, fonts, etc.


• Label cloud styled to match colour scheme

*Updated 2nd Feb 2010 to include updates links to template images and support for Blogger's latest features

You can see the template in action here, and can download the full template below.

The zip file contains both the template XML file and all images needed to run the template which you can upload to your own hosting provider. It also contains a help file to assist in uploading and using the template.



Download Butterfly Template (zip file)



You are free to modify the template, but please leave the author details within the XML template! A link back to Blogger Buster is always appreciated.



Please leave your comments and opinions below.