tag:blogger.com,1999:blog-7247936826410964782024-03-28T09:14:36.324+00:00Blogger BusterAmanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comBlogger111100tag:blogger.com,1999:blog-724793682641096478.post-30988757827133875762009-09-01T21:39:00.002+01:002009-09-02T10:11:05.354+01:00How to Create a Sitemap with Google Feed Control<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiasKH-kZuuhzlMH8_mJUnro10VOW_hrB4Ax1Zefq5vPJRZH7lagZR7my3Q5W9DmiN4GUHV_7rTBg9-Z_e-vXBn04jSQqn9fBgMf8PWYw1PFSDXZn5uYe0UkBJDGJxbdIwPiX6GN3BGO1o/s1600-h/sitemap-top.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiasKH-kZuuhzlMH8_mJUnro10VOW_hrB4Ax1Zefq5vPJRZH7lagZR7my3Q5W9DmiN4GUHV_7rTBg9-Z_e-vXBn04jSQqn9fBgMf8PWYw1PFSDXZn5uYe0UkBJDGJxbdIwPiX6GN3BGO1o/s800/sitemap-top.png" /></a></div><br />
One question I am asked often is how to create a sitemap, where posts are organized by category (label) and link directly to blog posts.<br />
<br />
There are several ways this could be achieved, such as manually coding a sitemap, or using a service to generate the feeds for each individual label.<br />
<br />
In this article, I'll explain my favourite method for creating a sitemap/table of contents for Blogger blogs: using a modification of <a href="http://googleajaxsearchapi.blogspot.com/2007/05/ajax-feed-api-update.html">Google "Feed Control"</a> to generate a sitemap automatically using the minimal amount of code.<br />
<span id="fullpost"><br />
<span><br />
</span><br />
<h3><span>Overview</span></h3><span>Creating a sitemap using <a href="http://googleajaxsearchapi.blogspot.com/2007/05/ajax-feed-api-update.html">Google's Feed Control</a> is a relatively simple task. You need not know anything about JavaScript or HTML code in order to use this tutorial: so long as you're able to copy and paste, this should be fairly easy to install!<br />
<br />
The sitemap we will create will list all post titles from your blog, organized by their category/label on a post page. We can then link to this post page from elsewhere in the Blogger template, such as a link menu beneath the header, or a link list in the sidebar which details links to other important pages of your site.<br />
<br />
Once complete, your sitemap will appear something like this, featuring the title of your label, followed by links to each post filed under this category:</span><br />
<span><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBKWFwA9L5p3IVgP3172ok08Eqdv74SQvm5hQk4VWjBjg-DELvJBdX3u87JStOWW4TnblVFavP0SwV6mIIOIFVjIzYJaPKbcLskCyUmYnzfTxHwO8EtJlSiRZ6vi-7otdWgL_6CHKR8ag/s1600-h/sitemap-screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBKWFwA9L5p3IVgP3172ok08Eqdv74SQvm5hQk4VWjBjg-DELvJBdX3u87JStOWW4TnblVFavP0SwV6mIIOIFVjIzYJaPKbcLskCyUmYnzfTxHwO8EtJlSiRZ6vi-7otdWgL_6CHKR8ag/s400/sitemap-screen.png" /></a></span></div><span></span><br />
<span><br />
You may also like to take a look at the sitemap I've created for Blogger Buster to see how this works in more detail.</span><br />
<span><br />
</span><br />
<h3>Update - Easy install TOC/Sitemap Script for Blogger by Abu Farhan</h3>Abu Farhan has created <a href="http://www.abu-farhan.com/2009/09/the-best-table-of-content-toc-or-sitemap-for-blogger/">a very simple Table of Contents/Sitemap script for Blogger</a> users which can be installed very quickly and easily. <br />
<br />
This alternative script uses only two lines of code, and can easily be pasted into a post page (or even a sidebar widget if preferred). All we need to do is change the URL of our blog.<br />
<br />
Once installed, this script automatically parses and displays each post under label headings and displays in alphabetical order. What's more, the latest 10 posts from each category are highlighted with "New" so readers can easily notice the most recent posts.<br />
<br />
Unlike my Google Feed Control script, this installation is not limited to 100 posts per category. <br />
<br />
Be sure to <a href="http://www.abu-farhan.com/2009/09/the-best-table-of-content-toc-or-sitemap-for-blogger/">take a look at this excellent script and installation instructions on Abu's site</a> as this is much easier to install and generated a very clean, organized sitemap with little effort.<br />
<br />
Thank you for sharing your script, Abu!<br />
<h3><span>How to create your sitemap with Google Feed Control</span></h3><span>There are four main steps to creating a dynamic sitemap with Google Feed Control:<br />
</span><br />
<ol><span>
<li>Generate an API key from Google<br />
</li>
<li>Add the template for your sitemap to a post page</li>
<li>Paste in your API key</li>
<li>Paste in the URLs for your label feeds</li>
</span></ol><span>Let's look at each step in detail.<br />
<br />
</span><br />
<h4><span>Generate your API key</span><br />
</h4><span> In order to use <a href="http://www.google.com/uds/solutions/dynamicfeed/reference.html">Google's Feed Control</a>, you'll need to generate a unique API key for your blog.<br />
<br />
This key will be unique to your particular blog, and may only be used on the domain you specify during sign-up. If you have multiple blogs and would like to install a sitemap on each blog, you'll need to generate a new API key each time.<br />
<br />
Your API key is provided free of charge, and enables you to utilize scripts which are hosted on Google servers (so we don't need to upload and host these scripts elsewhere!).<br />
<br />
So, first things first! <a href="http://code.google.com/apis/ajaxfeeds/signup.html">Generate a Google AJAX API key for your site</a>, and copy this long string to your clipboard (or your favourite text editor) for later use.<br />
<br />
</span><br />
<h4><span>Paste the template for your sitemap into a post page</span></h4><span>The next step to installing a sitemap is to paste the "template" on which your sitemap will be based into a post page.<br />
<br />
Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, <b>switch over to the "Edit HTML" section of the post editor</b> (if you do not usually use this function), then paste the following section of code into the content section:<br />
</span><br />
<blockquote><code><span><style type="text/css"><br />
/**<br />
* Suppress everything except for title<br />
*/<br />
#feedControl .gf-snippet,<br />
#feedControl .gf-author,<br />
#feedControl .gf-spacer,<br />
#feedControl .gf-relativePublishedDate {<br />
display : none;<br />
}<br />
</style><br />
<script type="text/javascript" src="http://www.google.com/jsapi?key=<b style="color: red;">YOUR_API_KEY</b>"></script><br />
<script type="text/javascript"><br />
/*<br />
* How to use the Feed Control to grab, parse and display feeds.<br />
*/<br />
<br />
google.load("feeds", "1");<br />
<br />
function OnLoad() {<br />
// Create a feed control<br />
var feedControl = new google.feeds.FeedControl();<br />
<br />
// Add blogger label feeds.<br />
feedControl.addFeed("http://<b><span style="color: blue;">URL-OF-YOUR-LABEL-FEED</span></b>?max-results=100", "<b style="color: lime;">TITLE-OF-YOUR-LABEL</b>");<br />
feedControl.addFeed("http://<b><span style="color: blue;">URL-OF-YOUR-LABEL-FEED</span></b>?max-results=100", "<b style="color: lime;">TITLE-OF-YOUR-LABEL</b>");<br />
feedControl.addFeed("http://<b><span style="color: blue;">URL-OF-YOUR-LABEL-FEED</span></b>?max-results=100", "<b style="color: lime;">TITLE-OF-YOUR-LABEL</b>");<br />
feedControl.addFeed("http://<b style="color: blue;">URL-OF-YOUR-LABEL-FEED</b>?max-results=100", "<b style="color: lime;">TITLE-OF-YOUR-LABEL</b>");<br />
feedControl.addFeed("http://<b style="color: blue;">URL-OF-YOUR-LABEL-FEED</b>?max-results=100", "<span style="color: lime;">TITLE-OF-YOUR-LABEL</span>");<br />
feedControl.addFeed("http://<b style="color: blue;">URL-OF-YOUR-LABEL-FEED</b>?max-results=100", "<span style="color: lime;">TITLE-OF-YOUR-LABEL</span>");<br />
feedControl.addFeed("http://<b style="color: blue;">URL-OF-YOUR-LABEL-FEED</b>?max-results=100", "<span style="color: lime;">TITLE-OF-YOUR-LABEL</span>");<br />
feedControl.addFeed("http://<b style="color: blue;">URL-OF-YOUR-LABEL-FEED</b>?max-results=100", "<span style="color: lime;">TITLE-OF-YOUR-LABEL</span>");<br />
feedControl.addFeed("http://<b style="color: blue;">URL-OF-YOUR-LABEL-FEED</b>?max-results=100", "<span style="color: lime;">TITLE-OF-YOUR-LABEL</span>");<br />
feedControl.addFeed("http://<b style="color: blue;">URL-OF-YOUR-LABEL-FEED</b>?max-results=100", "<span style="color: lime;">TITLE-OF-YOUR-LABEL</span>");<br />
<br />
feedControl.setNumEntries(-1);<br />
<br />
// Draw it.<br />
feedControl.draw(document.getElementById("content"));<br />
}<br />
<br />
google.setOnLoadCallback(OnLoad);<br />
</script><br />
<div id="content"><br />
Loading, please wait...</div></span></code></blockquote><span>The <code><style></code> section at the head of this code prevents the summary (usually printed by the Feed Control script) being displayed, so that only the linked title is displayed on the sitemap page.<br />
<br />
You may notice I've also highlighted other sections in bold coloured text. These are the sections we need to edit for your particular blog, as outlined below.<br />
<br />
</span><br />
<h4><span>Paste in your unique API key</span></h4><span>In the code you have pasted in your post page, you need to replace "YOUR-API-KEY" with the unique API key you generated at the beginning of this tutorial.<br />
<br />
It is easiest to have your API key copied to your clipboard; then highlight YOUR-API-KEY and key CTRL+V (or CMD+V) to paste the key instead of the phrase.<br />
<br />
</span><br />
<h4><span>Paste in the URLs and titles for your Label Feed URLS</span></h4><span>This step of the tutorial is a little more complex.<br />
<br />
We need to paste the URLs of the label feeds we would like to use for the sitemap in place of <span style="color: blue;">YOUR-LABEL-FEED-URL</span>, and replace <span style="color: lime;">TITLE-OF-YOUR-LABEL</span> with an explanatory title <i>for each relevant line of the Feed Control script.</i><br />
<br />
Each line we need to edit looks like this in the script we have pasted into the post editor:<br />
</span><br />
<blockquote><code><span> feedControl.addFeed("http://<b style="color: blue;">URL-OF-YOUR-LABEL-FEED</b>?max-results=100", "<span style="color: lime;">TITLE-OF-YOUR-LABEL</span>");</span></code></blockquote><span>In total, I have used 10 lines (for 10 different labels) in the template script. If you require more, simply duplicate this line and add your label feed urls and titles as appropriate.<br />
<br />
Similarly, lines may be deleted if you need to use less than 10 labels for your sitemap.<br />
<br />
Your label feed URLs will be something like this:<br />
</span><br />
<blockquote><span>http://your-blog.blogspot.com/feeds/posts/-/LABEL-NAME</span><br />
<span>or</span><br />
<span>http://www.yourblog.com/feeds/posts/-/LABEL-NAME</span></blockquote><span>where LABEL-NAME is the name of the label you are using in your blog.<br />
<br />
We also need to include the variable "?max-results=100" at the end of the label feed URL to ensure the maximum 100 posts from each label will be displayed. Otherwise, only the first 25 posts will display in our sitemap.<br />
<br />
For example, the URL I use to display all posts filed under the Gadgets label is<br />
</span><br />
<blockquote><span>http://www.bloggerbuster.com/feeds/posts/-/Gadgets?max-results=100</span></blockquote><span>If any of your labels include spaces, you must replace the spaces with %20 instead.<br />
<br />
Here's another example, using my Customize your Blogger Template label:<br />
</span><br />
<blockquote><span>http://www.bloggerbuster.com/feeds/posts/-/Customize%20your%20Blogger%20Template</span></blockquote><span>Finally, <b>the URLs of your label feeds are case sensitive</b>. If you use any capital letters in the names of your Blogger labels, you will need to match these in the label feed URLS.<br />
<br />
The LABEL-NAME element of each line is where you need to type the name/title of the label feed. This aspect is not case sensitive, since it is not generated by your label feeds. If you like, you can use a title which is not the same as the label feed to offer a more explanatory title for your readers.<br />
<br />
Here is how I have coded the sitemap for Blogger Buster:<br />
</span><br />
<blockquote><span><style type="text/css"></span><br />
<span> /**</span><br />
<span> * Suppress everything except for title</span><br />
<span> */</span><br />
<span> #feedControl .gf-snippet,.gf-author,.gf-spacer,.gf-relativePublishedDate {</span><br />
<span> display : none;</span><br />
<span> }</span><br />
<span></style></span><br />
<span><script type="text/javascript" src="http://www.google.com/jsapi?key=MY-API-KEY"></script></span><br />
<span><script type="text/javascript"></span><br />
<span> /*</span><br />
<span> * How to use the Feed Control to grab, parse and display feeds.</span><br />
<span> */</span><br />
<span> </span><br />
<span> google.load("feeds", "1");</span><br />
<span> </span><br />
<span> function OnLoad() {</span><br />
<span> // Create a feed control</span><br />
<span> var feedControl = new google.feeds.FeedControl();</span><br />
<span> </span><br />
<span> // Add blogger label feeds.</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20News%20and%20Issues?max-results=100", "Blogger News and Issues");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Gadgets?max-results=100", "Gadgets");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Free%20Blogger%20Templates?max-results=100", "Free Blogger Templates");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Resources?max-results=100", "Resources");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Custom%20Domains?max-results=100", "Custom Domains");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Images%20Icons%20and%20Badges?max-results=100", "Images and Icons");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Labels%20Categories%20and%20Tags?max-results=100", "Labels, Categories and Tags");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Monetize%20Your%20Blog?max-results=100", "Monetize Your Blog");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/RSS%20Feeds%20and%20Syndication?max-results=100", "RSS Feeds and Syndication");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/SEO%20and%20Blog%20Traffic?max-results=100", "SEO and Blog Traffic");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20Template%20Resources?max-results=100", "Template Resources");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Announcements?max-results=100", "Blogger Buster Announcements");</span><br />
<span> feedControl.setNumEntries(-1);</span><br />
<span> </span><br />
<span> // Draw it.</span><br />
<span> feedControl.draw(document.getElementById("content"));</span><br />
<span> }</span><br />
<span> </span><br />
<span> google.setOnLoadCallback(OnLoad);</span><br />
<span> </script></span><br />
<span><div id="content"></span><br />
<span>Loading, please wait...</div></span></blockquote><span>Once you have finished adding the Label feed URLs and titles to your Sitemap post, you can publish your post and enjoy using your new Blogger sitemap!</span><br />
<span><br />
</span><br />
<h3><span>Troubleshooting your FeedControl Sitemap</span></h3><span>Here are a few issues which you may encounter when installing your sitemap:<br />
<br />
<b>The sitemap takes ages to load!</b><br />
This may happen if you use a large number of labels in your sitemap. Few label feeds will load quickly, while many will take a long time to load.<br />
<br />
If this is of particular issue, try to reduce the number of labels/feeds in your sitemap.<br />
<br />
<b>The sitemap does not display!</b><br />
If the sitemap does not load at all, this may be due to an error when pasting the initial template code, your API key or a label feed.<br />
<br />
The best advice would be to begin the installation again, making sure you use the Edit HTML mode of your post editor and are careful not to accidentally delete any other elements of the code.<br />
<br />
You should also take care not to switch to "Compose" mode while editing your sitemap as this sometimes makes involuntary changes to HTML code which could corrupt the sitemap script. <br />
<br />
Certain Labels do not display any posts<br />
This may happen in cases where the URL of your label feed is not quite correct, for example, the title is not capitalized, or spaces are not replaced with %20.<br />
<br />
In this case, edit your template and check the URL of the offending label feed carefully for any involuntary errors. Make changes as appropriate, and save your template.<br />
<br />
I have more than 100 posts filed under a particular label. How can I display all posts?<br />
Google's Feed Control can only be used to display up to 100 posts from a particular feed. In order to display more results, we need to add a new feed variable, in which the start index is 101.<br />
<br />
In the Blogger Buster sitemap, for example, I need to display more than 100 posts for the Customize your Blogger Template category. In the line after the first 100 results for this category, I paste a new line where the start index of the feed is the 101st post, like this:<br />
<br />
</span><br />
<blockquote><span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");</span><br />
<span> feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template<b style="color: red;">?start-index=101</b>&max-results=100", "<b><span style="color: red;">Customize your Blogger Template (Part 2)</span></b>");</span></blockquote><span>If your label includes more than 200 posts, you can add a third variable where the start index is 201, and so on.</span><br />
<span><br />
</span><br />
<h3><span>Adding extra content, and styling your sitemap</span></h3><span>It is possible to add extra content to your sitemap page, for example, a explanatory paragraph or links to other important pages of your template.<br />
<br />
Ideally, you should add this content while editing your sitemap in Edit HTML mode. Be sure to add this content above or below your sitemap script to prevent any errors which would prevent the sitemap displaying properly.<br />
<br />
If you would like to style elements of the sitemap, you can achieve this using CSS (either by adding to the <style> section in the Sitemap script, or within the <b:skin> section of your Blogger template.<br />
<br />
Here are the classes you can use for styling your sitemap:<br />
</span><br />
<ul><span>
<li>#feedControl - the ID for the overall sitemap <br />
</li>
<li>.gf-title - the title of each label</li>
<li>.gf-author - the author of each post</li>
<li>.gf-relativePublishedDate - the published date displayed beneath each title</li>
</span></ul><span><br />
</span><br />
<h3><span>Final Thoughts</span></h3><span>I hope this tutorial offers a comprehensive guide to using Google's Feed Control to create a dynamic updating sitemap for your Blogger blog! I understand this is not a simple "one click install" sitemap, though as this sitemap updates automatically each time we create a new post, I find this is the easiest, most flexible option to use.<br />
<br />
I would love to know of any simpler installations for this sitemap, so if you have written one (or have discovered a tutorial), please feel free to let us know in the comments.<br />
<br />
</span></span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-16364833462716923802009-08-26T01:04:00.000+01:002009-08-26T01:04:38.541+01:00Improved Label Gadgets - Now Supporting Label Clouds and More!<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRP-fvwnhBwQ39csQ8GyjTvYxcWEgXP7pmGbBcSRAH8t8btfd2gXiv1KLrSqYC494zklEiCPaHZmI7CTMjDCUmTGwxfr45-hE_U8tDEfbmpFWJc22yu8LLK8ES-127tB0kU1yi9lEHDKw/s1600-h/labels-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRP-fvwnhBwQ39csQ8GyjTvYxcWEgXP7pmGbBcSRAH8t8btfd2gXiv1KLrSqYC494zklEiCPaHZmI7CTMjDCUmTGwxfr45-hE_U8tDEfbmpFWJc22yu8LLK8ES-127tB0kU1yi9lEHDKw/s800/labels-image.png" /></a></div><br />
As part of <a href="http://buzz.blogger.com/2009/08/blogger-is-turning-10.html">Blogger's 10th Birthday celebrations</a>, the Blogger team have been hard at work developing enhancements and new features.<br />
<br />
Today, Blogger launched an enhanced "Labels" gadget which now supports label clouds, and allows us to choose which of our labels are displayed within the gadget:<br />
<blockquote>In April, we <a href="http://buzz.blogger.com/2009/04/we-want-to-hear-from-you.html" id="gkxc" style="color: #551a8b;" title="announced">announced</a> that we wanted to hear from you about <a href="http://productideas.appspot.com/#15/e=e828&t=ebf1" id="d0:4" style="color: #551a8b;" title="missing features">your wish list for features</a> in Blogger. Many of you said that the label gadget should be more flexible. Today we are rolling out two enhancements to the label gadget. (Via <a href="http://buzz.blogger.com/2009/08/partly-cloudy-chance-of-labels.html">Blogger Buzz</a>) </blockquote><span id="fullpost"><br />
<h3>Blogger's Label Cloud</h3>Label clouds are a popular way to display label lists in Blogger templates. Previously we have needed to use <a href="http://www.bloggerbuster.com/2007/07/create-tag-cloud-for-your-blog.html">extensive customizations and JavaScript</a> to enable labels to display in cloud format as opposed to a regular list, where the size of the font indicated the popularity of the label within the blog:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3sE0TMwMKAty-9Mdwg1xzDd18n2LXY0VKL8zx9tUtmJPDg7vlUOSx21PbLVgDlVWzn2oB446FU43BLdslQ76tOjynCRoch4MdBli0kX6tfzZg5ix_ldKVxT6KJ9o8KUi1GO-wb7DM2Kg/s1600-h/label-cloud-example.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3sE0TMwMKAty-9Mdwg1xzDd18n2LXY0VKL8zx9tUtmJPDg7vlUOSx21PbLVgDlVWzn2oB446FU43BLdslQ76tOjynCRoch4MdBli0kX6tfzZg5ix_ldKVxT6KJ9o8KUi1GO-wb7DM2Kg/s400/label-cloud-example.png" /></a></div><br />
Adding a label cloud to your Blogger blog is now incredibly easy! Simply go to Layout>Page Elements in your Blogger template and choose to add a new gadget in the area of your choice. Select the "Labels" gadget from the "Basics" menu, and you'll be presented with a screen like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizdvlHYkZn1JvgamDwKBffcKacYJ7F9zrClQr4qhPCS-dpFvk35ymY51a57AlGhFlEyxtPZCSaZ_CgH8KAebP9U0q0HxTlBS8RIc9q6I66qpbjGltB7hpZxbmwUgSkTKBH9WGUvakP6Ho/s1600-h/label-cloud-add.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizdvlHYkZn1JvgamDwKBffcKacYJ7F9zrClQr4qhPCS-dpFvk35ymY51a57AlGhFlEyxtPZCSaZ_CgH8KAebP9U0q0HxTlBS8RIc9q6I66qpbjGltB7hpZxbmwUgSkTKBH9WGUvakP6Ho/s400/label-cloud-add.png" /></a></div>In the "Display" options, choose "Cloud", then save your new gadget. Now when you view your blog, you'll see your labels display in cloud-like formation, with more popular labels highlighted in larger text.<br />
<h4>Customizing the Label Cloud</h4>By default, the labels will be styled to fit with other elements in the same section. All labels will appear in the same color as other links in this area and size is determined by the popularity of the label, on a scale of 1-5 (where 5 is the most popular).<br />
<br />
If you would like to style the label cloud, you can add additional CSS to your Blogger template using the following classes:<br />
<blockquote><b>.label-size-1 a</b> - <i>The class of the smallest size label in the cloud</i><br />
<b>.label-size-5 a </b>- <i>The class for the largest size label in the cloud</i></blockquote>Here's an example of how you could style the largest labels to get you started: <i></i><br />
<blockquote><code>.label-size-5 a {color: #cd0000;<br />
font-size: 3em;<br />
text-decoration: none;<br />
}</code> </blockquote><blockquote><code> .label-size-5 a:hover {<br />
text-decoration: underline;<br />
}</code></blockquote>I'll write up a full tutorial in the next couple of days explaining in more detail how the labels may be customized to your particular preferences. In the meantime, I hope these class examples will help those familiar with CSS to begin styling their own label clouds.<br />
<h3>Choose which labels to display</h3>The second improvement to the Labels gadget is the ability to choose which labels are displayed in the gadget.<br />
<br />
This is an ideal solution for those who use many different labels in their blog, and find the long display or confusing navigation difficult to deal with. <br />
<br />
To select which labels you would like to display in your gadget, add (or edit) a Labels gadget, and choose "Selected Labels".<br />
<br />
You can then edit the list of labels and deselect any which you prefer not to be displayed:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq2xjRfkX73G_tT6ooybbkt9lfQM71ge-rHOZP3bpg-JVlSFEr_-k4qPItMALw-D_ihvgJyPQCA9LokKtvzD9eEGdxUs0MrSN3PC4GyOp9M2IxQKAKOaqhU5-hGxQjz6sdpJemTwc7X6A/s1600-h/choose-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq2xjRfkX73G_tT6ooybbkt9lfQM71ge-rHOZP3bpg-JVlSFEr_-k4qPItMALw-D_ihvgJyPQCA9LokKtvzD9eEGdxUs0MrSN3PC4GyOp9M2IxQKAKOaqhU5-hGxQjz6sdpJemTwc7X6A/s400/choose-labels.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoeaFQt0u7zYAHf_zGipw_3zmjwMA7yMdsJVRYTjD_SwcjVrLE1-fpy60cUkcURpAywepOp77wy32Oi4_ab5ImNZWttLBlml-mGIkXiFWZ3nLSNW43HQOFyGjEWw7lerdLmew7pgXra9U/s1600-h/choose-labels-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoeaFQt0u7zYAHf_zGipw_3zmjwMA7yMdsJVRYTjD_SwcjVrLE1-fpy60cUkcURpAywepOp77wy32Oi4_ab5ImNZWttLBlml-mGIkXiFWZ3nLSNW43HQOFyGjEWw7lerdLmew7pgXra9U/s400/choose-labels-2.png" /></a></div>One feature which I like best about this enhancement is that we can choose to use more than one Label gadget to differentiate between "Categories" and "Labels" - at least in the sidebar gadgets!<br />
<br />
For example, we could title one label gadget as "Categories", and choose to display only a handful of descriptive, "category" labels as a list. Next, we could add a second label gadget named "Tags" which displays as a label cloud and shows all tags used in the blog.<br />
<br />
Of course, this does not yet perform the same differentiation for posts as true "categories" would, but it is a good start and enhances usability for our blog readers.<br />
<h3>Final Thoughts</h3>Overall, I am very impressed with these enhancements to the Blogger Labels gadget as they enable us to customize the navigation experience for our readers.<br />
<br />
I'm sure the Blogger team have even more great features and enhancements to roll out as part of <a href="http://www.bloggerbuster.com/2009/08/happy-10th-birthday-blogger.html">Blogger's 10th birthday celebrations</a> and look forward to reporting and explaining more about these in the coming weeks.<br />
<br />
Feel free to let us know your own opinions and experiences of these enhancements by leaving your comments below.<br />
<br />
</span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-64689561304728195412008-08-28T16:46:00.010+01:002010-04-27T12:47:04.513+01:00Blogumus: a flash animated label cloud for Blogger!<embed type="application/x-shockwave-flash" src="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" id="tagcloud" name="tagcloud" bgcolor="#333333" quality="high" flashvars="tcolor=0xffffff&mode=tags&distr=true&tspeed=100&tagcloud=<tags><a href='http://www.bloggerbuster.com/search/label/Announcements' style='12'>Announcements</a><a href='http://www.bloggerbuster.com/search/label/Blogger%20News%20and%20Issues' style='12'>Blogger News and Issues</a><a href='http://www.bloggerbuster.com/search/label/Blogger%20Template%20Design%20Series' style='12'>Blogger Template Design Series</a><a href='http://www.bloggerbuster.com/search/label/Blogger%20Templates' style='12'>Blogger Templates</a><a href='http://www.bloggerbuster.com/search/label/Custom%20Domains' style='12'>Custom Domains</a><a href='http://www.bloggerbuster.com/search/label/Customize%20your%20Blogger%20Template' style='12'>Customize your Blogger Template</a><a href='http://www.bloggerbuster.com/search/label/Feeds%20and%20Syndication' style='12'>Feeds and Syndication</a><a href='http://www.bloggerbuster.com/search/label/Free%20Blogger%20Templates' style='12'>Free Blogger Templates</a><a href='http://www.bloggerbuster.com/search/label/General' style='12'>General</a><a href='http://www.bloggerbuster.com/search/label/Images%20Icons%20and%20Badges' style='12'>Images Icons and Badges</a><a href='http://www.bloggerbuster.com/search/label/Labels%20Categories%20and%20Tags' style='12'>Labels Categories and Tags</a><a href='http://www.bloggerbuster.com/search/label/Monetize%20Your%20Blog' style='12'>Monetize Your Blog</a><a href='http://www.bloggerbuster.com/search/label/Readers%20Questions' style='12'>Readers Questions</a><a href='http://www.bloggerbuster.com/search/label/Resources' style='12'>Resources</a><a href='http://www.bloggerbuster.com/search/label/SEO%20and%20Blog%20Traffic' style='12'>SEO and Blog Traffic</a><a href='http://www.bloggerbuster.com/search/label/Showcase' style='12'>Showcase</a><a href='http://www.bloggerbuster.com/search/label/Tools' style='12'>Tools</a><a href='http://www.bloggerbuster.com/search/label/Weekly%20Review' style='12'>Weekly Review</a><a href='http://www.bloggerbuster.com/search/label/Widgets%20and%20Add-ons' style='12'>Widgets and Add-ons</a></tags>" width="460" height="200" allowScriptAccess="always"></embed> "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! <span id="fullpost"> <br />
<br />
<h3>Update #2 (27th April 2010)</h3><p>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.</p><p>Unfortunately, <b>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</b> in order to ensure your widget works properly again (new installations should work just fine).</p><p><b>If you'd like to reinstall this widget</b>, 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.</p><p><b>If you'd simply like to change the URLS to the files</b>, go to Layout>Edit HTML and tick the "Expand widget templates" box. Then locate the following two URLs in your template:</p><blockquote>http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf<br/><b>and</b><br/>http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js</blockquote><p>And replace them with the following URLs:</p><blockquote>http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf<br/><b>and</b><br/>http://sites.google.com/site/bloggerustemplatus/code/swfobject.js</blockquote><p>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.</p><p>Sincere apologies for the inconvenience this may have caused!</p><!-- jumplink --><br />
<h3>Update #1: Improved Widget Code</h3>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. <h3>How it works</h3>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). <h3>How to install Blogumus in your Blogger layout</h3>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): <blockquote><b:section class='sidebar' id='sidebar' preferred='yes'></blockquote>Immediatly after this line, paste the following section of code: <blockquote><b:widget id='Label99' locked='false' title='Labels' type='Label'><br />
<b:includable id='main'><br />
<b:if cond='data:title'><br />
<h2><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/><br />
<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><br />
<script type='text/javascript'><br />
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;);<br />
// uncomment next line to enable transparency<br />
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);<br />
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);<br />
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);<br />
so.addVariable(&quot;distr&quot;, &quot;true&quot;);<br />
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);<br />
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;);<br />
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);<br />
so.write(&quot;flashcontent&quot;);<br />
</script><br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable><br />
</b:widget></blockquote>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! <h3>Customizing Blogumus</h3>In this default installation, Blogumus includes the following preset variables: <ul><li>Width is set to 240px</li>
<li>Height is set to 300px;</li>
<li>Background color is white</li>
<li>Test color is grey</li>
<li>Font size is "12"</li>
</ul>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. <u><b>Editing width and height</b></u> The variables for width and height are found in this line of the script: <br />
<br />
<blockquote>var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "<b style="color: red;">240</b>", "<b style="color: blue;">300</b>", "7", "#ffffff");</blockquote><br />
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. <u><b>Editing background color</b></u> You can change the background color from white to any other color by altering the hex value in the same line: <br />
<br />
<blockquote>var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "<b style="color: red;">#ffffff</b>");</blockquote><br />
For example, if you prefer a bright red background, you may replace <b>#ffffff</b> with<b> #ff0000</b>. Take a look at this page for a list of commonly used hex color codes. <u><b>Alter the color of text</b></u> By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line: <br />
<br />
<blockquote>so.addVariable("tcolor", "0x<b style="color: red;">333333</b>");</blockquote><br />
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! <u><b>Adjust the font size</b></u> The maximum font size of tags is specified in this line: <blockquote>so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='<b style="color: red;">12</b>'><data:label.name/></a></b:loop></tags>");</blockquote>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. <h3>Credits, support and requirements</h3>Blogumus is based on the original <a href="http://www.roytanck.com/2008/03/15/wp-cumulus-released/">WP Cumulus plugin</a> by <a href="http://www.roytanck.com/">Roy Tanck</a>, 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. <h4>Support/Issues</h4>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! <br />
<br />
<h4>Requirements</h4>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 <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe.</a> 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! <br />
<br />
<h3>Your thoughts?</h3>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. </span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-65462762120485999622007-11-22T10:41:00.000+00:002009-07-26T02:01:38.770+01:00A drop down menu for your labels<p>If you have a long list of labels in your sidebar, you could be losing valuable space to display other information. A different method of displaying your labels is to use a drop-down menu: this takes up very little space at all, and is useful for helping your readers find the information they need. This post explains how a drop-down menu for your blog labels can be achieved in just a few easy steps.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-06-30: blogger buster post content
google_ad_channel = "5493525252";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "666666";
google_color_text = "000000";
google_color_url = "CC0000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>This hack was originally developed by <a href="http://hackosphere.blogspot.com/">Ramani of Hackosphere</a>, though for this tutorial I have further simplified the process so there are only two steps required:</p>
<ol><li>First you should make a back-up of your existing template by going to Template>Edit HTML in your Blogger dashboard and clicking the "download full template" link which is near the top of the page. It is always good practise to back-up your template before making any modifications at all, just in case you make a mistake and later need to use your old template again.</li>
<li>Next you will need to find the following line of code in your blog's template:
<blockquote><b:widget id='Label1' locked='false' title='Labels' type='Label'/></blockquote>
To find this line, you do not need to tick the expand widget templates box. This is the un-expanded tag used to display the label widget in your blog template. Highlight all of this line, and replace this with the following section of code:
<iframe src="http://bloggerbuster.com/iframe_codes/drop_down_labels.html" width="500px" height="400px"></iframe><br/>
Then save your template and take a look at your new drop-down menu!</li></ol>
<p>Once installed, you can then move the label widget to other areas of your blog in the layouts section of your dashboard, just like any other widget.</p><p>I hope this tutorial has been useful to you. Please feel free to leave your comments and suggestions below.</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/blogger?from=http://www.bloggerbuster.com" rel="tag">blogger</a> | <a href="http://www.technorati.com/posts/tag/labels?from=http://www.bloggerbuster.com" rel="tag">labels</a> | <a href="http://www.technorati.com/posts/tag/drop-down?from=http://www.bloggerbuster.com" rel="tag">drop-down</a> | <a href="http://www.technorati.com/posts/tag/menu?from=http://www.bloggerbuster.com" rel="tag">menu</a> | <a href="http://www.technorati.com/posts/tag/javascript?from=http://www.bloggerbuster.com" rel="tag">javascript</a> | <a href="http://www.technorati.com/posts/tag/sidebar?from=http://www.bloggerbuster.com" rel="tag">sidebar</a></span></p>
</span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-16599308916580764392007-11-15T15:25:00.000+00:002008-02-26T12:48:12.659+00:00Show labels without the post count<p>Labels are very useful to help categorize your posts, and also so readers can easily find posts they would like to read. The default "labels" widget will also show the post count beside the label name, to inform your readers how many posts are categorized under this label. However, this isn't to everyone's taste, and can also be disheartening when one of your labels only has a small post count beside it! So if you would prefer to remove the post count from your label widgets, here is a quick and easy way to remove it.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-06-30: blogger buster post content
google_ad_channel = "5493525252";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "666666";
google_color_text = "000000";
google_color_url = "CC0000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h3>How to remove the post count from your label widget</h3><p>The widget tag for the label post count is contained inside the widget template for the label widget itself. To remove the post count, we simply need to remove this widget tag.</p><p>To do this, go to Template>Edit HTML in your Blogger dashboard and ensure you have checked the "expand widget templates" box. Then you will need to locate your labels widget in the template. The easiest way to find it is to use your browser's search function and search for this partial line:
<blockquote>b:widget id='Label</blockquote>
This will easily help you locate your labels widget, even if this was not the first label widget you had installed in your template.</p><p>The whole code for the label widget will look something like this:
<blockquote><b:widget id='Label1' locked='false' title='Labels' type='Label'><br/>
<b:includable id='main'><br/>
<b:if cond='data:title'><br/>
<h2><data:title/></h2><br/>
</b:if><br/>
<div class='widget-content'><br/>
<ul><br/>
<b:loop values='data:labels' var='label'><br/>
<li><br/>
<b:if cond='data:blog.url == data:label.url'><br/>
<data:label.name/><br/>
<b:else/><br/>
<a expr:href='data:label.url'><data:label.name/></a><br/>
</b:if><br/>
<span style="font-weight:bold; color: red;"> (<data:label.count/>)</span><br/>
</li><br/>
</b:loop><br/>
</ul><br/>
<br/>
<b:include name='quickedit'/><br/>
</div><br/>
</b:includable><br/>
</b:widget></blockquote>
I've highlighted the tag for the label post count in bold red. All you need to do is delete this line of code from your template (only the red part!) and there will no longer be a post count after each label in your list. You can preview your blog before saving to ensure the widget looks the way you had intended; if all is well, then go ahead and save your template. It really is this simple!</p><p>I hope this simple tutorial has been useful to you. I always appreciate your comments and suggestions, so please feel free to leave your comment below.</p>
</span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-86949700490487262842007-10-28T12:26:00.000+00:002009-07-26T01:56:10.741+01:00Remove "nofollow" tags from your template to spread some link love<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijb3K-7ps7eMNtNpTLOF9aFFvqn6RX8K63Crli14vnh7qklk9C3w-ApO-RG2dkXeO8fhp6_ynWCix6Z17sLEhGYP1Rt4g5YSsNDvGu4c0I8CBqKguFGArsUvWUQmZ8j8jjigz22N7hxcA/s1600-h/ifollowblue.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijb3K-7ps7eMNtNpTLOF9aFFvqn6RX8K63Crli14vnh7qklk9C3w-ApO-RG2dkXeO8fhp6_ynWCix6Z17sLEhGYP1Rt4g5YSsNDvGu4c0I8CBqKguFGArsUvWUQmZ8j8jjigz22N7hxcA/s320/ifollowblue.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5125765585325620450" /></a>If you take a look at the source code for your blog, you'll probably see several references of the <span style="font-weight:bold;">rel='nofollow'</span> tag. This tag was originally created to prevent search engines from indexing links in order to reduce spam. However, this simply doesn't seem to work, even as a deterrent to would be spammers. Spam still exists, and if anything the problem of spam is worse than ever.</p><p>But the most annoying thing about the "nofollow" tag is this: <span style="font-style:italic;">it prevents legitimate, and helpful links from being indexed</span> by three of the top search engines: Google, Yahoo and MSN. Rather than deter spammers, it's more of a deterrent to commenter's and those who would otherwise link back to your blog.</p><p>There is something we can do about this: <span style="font-weight:bold;">remove the "nofollow" tags!</span></p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-06-30: blogger buster post content
google_ad_channel = "5493525252";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "666666";
google_color_text = "000000";
google_color_url = "CC0000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h3>Why I have removed "nofollow" from my blog</h3><p>After much consideration, I have now removed all instances of rel="nofollow" from my blog template. This means that your backlinks, and links in your comments will now be indexed by the three major search engines when they spider this blog.</p><p>I believe that it's only fair to reward those who provide useful and informative comments with a proper link back to their blog, and the same goes for those who link to my posts too! As <a href="http://www.searchenginejournal.com/13-reasons-why-nofollow-tags-suck/4410/">Loren Baker</a> rightly says:
<blockquote>Linking to someone with a NoFollow attribute is a sign of not trusting them. It’s like reaching to shake someone’s hand, but stopping to put on a pair of latex gloves.</blockquote></p><p>At present, I'm not concerned that my DO-follow approach will make Blogger Buster a target for comment-spam: <span style="font-style:italic;">“Everyone who passes a human inspection should get the link love.”</span> And if a comment appears to be spam? I always can always use the "delete" button to remove it! <a href="http://www.bloggerbuster.com/2007/05/comments-policy.html">You can read my comments policy here</a>.</p><h3>How you can remove "nofollow" tags from your own Blogger template</h3><p>This method works only for Blogger "layouts" blogs. At present, there is no way of removing "nofollow" from classic templates which are hosted by Blog*Spot (though if you are publishing by FTP, you may want to take a look at <a href="http://webstractions.blogspot.com/2007/06/remove-nofollow-from-classic-ftp.html">this very technical post</a>).</p><p>As always, you should make a full backup of your template before making any modifications. To do this, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download full template" link near the top of the page.</p><p>Next, open up your template in Edit HTML mode, and ensure you have checked the "expand widget templates" box. The code you need to find in your template is contained within the blog posts widget, and unless you tick this box you will be unable to find any instances of "nofollow" in your template!</p>Finally search for all instances of <span style="font-weight:bold;">rel='nofollow'</span> in your template. The easiest way to search for these is to use the search function in your browser (CTRL or CMD + F). In total there should be three instances of this tag, the first is in the backlinks section, which will look like this:
<blockquote><a expr:href='data:backlink.url' <font color="red"><span style="font-weight:bold;">rel='nofollow'</span></font>><data:backlink.title/></a></blockquote>
If you would like to remove the "nofollow" attribute for backlinks (links to your blog) you should remove the phrase highlighted in red.</p><p>The second and third instances of "nofollow" are located in the comments section, and should both look like the example below:
<blockquote><a expr:href='data:comment.authorUrl' <font color="red"><span style="font-weight:bold;">rel='nofollow'</span></font>><data:comment.author/></a></blockquote>Again, you should remove only the phrase highlighted in red to remove this "nofollow" attribute from comment links in your blog.</p><p>Once you have removed the "nofollow" tags to your preferences (backlinks, comments or both), you can save your template and let your blog readers know about the changes you have made.</p><h3>Let readers know about your <span style="font-style:italic;">Do</span>-follow policy</h3><p>Most "do-follow" bloggers feature a logo or comment policy in their sidebar to let readers know that their links will be followed. <a href="http://randaclay.com/blogging/the-i-follow-movement/">Randa Clay</a> (one of the "poster children" for the Do-follow movement) created a set of badges you can add to your sidebar. Alternatively, she has provided CSS code which you can use to create a badge without the need for externally hosted images, as you can see here:</p><p align="center"><div style="background-color: #FFFFFF; width: 123px; height: 52px;">
<div style="background-color: #FF9900; float: right; width: 118px; height: 20px; color: #000000; font: bold 15px arial; padding-top: 3px; margin: 2px 2px 0px 2px; text-align: center;">U COMMENT</div>
<div style="background-color: #000000; float: right; width: 118px; height: 20px; color: #FFFFFF; font: bold 15px arial; padding-top: 3px; margin: 2px; text-align: center;">I FOLLOW</div></div></p><p>Here is the code used for this CSS styled badge:
<blockquote><div style="background-color: #FFFFFF; width: 123px; height: 52px;"><br/>
<div style="background-color: #FF9900; float: right; width: 118px; height: 20px; color: #000000; font: bold 15px arial; padding-top: 3px; margin: 2px 2px 0px 2px; text-align: center;">U COMMENT</div><br/>
<div style="background-color: #000000; float: right; width: 118px; height: 20px; color: #FFFFFF; font: bold 15px arial; padding-top: 3px; margin: 2px; text-align: center;">I FOLLOW</div></div></blockquote></p><h3>Things you should know about using "Do-Follow" in your Blogger blog</h3><p>If you are considering joining the "Do-Follow" movement to allow comment links and backlinks to be indexed by search engines, there are a few things you should be aware of:
<ul><li>If your blog is "private", the <span style="font-weight:bold;">rel=nofollow</span> tags <span style="font-style:italic;">will</span> still be generated, in order to ensure your blog <span style="font-style:italic;">is</span> kept private!</li>
<li>We have no control over Blogger's comments pages, which will still include the rel="nofollow" tags, even if you remove these from your template entirely. However, comments which feature on your post pages <span style="font-weight:bold;">will not</span> have this tag in place, which is the most important thing!</li>
<li>When you post a comment while logged in to your Blogger/Google account, you will generate a link to your author profile, rather than your actual blog URL. Instead, you may prefer to choose "Other" for your comment identity, which will allow you to post your name and blog URL instead of a mere link back to your profile page.<br/><br/>Only blogs which allow "anyone" to comment will have this feature enabled in the "post a comment" section. So you may wish to consider changing the comment settings for your blog if you do decide to adopt a Do-Follow policy.</li>
<li>Blogs which use Haloscan to display comments cannot remove the "nofollow" tags from their comments.</li>
<li>As far as I am aware, the "nofollow" tags cannot be removed from Classic Blogger templates, as the tag is generated by Blogger within the <$CommentAuthorName$> link, and is not available for removal by the blog's author.<br/><br/>However, if you publish via FTP and have some technical knowledge, you may want to check out <a href="http://webstractions.blogspot.com/2007/05/processing-classic-ftp-blogger-pages-as.html">Ronnie Dodger's informative post</a>.</li></ul><p><p>Of course, the removal of the "nofollow" tag is not suitable for every blog, so you should think carefully before using the Do-Follow approach!<p>Please feel free to leave your comments and opinions below, especially as you now know that your comments will be followed!</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/do+follow?from=http://www.bloggerbuster.com" rel="tag">do+follow</a> | <a href="http://www.technorati.com/posts/tag/nofollow?from=http://www.bloggerbuster.com" rel="tag">nofollow</a> | <a href="http://www.technorati.com/posts/tag/tags?from=http://www.bloggerbuster.com" rel="tag">tags</a> | <a href="http://www.technorati.com/posts/tag/link+love?from=http://www.bloggerbuster.com" rel="tag">link+love</a></span></p>
</span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-39787468305512286762007-10-03T11:35:00.000+01:002008-02-26T12:48:12.663+00:00How to control the number of posts displayed in label pages<p>By default, the 20 most recent posts are displayed on label pages (ie: when you click on a label link in the sidebar. If there are more than 20 posts assigned to a label, then at the bottom of the page you would also find links to next and previous pages.</p><p>Recently a reader asked how it is possible to change this, particularly in regard to label clouds. So in this post, I will explain the methods for changing the number of posts displayed, for both default label lists and label clouds too.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-06-30: blogger buster post content
google_ad_channel = "5493525252";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "666666";
google_color_text = "000000";
google_color_url = "CC0000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>To change the number of posts shown on label pages involves editing your template and adding some code which controls the number of posts displayed. It is always good practice to make a full back up of your blog template before making any modifications to the template, so be sure to have done this before implementing this hack!</p></p>The process is different depending on whether you use a default label list or a label cloud to display your labels, so I will explain each of these separately for you. </p><h3>For default label "lists"</h3><p>By "label lists" I refer to the default label widget which is generated when you add a label widget to your blog in the layouts section of your dashboard. This may be a regular list, drop down list or multi-styled version.</p><p>Decide on the number of posts you would like to be displayed in your label pages, whether this be 5 posts or 100 (see below for more details about this). Then ensure you have ticked the "expand widget templates" box. You then need to replace every occurrence of this phrase:<blockquote>data:label.url</blockquote>With this instead:<blockquote>data:label.url + "?max-results=<span style="font-style:italic;">n</span>"</blockquote>where "<span style="font-style:italic;">n</span>" is the number of posts you would like to display on label pages. An easy way to search for all these phrases is to key CTRL+F. You may also like to copy all of the expanded template to Notepad (or your favorite text editor) and change these phrases using the "replace" function instead. Then you would need to paste the modified template over the existing template.</p><p>Once you've done this, save your template and click on a label to see the change in the number of posts which are displayed.</p><h3>For Label Cloud users.</h3><p>By "Label Clouds" I refer to the hack developed by <a href="http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html">Phydeaux</a> to display your labels in cloud form. You can read about this hack <a href="http://www.bloggerbuster.com/2007/06/creating-label-cloud-for-blogger.html">in this post</a>, and will often find label clouds in my templates.</p><p>To change the number of posts displayed when readers click on an item in your label cloud, find this line in your template:
<blockquote>a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);</blockquote>
And replace it with this instead:
<blockquote>a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t) +'?max-results=<span style="font-style:italic;">n</span>';</blockquote>
where "n" is the number of posts you would like to be shown on labels pages. This section of code will usually appear in the section for the label widget code in your sidebar.</p><p>Save your template, and then click on an item in your label cloud to see the change in the number of items.</p><p>If you would also like the same number of posts to appear when you click on a label link from your post (usually found in the post-footer section), you would also need to replace all occurrences of "data:label.url" as described above.</p><h3>Why you may want to change the number of posts displayed.</h3><p>If you write particularly long posts, you may prefer to have fewer than 20 posts displayed on label pages which would speed up page loading time slightly, and also ensure the pages are not too long.</p><p>Those who use hacks to summarize their posts on the main pages (eg: the selective expandable posts hack) may wish to display more posts than 20 to fill up more space on the page instead.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/blogger+labels?from=http://www.bloggerbuster.com" rel="tag">blogger+labels</a> | <a href="http://www.technorati.com/posts/tag/label+clouds?from=http://www.bloggerbuster.com" rel="tag">label+clouds</a> | <a href="http://www.technorati.com/posts/tag/posts+displayed?from=http://www.bloggerbuster.com" rel="tag">posts+displayed</a></span></p><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-77255843138082511212007-09-15T18:27:00.000+01:002008-02-26T13:11:29.974+00:00How to show links to related posts<p>Over at <a href="http://hoctro.blogspot.com/2007/01/killer-hack-related-articles-by-labels.html">Hoctro's Place</a>, I found a great hack which can help you show links to related posts (by label) beside each of your blog posts (in the sidebar section). This can be a very useful hack because many visitors to your blog will land on a "post page" rather than on your home page, and these links can direct them to other posts of interest on your blog.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-06-30: blogger buster post content
google_ad_channel = "5493525252";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "666666";
google_color_text = "000000";
google_color_url = "CC0000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>This hack uses the JSON Callback technique to retrieve post titles from your blog's labels feed. Also, the inclusion of more than one label set is possible, so if you have more than one label for a post, related titles will displayed for each of these labels.</p><p>You can choose the maximum number of labels to display as well as the maximum number of posts for each label, which is handy if you feature a great many posts under one particular label.</p><p>Hoctro's instructions for this hack are very good, and take you through the modifications to your template step-by-step. It is advisable to pay close attention to the instructions though as the modifications are quite extensive!</p><p>For the full tutorial, please visit the <a href="http://hoctro.blogspot.com/2007/01/killer-hack-related-articles-by-labels.html">"Showing Related Articles" tutorial</a> over at Hoctro's blog.</p><p>Although I don't currently feature this hack here on Blogger Buster, I will certainly make use of this when my template is upgraded in the next few weeks! I will also look into the possibility of featuring the related posts links right beneath each post instead of in the sidebar, which I will post as tutorial once I am more sure of how this can be achieved.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/related+posts?from=http://www.bloggerbuster.com" rel="tag">related+posts</a> | <a href="http://www.technorati.com/posts/tag/javascript?from=http://www.bloggerbuster.com" rel="tag">javascript</a> | <a href="http://www.technorati.com/posts/tag/widget?from=http://www.bloggerbuster.com" rel="tag">widget</a> | <a href="http://www.technorati.com/posts/tag/labels?from=http://www.bloggerbuster.com" rel="tag">labels</a> | <a href="http://www.technorati.com/posts/tag/feeds?from=http://www.bloggerbuster.com" rel="tag">feeds</a></span></p>
</span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-54192438358870076042007-07-05T23:23:00.000+01:002009-07-26T02:01:57.297+01:00Create a "tag cloud" for your blog<p>You may have seen "tag clouds" in other blogs which feature keywords from the blog posts in a cloud format. These are different to "label clouds" which are constructed of the labels you use for your Blogger posts. You can see an example of a "tag cloud" I constructed for Blogger Buster here:</p>
<p align="center">
<style type="text/css">
<!--
.zoomclouds {
text-align: left;
border:8px solid #CC0000;
padding:2px;
position:relative;
background-color:#FFFFFF;
width:300px;
}
.zoomclouds span a, .zoomclouds a {
margin: 0 2px;
text-decoration:none;
font-family: Helvetica, arial, sans-serif;
}
.zoomclouds span.tag1 a {color:#330000}
.zoomclouds span.tag2 a {color:#660000}
.zoomclouds span.tag3 a {color:#990000}
.zoomclouds span.tag4 a {color:#CC0000}
.zoomclouds span a:hover, .zoomclouds a:hover {
color:#FF3300;
background-color:#FFCCFF;
text-decoration:none;
}
.zoomcloudswg {
font-size:10px;
color: #bbb;
}
.zoomcloudssp {
font-size:10px;
color: #444;
}
-->
</style>
<script type="text/javascript"
src="http://www.zoomclouds.com/tc/BloggerBuster/20/9.30/">
</script></p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2007-06-30: blogger buster post content
google_ad_channel = "5493525252";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "666666";
google_color_text = "000000";
google_color_url = "CC0000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>I created this tag cloud for free over at <a href="http://zoomclouds.egrupos.net/">ZoomClouds</a>, which allows you to customise the size, colour scheme and included tags of your cloud. To create a tag cloud for your own blog, here's what you'll need to do:</p>
<p><ol><li>Head on over to ZoomClouds and create your free account. This will allow you to use the tag cloud service and store your designs on site.</li>
<li>Now it's time to create your first tag cloud! Sign in to your ZoomClouds account and click on "create cloud|" near the top of the page.</li>
<li>Give your cloud a name and description, and submit your RSS or Atom feed. For Bloggers this will either be "/feeds/posts/default?alt=rss" or /atom.xml" at the end of your blog address (eg: http://yourblog.blogspot.com/feeds/posts/default?alt=rss).</li>
<li>Select how many days worth of content you want to include in your cloud. The maximum will depend on how many posts are included in your feed, so you may want to consider changing your feed settings if you want to include all of your posts in the tag cloud.</li>
<li>Click "create cloud" to create your cloud based on these settings.</li>
<li>You can then view your cloud with the default ZoomClouds design to see how it can look. To change the appearance of your cloud, click on "design" near the top of the screen and choose your settings, including border colour, fonts and more. You can save multiple templates of the same cloud here too.</li>
<li>To get the code for your cloud, click on "design" and scroll down the page a little until you see the code box. Select all of the code (Ctrl+A) and copy to your clipboard. You can then insert this into your blog template where you would like it to be displayed.</li>
<li>If there are tags in your cloud which you would prefer to be left out, you can choose this by clicking on "Filters" near the top of your ZoomClouds dashboard and adding each unwanted tag in the box supplied. Similarly, you can also add tags that you <em>want</em> to be included in the cloud which aren't yet featured.</li></ol></p><p>Tag clouds could be used instead of label tags in your blog, or indeed as well as labels, since they are a reflection of your post content, rather than the labels you give to your posts. Example usage would be in a sidebar widget, though you may also want to consider featuring one at the top of your posts (see <a href="http://www.bloggerbuster.com/2007/06/blogger-hack-add-sticky.html">this post</a> for a tutorial), or even in a blog post as I have done here!</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/tags/tag+cloud" rel="tag">tag+cloud</a> | <a href="http://www.technorati.com/tags/blog+tags" rel="tag">blog+tags</a> | <a href="http://www.technorati.com/tags/labels" rel="tag">labels</a> | <a href="http://www.technorati.com/tags/zoomclouds" rel="tag">zoomclouds</a> | <a href="http://www.technorati.com/tags/free+widgets" rel="tag">free+widgets</a></span></p>
</span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-9726154061144553652007-06-16T16:24:00.000+01:002008-06-16T22:16:11.110+01:00How to include Technorati tags at the bottom of every post<p>A quick and easy way to include <span class="blsp-spelling-error" id="SPELLING_ERROR_0">Technorati</span> tags at the end of each post is to use <a href="http://blog.andrewbeacock.com/2005/10/oddiophiles-technorati-tags.html"><span class="blsp-spelling-error" id="SPELLING_ERROR_1">Oddiophile's</span> Rather Fab <span class="blsp-spelling-error" id="SPELLING_ERROR_2">Technorati</span> <span class="blsp-spelling-error" id="SPELLING_ERROR_3">Bookmarklet</span></a>. This <span class="blsp-spelling-error" id="SPELLING_ERROR_4">bookmarklet</span> is kept in your "Favorites" or <span class="blsp-spelling-error" id="SPELLING_ERROR_5">internet</span> <span class="blsp-spelling-error" id="SPELLING_ERROR_6">bookmarkets</span> and brings up a script box into which you can add your tags and generate the code which you'd then paste into your blog post.</p><p>To get the <span class="blsp-spelling-error" id="SPELLING_ERROR_7">bookmarklet</span>, visit <a href="http://blog.andrewbeacock.com/2005/10/oddiophiles-technorati-tags.html">this page</a> and right click the link which says "<span class="blsp-spelling-error" id="SPELLING_ERROR_8">Oddiophile's</span> rather fab <span class="blsp-spelling-error" id="SPELLING_ERROR_9">Technorati</span> <span class="blsp-spelling-error" id="SPELLING_ERROR_10">Bookmarklet</span>". Then click "add to favorites" or simply drag to your bookmark list. </p><p>When using the <span class="blsp-spelling-error" id="SPELLING_ERROR_11">bookmarklet</span>, don't leave spaces between the words in phrases: instead you should link them with a "+" sign. You can also modify the <span class="blsp-spelling-error" id="SPELLING_ERROR_12">bookmarklet</span> to suit your <span class="blsp-spelling-error" id="SPELLING_ERROR_13">blog's</span> needs, as is demonstrated on Lorelle's blog. This is a great tool for both Blogger and <span class="blsp-spelling-error" id="SPELLING_ERROR_14">Wordpress</span> users who have no alternative method to tag their posts. It's also rather useful for helping build traffic using <span class="blsp-spelling-error" id="SPELLING_ERROR_15">Technorati</span>, as your blog will then be associated with the tags you have used, and will become easier for readers to find.</p><p>I use <span class="blsp-spelling-error" id="SPELLING_ERROR_16">Technorati</span> tags on each post, so if you'd like to find out how they work, just click on one: you'll find other posts which have been tagged with the same label, both from my blog and the thousands of others in the <span class="blsp-spelling-error" id="SPELLING_ERROR_17">bloggosphere</span>!</p><p><span class="technoratitag"><span class="blsp-spelling-error" id="SPELLING_ERROR_18">Technorati</span> Tags: <a href="http://www.technorati.com/tags/technorati" rel="tag"><span class="blsp-spelling-error" id="SPELLING_ERROR_19">technorati</span></a> <a href="http://www.technorati.com/tags/tags" rel="tag">tags</a> <a href="http://www.technorati.com/tags/bookmarklet" rel="tag"><span class="blsp-spelling-error" id="SPELLING_ERROR_20">bookmarklet</span></a> <a href="http://www.technorati.com/tags/oddiophile" rel="tag"><span class="blsp-spelling-error" id="SPELLING_ERROR_21">oddiophile</span></a> <a href="http://www.technorati.com/tags/rather+fab" rel="tag">rather+fab</a> <a href="http://www.technorati.com/tags/blogging" rel="tag">blogging</a> <a href="http://www.technorati.com/tags/blogger" rel="tag">blogger</a> <a href="http://www.technorati.com/tags/wordpress" rel="tag"><span class="blsp-spelling-error" id="SPELLING_ERROR_22">wordpress</span></a></span></p><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-9400736647210442202007-06-16T12:26:00.000+01:002008-06-16T22:14:33.510+01:00Creating a label cloud for Blogger templatesAs you can see in my sidebar, I have my labels arranged in a "cloud" formation rather than a simplistic list. I used a tutorial from <span class="blsp-spelling-error" id="SPELLING_ERROR_0">Phydeaux's</span> excellent blog to do this. Here's a link to the tutorial, which includes code you can simply copy and paste into your blog template:
<a href="http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html"><span class="blsp-spelling-error" id="SPELLING_ERROR_1">Phydeaux's</span> tutorial for creating a Blogger Label Cloud</a>
The label cloud shows the relative number of posts linked to a label by displaying them in larger, brighter colours. So in the default template, labels with more posts will be big and blue, while labels with less posts will be small and black.
After installing the label cloud, you may well want to fiddle around with the font sizes and colour schemes. To change the font sizes, look for the following sections just before the closing section of your template:
<blockquote>var <span class="blsp-spelling-error" id="SPELLING_ERROR_2">maxFontSize</span> = 20;
var <span class="blsp-spelling-error" id="SPELLING_ERROR_3">maxColor</span> = [0,0,255];
var <span class="blsp-spelling-error" id="SPELLING_ERROR_4">minFontSize</span> = 10;
var <span class="blsp-spelling-error" id="SPELLING_ERROR_5">minColor</span> = [0,0,0];
</blockquote>
If you want to alter the size of labels with more posts, you should change the "var <span class="blsp-spelling-error" id="SPELLING_ERROR_6">maxFontSize</span>" to a number greater then 20 (<span class="blsp-spelling-error" id="SPELLING_ERROR_7">eg</span>: 24). In my opinion, a font size larger than about 30 should be avoided, especially if there are a lot of labels in your blog! On the same note, a minimum font size of less than 10 makes it very difficult to read.
To change the colour of the fonts used, you will have to modify the <span class="blsp-spelling-error" id="SPELLING_ERROR_8">RGB</span> colours. Since Blogger templates use Hexadecimal values to construct your blog, you may want to use a tool such as <a href="http://cedesign.net/colors.htm"><span class="blsp-spelling-error" id="SPELLING_ERROR_9">Cedge's</span> Colour Calculator</a> to find the appropriate <span class="blsp-spelling-error" id="SPELLING_ERROR_10">RGB</span> colour codes. Simply copy the Hex values into the boxes and press enter: your <span class="blsp-spelling-error" id="SPELLING_ERROR_11">RGB</span> values will be displayed, along with a coloured section to check you've entered the values correctly.
Play around with the values and use "Preview" to check that everything looks the way you want. When all is done, simply save your template and enjoy! Any new labels you add will automatically be included in your cloud.
<span class="technoratitag"><span class="blsp-spelling-error" id="SPELLING_ERROR_12">Technorati</span> Tags: <a href="http://www.technorati.com/tags/label+cloud" rel="tag">label+cloud</a> <a href="http://www.technorati.com/tags/blogger" rel="tag">blogger</a> <a href="http://www.technorati.com/tags/templates" rel="tag">templates</a> <a href="http://www.technorati.com/tags/tags" rel="tag">tags</a> <a href="http://www.technorati.com/tags/customizing+blogger" rel="tag">customizing+blogger</a> <a href="http://www.technorati.com/tags/blogging" rel="tag">blogging</a></span><div class="blogger-post-footer"><p><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6NDRmMDlkYTctYjAzNi00M2NiLTk5MmQtMGJhNzc5MTQyM2E1&hl=en">Download your copy of The Blogger Template Book</a></p><p>Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)</p>
<p style="background: #cd0000; padding: 3px; color: #fff;"><a href="http://themeforest.net/user/Amanda/portfolio?ref=Amanda">Exclusive Blogger Templates designed by Blogger Buster from only $10!</a></p></div>Amanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.com