tag:blogger.com,1999:blog-7247936826410964782024-03-28T09:14:36.324+00:00Blogger BusterAmanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comBlogger139125tag:blogger.com,1999:blog-724793682641096478.post-47646991596540127992012-07-30T13:00:00.000+01:002012-07-31T21:04:28.911+01:00Page Navigation with Arrow Keys in Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg534Zc0lJJFstbexJE_R5fZjl7UfOY0zmTVJk89-eza-peAfAWQXLUmKb1sj6UQjNwWXpBqkahDFCHMRZwYMnBp3RlMThIzOUNJZqFcEL2iDbNUxUSg7G4FctxTr_D4MuAHR5HW1PpnUH4/s1600/compass.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg534Zc0lJJFstbexJE_R5fZjl7UfOY0zmTVJk89-eza-peAfAWQXLUmKb1sj6UQjNwWXpBqkahDFCHMRZwYMnBp3RlMThIzOUNJZqFcEL2iDbNUxUSg7G4FctxTr_D4MuAHR5HW1PpnUH4/s1600/compass.png"></a></div>
Navigating between pages using the keyboard arrow keys is a very useful feature. It saves time scrolling down the page to find links to the next page in a site and is very intuitive for visitors.<br>
<br>
In this tutorial, I offer a very simple Blogger template hack which can be used to navigate between newer and older posts on any page where the "blog pager" is present (including index, search, archive and item pages) using the left and right arrow keys.<br>
<br>
Try out this functionality on <a href="http://lucius-template.blogspot.co.uk/" target="_blank">my latest Blogger template release</a> and read on for details of how to add this function to your own Blogger-based site.<br>
<br>
<a href="http://www.bloggerbuster.com/2012/07/blogger-page-navigation-arrow-keys.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-296045194936849442012-07-06T13:02:00.000+01:002012-07-06T13:04:27.753+01:00Add a Facebook Invite Friends Link to your Blogger Site<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieMMUkmCpHrR1DJAfIFogerN2Isp5AkSsh8ZFGaIOfXzyeLgXGU0doG29J7fgvMs0gkZqcIAlHt41avv3cvSu5qN30iden7g8cqAZtaev_vH1D-skd8VkW94Ph98LxQw919NSQnXYiVl9G/s1600/invite-facebook-friends-blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieMMUkmCpHrR1DJAfIFogerN2Isp5AkSsh8ZFGaIOfXzyeLgXGU0doG29J7fgvMs0gkZqcIAlHt41avv3cvSu5qN30iden7g8cqAZtaev_vH1D-skd8VkW94Ph98LxQw919NSQnXYiVl9G/s200/invite-facebook-friends-blogger.png" title="" width="163"></a></div>
<span style="background-color: white;">Over at <a href="http://www.9lessons.info/2012/07/facebook-invite-friends-api.html" target="_blank">9Lessons</a> I read a very helpful tutorial to add an "Invite your Facebook Friends" link to a website. I was able to modify this in order to add to a gadget which now appears in the sidebar on all pages of Blogger Buster (beneath the Facebook Like box).</span><br>
<br>
<div>
If you click on this link, a box will appear on the page enabling you to invite chosen friends from your Facebook profile to visit Blogger Buster.<br>
<br>
In this simple tutorial I'll explain how you can add this functionality to your own Blogger powered blog.<br>
<br>
</div><a href="http://www.bloggerbuster.com/2012/07/add-facebook-invite-friends-link-to.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-49086264380593978142012-06-24T10:00:00.000+01:002012-06-24T10:00:00.407+01:00Even more fonts for Blogger with Google Web Fonts<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO_MnYre_i8mdNf-0gfMmcqfZ2fLNihe5FsKVpoMQsjijvXPqiYR2Z7szyxFoQ28b1TbMv0XErBQAIfpsLbVcJjz7nVLgmajOpzOGuyQiAgnPqwfIoB4PhHLSMC9Lepk3mUJslA5R0NqYt/s1600/Google+Web+Fonts.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO_MnYre_i8mdNf-0gfMmcqfZ2fLNihe5FsKVpoMQsjijvXPqiYR2Z7szyxFoQ28b1TbMv0XErBQAIfpsLbVcJjz7nVLgmajOpzOGuyQiAgnPqwfIoB4PhHLSMC9Lepk3mUJslA5R0NqYt/s320/Google+Web+Fonts.png" width="320"></a></div>
<link href="http://fonts.googleapis.com/css?family=Fredoka+One%7CLoved+by+the+King%7CCodystar" rel="stylesheet" type="text/css">
<style type="text/css">
.fredoka {font-family: 'Fredoka One', cursive; font-size: 3em;}
.lovedby {font-family: 'Loved by the King', cursive;font-size: 3em;}
.codystar {font-family: 'Codystar', cursive;font-size: 3em;}
</style>
Using the Blogger Template Designer, we can spruce up our blogs using any of the many custom fonts available. This selection is powered by Google Web Fonts, and offers a wide variety of styles for almost any type of blog. <br>
<br>
However, if none of these fonts are suitable for your design, take a look at the <b>huge</b> selection (currently over 500) of freely available web fonts available from Google.<br>
<br>
We can use any of these fonts in our Blogger templates by adding just a few lines of code. Here's how to use any Google Web Font in your Blogger template design in just a few simple steps.<br>
<br>
<a href="http://www.bloggerbuster.com/2012/06/even-more-fonts-for-blogger-with-google.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-56346940516064941432012-06-19T13:30:00.000+01:002012-06-19T13:30:06.692+01:00Smooth Scrolling to Anchor Links on Page with Blogger (Quick Tip)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEc82P4aF9S10EL2_KHQo0QQXggaal5CevLewXQqIhSUdhZBF_CuYNSz7tR2kQ4j-EMGmp2K6snJjsVIqTslzUuuOpXLkdQZlcOpOE8OWNe1my07BKQEGBoipLLKe8lDXRHZ-b-ODURRV/s1600/Blogger-Post.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEc82P4aF9S10EL2_KHQo0QQXggaal5CevLewXQqIhSUdhZBF_CuYNSz7tR2kQ4j-EMGmp2K6snJjsVIqTslzUuuOpXLkdQZlcOpOE8OWNe1my07BKQEGBoipLLKe8lDXRHZ-b-ODURRV/s1600/Blogger-Post.png"></a></div>
When writing long posts or pages in Blogger, it can be useful to have links enabling readers to quickly scroll to the relevant section of the page.<br>
<br>
An example of this which is found in most Blogger sites is the "Comments" link which when clicked jumps to the comment section on the post item page.<br>
<br>
Rather than jump sharply to the linked section, it may be desirable to scroll gracefully. This provides the reader with a glimpse of the content they are skipping over, and is a nice touch to add to a well-designed site.<br>
<br>
Here's a quick tip to scroll smoothly to a section link further down (or up!) a page in Blogger.<br>
<br>
<a href="http://www.bloggerbuster.com/2012/06/smooth-scrolling-to-anchor-links-on.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-82705872277207044912012-05-17T13:44:00.005+01:002012-05-17T13:44:57.930+01:00How to control the Attribution gadget when using the Template Designer<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpeuCh2w7iDgGmqmZ8v-hy5DgI_s-dyO_xwK-ouJtDyZ9et77s8X268SOWPFiG-AzTA4e76LokUHeAkHmH2EhgG9mpdn3o2Ny22L7zodf0l9U6a_MwPG84WKpb0ALa-Nk54WJoqSOfuQvP/s1600/Blogger-Post.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpeuCh2w7iDgGmqmZ8v-hy5DgI_s-dyO_xwK-ouJtDyZ9et77s8X268SOWPFiG-AzTA4e76LokUHeAkHmH2EhgG9mpdn3o2Ny22L7zodf0l9U6a_MwPG84WKpb0ALa-Nk54WJoqSOfuQvP/s1600/Blogger-Post.png"></a></div>
If you are using one of Blogger's new templates, you'll notice an "Attribution" widget which appears at the very bottom of your site. This will contain details of the template designer, a "Powered by Blogger" statement, and possibly attribution for any background images you've added through the Template Designer.<br>
<br>
We can add copyright information to this gadget by editing through the <b>Layout</b> page in our dashboard, but by default are unable to change it's position or remove it.<br>
<br>
For various reasons, you may want to remove this gadget from your Blogger layout. For example, if you have highly customized your template so it looks nothing like the original design on which it is based, or you would prefer visitors not to know that your site is operated using Blogger's free service.<br>
<br>
Since removing the Attribution gadget is not a straightforward customization, I have developed a simple method we can use to remove this gadget and (if you choose) replace it with a gadget of your choosing.<br>
<br>
<a href="http://www.bloggerbuster.com/2012/05/how-to-control-attribution-gadget-when.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-75266532143283164852012-04-26T11:00:00.000+01:002012-04-26T11:00:08.445+01:00Create a contact form with Google Docs?<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihpQ40zkigsuGpGN-7LybUVFDlwB6dNrNeEMA95F-j7C04g7O8VuiiQ_XeZ7-ghKMA6L1lufhY0buvFMHBJe6te3iRI4fxtSEHSg7np0f7szDdaOLv_2KBbSs9XEOmSyhEnd3tatEo9CVJ/s1600/email_open.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihpQ40zkigsuGpGN-7LybUVFDlwB6dNrNeEMA95F-j7C04g7O8VuiiQ_XeZ7-ghKMA6L1lufhY0buvFMHBJe6te3iRI4fxtSEHSg7np0f7szDdaOLv_2KBbSs9XEOmSyhEnd3tatEo9CVJ/s1600/email_open.png"></a></div>
While creating a client's website (using Blogger, of course), I decided to try using Google Docs to create a comprehensive contact form. <br>
<br>
The form was wonderful: with a bit of tweaking, I was able to embed a CSS styled form (rather than use an iframe); validate required fields with jQuery; redirect to a custom "thank you" page, and even have the form submissions emailed directly to the client!<br>
<br>
Feeling rather happy with the results, I created a similar contact form for the <a href="http://www.bloggerbuster.com/p/contact.html">Blogger Buster contact page</a> and was in the process of writing up a tutorial when I realized my inbox was rapidly filling up with spam. Which was unfortunately delivered by my Google Docs-based contact form.<br>
<br>
Sadly, I haven't (yet!) been able to find a Blogger-compatible solution to create a Google-based contact form with spam filtering and emailed submissions, so I've <a href="http://www.bloggerbuster.com/2012/04/how-to-create-contact-form-for-blogger.html">reverted back to my previous contact form</a>. <br>
<br>
I'm still hopeful that a method to prevent (most) spam submissions is still possible, so I've decided to publish a simple version of my Google Docs form tutorial for anyone who would like to use it.<br>
<br>
<br>
<a href="http://www.bloggerbuster.com/2012/04/create-contact-form-with-google-docs.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-11093783519391301502012-04-23T12:00:00.000+01:002012-04-23T12:00:00.154+01:00How to Back-up, Restore and Upload New Templates to Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvV6yKF1Aj9US3teRbeLUO1ZH4ITEgYIj3AKNEcJgLdcVaPg61vPz7T8Nk885WC-IDvowqS4_Ytut-QWshqgMeL6K1p6kvp2cHcSFuE5rLuPFW1yk3lY6EWjMS6m5B22bc06CLl34reioR/s1600/template-icon.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvV6yKF1Aj9US3teRbeLUO1ZH4ITEgYIj3AKNEcJgLdcVaPg61vPz7T8Nk885WC-IDvowqS4_Ytut-QWshqgMeL6K1p6kvp2cHcSFuE5rLuPFW1yk3lY6EWjMS6m5B22bc06CLl34reioR/s1600/template-icon.png"></a></div>
Although we can customize virtually any element of our Blogger templates using the new Template Designer, there may be occasions when we want to upload a premade template. Similarly, we may need to back-up an existing template before making significant changes, or upload a previously used template to restore a blog to a former design.<br>
<br>
The method and application for backing up and uploading templates has changed significantly since <a href="http://www.bloggerbuster.com/2007/07/how-to-upload-blogger-templates.html">the last time I wrote on this subject</a>, so in this updated post I'll explain how to back-up, restore and upload new templates using <b>the new Blogger interface</b>.<br>
<br>
<br>
<a href="http://www.bloggerbuster.com/2012/04/how-to-back-up-restore-and-upload-new.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-49010224581563461622012-04-19T12:00:00.000+01:002012-04-19T17:30:47.580+01:00Adding a Google+ Badge to Blogger (Updating my Blogger Template)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQFvAly6HB9FjmG7HEs9HCxPSpw6AmgTafngggpBoiJvYP2lxgFYaVaVmOC15ByWh6mTGZ603gMblGsVyP3v669eIbuUhKiKMwp09OWSF_fcv8zDPIaNjMG8qBqrPo4pHUgXuKfhz3_9e/s1600/googlebadge.jpeg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img itemprop="image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQFvAly6HB9FjmG7HEs9HCxPSpw6AmgTafngggpBoiJvYP2lxgFYaVaVmOC15ByWh6mTGZ603gMblGsVyP3v669eIbuUhKiKMwp09OWSF_fcv8zDPIaNjMG8qBqrPo4pHUgXuKfhz3_9e/s1600/googlebadge.jpeg"></a></div>
Adding a Google+ badge to our Blogger templates enables readers to easily connect with our Google+ page. This can be achieved in just a few simple steps by adding a Google+ Badge gadget; it's also possible to customize the badge and change the display effect.<br>
<br>
As part of <a href="http://www.bloggerbuster.com/2012/04/updating-my-template-to-use-bloggers.html">updating my Blogger template</a>, I added a badge to the sidebar which enables readers to directly connect to the <a href="https://plus.google.com/u/0/b/102126415872033350250/102126415872033350250/posts//p/pub">official Blogger Buster page on Google+</a>. I've documented my methods here for other Blogger users who may find this tutorial useful.<br>
<br>
<br>
<a href="http://www.bloggerbuster.com/2012/04/adding-google-badge-to-blogger-updating.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-67795163329278719412012-04-18T11:00:00.000+01:002012-04-18T11:00:07.762+01:00Adding threaded comments to a customized blog (Updating my Blogger Template)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCng3Qm5WEXDO2BLj68hII7uRaw3rf4rhZVYgyiNhHiGJ5TeTqxDLelcuxQLboo8UAFs6t5KQE9CVf1L2qiHlY03QDSz4RKkAZcPvWDVAwOyV5tgErvrmj1huJh4F9fAIKxACPzztSIDvw/s1600/blogger-comment-icon.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCng3Qm5WEXDO2BLj68hII7uRaw3rf4rhZVYgyiNhHiGJ5TeTqxDLelcuxQLboo8UAFs6t5KQE9CVf1L2qiHlY03QDSz4RKkAZcPvWDVAwOyV5tgErvrmj1huJh4F9fAIKxACPzztSIDvw/s1600/blogger-comment-icon.png"></a></div>
Since <a href="http://www.bloggerbuster.com/2012/04/updating-my-template-to-use-bloggers.html">deciding to update my Blogger template</a>, one of the features I've been most looking forward to using is threaded comments. This enables us to reply directly in response to comments left on a post.<br>
<br>
After diving into reams of code and going a very long way about updating my template to include this feature, I stumbled across a very simple way to add this functionality to older Blogger templates.<br>
<br>
To help anyone else using a custom Blogger template include threaded comments for their site, I've written this quick tutorial which (unlike my original method!) should get you up and running with comment replies in no time!<br>
<br>
<br>
<a href="http://www.bloggerbuster.com/2012/04/adding-threaded-comments-to-customized.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-3663521306416374232012-04-17T14:55:00.000+01:002012-04-17T14:55:29.444+01:00Uploading a custom favicon to Blogger (Updating my Blogger Template)<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDiOq9uFvC20lF-OUQ4I1fsOUVqzlHcEesYzb5FvF1I1hSWRS1WPW3mMueJi0S845gwUmwhalEZuPilMRB5HNQOVNBY60A-hmoLxEWceN3h-RGaKErq-jzZx1c661K7j_U5wmRJ5e1RwKx/s1600/bb-avatar.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDiOq9uFvC20lF-OUQ4I1fsOUVqzlHcEesYzb5FvF1I1hSWRS1WPW3mMueJi0S845gwUmwhalEZuPilMRB5HNQOVNBY60A-hmoLxEWceN3h-RGaKErq-jzZx1c661K7j_U5wmRJ5e1RwKx/s1600/bb-avatar.png"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Blogger Buster Favicon</td></tr>
</tbody></table>
Back in June last year, <a href="http://bloggerindraft.blogspot.co.uk/2011/06/customize-your-favicon.html">the Blogger team enabled Blogger users to upload their own favicon</a> to replace the default Blogger icon. <br>
<br>
Initially favicons could only be uploaded if they had been converted into .ico format, though it's now possible to upload a square-shaped favicon in .png.gif or .jpg format as long as the file size is below 100kb.<br>
<br>
I prefer to use this built-in feature instead of the methods I'd previously used to add favicons to my Blogger sites, particularly as the icon is hosted on the root of our domain (*.blogspot.com/favicon.ico or custom-domain.com/favicon.ico).<br>
<br>
Since I have updated my icon as part of <a href="http://www.bloggerbuster.com/2012/04/updating-my-template-to-use-bloggers.html">updating my Blogger template</a>, I've documented my method (and troubleshooting) for others who are updating their Blogger templates.<br>
<br>
<br>
<a href="http://www.bloggerbuster.com/2012/04/uploading-custom-favicon-to-blogger.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-82279105219662915612011-04-04T09:00:00.001+01:002011-04-04T09:00:01.509+01:00How to Add Post Titles to Read More Links in Blogger<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcbHiQ8xV8cDOH7_YqTrZXETS_9jxfpcZxRltxvbjABAxaR2Ntm0InesZzlz522B5iIJ7DICle1x-ZtW9aW1Dv9rAxkgQ-2rzD23vh3TCjsXFgH7lxtRJEa7JLLnCyGQRmM_wrezxFJ_GG/s1600/add-post-titles-blogger-jump-link.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcbHiQ8xV8cDOH7_YqTrZXETS_9jxfpcZxRltxvbjABAxaR2Ntm0InesZzlz522B5iIJ7DICle1x-ZtW9aW1Dv9rAxkgQ-2rzD23vh3TCjsXFgH7lxtRJEa7JLLnCyGQRmM_wrezxFJ_GG/s640/add-post-titles-blogger-jump-link.jpg" width="640"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Add interest to your "read more" links by including each post's title</td></tr>
</tbody></table><a href="http://buzz.blogger.com/2009/09/you-might-as-well-jump.html">Blogger's Jump-Link (Read More) feature </a>enables us to display summaries of our blog posts on the home page (and all non-item pages).<br>
<br>
We can configure the text displayed for the Jump Link (which links to the post's item page) by editing the Blog Posts gadget in <b>Design>Page Elements. </b>However, I've also found it useful to add the title of the post beside the Jump-Link text to clarify the title of the post to which it links.<br>
<br>
If you're reading this post on <a href="http://www.bloggerbuster.com/">the Blogger Buster home page</a>, you'll see an example of this in action a few lines below.<br>
<br>
This is a very easy customization and the modified Jump-Link will inherit any current style you've applied to this section. Here's how to add this featre in a single, simple step.<br>
<br>
<a href="http://www.bloggerbuster.com/2011/04/how-to-add-post-titles-to-read-more.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-77942309549786752342011-04-03T00:02:00.000+01:002011-04-03T01:29:30.987+01:005 New Dynamic Blogger Templates for us to PreviewWe can now preview 5 dynamic new Blogger template styles for our blogs which use AJAX, HTML5 and CSS3. These new templates will soon be made available for us to use as the default views for our sites, and will be customizable so we can preserve our blog's individuality.<br>
<br>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkteik0YGORYkdlXambLygCOzf-Nu2B4NnroM2Iu1IP7uMaUrMjvQwreKpcnhcOLq0_fkk2xdNBwJ8qA24ZCcvZLjtK8RdaJlTsSPkAr1NrgjHP0oq1cMVrl2PbrAxuc7ZE41tB8_F749/s1600/Snapshot-dynamic-blogger-view.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkteik0YGORYkdlXambLygCOzf-Nu2B4NnroM2Iu1IP7uMaUrMjvQwreKpcnhcOLq0_fkk2xdNBwJ8qA24ZCcvZLjtK8RdaJlTsSPkAr1NrgjHP0oq1cMVrl2PbrAxuc7ZE41tB8_F749/s1600/Snapshot-dynamic-blogger-view.png"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The "Snapshot" view is an ideal choice for photo bloggers</td></tr>
</tbody></table>
<br>
<a href="http://www.bloggerbuster.com/2011/04/5-new-dynamic-blogger-templates.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-31222246284731177142011-03-07T09:00:00.003+00:002011-03-07T09:00:08.613+00:00Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLblKlrR57ltfTiFpYVfOodPfREHT00VZ9mqrXBjnqlbMKWdjHUs81OJ7FVeGspTPjT_Q7e7mRJGvpomVDm38WYaB-4DZP99GCRyInAQr1cHRHVKkAEJwoy9Xh3qqiI7NnSrFJB9ry3_1P/s1600/blogger-post-summaries-thum.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLblKlrR57ltfTiFpYVfOodPfREHT00VZ9mqrXBjnqlbMKWdjHUs81OJ7FVeGspTPjT_Q7e7mRJGvpomVDm38WYaB-4DZP99GCRyInAQr1cHRHVKkAEJwoy9Xh3qqiI7NnSrFJB9ry3_1P/s1600/blogger-post-summaries-thum.png"></a></div><br>
The ability to display post summaries and automatic thumbnails is one of the most sought-after Blogger customizations. Using such a feature enables us to create a cohesive layout on non-item pages with the entire post and full-sized image on item pages.<br>
<br>
Recent changes to Blogger's functionality now enables us to achieve this using only Blogger code - <b>no need for JavaScript, awkward CSS customizations or restrictions on the length or format of our posts</b>.<br>
<br>
With only a few small changes to our Blogger template, we can display post summaries and thumbnails using this easy to manage hack.<br>
<br>
<br>
<a href="http://www.bloggerbuster.com/2011/03/easy-post-summaries-and-thumbnails-for.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-45006808287831677042011-02-01T20:39:00.000+00:002011-02-01T20:39:17.743+00:00Add Facebook "Like" Box Beneath your Blogger PostsFacebook has become one of the most popular tools among Bloggers for syndicating blog posts. By adding a stylish Facebook "Like" box beneath your articles in Blogspot, you offer readers a temptingly easy means of sharing your posts with their friends.<br>
<br>
Aneesh of Blogger Plugins has developed <a href="http://www.bloggerplugins.org/2010/09/facebook-like-box-for-blogger.html">a simple, customizable way of installing a Facebook Like box</a> for each page of your Blogger-based site. This tool is based on the original code and design developed by <a href="http://www.dezignmatterz.com/">Mia of Dezign Matterz</a>. I'm using a slightly altered version of this widget here on Blogger Buster.<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQnVu7HqSsdo26fl88a0LLQrTawKNcDzJPXrv_Q5pOVKej_GS0V6eJvFUCIzCNcrkBoHSW9P4V6yu71lDpIxe_HnrTjxR4APoPHlBA9Dhul9IEExDBHSoGYsb6sXqwEmfK7Ffw_dqNLdV/s1600/fb-like-box-stylish.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="119" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQnVu7HqSsdo26fl88a0LLQrTawKNcDzJPXrv_Q5pOVKej_GS0V6eJvFUCIzCNcrkBoHSW9P4V6yu71lDpIxe_HnrTjxR4APoPHlBA9Dhul9IEExDBHSoGYsb6sXqwEmfK7Ffw_dqNLdV/s640/fb-like-box-stylish.png" width="640"></a></div>
<br>
<br>
In this post, I'll offer an overview of how to install Aneesh/Mia's stylized Facebook Like box, and an additional method for adding a simpler "Like" widget to your Blogger/Blogspot site. <br>
<br>
<a href="http://www.bloggerbuster.com/2011/02/add-facebook-like-box-beneath-your.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-28906914507566241422010-12-23T09:00:00.004+00:002010-12-25T02:56:41.673+00:00New eBook Released: Building Websites with Blogger (Plus a Limited 25% Discount)<div class="separator" style="clear: both; text-align: center;"><a href="http://www.bloggerbuster.com/p/ebook.html" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9cQ4cy3VMdIATyDpDC1IQmIeYUoSHmRn-GHVzLY5h5Jlzd0P4IBEwu8DgE0O-rWUK-UBKopdtav_A8lybEEer_ngSy1QQKBvhUKD3aj16gxFk5avIwLe5rXZ6F1IPlzqOe72Amrxsw-_l/s320/ebook-image.jpg" width="320"></a></div>I'm thrilled to announce the release of my new eBook, <b>Building Websites with Blogger</b>.<br>
<br>
This premium guide explains the process of design and maintenance of a beautifully crafted Blogger-based website for a personal portfolio, business presence or eCommerce outlet.<br>
<br>
Including details of Blogger's latest features and based on original content, <i>Building Websites with Blogger</i> is illustrated throughout and beautifully laid out. As an added bonus, this eBook is bundled with three exclusive Blogger templates which can be used for both personal and commercial projects.<br>
<br>
<a href="http://www.bloggerbuster.com/2010/12/new-ebook-released-building-websites.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-34517369450432352252010-12-23T02:58:00.000+00:002010-12-23T02:58:33.723+00:00Mobile Templates available for Blogger<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhVW9Zq-o_GwxT_3PPkxPXrUUV9fIPF0g5ih5gifh4w7i0hAHPrYs1_t2sS6pGf30KzvQHlyMg51MoB8onmphGxTzM-Y1Vnp89zfyH0kWEpToWWyH_a7aMTgU5u2AFqDOHatNMzl3hS4To/s1600/blogger-buster-mobile-preview.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhVW9Zq-o_GwxT_3PPkxPXrUUV9fIPF0g5ih5gifh4w7i0hAHPrYs1_t2sS6pGf30KzvQHlyMg51MoB8onmphGxTzM-Y1Vnp89zfyH0kWEpToWWyH_a7aMTgU5u2AFqDOHatNMzl3hS4To/s320/blogger-buster-mobile-preview.png" width="203"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Blogger Buster, Mobile View</td></tr>
</tbody></table>Although our Blogger sites can be viewed on most mobile devices, it can be difficult to effectively read blogspot sites due to the small screen size.<br>
<br>
To enhance our readers experience of Blogger blogs when viewed on Smartphones (and similar devices), the Blogger Team have enabled <b>Mobile Templates</b> as an opt-in setting through <b>Blogger in Draft</b>.<br>
<br>
<a href="http://www.bloggerbuster.com/2010/12/mobile-templates-available-for-blogger.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-42800016730270131392010-11-15T12:50:00.001+00:002010-11-18T10:08:33.418+00:00Add a Lightbox-Style Contact Form to your BlogWhile researching customization methods for my forthcoming eBook, I was really impressed at how easy it is to add a Lightbox-style contact form to our sites using ThickBox:<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijahBBbZ01HaLRzgliXT_sOox6NYOtOsUhESmxp_I0JikePbNVj4E9Shc6kiKp2H5zqMRP6WXXqZl_9uXEJQKozYQ6cbxd7YxWIPQ9MEmrFiGdtZDGMQHmrFVtW2oKE_UH8OeK2Kj0VV64/s1600/thickbox-contact-form-example.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijahBBbZ01HaLRzgliXT_sOox6NYOtOsUhESmxp_I0JikePbNVj4E9Shc6kiKp2H5zqMRP6WXXqZl_9uXEJQKozYQ6cbxd7YxWIPQ9MEmrFiGdtZDGMQHmrFVtW2oKE_UH8OeK2Kj0VV64/s640/thickbox-contact-form-example.png" width="640"></a></div>
<br>
Using Thickbox to display a contact form in this way enables your readers to email you without having to leave the page. We can add this functionality in a simple HTML gadget, and there is no need to edit the HTML of our template at all.<br>
<br>
In this post, I'll explain how easy it is to add a lightbox-style contact form to your Blogger blog using <a href="http://jquery.com/demo/thickbox/">Thickbox</a> and a free <a href="http://kontactr.com/">Kontactr</a> account.<br>
<br>
<a href="http://www.bloggerbuster.com/2010/11/add-lightbox-style-contact-form-to-your.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-49620001874533968712010-11-08T12:10:00.001+00:002010-11-15T11:27:38.583+00:00Host Template Images for Free on Picasa<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhitsUKK_7ouU-IG8by6Is-4YmfD46GlvsTgA9j93iXQ5ecRWZ3ItTLl-zEoRGKRbkFU8gf5Pc3Qr_6SAVUmbfnhCd6pnBoi8QJ_Kh12VR2TEhDZTfauxmWjXEfDm70rTwZ0AqqEotc2UBg/s1600/PicasaIcon.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhitsUKK_7ouU-IG8by6Is-4YmfD46GlvsTgA9j93iXQ5ecRWZ3ItTLl-zEoRGKRbkFU8gf5Pc3Qr_6SAVUmbfnhCd6pnBoi8QJ_Kh12VR2TEhDZTfauxmWjXEfDm70rTwZ0AqqEotc2UBg/s1600/PicasaIcon.jpg"></a></div>
If you use a third party template or customize the design of your blog, chances are you'll need to find hosting for images used in the design.<br>
<br>
Many Blogger designers use Photobucket, Flickr and other free image hosting solutions. It's also possible (albeit unnecessarily complicated) to upload images to Blogger or Google Sites.<br>
<br>
But my personal favoured image hosting service is <a href="http://picasaweb.google.com/">Picasa Web Albums</a>. This free Google powered service offers unlimited bandwidth and a generous 1gb of storage - perfect for serving up any images you need for template visualisation.<br>
<br>
<a href="http://www.bloggerbuster.com/2010/11/host-template-images-for-free-on-picasa.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-87449161923737228182010-10-11T18:00:00.001+01:002010-10-11T18:00:03.494+01:00How to Add a Featured Content Section on your Blog's Home PageOne of the customizations I use most when designing Blogger templates is creating a "featured content" section to be displayed only on the home page. I often use this technique to display a content slider, mini-portfolio or slideshow above the main posts section.<br>
<br>
Take a look at the home page of my site, Just Great Film, to see an example of this in action (click on images for full screen previews):<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XwkxV3pyeLs5gZg_yUeNFfWctV3SNp-Hc_5Bwr8_LmG3D-9ewnU7t5KkfUED2-ycThUlqd1XHjtdti99hQ-C-kEa7gNR6k2jbiR0IFNmHebJLfGrU57w4kt7MAIPPH2zLS-Aa2EnVrvu/s1600/just-great-film-home.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XwkxV3pyeLs5gZg_yUeNFfWctV3SNp-Hc_5Bwr8_LmG3D-9ewnU7t5KkfUED2-ycThUlqd1XHjtdti99hQ-C-kEa7gNR6k2jbiR0IFNmHebJLfGrU57w4kt7MAIPPH2zLS-Aa2EnVrvu/s320/just-great-film-home.png" width="320"></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1y0_tbeWj805-Y5C6PmRw_2JdX_9yLUdGQ6o1xei8Yf5-YhL1B90to_EyDu1-TL6qnRliP721zAycYVogQSQ3Ro9-dwBJDi_s0CP7BbgDKeXDRYEbmWCDcQbbUuiLk1OmUiGhDk9plF2n/s1600/just-great-film-item.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1y0_tbeWj805-Y5C6PmRw_2JdX_9yLUdGQ6o1xei8Yf5-YhL1B90to_EyDu1-TL6qnRliP721zAycYVogQSQ3Ro9-dwBJDi_s0CP7BbgDKeXDRYEbmWCDcQbbUuiLk1OmUiGhDk9plF2n/s320/just-great-film-item.png" width="320"></a></div>
Here's an easy way to restrict the display of a gadget to your blog's home page.<br>
<br>
<a href="http://www.bloggerbuster.com/2010/10/how-to-add-featured-content-section-on.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-43599304794526737232010-10-06T19:08:00.007+01:002010-11-15T10:31:25.664+00:00How to hide the Blogger Navbar - Updated for 2010 (Quick Tip)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYBqKRI1f6RDSK6bgMj73Y-7ArvrUhb25P6RrTt1iiCBrPWTVsLR4_bSY21Dc00T4BaoDphXEVf7SZt_YklNMhXxWPqXAn40HK7qxeMx7ea-weyK6loqg7fX2uji4qr2TZizUe04i-MOHQ/s1600/navbar.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYBqKRI1f6RDSK6bgMj73Y-7ArvrUhb25P6RrTt1iiCBrPWTVsLR4_bSY21Dc00T4BaoDphXEVf7SZt_YklNMhXxWPqXAn40HK7qxeMx7ea-weyK6loqg7fX2uji4qr2TZizUe04i-MOHQ/s1600/navbar.jpg"></a></div>
With all the changes to Blogger's template system, it seems no wonder that <span id="goog_679884181"></span><a href="http://www.bloggerbuster.com/2007/07/how-to-hide-blogger-nav-bar.html">my original tutorial for hiding the Blogger nav-bar<span id="goog_679884182"></span></a> no longer works effectively (particularly for newer template designs).<br>
<br>
In case you were wondering, it is possible to hide the Blogger nav-bar (which displays a search box and useful links). The principle is the same as in my previous tutorial in that we simply need to add a few lines of CSS to our Blogger template code.<br>
<br>
<b>Here's how my updated technique to hide the Blogger nav-bar in a few simple steps:</b><br>
<br>
<a href="http://www.bloggerbuster.com/2010/10/how-to-hide-blogger-navbar-updated-for.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-81399374855363244982010-05-21T13:29:00.098+01:002010-05-22T00:39:49.101+01:00How to use Google's Font API with Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqjmt_YXNVzymgZ3lKEFAljQjwc4xNYpTq56Z54WXLXHF67NTMINKxnLx7a-y_W0PKUzVXdDa25fz-_uT_ePT-LmJnShPjd59N1cTBWQDkzwHrd382F1_anK4KkkpOG7KRVv012Q89J_ky/s1600/font_api-128.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqjmt_YXNVzymgZ3lKEFAljQjwc4xNYpTq56Z54WXLXHF67NTMINKxnLx7a-y_W0PKUzVXdDa25fz-_uT_ePT-LmJnShPjd59N1cTBWQDkzwHrd382F1_anK4KkkpOG7KRVv012Q89J_ky/s1600/font_api-128.gif"></a></div>
Web fonts have become a popular web design trend over recent months. As I explained in a previous post, the @font-face technique can be problematic when applied to Blogger templates. But since <a href="http://code.google.com/webfonts">Google have now released their font API</a>, we're able to display non-standard fonts in our Blogger templates with ease!<br>
<br>
Here's an overview of the Google Font API and how we can use this to enhance our Blogger-based designs.<br>
<br>
<a href="http://www.bloggerbuster.com/2010/05/how-to-use-googles-font-api-with.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-43530721556817762072010-05-15T00:00:00.006+01:002010-05-22T00:18:14.934+01:00How to use non-standard fonts with Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.flickr.com/photos/1pxphoto/3228135119/%22" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUlYcgwta_nz7MFrEN72sIe4AbDsQLLldp4FXH-epran_KUcbL7QhtVK345ubWdKV_1fN8CEzHOCpVtke46Lty8fwO0z5BCk4ofgsVZTEAeqwVVkK_7irW63C7jLLODqypdjgw_RYGjLxZ/s320/fonts.jpg" width="320"></a></div>
A question I'm asked a lot is how to use @font-face (or other font-replacement techniques) with Blogger.<br>
<br>
Now I have to admit, after dozens of failed attempts, heavy experimentation and keyboard-bashing I was almost ready to give up on this and admit defeat.Most of the techniques I tried were either unreliable or simply did not work!<br>
<br>
Luckily, @<a href="http://www.twitter.com/kernest">kernest</a> and @<a href="https://twitter.com/abu_farhan">abu_farhan</a> came to my rescue via Twitter by pointing me in the direction of <a href="http://kernest.com/">Kernest's free (and premium) font-based service</a>.<br>
<br>
<a href="http://www.bloggerbuster.com/2010/05/how-to-use-non-standard-fonts-with.html#more">Read more »</a><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/15253950126983322536noreply@blogger.comtag:blogger.com,1999:blog-724793682641096478.post-64673221341152663452009-09-25T16:25:00.001+01:002009-09-25T19:13:02.702+01:00Related Posts with Thumbnails for Blogger - New Version by BloggerWidgetsAneesh of <a href="http://www.bloggerplugins.org/">Blogger Widgets</a> has developed <a href="http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html">a new "Related Posts" script for Blogger</a> which displays thumbnails of images in addition to linked post titles:<br>
<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBmVxmfc15q3O7hlma9e07QaFlUvbW5k7zfOo3zrthATdEj6xAWg0DvPjvoWUBzsv2EiqRlsijkxBhYaLze6B1N5U4Y3Z5MoWhPlTajXLTuTM7tjHnhOQEIBjz0BVJexivTT_moy_kwSI/s1600-h/related-posts-bloggerplugins.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBmVxmfc15q3O7hlma9e07QaFlUvbW5k7zfOo3zrthATdEj6xAWg0DvPjvoWUBzsv2EiqRlsijkxBhYaLze6B1N5U4Y3Z5MoWhPlTajXLTuTM7tjHnhOQEIBjz0BVJexivTT_moy_kwSI/s400/related-posts-bloggerplugins.png"></a><br>
</div><br>
In appearance, this Blogger "add-on" is similar to the <a href="http://www.bloggerbuster.com/2009/07/related-posts-with-thumbnails-using.html">LinkWithin script</a>. Each section is highlighted in a complementary colour when the mouse hovers over it, and the entire section is clickable, leading to the URL of the "related post" displayed.<br>
<br>
<a href="http://www.bloggerbuster.com/2009/09/related-posts-with-thumbnails-for.html#more">Read more »</a><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-453619624451103492009-09-11T20:50:00.001+01:002009-09-11T20:53:18.109+01:00How to add Blogger's Read More function to customized templates<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigf1FTkSgHar11staiaUW-h3TgeYMhwvMTcwkIerg5_fpG5wv7hO3V4kS-CHkVQrXgqD9C0I5BoNltYB6SEjgP84Yuc6bAuXYpHhcsitf90DvaqwOG1JRwAorxj7tdeJEox-TTB_LtxmY/s1600-h/jump-links.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigf1FTkSgHar11staiaUW-h3TgeYMhwvMTcwkIerg5_fpG5wv7hO3V4kS-CHkVQrXgqD9C0I5BoNltYB6SEjgP84Yuc6bAuXYpHhcsitf90DvaqwOG1JRwAorxj7tdeJEox-TTB_LtxmY/s800/jump-links.jpg"></a></div><br>
As <a href="http://www.bloggerbuster.com/2009/09/read-morepost-summaries-now-available.html">announced yesterday</a>, Blogger have now enabled selective post summaries for our blogs. This means we can add a "jump break" in our posts, after which any content will only be visible on item pages.<br>
<br>
Those of us using customized templates will probably need to add the code required for this function to work. In this article, I'll explain how easy this is to implement, as well as some helpful hints for customizing the "Read More" link.<br>
<br>
<a href="http://www.bloggerbuster.com/2009/09/how-to-add-bloggers-read-more-function.html#more">Read more »</a><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-10105450230143871012009-08-29T21:00:00.001+01:002009-08-29T21:02:36.146+01:00A Popular Posts Gadget from Google Friend Connect<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5peHBVk9EjwzhRICjYM_RF2BXpkSr0tltURMpX4T6GXsRJLWAc9_VkYok8fvXVoYmjE1_ofmReAoAS_Jv2Liq6BIgIdAOSQAjKgk-dJhAC0Rt7e891LIckrk6QNk9wU1AnCA8jR2Bu0U/s1600-h/thumbs-up.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5peHBVk9EjwzhRICjYM_RF2BXpkSr0tltURMpX4T6GXsRJLWAc9_VkYok8fvXVoYmjE1_ofmReAoAS_Jv2Liq6BIgIdAOSQAjKgk-dJhAC0Rt7e891LIckrk6QNk9wU1AnCA8jR2Bu0U/s800/thumbs-up.png" /></a></div>While browsing around looking for more Blogger gadgets to add to the directory, I discovered an awesome feature offered by Google Friend Connect: the <b>Recommended (Popular) Posts Gadget.</b><br />
<br />
This is a feature which I'm sure we've all been waiting for! While we have seen <a href="http://www.bloggerbuster.com/2008/05/another-popular-posts-widget-from.html">various</a> <a href="http://www.bloggerbuster.com/2008/04/popular-posts-most-commented-widget-for.html">implementations</a> <a href="http://www.bloggerbuster.com/2007/08/popular-posts-widget-for-blogger.html">of popular posts gadgets</a> in the past, I've found these are not as useful or easy to configure as I'd prefer.<br />
<br />
In contrast, the Friend Connect Recommended Gadget stable, reliable and quickly updates. Being developed and hosted by Google ensures this is unlikely to suffer issues, and once installed it's very easy for your blog readers to recommend their favourite posts.<br />
<span id="fullpost"><br />
<br />
<b>Want to see how it works?</b> Take a look in the sidebar to see a list of posts recommended by Blogger Buster readers, and scroll down to the bottom of this post for the button you can use to vote (this appears on every page of Blogger Buster, so feel free to recommend any other posts you may like!).<br />
<br />
Those of you reading this in a feed reader may like to pop over to the site to see this gadget in action.<br />
<h3>How to install your Friend Connect Popular Posts Gadget</h3>Unfortunately, this Friend Connect gadget is not (yet) installable in one click. There are two elements required for complete installation, and these are relatively easy.<br />
<br />
Firstly,<a href="http://www.google.com/friendconnect/"> log into Friend Connect</a>. You will need to use the same credentials (username and password) as you do when logging in to Blogger.<br />
<br />
Once you've logged in, you'll see a page which appears similar to this one:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKw2AE3kMQznW4wHAHOnYxUG2XukDiFh8MnuJrheFCdKCThwIoDLH6gYHwYikxUyr49FRmSmwTY4h9o3fLFWis6mPctmlxxgZs-sJyfGzg9maq0DK_HLavlYQfZdAmIcSYgKu7FHKng9g/s1600-h/friendconnect-overview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKw2AE3kMQznW4wHAHOnYxUG2XukDiFh8MnuJrheFCdKCThwIoDLH6gYHwYikxUyr49FRmSmwTY4h9o3fLFWis6mPctmlxxgZs-sJyfGzg9maq0DK_HLavlYQfZdAmIcSYgKu7FHKng9g/s400/friendconnect-overview.png" /></a></div><br />
Any blogs which you have created with your Google account will appear in the list on the left-hand side of the page.<br />
<br />
Click on the blog you would like to work with (if this is not already selected). This will open a sub-menu beneath the title of your blog.<br />
<br />
Click the "Social Gadgets" link in this sub-menu:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmMHYDjlsXEo-oTQ5q6MnzTB4t0xJOqHV3_0BxZKjBKSzGKZrfEVcXMcz544m4FjD1PtDjX053IJW3duDsi68fF39T19yWoyzAHN_XUCxQZdLddqeWyeaSPmBFhWm8CfUzBgWeC41JGA/s1600-h/social-gadgets-link.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmMHYDjlsXEo-oTQ5q6MnzTB4t0xJOqHV3_0BxZKjBKSzGKZrfEVcXMcz544m4FjD1PtDjX053IJW3duDsi68fF39T19yWoyzAHN_XUCxQZdLddqeWyeaSPmBFhWm8CfUzBgWeC41JGA/s400/social-gadgets-link.png" /></a></div><br />
<br />
<br />
On the following page, scroll down to the "Recommendation" widget - this is the gadget we will be using to display our blog's most popular posts, as voted by blog members:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEc1R1f-tzP7Au3f8FZvAk9fQ3V9qKtC5posGmDai29N6S7NdW0pVrWYbeDWYEKF45593iiLRaNa8U0f8ygYSbHOafXAGl3hJWCwICZqa_wW0Sig8WdYTdrD5HVMNzOXh-rJeh4xx0bsY/s1600-h/recomendation-gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEc1R1f-tzP7Au3f8FZvAk9fQ3V9qKtC5posGmDai29N6S7NdW0pVrWYbeDWYEKF45593iiLRaNa8U0f8ygYSbHOafXAGl3hJWCwICZqa_wW0Sig8WdYTdrD5HVMNzOXh-rJeh4xx0bsY/s400/recomendation-gadget.png" /></a></div><br />
Click through to create and style the Recommendation gadget for your blog.<br />
<br />
<br />
<h4>Style the Recommendation List</h4>In the first area of this page, you can choose how your recommendation list will be styled when added to your Blogger layout.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAI8T69S1rYMLCGSGmITT17PZbs8Ec1I-pVmz4mVH4ZrneThrJ7clLYZVAwrHHPZqlsezuxiPzpGoRx8KGWZOj7QMsZSNd5Rdi5rksebAVZ5X19LIhl6jWTryPjvzk785mOptOzRBgVo/s1600-h/configure+list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAI8T69S1rYMLCGSGmITT17PZbs8Ec1I-pVmz4mVH4ZrneThrJ7clLYZVAwrHHPZqlsezuxiPzpGoRx8KGWZOj7QMsZSNd5Rdi5rksebAVZ5X19LIhl6jWTryPjvzk785mOptOzRBgVo/s400/configure+list.png" /></a></div><br />
If you'd prefer any of the color elements (such as the background and border) to be transparent, simply delete the hex value.<br />
<br />
You'll be able to preview the changes made to the style and settings of your recommendation list in the top right corner of the page.<br />
<h4>Configure the Voting Buttons</h4>The second area of this page enables you to configure the appearance of the voting button. This is what will appear on the post pages of your blog, and is what your readers will click to recommend posts they enjoy.<br />
<br />
There are two distinct types of voting buttons you could choose from:<br />
<br />
<table><tbody>
<tr> <td valign="top">A "compact" button appears like this</td><td><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQVQ08ZKFttqg8wIselxqMtWryD3TfD4AZRUR-rAImkvnwNzvqAOy68Mg-c5NSHBzxmFcupR-Q_N_8zlDmX00su3xCizh6Dvkj8rduZMTnOah_oNLdgS12LZkV833nGvA-OpuPWQrfB4/s1600-h/regular-button.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQVQ08ZKFttqg8wIselxqMtWryD3TfD4AZRUR-rAImkvnwNzvqAOy68Mg-c5NSHBzxmFcupR-Q_N_8zlDmX00su3xCizh6Dvkj8rduZMTnOah_oNLdgS12LZkV833nGvA-OpuPWQrfB4/s320/regular-button.png" /></a></div></td></tr>
<tr> <td valign="top">A "modular" button appears like this:</td><td><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6nFNckd5zVU8WgtpFVHYigH-6RJBc838yXCUDZqVweTgj5M1CngC0o_TilERtN2rTUEKJUpii1ps4cWLw0btYAy6ehS2ZTqiEgvX7p8tWjg72WUN8JH7Pe4uU8_4TRGuWSuzaizxcjjc/s1600-h/modular.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6nFNckd5zVU8WgtpFVHYigH-6RJBc838yXCUDZqVweTgj5M1CngC0o_TilERtN2rTUEKJUpii1ps4cWLw0btYAy6ehS2ZTqiEgvX7p8tWjg72WUN8JH7Pe4uU8_4TRGuWSuzaizxcjjc/s320/modular.png" /></a></div></td></tr>
</tbody></table>For either style of button, you can choose between the heart or tick icons. When choosing the "modular" button, the colours of the text, border and background may also be altered:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKA21pjns7895X2eCh_tbabvIWBdK4-3RiMVwaj2d1ARKZcKKAJARS2DDrN3kLD32DgNelrZOEX5WOTNpPjDRJ4-w2mD-M1-t4T5gZGoXu4diPsG6f2tSTNLbSzXKBuJx8W9X8b0l15Xc/s1600-h/configure-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKA21pjns7895X2eCh_tbabvIWBdK4-3RiMVwaj2d1ARKZcKKAJARS2DDrN3kLD32DgNelrZOEX5WOTNpPjDRJ4-w2mD-M1-t4T5gZGoXu4diPsG6f2tSTNLbSzXKBuJx8W9X8b0l15Xc/s400/configure-button.png" /></a></div><br />
<h3>Generate and add the JavaScript for your Gadget</h3>Once you've configured the appearance you prefer for the recommendation list and voting button, you can generate the codes required to add these to your template by clicking the button in the third section of the page:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEmr5CUypnnxxmgQ015mHCkU-uZvlJGtkuAmbdi79b31401OHhJ2J1C3uQZAeaksFCPU-qeGnippDPUstH9aJwqadb5sFub45k6o88ymtO0OeS9i9KJaBeJJIuvy5scPWThPb0rPL19c/s1600-h/generate-code.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEmr5CUypnnxxmgQ015mHCkU-uZvlJGtkuAmbdi79b31401OHhJ2J1C3uQZAeaksFCPU-qeGnippDPUstH9aJwqadb5sFub45k6o88ymtO0OeS9i9KJaBeJJIuvy5scPWThPb0rPL19c/s400/generate-code.png" /></a></div>This will generate two different sets of code - one for the recommendation list, and another for the voting button.<br />
<br />
<br />
<h4>Add the code for the Recommendation List</h4>The easiest way to include the Recommendation List (the list of your most popular posts) in your blog is to paste the code into an HTML/JavaScript widget in your Blogger sidebar.<br />
<br />
Simply highlight all of the code in the "aggregation gadget" section, and copy to your clipboard. Then go to Layout>Page Elements in your Blogger dashboard, create a new HTML/JavaScript widget in the area of your choice and paste the code from your clipboard into the content section of your gadget.<br />
<h4>Add the code for your voting button on post pages</h4>Ideally, we should add the voting button to appear only on item pages. This ensures there is no conflict when posting multiple buttons on the same page (for example, the blog home page which displays more than one post); it also makes for simpler installation.<br />
<br />
To add the voting button to our item pages, we need to edit our Blogger template code.<br />
<br />
Go to Layout>Edit HTML in your Blogger dashboard, and ensure you have checked the "Expand widget templates" box.<br />
<br />
Then using your browser's search function, locate the line which contains <code><data:post.body/&gt;</code><br />
<br />
This section of code may be wrapped in <div> or <p> tags depending on the template you are using.<br />
<br />
Immediately after this line, paste the following section of code:<br />
<blockquote><code><b:if cond = 'data:blog.pageType == &quot;item&quot;'><br />
<span style="color: red;"><!-- Here is where to paste the JavaScript for the button --></span><br />
</b:if></code></blockquote>Next, copy the second section of code generated for your Friend Connect Recommendation widget:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzrfh7jmHRsoyUCszm9aseyArelWD7bweeYqNU2GRpzAo_q6rhydI_9DDbHoVb43nxtXmU8IcKzj7SJqS5Wrv1sy3wGR0hSCSusNMcpBpSvIbcQog334DhXl8kd-tfAHcFss41EPm0WQ/s1600-h/add-button-script.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzrfh7jmHRsoyUCszm9aseyArelWD7bweeYqNU2GRpzAo_q6rhydI_9DDbHoVb43nxtXmU8IcKzj7SJqS5Wrv1sy3wGR0hSCSusNMcpBpSvIbcQog334DhXl8kd-tfAHcFss41EPm0WQ/s400/add-button-script.png" /></a></div>And paste this between the <code>&ltb:if cond...></code> and <code></b:if></code> tags which we previously added in the template code.<br />
<br />
Here is how the completed installation should appear:<br />
<blockquote><code><b:if cond = 'data:blog.pageType == &quot;item&quot;'></code> </blockquote><blockquote><code> <span style="color: red;"><!-- Include the Google Friend Connect javascript library. --><br />
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><br />
<!-- Define the div tag where the gadget will be inserted. --><br />
<div id="div-1020104213976883876" style="width:100%;"></div><br />
<!-- Render the gadget into a div. --><br />
<script type="text/javascript"><br />
var skin = {};<br />
skin['HEIGHT'] = '21';<br />
skin['BUTTON_STYLE'] = 'compact';<br />
skin['BUTTON_TEXT'] = 'Recommend it!';<br />
skin['BUTTON_ICON'] = 'heart';<br />
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);<br />
google.friendconnect.container.renderOpenSocialGadget(<br />
{ id: 'div-1020104213976883876',<br />
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',<br />
height: 21,<br />
site: '06135972569882299778',<br />
'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}<br />
},<br />
skin);<br />
</script><br />
</span><br />
</b:if></code></blockquote>Once you've pasted the script, preview the changes you have made to ensure the button does not appear on your blog's home page. If all looks well and no errors are reported, continue to save your template and complete the installation.<br />
<br />
<br />
<h3>Using your Recommendation Gadget</h3>At first, your recommendation list will not display any posts. This is because no posts have yet been voted for using the voting button.<br />
<br />
You could vote for a few posts yourself by clicking on the voting button on post pages, or you could simply wait for readers to vote by themselves.<br />
<br />
When using the voting link, a pop-up page will appear prompting the user to log into Friend Connect (if they are not already logged in) and afterwards will be able to recommend the post. Votes are counted almost immediately, and are listed beneath each item in the Recommendation List:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeDOKOL3f3LVjh_Ys6BgddrhjbEwZxchFcIC3tKcxQ4lWOfWtxZhHm6iqGvQU4zUNitDlxb3tekGmVGGDXqgWA9omY5YxG3eG-_uoeMGejXP9_06ancXONfpEwKpIO8I5DdAvDL90Vk6Q/s1600-h/recommendation-list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeDOKOL3f3LVjh_Ys6BgddrhjbEwZxchFcIC3tKcxQ4lWOfWtxZhHm6iqGvQU4zUNitDlxb3tekGmVGGDXqgWA9omY5YxG3eG-_uoeMGejXP9_06ancXONfpEwKpIO8I5DdAvDL90Vk6Q/s400/recommendation-list.png" /></a></div><br />
<br />
<h3>What do you think?</h3>I sincerely prefer the Friend Connect Recommendation Gadget to other "popular posts" widgets I have tried as the results are based on reder engagement and genuine recommendations which offer a greater sense of community than "page views" alone.<br />
<br />
My only reservation is that this gadget cannot be added in a few simple clicks. Having to edit our Blogger templates to add the voting buttons id a dissuading factor for many when considering whether or not to install it.<br />
<br />
That said, I have a good feeling that this gadget may soon be integrated into the Blogger system, as so many Friend Connect gadgets and features already have!<br />
<br />
What do you think of the Friend Connect Recommendation gadget? Is installation too complex, or are you happy to use this gadget for readers to recommend their favourite posts?<br />
<br />
Please let us know your opinions by leaving your comments below.<br />
<br />
<span style="font-size: x-small;">Image credit: <a href="http://www.flickr.com/photos/89186997@N00/">RichKidsUnite</a>, via Flickr Creative Commons</span><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.com