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.

Blogger layout problems in FireFox

I've recently decided to make the switch from MS Internet Explorer to Mozilla Firefox, and have noticed problems when viewing the layouts screen (in Blogger dashboard) of my three column templates.

Unlike in IE, where the frame adjusts to match the width of the template, in Firefox, the right sidebars seem "cut off".

Luckily, the sidebar (and occasionally, other elements) are not cut off in the layouts view. In order to see and edit these elements, you need to scroll down to the bottom of the page and slide the scroller in the frame to the right. You'll then see the full span of your blog, and will be able to edit your right hand sidebar elements.

However, I have found a solution which allows you to see your blog elements laid out in good view from this:

To this:

To do this, you will need to edit the "body#layout" section in your blog template (this is found just before the closing </b:skin> tag). This section of your stylesheet affect how your layout looks in the layout editor of your Blogger dashboard. By default, this will be defined something like this:

/** Page structure tweaks for layout editor wireframe */ body#layout #main-wrap,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0; }

In order to make your blog appear differently in the layouts section, you will need to define how you would like your elements to be displayed. This can be different from the actual dimensions of your blog elements, as it will not affect the actual layout of your blog! Here is an example of how you can define the layout properties:

/** Page structure tweaks for layout editor wireframe */ body#layout #outer-wrapper {
width: 770px;
margin-left: auto;
margin-right: auto;
}
body#layout #header-wrapper {
margin-left: 0px;
margin-right: 0px;
width: 600px;
height: 279px;
}
body#layout #main-wrapper {
width: 400px;
padding: 30px 0 0 0;
}
body#layout #sidebar-wrapper {
width: 150px;
padding: 0 0 5px 0;
}
body#layout #left-sidebar-wrapper {
width: 150px;
margin-right: 5px;
padding: 0 0 5px 0;
}
body#layout #footer {
width:600px;
margin:0 auto;
padding-top:15px;
}

You could use these dimensions as the basis for editing the layout of your wireframe, just be sure that the sections referred to all match the names of those defined in your blog (eg: "main-wrapper" may be called "main-wrap-1" in your blog).

I hope this helps resolve any problems you may have had in using 3 column Blogger templates!

Technorati Tags: firefox | blogger | layouts | problems | layout | editor | wireframe |

A digital clock widget for your blog (with installer)

Yesterday I posted the code for a date and time widget you can install in your blog. However, I wasn't particularly happy with the time element of this, and so have created two new digital clocks instead: one for pale backgrounds (the clock displays in black) and another for dark backgrounds (where the numbers are displayed in white). You can preview the clocks in action here and here.

You can easily install these clock widgets into your blog using the forms below:

For blogs with pale backgrounds:

For blogs with dark backgrounds:

I will be developing more widgets in the future, so be sure to check back for updates. If you do have any problems installing these widgets, feel free to get in touch.

Technorati Tags: blogger | widgets | digital | clock | time | real+time

Add a realtime clock and date widget to your blog

While creating a new template, I've been experimenting with a real time clock/date javascript code to add as a blog widget. You can see an example of this at the top of the Sunset blog here.

The time continuously updates like a real digital clock, and should appear in the same color scheme as used in your blog template. You can further customize this widget by adding <div > style tags around the code.

As yet, I haven't integrated the code into a widget installer, but if you would like to use this widget in your own blog, simply copy and paste the code below into a Javascript/HTML element. For those using classic Blogger templates, you can paste the code where you would like it to appear in your blog's template:

I do plan to make a widget installer and further customizations to this javascript, which I will post about as soon as it is ready.

Technorati Tags: blogger | widget | date | time | realtime | clock

Mobile blogging with Flickr

Blogger's mobile blogging service is a great idea, but unfortunately not all mobile phone networks are yet supported (see here for information about which networks currently are). You could still post by email using your mobile phone, but image attachments are not supported by Blogger. So what's the alternative? Use Flickr's mobile blogging service instead!

I often post by camera phone on one of my other blogs, and have found Flickr's mobile blogging service to be ideal for my needs. To start mobile blogging with Flickr, you'll need to take the following steps:

1. Create your free Flickr account (if you haven't already done so). Flickr also provides a paid service, but you don't need to pay extra charges to use the mobile blogging service.
2. Set up your blog by going to Your Account>Blogs in your Flickr dashboard. Click on "Add New Blog" and follow the steps to verify you are the owner of your blog.
3. Next, you need to set up your email address which you will use to post your photos to. Go to Your Account>Upload by email to do this. You will be given two different email addresses to use: the first is to email your photos to Flickr, the second (and the one we are most interested in) will post your photos to your blog. This address will look something like this:

   uniqueemail2blog@photos.flickr.com

   . Enter this email address as a contact in your handset.
4. You can then modify your layout preferences to change how your photo posts will appear in your blog. This can be done from the Your Account>Upload by Email page in your flickr dashboard (look for the link beneath your mobile-to-blog email address). You can alter the size and position of your photos, and also the template which is used to post to your blog.
5. Once you've set your preferences, you can now begin blogging photo posts using your mobile phone!

You can post to Flickr either by sending an email from your handset using your photos as attachments, or by sending an MMS message to your Flickr address. The subject line of your message will be used as the title of your post. Usually, Flickr blog posts appear within a few seconds of being sent, but from experience I can say that on occasion this can take a couple of hours.

I've found this technique to be a very useful alternative to Blogger's service, at least until all mobile phone networks support it!

Technorati Tags: blogger | mobile+blogging | photo+blog | flickr

A "popular posts" widget for Blogger

After some searching for a "Popular Posts" widget for Blogger, I discovered AffiliateBrand's widget (thanks to Blogger Tricks). This widget is free to use, and displays your most popular posts based on tracking of page impressions.

You can see an example of how this works in my sidebar, however please note that I have customised the overall appearance of this widget to suit my blog (which I will post about later, once I've ironed out the kinks). The default widget provided by AffiliateBrand looks something like this:

The widget is very simple to install, and now you don't even need to sign up to AffiliateBrand membership to be able to use it! You will need to register your blog's address though, in order to ensure that your most popular posts are tracked. Here's how to get this widget for your own blog:

1. Visit AffiliateBrand.com and click on "Blog Window-Create/Edit" in the left sidebar.
2. Add your blog URL into the box provided, and click "Add Blog". Your blog's URL will then appear in the window beneath.
3. In order to get the javascript code you need to create your widget, you will need to click on the "edit" link beside your blog's URL. You will then be directed to the page from which you can copy the code. Paste this into Notepad or something similar.
4. It may be a good idea to configure the width and height of the widget before you install it into your blog's template (if you decide to register with AffiliateBrand, you can do this later). To do this, click on "Customize" and choose your specifications for the widget's width, height, how many posts to display, etc. You can also specify a stylesheet for the widget, which I shall explain later. Then click "Save changes.
5. Now, go to Template>Layout and add a new HTML/Javascript element to your sidebar. Paste the javascript code from AffiliateBrand and save your widget. Now when you view your blog, you will see the "popular posts" widget appear in your sidebar. At first, it will display a message rather than any posts as it takes a short time to begin collecting data of your most popular posts. To speed this up, click on a few of your post pages and you should soon see the results begin to appear.

As mentioned, if you create an AffiliateBrand account, you will easily be able to edit your widget later, as the javascript code is dynamically updated from the remote server. Also, you will be able to receive detailed analytics reports of your blog activity.

If you prefer, you can also specify a style-sheet to alter the appearance of your widget, which is explained most fully in the Stylesheet FAQ.

Another advantage of using this widget is that you can associate your Amazon Associated publisher ID and display relevant ads beneath your widget to help you earn money from your blog. To do this, click on "edit" beside your blog's URL, and then on "Advertising". On the following page, you should enter your Amazon Associates ID.

For a great tutorial of how you could customise this widget to better suit your blog's style, take a look at this post by Webweaver, which offers excellent advice.

As yet, I'm still learning about the configuration and usability of this widget, and will probably post again in a couple of days regarding my customisations and experience. In the meantime, feel free to leave your comments and opinions or email me if you prefer.

Technorati Tags: blogger | widgets | popular+posts | widget | most+read | affiliatebrand | amazon+associates