Blogumus: a flash animated label cloud for Blogger!

"Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. I fell in love with Roy's original Cumulus plugin when I saw it, and simply had to learn how to convert this for use in Blogger powered blogs. The result is the widget you can see in action at the top of this post. Hover your mouse over the Flash object to see the animation begin. In this post, I'll explain how you can add Blogumus to your own Blogger layout with ease!

Update #2 (27th April 2010)

Due to hosting issues, Blogumus has stopped working for those who had previously installed using these instructions. I've resolved the hosting issues by uploading to Google Sites and have edited the following tutorial for installation accordingly.

Unfortunately, this does mean you'll have to reinstall your Blogumus widget or change the URLs to the swfobject.js and tagcloud.js files in your template code in order to ensure your widget works properly again (new installations should work just fine).

If you'd like to reinstall this widget, you can delete the Blogumus gadget from within the Layout>Page Elements section of your Blogger dashboard and use the instructions below to add it again.

If you'd simply like to change the URLS to the files, go to Layout>Edit HTML and tick the "Expand widget templates" box. Then locate the following two URLs in your template:

http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf
and
http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js

And replace them with the following URLs:

http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf
and
http://sites.google.com/site/bloggerustemplatus/code/swfobject.js

You can preview your template to ensure you've made no mistakes before saving, and your updated code should display the tag cloud in your blog.

Sincere apologies for the inconvenience this may have caused!

Update #1: Improved Widget Code

I have updated the code required to run this widget to activate links in the tag cloud Flash movie. If you have already installed Blogumus, please replace your widget code with the new updated code, or reference the additional lines to modify your existing installation.

How it works

This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work "out of the box" without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :) You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location. To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing. Here are the steps required to install Blogumus in your Blogger layout: Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediatly after this line, paste the following section of code:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

<script type='text/javascript'>

var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

so.addVariable(&quot;mode&quot;, &quot;tags&quot;);

so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);

so.write(&quot;flashcontent&quot;);

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location. That's all!

Customizing Blogumus

In this default installation, Blogumus includes the following preset variables:

• Width is set to 240px


• Height is set to 300px;


• Background color is white


• Test color is grey


• Font size is "12"

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I'll go through these options in the order they appear in the widget code. Editing width and height The variables for width and height are found in this line of the script:

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer. Editing background color You can change the background color from white to any other color by altering the hex value in the same line:

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes. Alter the color of text By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:

so.addVariable("tcolor", "0x333333");

Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers! Adjust the font size The maximum font size of tags is specified in this line:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number. While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.

Credits, support and requirements

Blogumus is based on the original WP Cumulus plugin by Roy Tanck, and was converted for use with Blogger layouts by myself. Please leave the credit links in the widget code intact. These will not be seen by the majority of your blog readers (as they will only display if JavaScript and Flash is not activated) but leaving these links intact is a great way of passing some link love on to Roy for all his hard work, and to inform other Blogger users that they can find the widget codes on this site.

Support/Issues

If you have any problems installing or using this widget, please leave your comments below or direct these to the Blogger Buster forums as Roy will be unable to provide support for installation in Blogger blogs!

Requirements

For Blogumus to display properly in your template, you will need to have Flash Player 7 or higher. You can download the latest Flash Player plugin for your browser from Adobe. I'm not sure that this installation will support special characters as tags (only Latin characters supported at present). If you do experiecce issues with labels displaying incorrectly, please let me know. I'll try to add more support, but have very little experience using Flash!

Your thoughts?

I hope that you enjoy using Blogumus in your own Blogger blogs! Please feel free to share or syndicate this page with your favorite bookmarking service if you think it is worth a mention, or subscribe to the newsfeed to learn of more great Blogger tutorials as they are posted.

Blogger Tutorials in Progress (What I'm working on now)

This week, I seem to have had a great spurt of creativity, and now have quite a few new tutorials/templates in progress which I have not yet had time to document!



Those of you who follow my updates on Twitter may already have some ideas of what's in store for Blogger Buster over the next few weeks. In any case, I am so excited about some of these new developments that I feel I ought to write a quick update to offer some insights of what I'm working on, and when these projects may become available as tutorials.

New templates

I have two (possibly three) new templates which are almost ready to be released. These are original, "made for Blogger" designs which I hope to perfect and upload within the next week or two.



I've taken a lot of inspiration from grid based designs for these new templates: the first is a minimalist template (with many options for customization), while the second is much more stylized and color-rich.



As some of you may have noticed, I'm still experiencing problems with my file host, though once I've been able to move everything over to the new server, I'll be able to complete and distribute these themes.

Creating an "Asides/Sideblog" section for Blogger

I've always envied the Wordpress function which allows bloggers to display a "sideblog" in the sidebar (a list of posts separate from the main section which often refer to recommended links or very short updates).



Luckily, I've managed to tweak the Blogger template code to allow certain labels to be filtered from the main display of posts on the homepage. This will enable us to display these particular posts as a "sideblog" in the sidebar without being replicated elsewhere on the page.



This method does have some caveats (and a few minor issues, which I'm working on now), but for anyone interested in developing a sideblog I'm sure this will be a useful addition to the arsenal of Blogger hacks available ;)

A improved method of posting excerpts on the home page

For over a year now, I've been using Ramani's excellent hack to display excerpts of my posts on the homepage of Blogger Buster.



However, I must admit that this has never satisfied my desire to display a true excerpt (based on the number of words/characters) which does not rely on editing the HTML code for each post.



So after MUCH searching, experimentation and tweaking, I think I have found a much more preferable solution which uses JavaScript and minimal editing of the template code.



At present, the JavaScript is quite bloated and the results differ between browsers. But at least it works! Once I am happy with the overall functions, I'll begin to use this function here on Blogger Buster and will of course write up a full tutorial for you to use this in your own Blogger template designs.

Animated tag cloud

This is the function I am most excited about! Thanks to Roberto, I learned about a beautiful animated tag cloud plugin which had been made available for Wordpress users. Needless to say I was fascinated by this, and was able to convert for use in Blogger templates:







This tag cloud operates from the labels assigned to each Blogger post and animates these labels using Flash. If you cannot see this animation, this is likely because you need to install the latest version of Adobe Shockwave, have JavaScript disabled in your browser, or are viewing this post in your feed reader ;)



With permission from Roy Tanck (the original author of this plugin) I hope to write a tutorial about this very soon.

Over to you!

I hope you may find these forthcoming tutorials to be useful for your own blogging needs! Don't forget to subscribe to Blogger Buster to learn when these tutorials become available.



Please do let me know your thoughts on these customizations, or indeed any other experimental features you'd like me to attempt by leaving your comments below.

Easy Peasy Recent Comments Widget for Blogger Layouts

As many bloggers have experienced troubles using the original recent comments widget, I've been researching new methods we could use to add this function to our blogs. To my surprise, I realised that we can alter the code of the default Blogger Feed widget to accomodate our need to display recent comments in the layout. By simply manipulating the code, we can create a widget to display the name and a summary/full content of the 5 most recent comments posted to our blogs!







There are several advantages to using this method:

• Special characters are more likely to be recognized and correctly displayed


• This method does not rely on externally hosted scripts, which makes the widget load much faster


• It is much easier to make alterations to the widget


• Comments are displayed in list format, and can automatically be styled to match the design of your blog.

So far, I have found only two disadvantages to using this method. Firstly, as this is based on a default feed widget, we can only display a maximum of 5 recent comments (the limitation applied by Blogger). Secondly, there is no way to display the title of the post commented on, as this information is not included in the code of the atom.xml feed.



At present, you would need to edit the contents of your Blogger template to add this new version of the "recent comments" widget due to current problems with Blogger's "Add widget" API. As soon as I am able to access the API successfully, I will work on a widget installer which will enable you to add this new widget with ease.



For now, here are the instructions to add this widget to your template by customizing your blog's HTML code.

How to add the new "Recent Comments" widget to your Blogger layout

Step One: Back up your template!

Firstly, you should make a full back-up of your existing template. This will enable you to restore your template to it's original composition if you accidentally make a mistake.



To make a back-up of your blog template, go to Layout>Edit HTML in your Blogger dashboard, and click the "Download full template" link near the top of the page.



This allows you to save a copy of your template to your computer as an XML file. Rename your template to help you find it easily, being sure to retain the ".xml" extension.

Step Two: Add new code to your template

In this step, we will add a complete widget (including the widget template) by adding HTML code.



For this, you will need to access the Edit HTML page for your Blogger template. Do not click the "Expand widget templates" box as this may make it more difficult for you to see where the code should be added.



Using your browser's search function (CTRL+F or CMD+F) locate the following line of code:

<b:section class="sidebar" id="sidebar" preferred="yes">

If you cannot locate this exact section, find a line which begins with <b:section which references the "class" or "ID" of sidebar.



Immediately after this line, paste this entire section of code:

<b:widget id='Feed99' locked='false' title='Recent Comments' type='Feed'>

<b:includable id='main'>

<h2><data:title/></h2>

<div class='widget-content'>

<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

<b:loop values='data:feedData.items' var='i'>

<li>

<a expr:href='data:i.alternate.href'>

<b:if cond='data:showItemAuthor'>

<b:if cond='data:i.author != ""'>

<span class='item-author'>

<data:i.author/> said:

</span>

</b:if>

</b:if>

<span class='item-title'>

<data:i.title/>

</span>

<b:if cond='data:showItemDate'>

<b:if cond='data:i.str_published != ""'>

<span class='item-date'>

 on <data:i.str_published/>

</span>

</b:if>

</b:if>

</a>

</li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'>

<b:includable id='main'>

<h2><data:title/></h2>

<div class='widget-content'>

<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

<b:loop values='data:feedData.items' var='i'>

<li>

<span class='item-title'>

<a expr:href='data:i.alternate.href'>

<data:i.title/>

</a>

</span>

<b:if cond='data:showItemDate'>

<b:if cond='data:i.str_published != ""'>

<span class='item-date'>

 - <data:i.str_published/>

</span>

</b:if>

</b:if>

<b:if cond='data:showItemAuthor'>

<b:if cond='data:i.author != ""'>

<span class='item-author'>

 - <data:i.author/>

</span>

</b:if>

</b:if>

</li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Then preview your template. If you have made any errors in pasting this section of code, you will notice the error in your preview, or will receive an error message. If this is the case, click the "Clear Edits" link near the bottom of the page to revert your template back to normal, then begin again.



To offer a better understanding of where to paste the above section of code, here is an annotated screenshot:

Once you have correctly pasted this code, save your template. At first you will not be able to see the recent comments widget appear in your blog layout. We need to add the URL for your comments feed and tweak a few options before the widget will appear.

Step 3: Add Comment Feed URL

The final step to adding this new recent comments widget is to add the Feed URL for your comments feed.



To do this, go to Layout>Page Elements where you should see a new "Recent Comments" feed appear at the top of your sidebar.



Click on the "Edit" link for this widget, where you will be presented with the regular pop-up screen for a Feed Widget:

You need to add the URL of your blog's comment feed in the "Feed URL" box.



The default URL for your blog's comment feed will be something like this:

http://yourblog.blogspot.com/feeds/comments/default

Where "yourblog.blogspot.com" is the URL of your blog. If you use a custom domain, change this to the actual URL of your blog. For example, the URL for the Blogger Buster comments feed is http://www.bloggerbuster.com/feeds/comments/default



You should also tick at least the "Item Sources/Authors" box as this field will be used to display the commenter's name.



Optionally, you could also tick the "Item Dates" option if you would prefer to display the date when comments were added.



Once you have added the URL to your comments feed and ticked the appropriate options, click the "Save" button and take a look at your blog. You should now see your new "recent comments" widget appear in your blog layout.



When this widget is installed, you can move it around to a different part of your layout on the Layout>Page Elements page. As each entry of the comments feed is presented as a list item, the widget should take on the appearance of other list-type widgets in your layout.

Comments? Suggestions?

I hope this new version of the recent comments widget will be suitable for most needs and is easy to install in your Blogger template. Please let me know if you experience any problems when using this widget, or if you have any suggestions for how it may be improved, by leaving your comments below.



Initial photo by Rightee (Flickr Creative Commons).

Blogger template releases for 08-22

In recent months, Blogger templates have increased in number and quality. After last week's 125 Excellent Blogger Templates post, many more remarkable templates have been released.



So from today and each Friday from now on, I'll be posting a new feature for Blogger Buster: a pick of the week's new Blogger template releases.



Here are 10 of the best free Blogger templates which have been released over the past couple of weeks, with links to the demonstration blogs and the author's download page.

Vista 84 by 84 Productions

This is a sleek, three column template based on the theme of Windows Vista. It's among the first Blogger templates to include pagination by default, and features stylized icons for important links and sidebar lists.



Demo | Download

Borboleta by Templates Nova Blogger

[Image removed due to concerns of copyright permissions with a photo on the demonstration blog]

A dark, two column theme with beautiful backgrounds for links in the header section.



Demo | Download

Blue Weed by Template Godown

 

This template features a split column sidebar, and areas in/beneath the header section for your widgets and ads.



Demo | Download

Vibrant by GosuBlogger

Simple and beautiful, this themeis presented in shades of blue and green making it ideal for a technical or professional style blog.



Demo | Download

DF Marine by Blog and Web

A stunning conversion of the original Wordpress theme by Deziner Folio, this design features unique Ajax functionality in the sidebar and a striking header section. It may require some editing of the template for your links and other information, but is otherwise an excellent theme.



Demo | Download

Brooklyn by Our Blogger Templates

This is a minimalist template in which most of the fonts and colors can be altered easily through the Blogger dashboard. There is no working demonstration blog of this template though from the screenshots I can say it does look very interesting and is ideal for the blogger who prefers to customize their theme.



Download

Sunshine by Our Blogger Templates

Here is another flexible theme from Our Blogger Templates which includes a beautiful header banner and styled layout. Again, there is no working demo blog, though the overall appearance is bright and stunning.



Download

Date Night by Suck My Lolly

A pretty feminine theme made especially for Blogger users.



Demo | Download

White Space by ThemeLib

Another minimalist and wholly customizable template by ThemeLib. This is a conversion of Brian Gardner's original theme for Wordpress and is useful for any style of blog or niche subject.



Demo | Download



Blogsmith by Aborregate

This is a simple, two column theme which was converted from a design by Free CSS Templates. A striking use of contrasting colors which should be useful for many styles of blog.



Demo | Download

Genesis by InfoCreek

I was waiting for this beautiful theme to be converted for Blogger after reading the teasing preview on InfoCreek's blog!



This is an elegant dark theme which is ideal for bloggers posting vibrant images as the color scheme really helps photographs stand out. There are two columns in the sidebar and an integrated calendar icon for each posting date.



Demo | Download

Do you design templates for Blogger?

I would like to make the Friday Showcase a regular feature here on Blogger Buster so readers can find the latest themes.



If you would like me to showcase our latest designs in future Friday listings, feel free to drop me a line or post your new themes in the dedicated forum thread and I'll do my best to include your designs in these regular showcase posts.



Please feel free to let us know what you think of this post and the selection of recent Blogger templates by leaving your comments below.

Blogger Widget Problem (sectionID error) and a temporary workaround

As many of you have expressed in your comments and emails, there seems to be an issue with installing widgets using the Blogger Widget API (widget installers).



From what I have read in various forums all widget installers are affected by this, including even the Feedburner widget to add an email form or blog list to a Blogger blog.



As yet, I'm unable to devise a solution for this problem, but I can offer a workaround for those who need to add a new widget to their layout. Here are the details of the problem and a temporary solution until the issue is resolved.

The issue with adding widgets to Blogger layouts

Many of us have been experiencing problems when trying to add a widget using a third party "widget installer" such as the recent comments widget, Feedburner's email subscriptions code and even Amazon widgets.



We are able to follow any steps nescessary to add the widget to our blogs until we are redirected to Blogger's "Add a new widget" page, where we can customize the title, content and choose the blog where the widget will be installed.



At present, clicking the "Add widget to your blog" link results in a screen like this:

The top half of the screen explains that there is a missing required field in the form used to add the widget to our blog:

We're sorry, but we were unable to complete your request.

The following errors were found:



sectionId: Required field must not be blank

While the lower half includes a bX error code.



It seems that the API for adding new widgets may either be in the process of an update or has a temporary error as everything up to this point seems to be working fine.



There are already several threads in the Blogger help group regarding this issue and many of us are trying to work out a solution to the problem.



I will of course update this post when the problem is resolved or when we have discovered a working solution, but in the meantime we can use a temporary workaround.

A temporary work-around for the problem adding third party widgets

As far as I can tell, the API for adding new widgets works just fine up until the point of adding to a specific blog.



This means that when we arrive at the "Add Page Element" page, the code included in the "Edit Content" section should already be configured and suitable for our needs.

If you click the "Edit Content" link on the "Add Page Element" page, this will reveal the code which should be added as the widget content.

You can then copy this code to your clipboard, and paste inside a regular HTML/JavaScript gadget through the Layout>Page Elements page in your regular Blogger dashboard.



While this will take longer (and is certainly more troublesome) than the regular method to add a new widget, it is certainly preferable to being unable to add a new gadget at all!

Your thoughts on the problem?

If you have any suggestions or know of a solution we could use for the widget installation problem, please let us know about this by leaving a comment or sending me an email.



Once this issue is resolved or documented further, I will be sure to update this post with the new information so we can begin using (and developing) widgets for our Blogger blogs!

Blogger's New "Reactions" Feature - How to add to customized blog templates

Blogger have added a new feature for us to use in our post: Reactions. This widget acts like a mini-poll beneath each of your blog posts and offers the ability for readers to leave feedback quickly.

The "Reactions" add-on is currently available through Blogger in Draft, though looks set to be moved over to the regular Blogger interface soon enough. It can be moved around like other elements in the post-footer and will adapt to the color scheme of your blog template. You can customize the buttons and labels through the "Blog Posts" widget in your dashboard if you prefer to use something different to the "funny/interesting/cool" labels which are implemented by default.

How to add "Reactions" to your Blogger template

To add this new function to your Blogger layout, you will need to activate the feature through Blogger in Draft. Once logged in to your Draft dashboard, go to Layout>Page Elements and click the "Edit" link for the "Blog Posts" widget.

In this pop-up window, you will see the option to add "Reactions" to your posts:

Tick the options box and edit the labels for your buttons as required. Then finally save this setting.

Adding the required code to your template

Depending on the type of template you are using, you will need to use one of two methods to add the required code to your template.

If you are using a default Blogger template with no modifications to widgets or the post layout...

Go to the Layout>Edit HTML page in your Blogger dashboard, and look for the "Revert Widget Templates to Default" link near the bottom of the page.

Clicking on this link will replace all of the widget templates with the updated code. All of your existing widgets will remain, so don't worry about losing any data! Instead, this will simply replace outdated code with new code, and ensure you can add all of Blogger's new features with ease.

If you use a customized/third party template...

You will need to add the required code to your template manually.

In this case, go to Layout>Edit HTML in your Blogger dashboard and check the "Expand widget templates" box.

Next, search for the following line of code (or similar):

<p class='post-footer-line post-footer-line-1'>

Immediately after this line, add the following section of code:

<span class='reaction-buttons'>

<b:if cond='data:top.showReactions'>

<table border='0' cellpadding='0' width='100%'><tr>

<td valign='center'><span class='reactions-label'>

<data:top.reactionsLabel/></span>

</td>

<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>

</tr></table>

</b:if>

</span>

Preview your template to see the "Reactions" add-on appear beneath each of your blog posts, and finally, save this new addition to your template.

If you cannot find the "post-footer-line" in your blog template, search for <p><data:post.body/></p> instead, and paste the code immediately after this line.

Color Schemes for the Reactions Add-on

The colors for the reactions add-on are taken from existing variables in your color scheme:

• Foreground: textcolor, textColor, mainTextColor
  
  


• Highlight: linkcolor, linkColor, mainLinkColor

This is to ensure that the color matches the overall scheme of your blog. So if you change the color scheme through the Fonts and Colors section, the colors of your reactions will change too.

To learn more about this new feature, be sure to read the announcement post on Blogger in Draft. Please let me know if there's anything else you need to know about this new feature by leaving your comments below.

Grid Focus - New Blogger XML Template

Generally I prefer to design Blogger templates from scratch than convert existing themes, but for Grid Focus, I made an exception.



This beautiful, grid based design is among one of the best and most customizable themes I have ever used. Converted from the original Wordpress theme by Derek Punsalan of 5thirtyone.com, it features a neat three column layout, an amazing navigation bar and integrated links for the home, main-content and blog feeds. Take a look at this theme in action in the demo blog, or read on for download and installation details.







Here is a full page screenshot of the Grid Focus theme for Blogger:

All of the colors in this template can be changed from the Fonts and Colors section in your Blogger dashboard. So if you prefer to have a bright pink background and electric blue links, you can change these features with ease!



In the download package for this theme, I have included both the XML template and a text version of the template. Full instructions for upload and editing of links in the navigation bar are also included in the download.

• Download Grid Focus Template for Blogger


• Grid Focus Demonstration Blog 

If you have any problems downloading this theme, please let me know by leaving a comment below. Full support is offered in the Blogger Buster forum if required.

Credits and Copyight Notice

This theme is conveted from Derek Punsalan's original Grid Focus theme for Wordpress and is released under a Creative Commons Non Commercial Attribution License.



This means that you can use this theme in your own personal projects, but you cannot sell this theme!



Please remember to give credit where credit is due! The credit link to 5thirtyone.com must remain intact in this template (this is a condition of use from the original designer).

Over to you!

I hope you enjoy this Blogger template and find the customization options to be suitable for your needs. Feel free to tell me your thoughts and opinions by leaving your comments below.

Numbered Page Navigation for Blogger

The ability to 'paginate' Blogger blogs has been a long requested feature. Pagination allows us to number blog pages like those of a book, offering readers the ability to navigate deeper into the archives with ease when compared to the 'newer' and 'older' post links.



After many failed attempts, I was almost ready to admit defeat with this function until I discovered this excellent script by Mohamed of Blogger Accessories. This script replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page.





Mohamed's Blogger pagination script may be installed using two different methods:

• Customizing the template code


• Adding as an HTML/JavaScript widget (gadget) below the main posts section

Both of these installation methods will achieve a similar effect. I personally find adding the code directly to the template makes it easier to customize the style of the pagination links, but if you feel uncomfortable editing your template, the widget installation may be much easier for you.



Here is how the finished installation will appear in your blog:

Once installed, these "page numbers" will appear on your home, archive and labels pages, allowing your readers to easily access pages in your archives. However, the page numbers will not appear on individual post pages. I've noticed many blogs which use pagination like this, and among them none displayed these page links beneath individual posts.



To learn more about using the numbered pagination script for Blogger, pop over to Blogger Accessories to read the useful tutorials Mohamed has posted.

My Slightly Modified Version

As you may have noticed, I'm using a slightly modified version of this script here on Blogger Buster. When customizing the style of Mohamed's original version, I noticed a few elements which I preferred to change for my own preferences, and also modified the CSS for how the numbered links are displayed.

If you would prefer to use this slightly different version instead, here is what you should do.

Add the CSS code to your style section

Firstly, copy all of the code below and paste this just before the closing </b:skin> tag in your template:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

This should change the colors of text and links in the pagination to match the styles already present in your blog template. So if your default text is white against a dark background, the "Pages (#)" section of the script should appear the same way. The color for the background and hover effects of the numbers can be altered according to your preferences by editing the hex values to match the style of your own template.

Add the JavaScript code beneath your posts

The second part of the installation is to add the JavaScript code beneath your posts which will locate and replace the existing "Newer/Older Posts" link. To add this script, go to Layout>Edit HTML in your Blogger dashboard, and do not tick the "expand widget templates" box (it's much easier to add the code while the widgets are contracted). Then find this section of code (or similar) in your template:

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

Immediately after the closing </b:section> tag, add the following section of code:

<script type="text/javascript">



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';



var pageCount = 5;

var displayPageNum = 5;

var upPageWord = 'Previous';

var downPageWord = 'Next';







var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';



for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

itemCount++;

}

}



for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}

}else{

upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}



fFlag++;

}



if(p==(thisNum-1)){

html += '<span class="showpagePoint">'+thisNum+'</span>';

}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

html += '<span class="showpageNum"><a href="/">1</a></span>';

}

}else{

html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';

}

}



if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){



if(thisNum>1){

if(!isLablePage){

html = ''+upPageHtml+' '+html +' ';

}else{

html = ''+upPageHtml+' '+html +' ';

}

}



html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;



if(thisNum<(postNum-1)){

html += downPageHtml;



}



if(postNum==1) postNum++;

html += '</div>';



if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");



if(postNum <= 2){

html ='';

}



for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}



if(pageArea&&pageArea.length>0){

html ='';

}



if(blogPager){

blogPager.innerHTML = html;

}

}



}

</script>



<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

Once you have added this code, attempt to preview your template to ensure there are no code errors. You will not be able to see the script in action on the preview, but this step ensures no adverse effects to your layout.



In the code above, you will notice that I have highlighted three sections of code in bold red. You may need to customize these sections to better suit your preferences:



On line 5, you may need to change the ".com" to reflect your domain extention if you use a custom domain.

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

This default installation should work fine for anyone hosted on Blog*Spot or a dot.com domain, but you will need to alter this section if your custom domain ends in .co.uk or .info for example.



In lines 19 and 20, you can change these values to alter how many posts are displayed on each page, and how many links will be visible at the same time.



The var pageCount = 5; section defiines the number of posts displayed on each page, while var displayPageNum = 5; defines the number of links which are displayed (eg: 1 - 2 - 3 - 4 - 5) beneath the posts section.



Once you have added this JavaScript code and made any changes nescessary for your needs, save your template and open up your blog in your browser. Now you should see the pagination links appear beneath your main posts section, and also on Labels and Archive pages.

Your thoughts?

I hope this post has helped you learn about how numbered page navigation can be achieved in Blogger powered blogs using Mohamed's original methods or my slightly modified script.



Please let me know what you think of these methods, or if you experience any problems, by leaving your comments below.

125 More Excellent Blogger Templates (The Best Yet!)

If you are looking for a fresh and beautiful design to complement your Blogger blog, here is a treat in store for you! This list of 125 free Blogger templates features some of the most beautiful and functional designs for Blogspot that I've ever seen!



I have organized this list by style with links to the demo and download pages to help you find the perfect design for your blog, and hope you enjoy this inspirational list of Blogger templates as much as I did in finding them!



Read more »

Tabbed Sidebar Navigation for Recent Posts, Labels and Archives

These past few weeks, many readers have requested a tutorial for tabbed sidebar navigation, including integrated widgets for recent posts, labels and archives. This customization is a useful and stylish method to organize widgets in your sidebar (or other widgetized area of your blog template): it reduces the space used in your sidebar, and offers readers easy access to the information they may need about your blog.



So in this tutorial I will explain the method I use for tabbed navigation in Blogger Buster including all the code and CSS styling so you can customize your own tabbed widget to match the theme of your blog.

About this tutorial

One of the reasons I have delayed writing this article is because of the vast differences between template styles. It is very easy to install and use tabbed sidebar navigation, but may be much more complicated to make this match the style of your own template.



For this reason, I will explain the style code I use for the tabbed widgets in Blogger Buster, along with methods you could use to change the appearance for your own blog.



If you experience problems styling the widgets to match your own template, please refer to the forum thread for this article where it is easier to offer and receive support.

Step One: Back-up Your Template!

When customizing your Blogger template, it is standard practice to back up your existing template first! This ensures you can revert back to your working template if you make a mistake. It is especially important with this customization as you may not notice such mistakes when previewing your design.



To back-up your Blogger template, go to Layout>Edit HTML and click on the "Download full template" link near the top of the page.



You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.

Step Two: Adding CSS Code

For this initial step of installing tabbed sidebar navigation, we will add the relevant style code. With this in place, it will be easier to see how your tabs will work.



To add this style code, find the closing </b:skin> tag in your template's HTML code.



Just BEFORE this line, paste the following section of code:

div.domtab{

    padding:0;

    width:100%;

    font-size:90%;

    }

ul.domtabs{

    float:left;

    width:100%;

    margin:0;   

    list-style:none;       

    padding-left: 0;   

    }

ul.domtabs li{

    float:left;

    padding:0 5px 0 0;

    text-align: center;

    width: 110px;

    }

ul.domtabs a:link,

ul.domtabs a:visited,

ul.domtabs a:active,

ul.domtabs a:hover{

    padding:.5em 1em 0;

    display:block;

    background:#999;

    color: #333;

    height:2em;

    font-weight:bold;

    text-decoration:none;

    }

html>body ul.domtabs a:link,

html>body ul.domtabs a:visited,

html>body ul.domtabs a:active,

html>body ul.domtabs a:hover{

    height:auto;

    min-height:2em;

    }

ul.domtabs a:hover{

    background:background:#ccc;

    }

div.domtab div{

    clear:both;

    width:auto;

    color:#ddd;

    padding:0 5px;

    margin: 0 0 1em 0;

    }

div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content {

    margin: 0 0 0;

    padding: 0;

    }

ul.domtabs li.active a:link,

ul.domtabs li.active a:visited,

ul.domtabs li.active a:active,

ul.domtabs li.active a:hover{

    background:#ccc;

    color: #333;

    }

div.domtab div .sidebar-tab ul li {

    list-style: none;

    padding: 3px 0 5px 0;

    }

div.domtab div .sidebar-tab ul li a {

    list-style: none;    

    margin: 0;

    padding: 0;

    }

div.domtab div .sidebar-tab ul {

    width: 100%;

    margin: 0;

    padding: 0;

    }

#domtabprintview{

    float:right;

    padding-right:1em;

    text-align:right;

    }

#domtabprintview a:link,

#domtabprintview a:visited,

#domtabprintview a:active,

#domtabprintview a:hover{

    color:#ccc;

    }

div.domtab div a:link,

div.domtab div a:visited,

div.domtab div a:active{

    color:$linkcolor;

    padding:1em .5em;

    font:bodyfont;

    text-decoration: none;

    }

div.domtab div h2 a,

div.domtab div h2 a:hover,

div.domtab div h2 a:active{

    color:#cfc;

    display:inline;

    padding:0;

    font-weight:normal;

    font-size:1em;

    }



body#layout #sidebar-tabs-1 .widget,

body#layout #sidebar-tabs-2 .widget,

body#layout #sidebar-tabs-3 .widget {

    display: block; clear: both;

    }

div.domtab div {display: block; clear: both;}

Be sure to copy all of the code inside this box before you paste this into your template.

Step Two: Add JavaScript Code to the Head Section of your Template

The tabbed navigation requires JavaScript to switch between the different widget areas. To add this functionality to your template, locate the closing </head> tag in your template, and paste the following lines of code immedietly before this line:

<!--[if gt IE 6]>

    <style type="text/css">

        html>body ul.domtabs a:link,

        html>body ul.domtabs a:visited,

        html>body ul.domtabs a:active,

        html>body ul.domtabs a:hover{

            height:3em;

        }

    </style>

<![endif]-->

    <script src='http://bloggerbuster.com/scripts/domtab/domtab.js' type='text/javascript'/>

If you prefer to host the JavaScript required for this customization on your own server, feel free to download the script and alter the tags above to reflect the location on your own server.



Save your template at this point.

Step Four: Add The Required Code to your Sidebar

For this step, you will need to find the opening DIV tag for your sidebar.



In most Blogger templates, this tag will appear like this (highlighted in red):

      <div id='sidebar-wrapper'>

        <b:section class='sidebar' id='sidebar-top-section' preferred='yes'>

<b:widget id='HTML3' locked='false' title='Subscribe' type='HTML'>

However, you may need to be creative! In some templates, the sidebar section is coded like these examples, or possibly something else entirely!

• <div id='sidebar>


• <div id='right-column'>
  
  

Whatever the opening DIV for your sidebar section appears like, you need to paste the following section of code immedietly after it, and before the opening <b:section> tag:

<div class='domtab'>

    <ul class='domtabs'>

        <li><a href='#recent'>Recent Posts</a></li>

        <li><a href='#cats'>Categories</a></li>

        <li><a href='#arc'>Archives</a></li>



    </ul>

    <div style='border: 3px solid #ccc;'>

        <p><a id='recent' name='recent'> </a><b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>

<b:widget id='Feed99' locked='false' title='' type='Feed'>

<b:includable id='main'>

    <div class='widget-content'>

    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

      <b:loop values='data:feedData.items' var='i'>

        <li class='sidebar-list'>

          <span class='item-title'>

            <a expr:href='data:i.alternate.href'>

              <data:i.title/>

            </a>

          </span>

          <b:if cond='data:showItemDate'>

            <b:if cond='data:i.str_published != ""'>

              <span class='item-date'>

                 - <data:i.str_published/>

              </span>

            </b:if>

          </b:if>

          <b:if cond='data:showItemAuthor'>

            <b:if cond='data:i.author != ""'>

              <span class='item-author'>

                 - <data:i.author/>

              </span>

            </b:if>

          </b:if>

        </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/>

    </div>

  </b:includable>

</b:widget>

</b:section></p>



    </div>

    <div style='border: 3px solid #ccc;'>

        <p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

  <div class='widget-content'>

    <ul>

    <b:loop values='data:labels' var='label'>

      <li class='sidebar-list'>

        <b:if cond='data:blog.url == data:label.url'>

          <span expr:dir='data:blog.languageDirection'>

            <data:label.name/>

          </span>

        <b:else/>

          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

            <data:label.name/>

          </a>

        </b:if>

      </li>

    </b:loop>

    </ul>



    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

</b:section></p>

    </div>

    <div style='border: 3px solid #ccc;'>

<p><a id='what' name='arc'/>

        <a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>

<b:widget id='BlogArchive99' locked='false' title='' type='BlogArchive'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>

  <div id='ArchiveList'>

  <div expr:id='data:widget.instanceId + "_ArchiveList"'>

    <b:if cond='data:style == "HIERARCHY"'>

     <b:include data='data' name='interval'/>

    </b:if>

    <b:if cond='data:style == "FLAT"'>

      <b:include data='data' name='flat'/>

    </b:if>

    <b:if cond='data:style == "MENU"'>

      <b:include data='data' name='menu'/>

    </b:if>

  </div>

  </div>

  <b:include name='quickedit'/>

  </div>

</b:includable>

<b:includable id='flat' var='data'>

  <ul>

    <b:loop values='data:data' var='i'>

      <li class='archivedate'>

        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

      </li>

    </b:loop>

  </ul>

</b:includable>

<b:includable id='menu' var='data'>

  <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>

    <option value=''><data:title/></option>

    <b:loop values='data:data' var='i'>

      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>

    </b:loop>

  </select>

</b:includable>

<b:includable id='interval' var='intervalData'>

  <b:loop values='data:intervalData' var='i'>

      <ul>

        <li expr:class='"archivedate " + data:i.expclass'>

          <b:include data='i' name='toggle'/>

          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>

            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>

          <b:if cond='data:i.data'>

            <b:include data='i.data' name='interval'/>

          </b:if>

          <b:if cond='data:i.posts'>

            <b:include data='i.posts' name='posts'/>

          </b:if>

        </li>

      </ul>

  </b:loop>

</b:includable>

<b:includable id='toggle' var='interval'>

  <b:if cond='data:interval.toggleId'>

  <b:if cond='data:interval.expclass == "expanded"'>

    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +       "&dir=close&toggle=" + data:interval.toggleId +       "&toggleopen=" + data:toggleopen'>

        <span class='zippy toggle-open'>▼ </span>

    </a>

  <b:else/>

    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +         "&dir=open&toggle=" + data:interval.toggleId +         "&toggleopen=" + data:toggleopen'>

          <span class='zippy'>

            <b:if cond='data:blog.languageDirection == "rtl"'>

              ◄

            <b:else/>

              ►

            </b:if>

          </span>

    </a>

  </b:if>

 </b:if>

</b:includable>

<b:includable id='posts' var='posts'>

  <ul class='posts'>

    <b:loop values='data:posts' var='i'>

      <li><a expr:href='data:i.url'><data:i.title/></a></li>

    </b:loop>

  </ul>

</b:includable>

</b:widget>

</b:section></p>

    </div>



</div>

Again, be sure to copy all of the code in the scrolling box above before pasting this into your template.



To help anyone who has experienced the "Your template could not be parsed" error when trying to copy and paste this code, I have copied all the above to a text file which you can download here.

• Code for tabbed widget in sidebar (TXT file)

I hope this will help solve these problems for you!



Now, preview your template. If you have made any errors when copying and pasting the code, you will be unable to preview your template. In this case, click on the "Clear edits" button near the bottom of the page and begin again, ensuring you have copied all of the code from the box above. Be sure you paste your code between the opening DIV tag for your sidebar and the opening b:section tag.



If your installation is successful, you will see a tabbed section above your regular sidebar widgets. As you are previewing your template, the initial section will be blank. This is the Feed widget where we can add the URL for your blog feed to display these recent posts. In this instance, save your template so we can add the recent posts and perhaps change some style elements for your tabbed widget area.

Step Five: Add the Feed URL for Recent Posts

Once you have successfully installed the tabbed navigation code and saved your template, it's time to add the URL to your blog feed. This will enable you to display recent posts in the first tabbed section.



Go to Layout>Page Elements in your Blogger dashboard and look out for the new widget section which should appear like this:

Click on the "Edit" link, and add the URL to your blog feed in the pop-up window:

Choose how many items to display, and then click save. This will add your recent posts to your tabbed sidebar navigation widget.



Note: It is not possible to drag and drop the Feed, Label or Archive elements for your tabbed widget on the Page Elements page. These elements appear stacked on top of each other, and cannot be moved separately; this is also why the Feed widget looks different to other page elements on this page.





At the moment, this is a bug of the tabbed widget. Despite many attempts, I have been unable to prevent these widgets from stacking on top of one another, and it is impossible to edit the Archive and Label widgets on this page. If anyone can figure out a solution, I would be very glad to hear from you!

Step Six: Customizing the Appearance of your Tabbed Widgets

Depending on the template you are using, this may be the most complicated step of installation!



The default style code I have offered in this tutorial will be suitable for pale templates with a wide sidebar. If you have a narrow sidebar or different color scheme, you will almost certainly need to change some elements of the style!



Here are the most prominent style issues, and what you can do to resolve them:

The tabs appear on top of each other

This will happen if the combined width of your tabs is wider than the width of the sidebar area.



To alter this, you will need to change the width for the tabs. Here is the section of code you need to change:

ul.domtabs li{

    float:left;

    padding:0 5px 0 0;

    text-align: center;

    width: 110px;

    }

Reduce the width to a smaller pixel value. For example, if your sidebar is 200px wide, change the tab width to 60px. Then the combined width of the three tabs will equal 180px and allow for space between them.

Changing the color of borders and tabs

In the code for this tutorial, I have used two shades of grey for the border and tab colors:

• #ccc is the paler grey


• #999 is the slightly darker shade

Using your browser's search function, you can locate all instances of these colors in the style section of your template and replace these with the hex values for your preferred colors instead.

Over to you!

As I mentioned at the beginning of this tutorial, different template designs may require different methods for customizing the appearance of your tabbed widgets. To offer support, I have created a thread in the Blogger Buster forums specifically for help with this tutorial.



If you need help customizing your widget, please post your questions there with some details of the template you are using or a link to your blog. It's much easier for me to post code on the forums than in comments, and also provides a means for others to locate solutions of they are using a similar template style.





I hope this tutorial has provided a good explanation of how to install tabbed navigation in your Blogger template! Please feel free to leave your comments and opinions about this tutorial, or if you have suggestions for how this may be enhanced.