Friday, 31 August 2007

How to add BlogThis! links to each of your blog posts

In a previous post, I explained how to add a BlogThis! button to your browser links bar. In this post, I will explain how you can also add this link to your blog posts. This will allow your readers to blog about your posts without having to visit their Blogger dashboard, and can assist in publicizing your blog.






First, let me explain how the BlogThis! function works.

The BlogThis! function uses javascript to acquire the url and title of the page you are looking at, sends this to Blogger and also sends you to the posting page in your Blogger dashboard.

So, if you were reading this post from my blog's homepage and wanted to blog about it, the url sent to Blogger would be www.bloggerbuster.com and the title would be Blogger Buster. Since you are reading this post on the "post page", the url would be that of this particular blog post, and the title will be "How to add BlogThis! links to each of your blog posts".

With this in mind, you should understand that it is much better for the BlogThis! links to appear only in your post (item) pages. Otherwise, the link which appears in the BlogThis! pop-up may not correctly match that of the post it refers to.

So, now we have a better understanding of how this works, here is an explanation of how you can make BlogThis! links appear only in your post pages:



  1. First, make a backup of your blog template by going to Template>Edit HTML and clicking on the "Download Full Template" link near the top of the page. You should always do this before modifying your template in case you make a mistake, or decide to revert back to your previous template.

  2. Once you have made a backup of your template, check the "expand widget templates" box, and search for this line:
    <div class='post-footer'>

    If you cannot find this line, search for <div id='post-footer'> instead, as the post-footer section may be defined differently in your template.

  3. Just after this line, paste the following section of code exactly as it is written (highlight all of the code in the text box to ensure you don't introduce any extra line breaks or spaces as this would break the functionality of the link):





    The <b:if...>: conditional tags tell Blogger only to display the link on "item" pages. This ensures that the correct url for the blog post and the correct title will be sent to Blogger for the visitor to write about in their blog.

  4. Save your template and view your blog. The BlogThis! link should not be displayed on the main page of your blog. However, if you click on the title of a blog post and view it on the "item" page, the BlogThis! link should appear in your post footer!

Please do be aware that the BlogThis! function only works for those who use Blogger blogs. Visitors who blog with Wordpress, Typepad or any other system will not be able to blog about your posts directly from the page!

I hope this helps those who have requested the BlogThis! link for their blog posts. Please feel free to leave your comments and suggestions below.

Technorati Tags: | | | |

Add a "BlogThis" button to your toolbar

"BlogThis!" is an easy way to make a blog post without having to visit your Blogger dashboard. It can come in very useful of you find a web page or blog post you want to blog about straight away.






The easiest way to use the "BlogThis!" function is to add a BlogThis button to your browser's link bar. There are two ways you can do this:

  • Create a link in your existing linkbar

  • If you use the Google Toolbar, enable the BlogThis link in the toolbar menu

When you click on the BlogThis! button, a small pop-up screen will appear which contains a link to the page you are on including the title of the page (as it appears in the top left corner of your browser). You can then add more text to the post and publish your post without even having to visit Blogger.com! The pop-up box should look something like this:


You can experiment with the BlogThis! function by clicking on the link below. This link functions in the same way as the link bar BlogThis! link.

BlogThis!

Here's how to create a BlogThis! link in your browser's link bar:


Create a link manually in your browser link bar

To create a link in your existing browser link bar, you will be adding a javascript "bookmarklet" which, when clicked, will open up a new page with a mini Blogger interface in which you can create your post.

The easiest way to do this is to drag the link below into your link bar:


BlogThis! (drag this link to your link bar)

This will create a link called "BlogThis" in your link bar, beside any other links you may already have there.

If the links bar isn't appearing in your Internet Explorer browser, you will need to enable the links view. To do this, go to View>Options and then click on "Links"

Create a link in your Google Toolbar

The Google Toolbar already has the "BlogThis" link installed. To activate this, click on the Google button in your toolbar, then on the "options" selection. You can then tick the BlogThis option, which will then enable the BlogThis function in your link bar.

It should also be possible to create a BlogThis link to appear in each of your Blogger posts. I'm going to experiment with this now, and will post on this subject once I am sure of the method and implications.

Technorati Tags: | | | |


Thursday, 30 August 2007

"Mobile" (tech-style) Blogger template available for download

This is the first "technology" style template I have created, which features a clean and simple layout with a mobile phone in the header background. here's a screenshot for you:







You can see a demonstration of this template on the Mobile Template demonstration blog.

This template also features:

  • Optional "expandable posts" (script provided by Ramani)

  • Hidden Blogger Nav-Bar

  • Complementary Label cloud

  • AddThis social bookmark buttons at the end of each post

  • Fully customizable (fonts, colors, etc)

To download this template, please use the link below. This is a zip file which also contains a help file and the template for use with the selective expandable posts.

Download "Mobile" Blogger Template

All images featured in this template are hosted by Blogger Buster; you do not need to upload images to your own hosting provider.

You are free to modify this template as you wish; however, I do ask that you keep the authorship credits intact within the template. A link back to Blogger Buster is always appreciated!

For more free Blogger templates, be sure to check out the Blogger Templates section of this site.

Coming soon: a "templates" sub-site, where you can find a complete, searchable selection of Blogger templates all in one place. Further details will be posted as soon as this service becomes available.

Technorati Tags: | | |


Wednesday, 29 August 2007

Rounders 4 Three Column Template for download

I have now uploaded the Rounders 4 three column template for you to download. Additional features include a customized label cloud and Addthis social bookmarking buttons beneath each post. Here's a screenshot for you:







You can see a demonstration of this template in the Rounders 4 demonstration blog.

To download this template, right click on the link below and choose "Save As..."

Download Rounders 4 Three column template

For more free Blogger templates, please visit the Templates section

Technorati Tags: | |


Tuesday, 28 August 2007

Create your own recent comments widgets here!

Since many of you would prefer to have different features for your "Recent Comments" widgets, I've decided to post this widget generator. Using this tool means you can customize your recent posts widget to your personal preferences and then automatically insert the widget into your Blogger blog!






Simply choose your preferences in the boxes below, click "Apply" and then "Add Widget to my Blog" when you are ready. I've tested this in both IE and Firefox and the widgets seem to appear fine.

Customize Recent Comments Widget

http://
(eg: "yourblog.blogspot.com" or "www.yourblog.com")

characters


           

Please get in touch if you experience any problems using this widget generator. I hope this helps you all customize the widget to your personal preferences!

Technorati Tags: | | |


Monday, 27 August 2007

"Rounders 3" three column template available for download

I've completed work on the Rounders 3 template to transform the original Blogger template into a three column design. Here's a screenshot for you:







This template also features a complementary label cloud and AddThis buttons at the end of each post for readers to bookmark using their favorite social bookmarking services.

You can see a demonstration of the Rounders 3 three column template here.

To download the Rounders 3 XML template, please use the link below (right click the link and choose "Save As"

Download Rounders 3 Three Column Blogger Template

Other Rounders three column templates are available to download too:

Be sure to check out the Blogger Templates section for loads more free Blogger layouts templates.

Technorati Tags: | | | |


Friday, 24 August 2007

Recent comments widget update! (This works in IE7)

EDIT: You can bow create your own "Recent Comments" widgets using the Recent Comments widget generator here at Blogger Buster.

Since the Recent Comments Widget suddenly stopped working in IE7, I've updated the code and uploaded it to my site in order for us all to continue using it! You can download the new code below. I've tested this in both IE and Firefox and it seems to work just fine (take a look in my right sidebar).






Here's the updated code for the widget which should work fine for all browsers (copy and paste into an HTML/Javascript widget in your blog sidebar):

<script style="text/javascript" src="http://kunoichi.info/blogger_buster/comments.js"></script><script style="text/javascript">var a_rc=3;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

You need to change the portion in red to your own blog address in order for the widget to work.

If anyone has problems using this widget, please let me know!

Technorati Tags: | |



Thursday, 23 August 2007

"Rounders 2" three column template for download

I have modified the original Rounders 2 template to add a second sidebar. Here's a screen-shot for you:






This template also features a complementary Label Cloud and AddThis buttons at the end of each post to enable your readers to add your posts to their favorite social bookmarking sites. You can see the Rounders 2 template in action on the demonstration blog.

To download the XML file for this template, please right click the link below and choose "Save As". You can then save the file to your computer and upload this to your Blogger dashboard from the Edit HTML page.

Download Rounders 2 three column template

Related posts:

Technorati Tags: | |


Wednesday, 22 August 2007

"Rounders" three column template available for download

I've modified the classic "Rounders" template to become a three column design, complete with complementary Label Cloud and AddThis social bookmark buttons. Here's a screenshot for you (click to enlarge):






You can see this template in action on the Rounders demonstration blog.

To download this XML template, please use the link below (right click and choose "Save As)

Download Three Column Rounders Template

Related posts:

Technorati Tags: | | |


Translate your blog using the Google Translator Widget

Here's a useful tool for those of you who would like the ability to translate your blog into other languages: the Google Translator Widget. If you take a look in my right sidebar you'll see that I've implemented this as a sidebar widget.






This widget is really easy to use: simply visit the Google Translator Widget page and choose the option you would like to use for your blog. There are three options available:

  • Just the widget code, which features written links to translate into different languages.

  • The widget with big flags, which features large flags instead of text links

  • The widget with small flags (as I have featured in the right sidebar).

Once you've chosen the format, click on the appropriate link and you will be taken to a page which features the HTML code required for the widget to display. For (new) Blogger Layouts templates, highlight all of this code (CTRL+A) and copy it to your clipboard. Next, open your Blogger dashboard and choose to add a new HTML/Javascript widget to your sidebar. Paste all of the code in the widget and click "save". Now when you take a look at your blog, you can see the translation wodget in action and test it to your heart's content!

For Classic Blogger templates (non-layouts), copy the code and insert this as a complete block of code where you would like it to be displayed in your template. You should be able to preview the adjustments before saving to ensure you have placed it correctly in your blog.

So far the widget seems to work well: the posts on the main page and on post pages are all fully translated. On the down side, the layout of my blog seems to "break" when translated meaning that the sidebars and main column feature underneath each other rather than being aligned together as they should. Also, the text within the widgets in my sidebars is not fully translated, and ads are not displayed.

Still, the positives seem to outweigh the negatives, and I'm glad that readers can translate my posts into their native languages in order to understand them better.

Technorati Tags: | | |


Your opinions needed for future templates

Since my template designs are one of the most popular features of this site, I would very much appreciate your opinions so that in future I can design templates you would most like to download! In the left sidebar I have created a poll for you to vote for design elements you would most like to see in future templates. It would be of great help to me if you would vote in this poll or leave your comments below to let me know which features of template design are most important to you.






Here's a full explanation of the polling options:

  • Three column modifications of existing Blogger templates:

    I have already created three column versions of Minima and 897 for you to download. If you would also like to see other existing Blogger templates transformed to include an extra sidebar (eg: Scribe, Rounders, Dots) then please choose this option.

  • Decorative:

    The "Magical" and "Sweet Dreams" templates are examples of decorative templates, which feature animated gifs and optional add-ons. If you would like to see more templates like these, please choose this option.

  • Simple Schemes/Total control of customization:

    Minima is an example of a very simple scheme, which features no background to the header and total control over customization. I can easily create more templates in this style (perhaps with modifications to the layout) which feature total control over the fonts, background colors etc., so if this style suits you most, please vote for this option.

  • Complementary Widgets:

    The Magical template, for example, features a number of widgets available to complement the design. If you would like to see more designs with complementary widgets available (eg: clocks, random images, background music), please vote for this option.

  • Unique layouts options:

    The Sunset template is an example of what I mean here, in that the layout is not typical of classic template styles. If you would like more templates which "bend" the layout rules, please vote for this option.

  • Header Background Only:

    Many templates I have seen feature simple layouts and customization options with a fixed background to the header. If you like these template styles, please vote for this option.


If there are other options you don't find in the poll, feel free to leave your comments below or email me to let me know your preferences. I'm also considering the possibility of "one-off" template designs and a custom design service where you can purchase a unique template design for a small fee. If you would be interested in such a service, please get in touch.

Technorati Tags: | | |





Tuesday, 21 August 2007

"Magical" 3 Column Template now available (inspired by Harry Potter!)

After such a lot of work, I have finally completed the "Magical" 3 column Blogger template for you to use in your blogs. I have to say that this is my favorite template design so far! The theme was inspired by the Harry Potter series of books/films, and features optional widgets that complement the theme. Here's a screenshot for you:





As usual, this screenshot doesn't do the template justice! Please take a look at the demonstration blog for this template here to get a better look (link opens in a new window).

While the heavy use of images and Javascripts make this template load slower than my other templates, I'm sure you'll agree this is a fair compromise for the overall effect.

This template features:

  • Unique magical theme

  • Animated blog header (watch out for the bat!)

  • Customizable background, fonts, sidebar backgrounds and font colors

  • Label cloud designed to suit the theme

  • Post dividers

  • "Drop Caps" span style for the first letter of each paragraph

The download package for this template features the template's XML file, a help file, all images featured in the template for you to upload to your own hosting account, plus all widget templates for you to install the widgets in your blog. This is a Zip (compressed) file which you should save to your computer and open with a decompression program such as WinZip or WinRar (free).



You can download the full template below:



Download Magical Template



As with all my templates, you are free to modify this template as you wish. Please leave the author credits intact within the template itself and do not redistribute this template without a link back to Blogger Buster!



As you can imagine, this template in particular took a lot of time and work to complete (and yet I'm distributing it for free...) so I do appreciate all the link love I can get. A link back to Blogger Buster in your sidebar is always appreciated. If you like this template, please tell your friends about it too!



Please leave your comments and suggestions below.



Technorati Tags: | | | |

Monday, 20 August 2007

"Inline comments" hack

I came across a hack on Singpolyma's blog which enables you to feature "Wordpress" style comments beneath your blog posts, so readers can leave their comments without having to leave the page!






You can choose to install regular inline comments, or have them perform a "peek-a-boo" function where the comments only appear when your readers click on the appropriate link. Full instructions can be found here on Singpolyma's blog. The hack is quite complex, so be sure to follow his instructions to the letter in order to make this work properly in your blog.

If you would prefer to simply install a template which features a similar hack, try the K1 template from Blogger Templates, which is a (new) Blogger layouts style template featuring commenting below the posts.

Technorati Tags: | |


Sunday, 19 August 2007

Add "Digg it!", "Del.icio.us" and other social bookmark links to your posts

Although I am a faithful user of "AddThis" social bookmark buttons, I've been looking for a way to insert specific social bookmarking links so readers can easily submit individual posts to Digg, Del.icio.us, Technorati and other social bookmarking sites. Now, if you take a look at the bottom of each post, you'll notice these links in place. Here's how to add such links to your own blog posts:






The links you need to add to your template are called by the <a expr...> expression, and are unlike regular links in that they use javascript-style coding to work properly. Each link will look something like this:

<a expr:href='"http://digg.com/submit?phase=2&amp;url=" +
data:post.url + "&amp;title=" + data:post.title'
target='_blank'>DiggIt!</a>

Unlike regular links which you could feature in the body of your posts, you need to replace some HTML code (escape the code), which is why the & symbol is replaced by &amp; in these links. The section I have highlighted in red varies depending on the bookmarking link you wish to use; all of the remaining code remains the same for all social bookmark links.

To keep things simple, I'll show you how to add Digg, Del.icio.us and Technorati bookmarking links to your posts in this tutorial. If you would also like to use other social bookmarking sites, you'll find their links further down the page.

For Blogger Layouts (New Blogger)

Here's how to make those links appear in each of your blog posts:

  1. Before making any adjustments to your template, ensure you have made a backup of your original template by going to Template>Edit HTML in your Blogger dashboard and clicking on the "Download Full Template" link near the top of the screen. Then if you accidentally make a mistake, you know you can easily restore your template to it's original form!

  2. Now, check the "expand widget templates" box is ticked, then search for this section of code:
    <div class='post-footer'>

    If you want the social bookmark links to be in your post footer (above the author details, comment links, etc), you will place the link codes below this line. If you prefer them to feature right at the bottom of each post, scroll up slightly until you see the <p><data:post.body/></p> line, and place the code just below this instead.

  3. The code you need to insert is as follows:

    This will make the links look like this:
    DiggIt!   ♦Add to del.icio.us   ♦Add to Technorati Faves


    Be sure to copy and paste the code exactly as it appears: accidental spaces or line breaks will stop the code from working properly in your template!

  4. Preview your template to ensure it looks the way you want and then save it. Now you can test the links to ensure they work properly by viewing your blog posts and clicking on the links.

The following are links to all social bookmarking sites which I have tested and found to work in new Blogger layouts:

Del.icio.us
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to del.icio.us</a>


Digg
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>DiggIt!</a>


Reddit
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Reddit</a>


Stumbleupon
<a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Stumble This</a>


Google Bookmarks
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to Google Bookmarks</a>


Yahoo My Web
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to Yahoo MyWeb</a>


Technorati
<a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to Technorati Faves</a>


Slashdot
<a expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Slashdot it</a>

You can further customize these links by adding seperators between them, as I did in the example above. I used &#9830; to create diamond shaped bullet points. You could use spaces, slashes or anything else you wish instead. A good reference for the html code needed for special characters can be found here.

For Classic Blogger Templates:

  1. While the process is very similar to that of Blogger Layouts templates, I have to say it's much easier to insert these links into Classic templates!. As before, make a backup of your template before making any adjustments (you can highlight all of your template in the editing window, then copy and paste to Notepad for this).

  2. Find this section in your blog template:
    <p><$BlogItemBody/$></p>

  3. Add the following code right beneath this line to feature Digg, Del.icio.us and Technorati social bookmark links in your blog posts:
    &#9830;<a href="http://digg.com/submit?phase=2&url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Digg it</a> &nbsp; &#9830;<a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">del.icio.us</a> &nbsp; &#9830;<a href="http://technorati.com/faves?add=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Add to Technorati Faves</a>

  4. This will again produce links which when clicked will enable readers to add your post URLs and titles to their favorite social bookmarking sites.

Here is the full list of different links I have tested for Classic Blogger templates:

Del.icio.us
<a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">del.icio.us</a>

Digg it
<a href="http://digg.com/submit?phase=2&url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Digg it</a>

Reddit
<a href="http://reddit.com/submit?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">reddit</a>

Yahoo My Web
<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<$BlogItemTitle$>&u=<$BlogItemPermalinkURL$>">Yahoo MyWeb</a>

Google Bookmarks
<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Google</a>

Stumbleupon
<a href="http://www.stumbleupon.com/submit?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">StumbleUpon</a>

Technorati
<a href="http://technorati.com/faves?add=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Add to Technorati Faves</a>

I hope this tutorial helps you to add these links to your Blogger posts! Please leave your comments and suggestions below.

Technorati Tags: | | | | | |


Saturday, 18 August 2007

Site Changes (Sticky Post)

During the next few days, I'll be making a few changes to the site to you find the information you need more easily. This post will be updated with new information as changes are made. So far, the following changes have been made:

  • Slight changes to template: the left sidebar is slightly wider (to accommodate the "headlines" widget more effectively); the right sidebar is slightly smaller; some alterations to margins, etc. I've checked the adjustments in both IE and Firefox in which everything seems to look okay. If you are using a different browser and feel the template looks odd or operates incorrectly, please email me to let me know about this.

  • New "Headlines" box added to left sidebar. This one features a summary of my latest blog posts and links directly to their respective post pages on site. The scroller pauses when you hover your cursor over it to enable to you read/click. You can also Digg, add to Del.icio.us, email the post etc from within the headlines widget! For more information about my new widget, take a look at this post.

  • "Template" label now includes all posts relating to Blogger template downloads. All posts previously filed under this label are now labeled "Template Mods". This is to better distinguish between posts about modifications, and actual Blogger templates.

  • "Template" link in the header now takes you to the "Blogger Template Downloads" page, which lists all Blogger templates I have created with links to the individual posts.






I hope this doesn't disrupt your enjoyment of the site! These modifications are intended to help you find relevent information more easily, and to eliminate confusion about which posts relate to which subject! Please do let me know if you feel I should make further changes to the site by commenting here or sending me an email.


Friday, 17 August 2007

My new (improved) blog headlines widget

I have now made a new (and much better) blog headlines widget using only javascript (no php required). This has allowed me to include links, and possibly images in the feed which is displayed in the widget, whereas the previous widget did not!






To create this widget, I used the gAjax Pausing RSS Scroller scripts from Dynamic Drive. Rather than relying on a php script to parse the rss feed before it is displayed on my page, this one instead uses Google Ajax Feed API to host/cache the desired RSS feeds, so you don't have to install or host anything on your own server.

In order to make the script work, I needed to upload two javascripts to my web host, and add a small amount of code to my template which includes the Google API specific to this site.

This version of the scrolling headlines is much easier to use and install, and I would highly recommend it to anyone who would like to install such a widget on their own blog. To download all the files needed to create your own scrolling headlines widget, please visit this page on the Dynamic Drive site.

Technorati Tags: | | | | |


Thursday, 16 August 2007

My new scrolling headlines widget

I have now changed this widget to a new improved version. Please check out this post instead for details of the new widget, which is much easier to use and customize than the one discussed in the remainder of this post.






To create a "pausing RSS scroller", I downloaded and modified a package from Dynamic Drive Scripts, which includes both Javascript and PHP files. The PHP files are needed to parse the RSS feed, while the Javascripts convert the feed into the scroller you see in my sidebar. I also added some styling elements to my blog template in order to make the scroller more attractive.

Since the scripts would not function using my default Blogger feeds, I decided to burn the atom.xml feed through FeedBurner, convert this to RSS 2.0 format, and express only as a summary of the posts. This way, I could ensure the feeds would display properly within the widget, and also that there is no interference to subscribers of my main blog feeds!

While I would love to be able to offer this as a customizable widget you can use to display your own blog feeds, I regret to say this won't be possible just yet! If you would like to create such a widget for your own blog, you could download the "Pausing RSS Scroller" package for free from Dynamic Drive and modify the files to display your own blog feed. You will need to be able to upload both Javascript and PHP files to an external server in order to do this, so please be aware of any limitations your hosting provider may have about such scripts. Full installation details and support are available from DynamicDrive.com.

For a small donation towards my hosting costs, I would be willing to create a custom headlines widget and host the external files myself. Please send me an email if you would like me to do this for you.

In the near future, I will be able to offer a free service to provide static headlines widgets which you can create and customize yourselves (see this post for more details), so be sure to check back for updates soon!

Technorati Tags: | | | |


Five ways FeedBurner can Help Improve your Readership

If you're not already using FeedBurner's free services, you're missing out on some great blogging tools! Here are five of the best ways that FeedBurner can help you to improve your blog feed and attract more readers to your site:






  1. Redirect your Blogger feeds through Feedburner:

    This will help you get a better understanding of your feed subscriber base, and can also give you greater control over how your feeds are displayed (see below). To do this, log into your Blogger dashboard and go to Settings>Feeds. Then add your FeedBurner feed URL in the box provided to redirect all your Blogger feeds for management by FeedBurner.

  2. Include "Digg This", "Add to Del.icio.us", "Email this" etc beneath each feed item:

    Using FeedBurner's "Feed Flare" service, you can choose to add various links to the foot of each feed item which will enable readers to Digg your posts, add to FaceBook, email your posts to their friends and a whole bunch more! To do this, log in to your FeedBurner dashboard and choose Optimize>Feed Flare.

  3. Offer your readers blog updates by email:

    Many blog readers prefer to receive updates by email instead of through an RSS reader. Feedburner can handle this service for you very easily, and provide a simple widget for you to collect email subscribers from your blog. To enable this service, go to Publicize>Email Subscriptions in your FeedBurner dashboard and customize your subscription form. You can then add this as a widget to your sidebar using the widget installer. You can even "brand" your emails using custom fonts and your blog's logo!

  4. Let FeedBurner manage your "pings":

    FeedBurner can automatically ping feed-reading sites for you each time you publish, including Technorati and Ping-o-matic! To enable this option, go to Publicize>PingShot in your FeedBurner dashboard and choose the services you would like to ping.

  5. Promote your content with a Headline Animator:

    You can create an animated "headlines" box to place anywhere on the web (in your blog, your website, etc...) which rotates the titles of your most recent posts. there are many styles and designs to choose from, such as the Spring Widgets skin whose background image changes according to the season. To get the code for your own Headline Animator, go to Publicize>Headline Animator in your FeedBurner dashboard and configure a style to your liking. You can even choose to add this as a widget in your blog using the widget installer.

Yet another useful feature is the ability to "summarize" your feed items, to provide a short teaser of your blog posts in order to encourage readers to visit your site to read the whole thing. This is not something which would appeal to all bloggers (which is why it didn't make the top 5!), but has proved rather useful when designing my own "RSS Headlines" widgets.

Also, I've noticed that when I choose to publish 'short' feeds in my Blogger settings, only the title of my posts show up in the feed, making FeedBurner's service a much more usable alternative! To enable feed summaries, go to Optimize>Summary Burner in your FeedBurner dashboard and activate this service.

For more information about FeedBurner, take a look at these posts:

Technorati Tags: | | | |


Wednesday, 15 August 2007

Custom "blog headlines" widgets in development...

I'm currently developing a "mini-site" where you will be able to generate "Blog Headlines" widgets for your blog, having complete control over the widget's appearance. Once your headlines widget is created, you would be presented with a short piece of Javascript code which you can copy and paste into your sidebar where you would like the widget to appear. Is anyone interested in using such a service?






I began considering this when searching for an alternative to the FeedBurner headlines box you see in the top of my left sidebar. Whilst I have discovered a usable alternative for myself, I couldn't create something which you readers can easily configure to use in your own blogs. So instead I'm developing a "mini-site" which uses PHP scripts to generate Javascript code that will feature headlines (and summaries) of any RSS (and possibly Atom) feed. You will also be able to alter the style, height, colors and fonts of the headlines boxes to suit the theme of your own blog.

As yet, this service is still in development. I have the appropriate scripts online and working, but many tweaks are needed before the mini-site will be ready for visitors to use. Also, I want to develop a range of styles suitable for bloggers to use in sidebars.

Of course, this service would be free of charge to use, and unlike many other "news Headlines" widgets, no advertisements or link backs would be bundled with the Javascript code! Please leave your comments and suggestions regarding this project below.


Tuesday, 14 August 2007

"Popular Posts" widget updated!

You can now install a new version of the "Popular Posts" widget (the Blog Window widget) from AffiliateBrand.com which has no borders and is completely customizable for your own blog! This is a great new update, since you will now be able to make changes to your widget using the AffiliateBrand dashboard (which unfortunately my customization for the previous version of this widget did not allow). To see the new version of the Blog Window widget in action, take a look at my right sidebar-the only difference from my previous version of the widget is that it now includes a "subtitle" beneath the header!






If you are already using the Blog Window widget, you can easily switch to this new version using the AffiliateBrand dashboard:

  • If you are a member of AffiliateBrand, log in to your dashboard, click "Configure" and then on "Customize" to see the new "No Borders" option available for your widget.

  • If you are not a member (or choose not to be), simply visit AffiliateBrand.com, click on Create/Edit in the left sidebar and input your blog's URL in the box provided. When you submit your URL, you will be presented with the options to customize your widget, and can obtain the Javascript needed from the Javascript link.

Once you have chosen the no-borders option for your widget, you can customize the overall look of your widget using a custom stylesheet. The default stylesheet for the widget looks like this:


The four main elements of the CSS template control the appearance of the following elements in your widget:

  • Title: Configure the font style, font-color and background of the title

  • Anchor (links): This section controls the look and feel of the post titles which link to your most popular posts in the widget window.

  • RowBackground: This alters the background color and style behind the links in the main window.

  • RowCount: This controls the appearance of the numbers which order the popularity of your posts (eg: 1,2,3,4...)

You can control each of these elements using CSS styling as you would for your blog. In the case of the widget used here at Blogger Buster, I have configured my stylesheet to match the other elements in my sidebar, as you can see in the example below:

Once you have created a new stylesheet to match the theme of your blog, you should upload it somewhere online and then input the link to the CSS template in the "configure" section of your AffiliateBrand dashboard. Your Javascript will automatically be updated with this new information, and your widget will begin to look the way you like it! For more information about the Blog Window stylesheet, take a look here.

You can also change the number of posts shown, over how many days the posts are rated, the width and height of the widget, and the title from your AffiliateBrand dashboard.

Once you have customized the appearance of your widget, you should then add the javascript code to an HTML/Javascript element in the sidebar of your blog. If you would like to customize the appearance of the widget even more, you can do so here by wrapping it in <div> tags and specifying the style of the element, as in this example:

<div style="background: #ff0000; border: 1px dotted #ffffff;>script src="http://AffiliateBrand.com/img/559140890-265v2.js" type="text/javascript"></script>
This would produce a red background with a white dotted border for the widget to sit in! If you're feeling creative you could even customize it to feature a background image!

Once you've installed the javascript in your sidebar, it may take a few minutes for the changes to come into effect. If you have just installed the widget for the first time, try clicking on a few of your posts in order for AffiliateBrand to gather data about them. If you're updating the widget to the "no-borders" version, wait a few minutes and then refresh the page to let the alterations come into effect.

This solution is much better than the manual customization method I discussed in this post. As Gene Kavner (the author of the AffiliateBrand widget and website) highlighted in his comments, the Javascript can be updated easily with changes to the CSS template, height and width etc of your widget whereas the manual customization must instead be changed each time by hand (and it is a rather complicated process!). Also, updates to the operation of the widget cannot be duplicated so easily unless the Javascript version is used. Personally, I prefer this anyway: there is much less code involved, and the widget is ready to be used as it is, which is only good news for busy Bloggers!

Thank you Gene Kavner for producing such a useful widget for us Bloggers, especially as this new version was completed so soon after your initial suggestion!

Technorati Tags: | | | | |


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: | | |

Saturday, 11 August 2007

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!


Friday, 10 August 2007

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: | | |


Thursday, 9 August 2007

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:




My Valentine

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

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

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

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)

Cool Blue

Demo | Download

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

Red Silver (Web 2.0)

Red/Silver (Web 2.0) Blogger Template

Demo | Download

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

Girly Pink (Web 2.0)

Girly pink Web 2.0 style Blogger Template

Demo | Download

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

Shinobi

Shinobi

Demo | Download

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

TicTac Green (Three Column Version)

TicTac Green (Three Column Version)

Read more and download

A three column version of the classic Blogger theme

TicTac Blue (Three Column Version)

TicTac Blue (Three Column Version)

Read more and download

A three column version of the blue TicTac theme.

Gourmet Menu

Gourmet Menu

Demo | Download

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

Mobile (Tech)

Mobile (Tech) Blogger Template

Demo | Download

A simple, technical themed template with three columns.

Rounders4 (Three Column Version)

Rounders 4 (Three Column Version)

Demo | Download

A three column conversion of the original Rounders 4 template.

Rounders3 (Three Column Version)

Rounders 3 (Three Column Version)

Demo | Download

A three column conversion of the original Rounders 3 theme.

Rounders 2 (Three Column Version)

Rounders 2 (Three Column Version)

Demo | Download

A three column conversion of the Rounders 2 theme.

Rounders (Three Column Version)

Rounders (Three Column Version)

Demo | Download

A three column conversion of the classic Rounders Blogger template.

Magical

Magical

Demo | Download

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

Butterfly

Butterfly

Demo | Download

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

Sweet Dreams (3 Column Version)

Sweet Dreams Three Column Version

Demo | Download

A three column version of the Sweet Dreams template.

Sunset

Sunset

Demo | Download

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

Sweet Dreams (Original Version)

Sweet Dreams (Original Version)

Demo | Download

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

Blues

Blues Three Column Template

Demo | Download

A classy three column theme in shades of blue.

897 Three Column Version

897 Three Column Version

Download

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

Girly Pink three column template

Girly Pink Three Column Blogger Template

Download

A fresh and feminime theme with three columns.