tag:blogger.com,1999:blog-7247936826410964782024-03-28T09:14:36.324+00:00Blogger BusterAmanda Kennedyhttp://www.blogger.com/profile/09275117357119687015noreply@blogger.comBlogger1391100tag: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.comtag:blogger.com,1999:blog-724793682641096478.post-57187039612053389782009-07-23T14:21:00.000+01:002009-07-26T02:00:13.706+01:00Related Posts with Thumbnails using LinkWithin<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQf3Ty5VaGlW7ky8P4LQQpAJgxvA1Vm2KMq6Tvd48wqkquUhT1UMdW9KM5hj6Q1DmK1cPyliI5mVLexTR5C2tLmNmLy89KM_Nzno8iYeQirt0I4cw9h_U1hUTHARimRoo7tjWAVVbJpI/s1600-h/linkwithin.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/AVvXsEiJQf3Ty5VaGlW7ky8P4LQQpAJgxvA1Vm2KMq6Tvd48wqkquUhT1UMdW9KM5hj6Q1DmK1cPyliI5mVLexTR5C2tLmNmLy89KM_Nzno8iYeQirt0I4cw9h_U1hUTHARimRoo7tjWAVVbJpI/s320/linkwithin.png" /></a></div>Displaying links to "related posts" beneath individual entries on our blogs is a tried and trusted method of providing useful and interesting reading material for our readers.<br />
<br />
I've written about several different methods which Blogger users can choose to display related posts - all of which perform their function well enough. But after seeing several of my favourite sites displaying links to related items with thumbnails using LinkWithin's free service, I was intrigued to discover how well this may be adapted for use with Blogger.<br />
<span id="fullpost"><br />
<h3>About LinkWithin</h3><a href="http://www.linkwithin.com/">LinkWithin</a> is a free service offered by a small team based in New York. This free service enables us to display related posts with thumbnails below our blog posts (the thumbnail is taken from an image within the post it links to).<br />
<blockquote>We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.</blockquote>The posts chosen to appear as related posts are based on several factors including:<br />
<ul><li>Relevance</li>
<li>Popularity</li>
<li>Recency</li>
</ul>At present, LinkWithin is not ad-supported and is completely free to use. As explained on <a href="http://www.linkwithin.com/faq">the FAQ page</a>:<br />
<blockquote>We plan to introduce revenue-sharing features in the future, but they will be optional.</blockquote>At present, there is little documentation for us to be certain of these factors, though after testing LinkWithin in a few different sites, I'm pretty impressed by the choices generated for each post!<br />
<br />
Here is an example of how LinkWithin functions for <a href="http://www.weloveblogger.com/">WeLoveBlogger.com</a>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiJphSOCE9NfVArU8kYBBruOEjgqwLL48oFopgQo310jFcjiGLVseSF_sbBgcRg41Oqmkj5_pL9ugTjlNSbHhH2yUZrX9_jVkyNUn3gU2qJWEfqpS9rAGOW5WwoB4LgHxivKYvbt-Uklc/s1600-h/linkwithin-weloveblogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiJphSOCE9NfVArU8kYBBruOEjgqwLL48oFopgQo310jFcjiGLVseSF_sbBgcRg41Oqmkj5_pL9ugTjlNSbHhH2yUZrX9_jVkyNUn3gU2qJWEfqpS9rAGOW5WwoB4LgHxivKYvbt-Uklc/s400/linkwithin-weloveblogger.png" /></a></div><br />
<h3>Why LinkWithin <i>may</i> be a more ideal solution than other related posts solutions for Blogger</h3>The "related posts" solutions for Blogger which I've used until now have all relied on label feeds. That is, the recent posts generated by such scripts collect recent posts from the same label (category). This often means that posts deeper within our archives are generally ignored, even when they may be far more relevant than the more recent posts displayed.<br />
<br />
LinkWithin parses all posts from our blogs, and chooses the posts to be displayed using more complex and relevant factors. This ensures far greater relevancy which is better for our readers and also ensures that older posts are included in the display.<br />
<h3>How to add LinkWithin Related Posts to Your Blogger Blog</h3>If you're using a standard, uncustomized Blogger template, the method for installing LinkWithin is fairly straightforward. Simply visit <a href="http://www.linkwithin.com/faq">the LinkWithin website</a>, fill in the form on the right-hand side (choosing Blogger as your platform) and follow the instructions provided.<br />
<br />
This will install the related posts in your template as a gadget beneath the main posts section, though you'll find the "You may like these related stories" section will be displayed beneath each of your blog posts (before the post-footer section). It will also display on each and every page of your blog, including the main, archive and search pages. <br />
<h4>Custom Installation of LinkWithin for Blogger templates</h4>If you prefer to display your related posts only on item pages or have a customized, non-standard Blogger template, here is how you can install LinkWithin:<br />
<ol><li>Visit the LinkWithin website and fill in the form on the right-hand side. For the "platform" be sure to choose "Other":<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKhvHysrSdRzoAdKqV1XJ-_IEuHSkMr_ngV0i7KRGF00VUvUX6pMqpQzsSkh-ww5JeHs54v9gP1Kt3D2KidxWxkEMOYXhyKlSJzqkN4WxIgDHuVK_LoJ6BEySxZ238HpHPi4qioShlcc/s1600-h/adding-linkwithin-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKhvHysrSdRzoAdKqV1XJ-_IEuHSkMr_ngV0i7KRGF00VUvUX6pMqpQzsSkh-ww5JeHs54v9gP1Kt3D2KidxWxkEMOYXhyKlSJzqkN4WxIgDHuVK_LoJ6BEySxZ238HpHPi4qioShlcc/s400/adding-linkwithin-1.png" /></a></div></li>
<li>On the next page, you will find a script like this is generated. From this code, you need to write down your unique "site ID" for later use (or copy this to your favourite text editor):<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ADW6W1Kkb02WG9Aa7CwiCFJy4c1zJhAg5ua7ab7FGkLnJgGvWZFqHakg8_HoTXkvoQmLTx2j-n1lW-GMRXUci1SPQkp9Whh00ZcH4NVCzppIO0HSbDtYOxNM6AFymLZBjMB7qxzBBzM/s1600-h/linkwithin-site-id.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ADW6W1Kkb02WG9Aa7CwiCFJy4c1zJhAg5ua7ab7FGkLnJgGvWZFqHakg8_HoTXkvoQmLTx2j-n1lW-GMRXUci1SPQkp9Whh00ZcH4NVCzppIO0HSbDtYOxNM6AFymLZBjMB7qxzBBzM/s320/linkwithin-site-id.png" /></a></div></li>
<li>Once you have a note of your Site ID, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.</li>
<li>Using your browser's search function, locate this tag (or similar) in your Blogger template code: <div class='post-footer'><br />
<br />
Depending on the template you are using, this tag may vary slightly though you should usually be able to locate 'post-footer' in your template code.</li>
<li>Immediately before this line, paste the following section of code, replacing "YOUR_SITE_ID" with the ID number you have noted down for your site:<br />
<br />
<blockquote><b:if cond='data:blog.pageType == "item"'><br />
<script><br />
var linkwithin_site_id = YOUR_SITE_ID;<br />
(function () {<br />
var elem = document.createElement('script');<br />
elem.type = 'text/javascript';<br />
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();<br />
document.getElementsByTagName('head')[0].appendChild(elem);<br />
})();<br />
</script><br />
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a><br />
</b:if></blockquote></li>
<li>Preview the changes you have made before saving your template. The LinkWithin gadget should not display in the preview; furthermore, if there are any errors in the installation you will be able to see before attempting to save.</li>
<li>If all is well, save your template and visit an item page in your blog: you should be able to see related posts showing up beneath your blog posts.</li>
</ol><h3>Support for LinkWithin's related posts</h3>While I can help with installation for LinkWithin in Blogger templates, I'm not able to help with specific problems with the script.<br />
<br />
Luckily, the LinkWithin team offer a good support service via email:<br />
<blockquote>If your blog uses a non-standard custom template/theme, we will need to add support for your blog manually, and we can do this only if the widget remains installed on your blog. Please email us at <b>support AT linkwithin DOT com</b>, and we will fix the problem, usually within 1-2 days. Thank you for your patience!</blockquote>At the moment, it appears we can only display three related posts. Hopefully LinkWithin will offer the option to display more (or less) items in a future version of the script.<br />
<br />
<h3>Why I'm not using LinkWithin <i>yet</i>...</h3>LinkWithin is a very useful solution for Blogger users wishing to display links to related posts in their blog. I recommend this service and will be using this in a future release of Blogger Buster.<br />
<br />
My current template is highly complex and has served me well for many months. However, there are several new (and upcoming) customizations and new features for Blogger which may not work so well in this design. I'll explain more about this in a future post when the site changes are closer to completion.<br />
<br />
<br />
<h3>Are you using LinkWithin? What do you think about this service?</h3>If you're already using LinkWithin (or plan to use this soon), please let us know your opinions of this free service, and how well you think this adapts to displaying posts in your blog 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-3255312609801318932009-06-09T19:38:00.000+01:002009-06-09T19:38:17.455+01:00Blogger Read More/Post Summaries - The Best News Yet!One of the functions most voted for in Blogger's recent <a href="http://productideas.appspot.com/#16/e=e828">Product Ideas forum</a> was the ability to summarize blog posts on non-item pages.<br />
<br />
I've written about a few different approaches to this, but these methods were never so easy to implement.<br />
<br />
Luckily I came across <a href="http://quiterandom.com/tutorials/automatic-post-summaries/">this tutorial from Quite Random</a> which offers the simplest - and most useful - method of displaying post summaries automatically for our Blogger posts, complete with a thumbnail from images used in our posts.<br />
<span id="fullpost"> <br />
<br />
This customization is very easy to implement (there are literally only two steps) with very little editing of the template required. I installed with immediate success on several templates to test it out, and with only a little tweaking on one of my most customized designs.<br />
<br />
In short, this is a fabulous implementation of post summaries for Blogger. Be sure to pop over to Quite Random to check out this post and learn how to install this hack for your own Blogger blogs.<br />
<br />
However... This is not my only source of good news regarding post summaries for Blogger!<br />
<br />
The Blogger team are in the process of implementing this function in Blogger! Or at least, I'm pretty certain they are.<br />
<br />
Take a look at this screenshot which was taken from a clean installation of Minima (a default Blogger template) on a new blog (click the image for a larger version):<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjesQ_p6nFoGq-BPflXISS5iEzO89OQSqU3w5vhNxCnTCEjPeJJ5CeuNAwJE4GPe7NjMkkmk6SaG0hkEZx_qHFFtzFOQr_U-oubJ-JINK27dqDEfaJNmo5lAnki3dyx5PvHVET8Hp7ouMw/s1600-h/blogger-post-summaries.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjesQ_p6nFoGq-BPflXISS5iEzO89OQSqU3w5vhNxCnTCEjPeJJ5CeuNAwJE4GPe7NjMkkmk6SaG0hkEZx_qHFFtzFOQr_U-oubJ-JINK27dqDEfaJNmo5lAnki3dyx5PvHVET8Hp7ouMw/s400/blogger-post-summaries.jpg" /></a></div>These tags look suspiciously like tags which could be used for implementation of post summaries. What's more, it seems we can choose whether or not to summarize our posts, and also the text used for the link to read the full article.<br />
<br />
I can't say for sure when this implementation will become available, though I believe this will first be rolled out into Blogger in Draft so any issues can be resolved before the summaries become available to us all.<br />
<br />
There's not yet been any mention about this on the Blogger in Draft blog, Blogger Buzz or even by the team on Twitter, but since this code is now appearing in new templates I'd guess this will become available in the very near future.<br />
<br />
Stay tuned, I'll get more news about this as it happens and will (of course) explain how to use summaries in customized templates too.<br />
<br />
This is a feature I'm very excited to know is in progress, so if anyone does have any news to share, please let me know! <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-79647925329308442812008-11-25T18:00:00.001+00:002008-11-25T22:52:34.344+00:00How to make columns of equal height in BloggerAn issue of blog design is that CSS based layouts cannot produce columns of equal heights. For example, when designing a two or three column template, it is almost impossible to make the sidebar(s) stretch to the length of the main posts column. This is particularly noticeable when a background color (or image) is used for the sidebar which does not stretch to the length of the page.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBE7gp2w2Omd_X4oaG49m71faQhQTQQCNypEogvRfaEebYAxF-0Cs_s3z403xSBUMpJpnlOjV_c1QsJjOPo81IAN11R-B7b5Vg3YvFXa2Mbzou-2MXJEbbEQ71f3y5V__cIh9EiKIe_CA/s1600-h/Blues-Template-no-stretch.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBE7gp2w2Omd_X4oaG49m71faQhQTQQCNypEogvRfaEebYAxF-0Cs_s3z403xSBUMpJpnlOjV_c1QsJjOPo81IAN11R-B7b5Vg3YvFXa2Mbzou-2MXJEbbEQ71f3y5V__cIh9EiKIe_CA/s200/Blues-Template-no-stretch.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQo7TCfKVAEeWJ-UdI_CDrxeE4k_rQanEHSQxDVZvyJOUl8UCTMOKjG4QMxHE6tf27m4oCpmhOE6JQcHKSFVf473QmZWhPabhKGE3L3Wt6ciG9Gns89J3m48P8s4R8RFw1JXboR6tRc6k/s1600-h/Blues-Template-stretch.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/AVvXsEhQo7TCfKVAEeWJ-UdI_CDrxeE4k_rQanEHSQxDVZvyJOUl8UCTMOKjG4QMxHE6tf27m4oCpmhOE6JQcHKSFVf473QmZWhPabhKGE3L3Wt6ciG9Gns89J3m48P8s4R8RFw1JXboR6tRc6k/s200/Blues-Template-stretch.jpg" /></a></div><br />
<div class="clear" style="clear: both;"></div><br />
This issue is also relevant for those who <a href="http://www.bloggerbuster.com/2008/11/how-to-display-blogger-posts-side-by.html">display their blog posts side-by-side on the home page</a>. Posts which are of equal height would appear in a harmonious grid-like format which is more pleasant to the eyes, whereas posts of unequal length disrupt the grid-like pattern and can often cause disarray in the layout.<br />
<br />
In this tutorial, I'll explain how to use JavaScript to ensure columns of your choosing (whether the sidebars and main column, or individual posts) appear at equal heights to ensure a pleasant and harmonious layout for your blog design.<br />
<br />
<span id="fullpost"><br />
<h3>The "Matching Columns Script" and how it works</h3><br />
In this tutorial, we will be using an adaptation of <a href="http://www.killersites.com/blog/2006/matching-div-heigths/">the "Matching Columns" JavaScript</a> by Alejandro Gervasio. which was modified to work in FireFox by Stefan Mischook for Killersites.com. You can read the original article and even view a video explaining how this script works <a href="http://www.killersites.com/blog/2006/matching-div-heigths/">over at the Killersites blog</a>.<br />
<br />
This JavaScript matches the height of all columns which use a specific CSS "class". It finds the length of the longest columns which uses this class name, then creates extra CSS declarations to ensure all other columns using this class are lengthened to the same height.<br />
<br />
For example, if we use the class of "column" for both the main posts section and sidebars in our blog template, the script will ensure that the main column and both sidebars appear of equal length when viewed in a web browser.<br />
<br />
The original Matching Columns JavaScripts use external files which are linked to in the head section of the web-page. However, I have adapted this method for use in Blogger templates so we can use "inline" JavaScript, meaning we do not need to host a JavaScript file on an external host.<br />
<br />
<br />
<h3>How to add the Matching Columns function to your Blogger layout</h3><br />
The first step to creating columns of matching height in your Blogger layout is to add the required JavaScript code to the head section of your template.<br />
<br />
This is very simple! All you need to do is copy the following section of code and paste this just before the closing <head> tag in your Blogger template (it is quite long so be sure to <b>copy the entire section of code </b>to your clipboard!):<br />
<br />
<br />
<blockquote>&lt;!-- Equal Columns JavaScript Start --&gt;<br />
<br />
<br />
&lt;script type='text/javascript'&gt;<br />
/* <br />
Enables columns to be of the same height for better blog designs.<br />
Derived from a script by Alejandro Gervasio. <br />
Modified to work in FireFox by Stefan Mischook for Killersites.com<br />
Adapted for inline use with Blogger blogs by Amanda Fazani of BloggerBuster.com<br />
<br />
<br />
How it works: just apply the CSS class of &#39;column&#39; to your pages&#39; main columns.<br />
*/<br />
function matchColumns(classname){<br />
<br />
<br />
var divs,contDivs,maxHeight,divHeight,d; <br />
<br />
// get all &lt;div&gt; elements in the document <br />
<br />
<br />
divs=document.getElementsByTagName(&#39;div&#39;); <br />
<br />
<br />
contDivs=[]; <br />
<br />
<br />
// initialize maximum height value <br />
<br />
<br />
maxHeight=0; <br />
<br />
<br />
// iterate over all &lt;div&gt; elements in the document <br />
<br />
<br />
for(var i=0;i&lt;divs.length;i++){ <br />
<br />
<br />
// make collection with &lt;div&gt; elements with class attribute &#39;container&#39; <br />
<br />
<br />
if(new RegExp(&quot;\\b&quot; + classname + &quot;\\b&quot;).test(divs[i].className)){<br />
<br />
<br />
d=divs[i]; <br />
<br />
<br />
contDivs[contDivs.length]=d; <br />
<br />
<br />
// determine height for &lt;div&gt; element <br />
<br />
<br />
if(d.offsetHeight){ <br />
<br />
<br />
divHeight=d.offsetHeight; <br />
<br />
<br />
} <br />
<br />
<br />
else if(d.style.pixelHeight){ <br />
<br />
<br />
divHeight=d.style.pixelHeight; <br />
<br />
<br />
} <br />
<br />
<br />
// calculate maximum height <br />
<br />
<br />
maxHeight=Math.max(maxHeight,divHeight); <br />
<br />
<br />
} <br />
<br />
<br />
} <br />
<br />
<br />
// assign maximum height value to all of container &lt;div&gt; elements <br />
<br />
<br />
for(var i=0;i&lt;contDivs.length;i++){ <br />
<br />
<br />
contDivs[i].style.height=maxHeight + &quot;px&quot;; <br />
<br />
<br />
} <br />
<br />
<br />
} <br />
<br />
<br />
// Runs the script when page loads <br />
<br />
<br />
window.onload=function(){ <br />
<br />
<br />
if(document.getElementsByTagName){ <br />
<br />
<br />
matchColumns(&#39;crosscol&#39;); // class=column <br />
matchColumns(&#39;column&#39;); // class=maincolumn <br />
<br />
<br />
} <br />
<br />
<br />
}<br />
&lt;/script&gt;<br />
<br />
<br />
&lt;!-- Equal Columns JavaScript End --&gt;</blockquote><br />
Once you have pasted this section of code in your template, proceed to save it. If for some reason you have made any errors when pasting the code, you will receive an error message and be unable to save.<br />
<br />
Now to make sections of your Blogger layout have equal heights, we need to apply the class of "column" to those sections in the actual template code. I will offer two variations of how this can be achieved in this tutorial: making the sidebar and main-wrapper equal height, and making all posts equal height (for use when making posts appear side-by-side).<br />
<br />
<br />
<h3>Make the sidebar(s) and main posts column of equal length</h3><br />
This method works best for layouts including at least one colored sidebar (whether this feature a background color or background images for effect). There are many different non-standard templates using this style of layout, so it's likely that the identifiers of the divisions referenced here could be different in your own template.<br />
<br />
<br />
To make the sidebar(s) and main column of equal length, you will need to add the class of "column" to these divisions in the template.<br />
<br />
For the main-wrapper (the section which holds your blog posts) you should look for a line like this in your template:<br />
<br />
<br />
<blockquote><div id='main-wrapper'></blockquote><br />
Add the code highlighted in red to this line:<br />
<br />
<br />
<br />
<blockquote><div id='main-wrapper' <b style="color: red;">class='column'</b>></blockquote><br />
If you cannot find <div id='main-wrapper'> in your template, this may be called 'main-wrap' or 'main-section' instead. Use your discretion to find the appropriate code tag; you can always change things later!<br />
<br />
Next, you need to add the class of column to your sidebar or sidebars. If your template features more than one sidebar, this could become a little complicated though I will do my best to explain!<br />
<br />
Most Blogger templates identify the sidebar-wrapper like this:<br />
<br />
<br />
<blockquote><div id='sidebar-wrapper'></blockquote><br />
If you find this in your template code, simply add the section in red:<br />
<br />
<br />
<blockquote><div id='sidebar-wrapper' <b style="color: red;">class='column'</b>></blockquote><br />
The main sidebar could also be called 'sidebar-wrap', 'left-sidebar' or even 'left-bar' depending on the template you are working with. Again, use your discretion and add class='column' in the place you think most appropriate for your template.<br />
<br />
This also applies in templates where you have a second sidebar. It may be named <div id='sidebar-right'> ; 'right-sidebar-wrapper', 'new-sidebar-wrapper' or something entirely different. Simply add class='column' inside the division tag which you think references the correct section in your template.<br />
<br />
Now to check if your modifications have been successful, attempt to preview your template. Since the JavaScript we are using is contained within the template (not referenced from an external host) you should be able to see the difference straight away. This means that your blog sidebar should appear as long as your main posts column.<br />
<br />
If all looks well, you can proceed to save your template and enjoy your new matching columns. If your sidebar and main column do not appear at equal heights, clear your edits and begin again being sure to check the placement of the class='column' sections you have added.<br />
<br />
<br />
<h3>To make posts of equal height</h3><br />
This method is particularly useful when using <a href="http://www.bloggerbuster.com/2008/11/how-to-display-blogger-posts-side-by.html">my recently posted customization to display posts side-by-side on non-item pages</a>. Using this method ensures your posts appear in a grid-like fashion with spaces beneath shorter posts so all headings are correctly aligned.<br />
<br />
For this example, you will need to ensure you have checked the "Expand widget templates" box on the Edit HTML page, as we will be adding the class of "column" inside the main posts widget.<br />
<br />
Firstly, ensure you have added the JavaScript before the closing </head> tag in your Blogger template.<br />
<br />
Next, search for the following line of code (or similar):<br />
<br />
<br />
<blockquote><div class='post'></blockquote><br />
If you cannot find this line, search for the following instead:<br />
<br />
<br />
<blockquote><div class='post hentry'></blockquote><br />
Or any other division tag which begins with <div class='post<br />
<br />
You do not need to add the entire class='column' phrase here as this div already has class attributes. Instead, we simply need to add the class identifier, like this:<br />
<br />
<br />
<blockquote><div class='post <b style="color: red;">column</b>'></blockquote><br />
or alternatively,<br />
<br />
<br />
<blockquote><div class='post hentry <b><span style="color: red;">column</span></b>'> </blockquote><br />
This is because divisions can have more than one "class" (though they can only have one "id"!).<br />
<br />
Once you have added this extra class to the posts section, preview your template to see that your blog posts are now all of equal height.<br />
<br />
<h4>Important information when making posts of equal height</h4>If you choose to make your posts of equal height, you must consider that <b>all of your posts will appear as long as your longest post</b>. So if you have one particularly long post on your home-page when all others are relatively short, there will be long gaps beneath all of your shortened posts! <br />
<h3>Other uses for the matching columns script</h3><br />
You can also adapt this script and methods to add columns of equal height to your blog footer (in conjunction with my <a href="http://www.bloggerbuster.com/2007/10/how-to-add-three-columns-to-your-footer.html">three column footer hack</a>, perhaps!), or to any other areas of your blog template which you would like to be of matching heights.<br />
<br />
Simply apply the class of "column" to all divisions which you would like to appear at the same height, and ensure you have pasted the JavaScript before the closing </head> tag in your Blogger template!<br />
<br />
<h3>Your thoughts?</h3><br />
I hope you have found this tutorial to be a useful addition to the arsenal of Blogger customizations and tutorials posted here on Blogger Buster! Please feel free to leave your comments or let us know how you have used the matching columns script in your own designs by typing your message below.<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-79758541582887080772008-11-21T18:00:00.001+00:002008-11-22T20:38:02.004+00:00How to display Blogger posts side by side (create a newspaper style layout!)In recent weeks, one of the most requested tutorials has been how to display posts side-by-side. An example of how this is used is the classic (and much loved) Hemingway template, in which posts are displayed beside each other:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1E0F4Jzg6OwYuNJsjHdhlzLVKDDVGRiznxfaU3_OhYE7TssIcYmYUFEBmPImFGPwHVtPnFZkFNEgU-2CXb0EIDtn0EhN2KteLKw075Tg1_Zdi42rOnU0nsWpQ65-KZfFlKNisoA-cgaw/s1600-h/hemingway.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1E0F4Jzg6OwYuNJsjHdhlzLVKDDVGRiznxfaU3_OhYE7TssIcYmYUFEBmPImFGPwHVtPnFZkFNEgU-2CXb0EIDtn0EhN2KteLKw075Tg1_Zdi42rOnU0nsWpQ65-KZfFlKNisoA-cgaw/s400/hemingway.jpg" /></a></div>The Hemingway template does not include a sidebar in the layout. Instead, widgets are contained in the footer section (beneath the posts) which effectively puts most focus on the blog posts and less on the widget contents.<br />
<br />
You can download <a href="http://www.blogcrowds.com/resources/view_template.php/hemingway_75">the Hemingway template for Blogger from BlogCrowds</a> in both the black and white variations of design.<br />
<br />
Many bloggers prefer a three column template in which two of the columns are dedicated to blog posts (and with only one sidebar). An example of this layout can be seen in the popular Drudge Report blog:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirjywAQOLaBWE_Rp-R5vBILlsxJ90x_rrCDs1wVHODefsAx0NjqgitQFm6cmhrD1CROrx5p99m5s3XsZuA4iCGma3iEFQBCaQMRQNVHhyPqKVj1U9HKI8NMiDbdhgvPyVDx0hP6Q9IZ4Q/s1600-h/DRUDGE-REPORT-2009%C2%AE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirjywAQOLaBWE_Rp-R5vBILlsxJ90x_rrCDs1wVHODefsAx0NjqgitQFm6cmhrD1CROrx5p99m5s3XsZuA4iCGma3iEFQBCaQMRQNVHhyPqKVj1U9HKI8NMiDbdhgvPyVDx0hP6Q9IZ4Q/s400/DRUDGE-REPORT-2009%C2%AE.png" /></a></div><br />
In this tutorial, I'll explain how you can create a three column Blogger template in which two columns are dedicated to posts, while the third may be used as a regular sidebar. On item pages, the post will take up the full width of two columns to ensure there is no unsightly gap between this and the sidebar. <br />
<br />
<span id="fullpost"><br />
We're going to base this tutorial on the Minima template, though the same principles can be applied to most Blogger templates. Here is an example of what we will achieve:<br />
<br />
<h3>Overview (Read this first!)</h3><br />
In this tutorial, I'll explain how to transform the default Minima template so that posts appear in (narrower) columns, side-by side on home, archive and search pages, with a sidebar of the same width appearing on the right hand side of the posts. <br />
<br />
To transform the basic Minima template into a three column, newspaper style layout is fairly straightforward and includes two basic steps:<br />
<ol><li>Increase the width of the overall template to accomodate the extra column</li>
<li>Add some conditional CSS to make the posts appear beside each other on non-item pages</li>
</ol>However, once we have done these two steps, there will be a few other code and CSS issues which we need to resolve in order that the template will appear as it should. I will take you through all steps nescessary to ensure the layout appears as it should, with explanations and visual examples at each stage.<br />
<br />
An issue which you should consider when using this tutorial is that the width of each posts column (on non-item pages) will be decreased to 290px. This means you should ensure images in posts are no wider than 290px (including any padding or borders) otherwise the posts columns will be pushed beneath each other, rather than be displayed side-by-side.<br />
<br />
If you usually display large images and wish to do so on item pages, we can add some extra CSS to the template to restrict the width of images on non-item pages, as I will explain later in this tutorial.<br />
<br />
Most of the techniques described in this tutorial may also be applied to different templates. If you would like to transform your own (non-Minima) template in this manner, my advice would be to follow each step of this tutorial in a test blog first, then see how this could apply to the different CSS classes and identifiers in your own template. It's much better to have some experience of this technique beforehand than to jump in feet first! <br />
<br />
<h3>Step 1: Create a test blog</h3><br />
While it is not essential to create a test blog to make changes to your blog layout, I'm sure many of you will find this useful! This way you can make changes without affecting your main blog, and if you happen to make a mistake you can start all over again ;)<br />
<br />
I have written a comprehensive tutorial about creating a test blog which you can read here. If you'd like to jump straight in, here are the basic steps covered in the test blog tutorial:<br />
<ol><li>Create a new blog (choose the Minima template for the purpose of this tutorial)</li>
<li>Fill it with some posts (at least 2, though more would be preferable)</li>
<li>Make it private, and prevent your blog being indexed by search engines</li>
</ol>If you're looking for a quick and easy way to add "dummy content" to your blog, check out LoremIpsumDolarSitAmet.com which generated paragraphs of dummy text automatically (including my favorite filler text: Jabberwocky!).<br />
<br />
Once you have created your test blog, we can begin changing aspects of the layout.<br />
<br />
<h3>Step 2: Alter the dimensions of the layout</h3><br />
Now I am assuming you are using the Minima template (it doesn't matter which color), and that the sidebar is on the right-hand side of your layout.<br />
<br />
At the moment, the layout is too narrow to accomodate a third column. So we need to alter the dimensions of the layout in order to create more space.<br />
<br />
<b>Increase the width of the #outer-wrapper</b><br />
<br />
The #outer-wrapper is the container which holds all of the content in this template, including the header, main posts section and sidebar.<br />
<br />
At present, your outer-wrapper will be 660px wide. We will increase this to 940px which will allow us to have three columns of 290px, 290px (the posts) and 300px (for the sidebar), plus margins between to allow for eye-pleasing white-space.<br />
<br />
To achieve this, find the following section in the b:skin section of your layout:<br />
<br />
<blockquote>#outer-wrapper {<br />
width: <b style="color: red;">660px</b>;<br />
margin:0 auto;<br />
padding:10px;<br />
text-align:$startSide;<br />
font: $bodyfont;<br />
}</blockquote><br />
Change the 660px (highlighted in red) to say 940px instead.<br />
<br />
<b>Increase the width of the #main-wrapper</b><br />
<br />
The #main-wrapper is the section which contains your blog posts, blog pager (newer/older posts) and any messages which appear when you perform a search or filter posts by label.<br />
<br />
We need to increase this from 410px to 620px, which will allow enough room for posts to display side-by-side in two narrower columns.<br />
<br />
To do this, find the following section of code:<br />
<br />
<blockquote>#main-wrapper {<br />
width: <b style="color: red;">410px</b>;<br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}</blockquote><br />
And replace 410px with 620px instead.<br />
<br />
<b>Make the sidebar wider</b><br />
<br />
Personally, I find a three column newspaper style template to be more pleasing when all three columns are approximately the same width. So we will increase the width of the sidebar from 220px to 300px, which will equal the width of the post columns and their white-space.<br />
<br />
So find the following section of code:<br />
<br />
<blockquote>#sidebar-wrapper {<br />
width: <b><span style="color: red;">220px</span></b>;<br />
float: $endSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}</blockquote><br />
And replace 220px with 300px instead.<br />
<br />
<b>Fix the header and footer widths</b><br />
<b><br />
</b><br />
If you take a look at your template now, you will notice that the header and footer sections are narrower than the overall width of the blog.<br />
<br />
This is because the Minima template uses specific widths for the #header-wrapper and #footer sections of the layout.<br />
<br />
To widen these two sections (which complements the new wider design) we need to remove the width statements in the b:skin section of the template. This will then allow the header and footer to stretch to the width of the outer-wrapper and appear harmonious to the design.<br />
<br />
Firstly, find the following section in your blog template:<br />
<br />
<blockquote>#header-wrapper {<br />
<b style="color: red;"> width:660px;</b><br />
margin:0 auto 10px;<br />
border:1px solid $bordercolor;<br />
}</blockquote><br />
And remove the line highlighted in red.<br />
<br />
Then locate this section of code:<br />
<blockquote>#footer {<br />
<b style="color: red;"> width:660px;</b><br />
clear:both;<br />
margin:0 auto;<br />
padding-top:15px;<br />
line-height: 1.6em;<br />
text-transform:uppercase;<br />
letter-spacing:.1em;<br />
text-align: center;<br />
}</blockquote><br />
And again, delete the line in red.<br />
<br />
Now preview your template: you should notice that the header and footer sections now stretch to the overall width of the blog. <br />
<br />
The blog description may look a little lop-sided with this new setting, like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXXNtwFTLW28Z8wMCiNOjnNHlQcn9nP4pbdFAx12uONTT59XgYruzBoHDWNiS_Y-UksULQivdbN2-JB6tXYInUI1F314AuNTIuzh4phCz0HFK3Z7WwqueIuSUCB1S1Ych_NnlSbDujdY/s1600-h/description-wrapper-misaligned.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXXNtwFTLW28Z8wMCiNOjnNHlQcn9nP4pbdFAx12uONTT59XgYruzBoHDWNiS_Y-UksULQivdbN2-JB6tXYInUI1F314AuNTIuzh4phCz0HFK3Z7WwqueIuSUCB1S1Ych_NnlSbDujdY/s320/description-wrapper-misaligned.jpg" /></a></div><br />
<br />
To align the description centrally beneath the blog title, simply find this section of code:<br />
<br />
<blockquote>#header .description {<br />
margin:0 5px 5px;<br />
padding:0 20px 15px;<br />
<b style="color: red;"> max-width:700px;</b><br />
text-transform:uppercase;<br />
letter-spacing:.2em;<br />
line-height: 1.4em;<br />
font: $descriptionfont;<br />
color: $descriptioncolor;<br />
}</blockquote><br />
Then delete the line in red. Since the description uses margins and padding, we can do away with the "max-width" property, which ensures this section is properly aligned to the heading above it.<br />
<br />
<b>Ensure the #blog-pager spans the width of the main posts section</b><br />
<br />
When displaying posts side-by-side, it is ideal to have an even number of posts displayed. However, it is not always possible to do so. For example, on archive pages there may be an uneven number of posts for any given time period, or a blog search could produce 3, 5 or another uneven number of results.<br />
<br />
For this reason, we must ensure the blog pager (which displays links to the home page, newer and older posts) has a fixed width. Otherwise it may appear at the top right of the posts, which is not harmonious to the design.<br />
<br />
To apply a fixed width to the blog-pager, locate the following line of code in your template:<br />
<br />
<blockquote>#blog-pager { </blockquote><br />
And immediately after it, add the lines in red:<br />
<br />
<blockquote>#blog-pager { <br />
<b style="color: red;"> width: 600px;<br />
clear: both;</b><br />
text-align: center;<br />
}</blockquote><br />
This will ensure the pager always spans the width of both post columns on non-item pages.<br />
<br />
<b>Save your modifications!</b><br />
<br />
At this point, we have made some heavy modifications to the Minima template. So if you have not already done so, save your template now.<br />
<br />
<h3>Step 3: Ensure the "date-header" appears in the right place!</h3><br />
In the Minima template, the section of code which produces the "date heading" for each post is outside the main "includable" for the blog posts. Since we are making two columns of posts appear on the home page of this template, we need to alter the placement of the date-header code, otherwise the date-headings will appear out of place!<br />
<br />
This step is probably the most complicated of the whole tutorial, so take your time and do this carefully :)<br />
<br />
For this, we will need to delve into the widget template for the posts section. You need to ensure you have checked the "Expand widget templates" box on the Edit HTML page:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubxp4-mbXln1qBBpiMEwsWV5w5zT-MA7-zcc8ZZnHgoJLH1b9AeBibf8Qxhb-v7sKR-C_CoerEDuP6aXBHWJ10DjB6chsG7EZuQwZkvZYDoYUWF0MMGFwYHvtQCKGqYOaGF4xuS91piI/s1600-h/expand-widget-templates.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubxp4-mbXln1qBBpiMEwsWV5w5zT-MA7-zcc8ZZnHgoJLH1b9AeBibf8Qxhb-v7sKR-C_CoerEDuP6aXBHWJ10DjB6chsG7EZuQwZkvZYDoYUWF0MMGFwYHvtQCKGqYOaGF4xuS91piI/s400/expand-widget-templates.jpg" /></a></div><br />
Now search for the following section of code:<br />
<br />
<blockquote><data:adStart/><br />
<b:loop values='data:posts' var='post'><br />
<div style="color: red;"><b><b:if cond='data:post.dateHeader'></b></div><div style="color: red;"><b><h2 class='date-header'><data:post.dateHeader/></h2></b></div><div style="color: red;"><b></b:if></b></div><b:include data='post' name='post'/><br />
<b:if cond='data:blog.pageType == "item"'><br />
<b:include data='post' name='comments'/><br />
</b:if><br />
<b:if cond='data:post.includeAd'><br />
<data:adEnd/><br />
<data:adCode/><br />
<data:adStart/><br />
</b:if><br />
</b:loop><br />
<data:adEnd/></blockquote><br />
This section brings together all elements of your blog posts to display in your active blog pages. The lines I have highlighted in red generate the date-heading for each post. These are the lines which need to be moved to a different place in the template code.<br />
<br />
Highlight these three lines in your template, and key CTRL+X (or CMD+X) to temporarily "cut" them from the template. These will be copied to your clipboard so you can paste them in the new location.<br />
<br />
Once you have "cut" these three lines, locate this line of code in your template:<br />
<br />
<blockquote><a expr:name='data:post.id'/></blockquote><br />
And paste the three "cut" lines immediately after it.<br />
<br />
Now preview your blog to ensure the date-headings are visible above each post. If all looks well, you can proceed to save your template.<br />
<br />
<br />
<h3>Step 4: Add conditional CSS to make posts appear side-by-side on non-item pages</h3><br />
We have modified many aspects of our Minima template in preparation for the new posts column on non-item pages. Now we can add some conditional CSS which will make posts appear side-by-side!<br />
<br />
This is actually quite easy! All you need to do is copy the following section of code to your clipboard:<br />
<br />
<blockquote><b:if cond="data:blog.pageType != "item""><br />
<style><br />
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}<br />
</style><br />
</b:if></blockquote><br />
And paste this immediately after the closing </b:skin> tag in your template code. You can then preview your template, and will be able to see the results right away!<br />
<br />
Save your template at this point, and view your demonstration blog in your browser. Have a play around with the pages, viewing archives, performing searches and the like. You will see that on non-item pages, the posts appear in narrow columns side-by-side, whereas on item pages, the post will span the width of both columns!<br />
<br />
<h3>Taking care of images in your newspaper-style template</h3><br />
Your new post columns are slightly narrower than the width for "large" images which you may upload to your posts. This means that large sized images will be "cut off" when displayed on non-item pages.<br />
<br />
There are two ways you can work around this:<br />
<ol><li>Only ever post small/medium sized images to your posts</li>
<li>Specify the width of post images on non-item pages.</li>
</ol>If you choose the second option, you will need to add a little more CSS to the conditional style we added, just after the closing <b:skin> tag, like this:</b:skin><br />
<br />
<br />
<blockquote><br />
<b:if cond='data:blog.pageType != "item"'><br />
<style><br />
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}<b><span style="color: red;">.post-body img {width: 280px;}</span></b><br />
</style><br />
</b:if></blockquote><br />
This would reduce the width of large images to only 280px on non-item pages, whereas on individual posts, the images will display at full width.<br />
<br />
However, any images which would usually be smaller than 280px in width would be stretched to this width.<br />
<br />
You could of course choose for images to be even narrower (eg: 100px or 150px) if you plan on serving smaller sized images as well as large ones. Simply change width: 280px to your chosen specification.<br />
<br />
<h3>Summary</h3>If you would like to apply this technique to a different template, or would simply prefer a summarized version of this template, here is a quick summary of the steps required to make posts appear side-by-side in a Blogger layout:<br />
<br />
<ol><li>Prepare your existing template<br />
<ul><li>Widen the outer-wrapper</li>
<li>Widen the main posts column</li>
<li>Ensure the header and footer sections are widened accordingly</li>
<li>Don't forget to adjust the width of the blog-pager section!</li>
</ul><br />
</li>
<li>Ensure the date-header code snippet is above the code for the post title, and not seperately coded within the posts loop</li>
<li>Add conditional CSS outside the <b:skin> section of your template, which ensures the posts appear side-by-side only on non-item pages. You may need to experiment with different widths and margins to find the ideal dimensions for your own layout.<br />
</li>
<li>Be aware of how images may appear in your new layout and make changes accordingly</li>
</ol>I hope this tutorial has explained how to create a newspaper style template in Blogger in which posts appear side-by-side. The methods used here have been tried and tested for modifying the Minima template, though for other Blogger templates you may need to make more adjustments and possibly change background images to accomodate the new dimensions of your three-column layout.<br />
<br />
If you have any useful tips to accompany this tutorial, or would simply like to leave a comment, please feel free to leave your message 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-36071754127576467772008-10-02T18:00:00.000+01:002009-07-26T02:00:13.710+01:00Add a "breadcrumb" trail and status messages to your blog<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9qt4MqX1qFtUgQKdp97GQLSXvsF56EQaxgjVq9FSjcXLu0IcZSprZQMY57PDz-UvBboU6TF1SayEOvVE8oImXlywrp4x1n3LISH3WsUU7KQJOkrTxMZrS6I7sFgECzUZjDC029fgtqs/s1600-h/breadcrumb-trail.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/AVvXsEj2jLKdBv9R_vVQ8PO9TMRskNFvzF3vHMbw_xmj2rmPTYoWOR3GRRthJ-fmtNg4SClrHRYZNsIXuw7GtDjfNKsDUFGWZDh9PEsMcU2ClLSxqeuWWKN1f5oSmG2owGKc880ch9z9mtfaZF8/s320-r/breadcrumb-trail.jpg" /></a></div>An important (and often overlooked) aspect of good blog design is <b>navigation</b>. In order to encourage visitors to read more of your posts, stay longer and make repeated visits,<b> you need to make it easy for readers to navigate and find the information they need</b>!<br />
<br />
Adding a list of <a href="http://www.bloggerbuster.com/2007/09/how-to-show-links-to-related-posts.html">related posts</a>, links to recent articles and easily accessible categories are among the most effective techniques. Another method which I have noticed in many popular blogs is the "breadcrumb trail": a message above posts which explains how the page being read fits into the heirachy of the blog, with liks to the containing categories.<br />
<br />
<a href="http://hoctro.blogspot.com/">Hoctro</a> wrote a very useful tutorial which explains <a href="http://hoctrointro.blogspot.com/2008/09/archived-post-adding-breadcrumb-trail.html">how to add a "breadcrumb trail" on item pages in Blogger</a>. However, I preffered to use a method which would display a message on all pages of the blog, including Archives and Search/Label pages. So in this tutorial, I'll explain how to add a status message for each page of your blog, with links to the containing pages for easy reference and increased page views.<br />
<br />
<span id="fullpost"><br />
<br />
</span><br />
<h3><span id="fullpost">How the status messages will appear in your blog</span></h3><span id="fullpost">Here are some screenshots of how this customization would appear in your blog design:<br />
<br />
<b>On the home page:</b><br />
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7NSHo5_-BJilzwDGZ6kb4O4tGyiaTwBCptuBxm35tQwg8sLVASOjw5VLzRoOyThmo1D3OyDeScxWq8M_C-VGbUwaNGsV59wiOm-xRGOPh6s1mE1fkDxmRwiWsySyMQrvgzj6rsJ3ebeI/s1600-h/home-page-breadcrumbs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MiZbJcDQO-t-JsEVgSG900E4VoVppapJE0q28Jw73IttTmUVXo9VoBRZCBL9Qfx4wW8MRwKpMPDUaGZAc1_GbxU6I3GPtsPsdRbX9jM_yCAdpJW42l0RmGjX2YeDpSFcucQor0Jfr3c/s400-r/home-page-breadcrumbs.jpg" /></a></span></div><span id="fullpost"><b>On item pages</b>:<br />
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8o7t9gJreIE5TPUo-SvNU2S7QrNP_DiSf0PYloT7igzDceCu432xInJjaATj8draxqIkJyoTHH-AlSLKbOBn0flnzQ-dAIQeLIBFbT30mf2v6RKfOap2GQ7e0oVksw7LNNk98pwRCgkk/s1600-h/item-page-breadcrumbs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaam2sXugDBduw6DqKGn04d-nBJUVGr8Az4JZpBgJloHkDsLrn-tZUBJR_YonJEyaOZM5q_i0lZ3NYvVjKX6yVReVKBwvguWzvSbFLAELrV7Dnr_XWj4j49vuLo1xR6uGx9TTNQsInj5Y/s400-r/item-page-breadcrumbs.jpg" /></a></span></div><span id="fullpost"><b>On archive pages:</b><br />
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWzxIPbNwblTFK3jNOep0qfpfu7cAs7GqDw_XNXG-QgIiWfe9Wp4NFOnNdSRMdW50_B2_95z76oX1LeuQ5BTBVl4C4jGLMmg_Yfa887g5w-5M1aw6RmXrLYWXzYvbd10YSxt3xNeEURI/s1600-h/archive-breadcrumbs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcamBpYdYgUkMsQHXi2WUPsr-2LrE7Wj7h1Y6DP1NlGdxXIk9Grte03PFy4rqiENqUPOXSzyaMQ6PNQNvgbelTZmYcqIx6qkenYSIRoMjNTzyP3tW-lZXHTtfxpjU-xT3AAkz6qkh6Lo/s400-r/archive-breadcrumbs.jpg" /></a></span></div><span id="fullpost"><b>On search/label pages:</b><br />
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><span id="fullpost"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RL8RmzBU4tepNinEiNfIR28omG0UC8hS4eAiJyutooea9QaIkDEMHHx8-n3z5T-VvW0uNyjeU5y4WkzZwuZ1I-mpIilGqtUEKieYnz01RoqwGyAnCwid98DzcoJcQ2tpw_iU-ckX2bM/s1600-h/label-search-breadcrumbs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitThqv-RGtCTBxgcXiiFpiMC1F-Qw6WD7o-ihj6vHsGRwfrH8aaj5EqDtR8cGJb0bCHt0WD8vWxHg5PkaumM_5VgDx4p8gLwaxoUHj768qvVa7EXVoIJ5iV8OwUZ-Egk0QEtUfVGvx9No/s400-r/label-search-breadcrumbs.jpg" /></a> </span></div><span id="fullpost">As you may notice, the default "status message"which appears on your search/label pages is replaced by this new breadcrumb trail, ensuring that this area blends completely with your blog design.<br />
<br />
I have tried to ensure the code used in this tutorial will allow the "breadcrumb trail" to blend with other elements of your template, though you can also customize the code and styling to control the design even more.<br />
<br />
<br />
<br />
</span><br />
<h3><span id="fullpost">How to add the "breadcrumb trail" to your Blogger template</span></h3><span id="fullpost">This is a surprisingly easy customization to add to your Blogger template, and can be achieved in only three steps:<br />
<br />
<br />
<br />
</span><br />
<h4><span id="fullpost">Step 1</span></h4><span id="fullpost">Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "expand widget templates" box.<br />
<br />
<br />
<br />
</span><br />
<h4><span id="fullpost">Step 2</span></h4><span id="fullpost">Using your browser search function, locate this exact phrase in your Blogger template code:<br />
<br />
<br />
</span><br />
<blockquote><code><span id="fullpost"><b:include data='top' name='status-message'/></span></code></blockquote><span id="fullpost">Replace this entire line with the following block of code:<br />
<br />
<br />
</span><br />
<blockquote><code><span id="fullpost"><div id='places'><br />
<b:if cond='data:blog.homepageUrl == data:blog.url'><br />
<div class='breadcrumbs'><br />
Welcome to <data:blog.title/> <br />
</div><br />
<b:else/><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div class='breadcrumbs'><br />
<br />
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <br />
<b:loop values='data:posts' var='post'><br />
<b:if cond='data:post.labels'><br />
<b:loop values='data:post.labels' var='label'> <br />
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187; <br />
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><br />
</b:if><br />
&#187; <span class='post-title entry-title'><data:post.title/></span><br />
</b:loop><br />
</b:if><br />
</b:loop> <br />
<br />
<br />
</div><br />
</b:if><br />
<b:else/><br />
<b:if cond='data:blog.pageType == &quot;archive&quot;'><br />
<div class='breadcrumbs'><br />
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/><br />
</div><br />
</b:if><br />
<b:else/><br />
<b:if cond='data:navMessage'><br />
<div class='breadcrumbs'><br />
<data:navMessage/><br />
</div><br />
</b:if><br />
</b:if><br />
</div><!-- end places --></span></code></blockquote><span id="fullpost"><br />
<br />
<br />
</span><br />
<h4><span id="fullpost">Step 3</span></h4><span id="fullpost">Find the closing </b:skin> tag in your template (again using your browser search function if it is helpful).<br />
<br />
Just before this tag, add the following lines of code:<br />
<br />
<br />
<br />
</span><br />
<blockquote><code><span id="fullpost">#places {<br />
border: 1px solid $bordercolor;<br />
padding: 5px 15px;<br />
margin: 10px 0;<br />
line-height: 1.4em;<br />
}</span></code></blockquote><span id="fullpost"><br />
If your template does not include the variable $bordercolor, replace this phrase with the hex value of a chosen color instead (eg: #000000 for black).<br />
<br />
Now preview your template. In the preview, you should see the "Welcome to [your blog name]" message which tells you this customization has worked. If nescessary, you may want to add more margins/padding/a background color to the style statements for #places.<br />
<br />
Once you have finished, you are ready to save your template. You can then take a look at various pages in your blog to see how this breadcrumb trail operates.<br />
<br />
<br />
<br />
</span><br />
<h3><span id="fullpost">Your opinions?</span></h3><span id="fullpost">I hope this tutorial may be a useful method for enhancing navigation and page-views in your own Blogger template. Please let us know what you think of this hack or how you may have adapted this for your own requirements by leaving a comment 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-25451824158949730932008-09-26T18:00:00.000+01:002009-07-26T02:00:13.711+01:00How To Filter Posts by Label on the Home Page (Create a Side-Blog)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7FNs_UnBHo2DEbtVSW5A0yUj-dvqwyqJUKofysaFhPTlqT0curnAtbaJKAF8GcJow6KUg3lztlZP5ZfM8nrTEKq8Y2G1qmnuaSqUEUglGQrGXYhpI2LbWx9suJvp2CLkH3cDFKrJJa7M/s1600-h/filter-by-label.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/AVvXsEh9oLgm6WH9Y4h8DMa1klEXC77CAqifqJdWUgORNicpJnvCWtpwVeW3C6fLDEX8aFTJmQpoxd0ICb5HGWSU7zA7ff4t7-k-WRQn2rvnChxxFo7KnWSNOi-fYGpMMmQaGpGUY0vyOx4mWic/s320-r/filter-by-label.jpg" /></a></div>Some of my favorite (non-Blogger) blogs display a "sideblog" in their layout in which to display news snippets and links to interesting sites. These sideblog entries (often called "asides" or "link blogs") are much shorter than a regular blog post, and do not appear in the regular posts section.<br />
<br />
While it would be simple to create a sideblog using a links list widget, Twitter, or by <a href="http://bloggingbits.com/set-up-sideblog-mini-blog-asides/">adding a Del.icio.us RSS feed to the sidebar</a>, such methods would not allow readers to leave comments on our blogs about these entries. To allow commentary for sideblog entries, they need to be regular blog posts in a category whose posts are filtered from the front page.<br />
<br />
In this post, <b>I'll explain how you can filter posts of a particular label from being displayed on your blog's homepage then use this label's feed to display your sideblog</b>.<br />
<span id="fullpost"><br />
<br />
<h3>Step 1: Back-up your template!</h3>Before making any changes to your Blogger template, it is always good practice to make a back-up of your existing template. It is especially important for this Blogger hack: we will be filtering which posts display on the homepage, and any errors could result in no posts being displayed at all!<br />
<br />
To back up your Blogger template, go to Layout>Edit HTML in your Blogger dashboard, and click the "Download full template" link near the top of the page.<br />
<br />
You will then be prompted to save your template as a file to your computer hard drive which you could use to restore your template (if you make a mistake) or revert back if you change your mind about using this hack.<br />
<h3>Step 2: Editing the posts loop</h3>First, go to Layout>Edit HTML in your Blogger dashboard, and ensure you have checked the "Expand widget templates" box.<br />
<br />
The code which we need to edit is located within the "Blog Posts" widget.<br />
<br />
Finding the correct section of your template to edit can be a little tricky, as there are several elements which at first glance appear to utilize similar code. Here is the section which we need to edit:<br />
<br />
<br />
<blockquote><code> <!-- posts --><br />
<div class='blog-posts hfeed'><br />
<br />
<b:include data='top' name='status-message'/><br />
<br />
<data:adStart/><br />
<b:loop values='data:posts' var='post'><br />
<br />
<b:if cond='data:post.dateHeader'><br />
<h4 class='date-header'><data:post.dateHeader/></h4><br />
</b:if><br />
<b:include data='post' name='post'/><br />
<b:if cond='data:blog.pageType == "item"'><br />
<b:include data='post' name='comments'/><br />
<b:include data='post' name='comment-form'/> <br />
<div id='backlinks-container'><br />
<div expr:id='data:widget.instanceId + "_backlinks-container"'><br />
<b:if cond='data:post.showBacklinks'><br />
<b:include data='post' name='backlinks'/><br />
</b:if><br />
</div></code></blockquote><br />
In your own template, this code may not contain the <data:adStart/> and <data:adEnd/> tags, though this should not affect the overall functionality of this customization.<br />
<br />
If you struggle to locate this section of code, use your browser's search function to locate the following phrase: <code>hfeed</code> which should be present no matter which template you are using.<br />
<br />
When you have located this section of code (or similar), replace it with the following instead:<br />
<br />
<br />
<blockquote><code> <!-- posts --><br />
<div class='blog-posts hfeed'><br />
<br />
<b:include data='top' name='status-message'/><br />
<br />
<data:adStart/><br />
<b:loop values='data:posts' var='post'><br />
<b:if cond='data:blog.url != data:blog.homepageUrl'><br />
<b:if cond='data:post.labels'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast == "true"'><br />
<b:if cond='data:label.name != "<b><span style="color: red;">Sideblog</span></b>"'><br />
<b:include data='post' name='post'/><br />
<b:if cond='data:blog.pageType == "item"'><br />
<b:include data='post' name='comments'/><br />
</b:if><br />
<b:if cond='data:post.includeAd'><br />
<data:adEnd/><br />
<data:adCode/><br />
<data:adStart/><br />
</b:if><br />
</b:if><br />
</b:if><br />
</b:loop><br />
</b:if><br />
</b:if><br />
</b:loop> <br />
<data:adEnd/><br />
</div><br />
</code></blockquote>Be sure to highlight all of the code and replace with the section above in its' entirety! Otherwise, when you attempt to preview or save this code, you will receive errors saying that tags are not closed properly.<br />
<br />
In the code above, you will notice I have highlighted "Sideblog" in bold red. This is the name of the label which we will be filtering from the display of posts on the home page. You can change this to any label name you prefer. This is case sensitive, so be sure to use the same case in the code as the label you will use to tag your posts (ie: "Sideblog" is not the same as "sideblog").<br />
<br />
Once you have edited this section of code, attempt to preview your template. If any of your recent posts have already been tagged with the "Sideblog" label, you will now notice they are missing from the output of posts.<br />
<br />
Provided there are no errors visible when you preview your template, you can now save your edited template.<br />
<br />
<br />
<h3>Step 3: Adding a feed widget to display your sideblog</h3>Now we have filtered "Sideblog" posts from the list of recent posts on the home page, we need to add a widget to display sideblog posts in the sidebar.<br />
<br />
To achieve this, we will use the sideblog label feed.<br />
<br />
All Blogger blogs which use labels produce a feed of posts from each label. The URL for label feeds appears like this:<br />
<br />
<code>http://yourblog.blogspot.com/feeds/posts/default/-/LabelName</code><br />
<br />
Where "LabelName" is the name of the particular label you wish to use.<br />
<br />
This URL structure also works for custom domains. Simply replace "yourblog.blogspot.com" with the main URL for your blog.<br />
<br />
In this example, we will use "Sideblog" for the name of the label in the feed, which would look like this:<br />
<br />
<code>http://yourblog.blogspot.com/feeds/posts/default/-/Sideblog</code><br />
<h4>Using Feedburner to display sideblog posts</h4><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP4YzCSiAChmJjgJX-ysUg6ABbyOs7lEaU9EolsWNMi20JuyGcNIqC_aKn02eAD0YYEwViv5KwFiR_wwMNBN1AeWr59L0yDJcQgViigUDpKfaoR5mxFw8WImNop_6jPDEVGT6Vgu-yKbs/s1600-h/fburner.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/AVvXsEi5BOPY-YIBVnWSOO18mRLUhjZfVJPdCTu7s50jQ5U8eXH9tCRP6-fX9kWcphtfSKhSnda01qj5dU7uxmWDMsvd8K7N-o77cEbgwcr_QZuQD8abhFg4bH4t3ujALIKc_p9It9bkloXpWeU/s320-r/fburner.jpg" /></a></div>The simplest way to display your sideblog is to burn your label feed through Feedburner, and use the BuzzBoost widget code within an HTML/JavaScript widget.<br />
<br />
To do this, go to Feedburner.com and add the URL of your label feed. Then go to Publicize>BuzzBoost in the dashboard for this new feed.<br />
<br />
The code required to display your sideblog posts as HTML will be generated for you automatically which you can paste in an HTML/JavaScript widget in the Page Elements section of your blog. Alternatively, you could add this as a widget automatically using the widget installer option.<br />
<h4>Using a regular Feed widget to display your sideblog</h4>If you prefer not to use Feedburner, it is possible to display your sideblog using a regular feed widget. However, this will require more editing of your blog's HTML code (as Feed widgets will only display the post titles by default).<br />
<br />
Here is how to use a Feed widget to display post summaries for a sideblog in Blogger:<br />
<ol><li> Go to Layout>edit HTML in your blog dashboard. Do not check the "Expand widget templates" box.</li>
<li>Find the following line of code (or similar) in your template:<br />
<br />
<blockquote><b:section class='sidebar' id='sidebar'></blockquote>Depending on your template, the code may not appear using the exact same phrases. If you are at all confused, search for a familiar widget title instead. <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4LF6k8u1Pg_FB2c98f_Ri-FGqfrxDr9zOKk7eSdNdVcvxP3BKGrEaSWE56-EqKva_bIlDVcYvxOj5uFTSKtkdqWObdKmGKr0mbe93LLrBz_BFS2xRkG9ELlUsxsP4WfBmm9igpwChPA/s1600-h/add-code-for-summary-feed.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0_I2AHvxX5MT0INkgihHK8tIA5vTFCr4NWs5ibixShQXIs7KUfqm_bmv7IZMcUKz78qzXN9dSLT9srlzTiGTDWUdw1LyhpXe43KdGbJAcHL08NBMJa-QcXPtkBmwzTQeXgyY5R4H0WI/s400-r/add-code-for-summary-feed.jpg" /></a></div></li>
<li>Immediately after this line of code, paste the following in it's entirety:<br />
<br />
<blockquote><code><b:widget id='Feed99' locked='false' title='Blogger Buster' type='Feed'></code><br />
<b:includable id='main'><br />
<h2><data:title/></h2><br />
<div class='widget-content'><br />
<b:loop values='data:feedData.items' var='i'><br />
<h3><span class='item-title'><br />
<a expr:href='data:i.alternate.href'><br />
<data:i.title/><br />
</a><br />
</span></h3><br />
<div><data:i.summary/></div><br />
<b:if cond='data:showItemDate'><br />
<b:if cond='data:i.str_published != &quot;&quot;'><br />
<span class='item-date'><br />
<p><data:i.str_published/></p><br />
</span><br />
</b:if><br />
</b:if><br />
<b:if cond='data:showItemAuthor'><br />
<b:if cond='data:i.author != &quot;&quot;'><br />
<span class='item-author'><br />
<p><data:i.author/></p><br />
</span><br />
</b:if><br />
</b:if><br />
</b:loop><br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable><br />
</b:widget></blockquote></li>
<li>Now preview your template. If you have followed the steps correctly, you will receive no errors when you preview your template and should proceed to save. If you do receive errors, click the "Clear edits" button and begin again, being careful to paste the code after the <b:section> line.</li>
<li>Once you have saved, go to Layout>Page Elements in your Blogger dashboard. Click on the edit link for the new feed widget you have added.</li>
<li>In the "Feed URL" section, add the URL for your "Sideblog" label feed (see instructions above to locate this URL). In the preview, you will see each item title appear in a bulleted list. This is fine and perfectly normal. Save the feed widget here.</li>
<li>Now when you take a look at your blog, you will see your "Sideblog" feed displays post titles and a short summary of each sideblog entry in the sidebar.</li>
</ol><h3></h3>Once you have added your widget and configured the feed URL, you should be able to move the location of your sideblog through the "Page Elements" section of your dashboard.<br />
<br />
Here is an example of how your new sideblog could appear:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAsLJl6GqSXQmtjYvNkIF9UKeNYtrtxUmfbQ6IEtzSeWtikYRGfpSuu0V7kWIGV3_578niOEbz0k85kgiszOfedL-N7pur2MZvFrOLJW2NNqjTC7z5ZWBALgqvRKx9zVYxVT7PHFYThl4/s1600-h/sideblog-example-image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcV82mhs9pW5DSL5vQxiXqlHt-sWFme96Yh079KKaq_YgIWVztIHbbVLuQFbyjeUqVnMVEfrBP914JEwY7S2ilQqqgHeS3sl_3-AVYhwIWtDVqKax7mS4nQTAzojg8AB7AOccynQfnUTA/s400-r/sideblog-example-image.jpg" /></a></div><br />
<br />
<h3>Using your new sideblog</h3>In order to use your newly added sideblog effectively, there are a couple of things which you ought to be aware of. I'll explain all of these "caveats" to ensure you can make use your sideblog to the full potential.<br />
<br />
<br />
<h4>Sideblog entries should only be labeled with the "Sideblog" label!</h4>When writing a sideblog post, be sure you only add the "Sideblog" label (or the name you chose when adding this function to your template). This label will be case sensitive, so "sideblog" and "Sideblog" will appear as two different labels.<br />
<br />
If you do add more than one label to your sideblog posts, these posts will also appear in the main posts column, alongside your regular blog posts.<br />
<br />
<br />
<h4>Sideblog images should be sized to fit their container</h4>This one may be a little more tricky.<br />
<br />
You can use images in your sideblog posts. However, you should ensure they are no wider than your sidebar (or the widget area they are contained in).<br />
<br />
For example, if your image is 400px wide, being displayed in a sideblog whose width is only 200px, you will notice one of two things:<br />
<ul><li>The right-hand edge will be truncated (in Firefox and other browsers)<br />
</li>
<li>The sidebar is pushed beneath the posts column (in IE)</li>
</ul>Wherever possible, ensure you use the "small" size option for your image when uploading. Try also to ensure your image is centered above the text, as left or right aligned images may cause layout problems, especially when displayed in the sidebar/other narrow widget area.<br />
<br />
<br />
<h4>Images detract from the length of the summary</h4>When you display an image in your sideblog posts, the HTML code for the image is counted towards the text count of the summary, thus shortening the amount of text which will be displayed. If you prefer to display more text, be sure to place images at the bottom of your posts so these will only be displayed on item pages (not in your sidebar).<br />
<br />
<br />
<h3>Using this filtering function for other template features</h3>In this tutorial, I have explained one possible use for the filtering of posts by label: <b>how to create a sideblog</b>.<br />
<br />
Those of you who actively design or develop Blogger templates may already see the possibilities of using this function for possibilities like:<br />
<ul><li>A "Featured posts" section</li>
<li>A magazine style layout, where recent posts are organized by category on the home page</li>
<li>Only one category of post to be displayed on the home page (the rest organized by label and accessible through sidebar links).</li>
</ul>From my own experiences, I assure you that all of these uses <b>are</b> possible in Blogger templates (though their respective tutorials would each be as long as this one!). So if you are confident in customizing your Blogger template code, <b>I urge you to experiment with this tutorial to create a layout style appropriate for your needs</b> :)<br />
<br />
I hope you have enjoyed reading about filtering posts by label in this tutorial, and now have the knowledge required to add asides in your own Blogger template. Please let me know your thoughts and opinions by leaving a comment below.<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-58012306627623296112008-09-22T23:48:00.000+01:002009-07-26T02:00:13.711+01:00How to create an "Admin Control Panel" in your layout<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6lTn13UphTwg1dnXkHBwJx-9lwEP9ISlvZq_h5gLXM5yFB_lsuXuOHa4UK8JiX0PBrrZ7X3Nvl9o1jNH2SGRRDh0P6jYXgMIvEgzEvS2bDu8hDrvQOY8kuvpViqYFAj7Y8Sa2JVT_X8/s1600-h/admin-control-panel.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/AVvXsEi6Mibw4VXAnujOMUrjo_A7vLCNs0gMK9OuQiV8KDqRwwD9N7a2TV-Ce10fOkt3FggotBOtCsJzjcZoPSH1AEM7DPDaBouJmW016TEJir3FBIQTEtCNNLQUtZwxK-ZoVq6OPY6YihcW-eE/s200-r/admin-control-panel.jpg" /></a>For those of us who hide the Blogger nav-bar, it can be awkward to access our Blogger dashboards to create a new post, change settings or customize the layout of our blogs.<br />
<br />
So after a bit of brainstorming, I realized how we could add an "Admin control panel" to our Blogger template, which is only visible to the administrators of a blog (and not to regular readers).<br />
<br />
You can read <a href="http://www.bloggingtips.com/2008/09/22/how-to-create-an-admin-control-panel-in-your-blogger-template/">my method and instructions in full over at BloggingTips.com</a>, where I write regular posts about Blogger and blog design. I hope this article will be useful for many of you! Please let me know your opinions about this post by leaving a comment here or at Blogging Tips where you can read through <a href="http://www.bloggingtips.com/category/blogger/">the archives of Blogger tutorials</a> and enjoy loads of other tips about blogging.<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-11393013908199166392008-09-04T09:48:00.002+01:002008-09-04T23:05:16.334+01:00Elegant Post Summaries for Blogger with jQueryThe ability to display extracts of posts is a feature which many of us would love to see added to Blogger! Such a feature would prevent readers having to scroll far down the page to find the next post on home and archive pages, and in many cases, could offer the potential for different styles of layout...<br />
<br />
Many Blogger users have adopted <a href="http://hackosphere.blogspot.com/2006/11/selective-expandable-posts.html">Ramani's selective expandable posts hack</a> or a similar alternative. However, I have found these to be a little complicated: they require manual editing of each post or cause other irritating problems. In my search for an elegant and less cumbersome alternative, I have discovered an almost perfect solution: <a href="http://plugins.learningjquery.com/expander/">the jQuery Expander Plugin</a> by Karl Swedberg.<br />
<br />
<span id="fullpost"> <br />
<br />
<br />
Integrating the jQuery Expander plugin for Blogger offers many useful options and features:<br />
<ul><li>It can be added easily in only two steps!</li>
<li>The length (and other options) of excerpts is completely customizable within the blog template (no need to edit JavaScript files!)<br />
</li>
<li>We could choose to expand posts into the same page (with a smooth transition) or add a "read full post" link to the item page instead.</li>
<li>HTML tags and complete words are preserved (unlike many forms of Wordpress excerpts)</li>
<li>There is no requirement for additional tags or editing of posts: it works right away after installation!</li>
<li>It's possible to use different lengths of extracts for use in magazine style layouts (I'm actually working on such a project right now...)</li>
</ul>To see how well the jQuery expander plugin could work in Blogger, take a look at <a href="http://www.amandafazani.com/">this demonstration in which the posts expand into the same page</a>. <br />
<h3>Installation</h3>Depending on the style of post summaries you would prefer to display, the method for installation will be slightly different.<br />
<br />
I'll begin with a default explanation which will summarize posts with a link to expand in the same page (this requires only two steps). Next we can make two small changes which prevent expansion and add a link to the post page.<br />
<br />
Finally I'll explain how you can alter some options for extracts which can be applied to both methods.<br />
<br />
For whichever function you prefer, the installation is simple and the result will be elegant post summaries for your Blogger powered blog :)<br />
<br />
<br />
<h3>Method 1: Expandable post summaries</h3><br />
This is the simplest method to add excerpt functionality to your blogger powered blog!<br />
<br />
Firstly, go to Layout>Edit HTML in your Blogger dashboard and check the "expand widget templates" box.<br />
<br />
Then, find the closing <code></head></code> tag in your blog template, and paste the following section of code immediately before it:<br />
<br />
<br />
<blockquote><code><script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/><br />
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
$(document).ready(function() {<br />
<br />
$('.excerpt').expander({<br />
slicePoint: 280, // default is 100<br />
expandText: '[...]', // default is 'read more...'<br />
});<br />
<br />
});<br />
</script></code></blockquote><br />
Next, find this section of code (or similar) in your template:<br />
<br />
<br />
<blockquote><code> <div class='post-body entry-content'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div></code></blockquote><br />
If you cannot easily find this section, search for the following tag using your browser's search function:<br />
<br />
<code><data:post.body/></code><br />
<br />
You need to highlight this and any surrounding code, as in this screenshot:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9cqtPhniaCE8bYunV-pZ8cnz0FwNLPNrw24UKr3acYxZhNG28XsnywLaVzfrfkOXOLUB_K1YwkxaMiBXi6WZVVncershZ5JBjsdp8VUlDqbZmvRVp0-w4H5IwensBZ8pSJNFo6ewfRII/s1600-h/blogger-excerpts-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPU6cMBEfLENGP9JNDJbTWc_F4SjicAZTIj1zDd24M-lYM96hgCtYpsNcyeos46-PblvnVg5RND7adqgZ94CKZWj0xyN_lJYN0eVBGPpp5kFu9mQhceqI5jdfLGP231cogWrxB4UkBW48/s400-r/blogger-excerpts-1.png" /></a></div><br />
Replace this section of code with the following instead:<br />
<br />
<br />
<blockquote><code> <b:if cond='data:blog.pageType != "item"'><br />
<div class='excerpt post-body entry-content'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div><br />
<b:else/><br />
<div class='post-body entry-content'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div><br />
</b:if></code></blockquote><br />
Now preview your template. You should now notice that posts on your home page have been summarized and feature an ellipsis at the point of truncation which (once viewed in the live page) is a link to expand/truncate the post:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhspJMwK5hdvHmJlGmuniZYwAU57EzsZgEYhyphenhyphenQEWp-Pq6YHaks2-nuELPlXcItLARFG34PdvQn3VKet2c_9Xs1MZR1_DJU1_7FfnN8xa1cGLTfEAXZqxrf5nD0Tl-i45sv3fgP5WdzySOw/s1600-h/blogger-excerpts-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheTCJPw2Akg_qMcy0lF89OUmSKpojE00OAEHM9bNLl3ptdCPhEDlrbh5Xz_mFwQZtpzNkt1hIUrwQlSmaSKeBlraCon1iCntO3jbQeO3nNdOOZmk9EQCokf2YVL03oOYMiPfjCInfx0yc/s400-r/blogger-excerpts-2.png" /></a></div>If you're happy with this, you can save your template and enjoy using your new post summaries right away. Alternatively, read on for methods of preventing the expansion in the same page, and customizing the excerpts to suit your preferences.<br />
<br />
<br />
<h3>Method 2: Excerpts with a link to the post page</h3><br />
My personal preference is to display only an excerpt of posts with a link to the full article. This requires only two small changes to the default installation:<br />
<ul><li>Use a slightly different jQuery plugin (change the URL)</li>
<li>Add a "Continue reading" link beneath the excerpts</li>
</ul>Assuming you have already added the codes from Method 1, here is what you should do:<br />
<br />
1. Find this line in the <head> section of your template:<br />
<br />
<code> <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/></code><br />
<br />
And replace it with this instead:<br />
<br />
<code> <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.<b style="color: red;">extractor.js</b>' type='text/javascript'/></code><br />
<br />
I have highlighted the different file name in bold red so you can see the change at a glance.<br />
<br />
2. Next, find the code you have added around the <data:post.body/> section, and add the line in bold red, as shown below:<br />
<blockquote><code> <b:if cond='data:blog.pageType != "item"'><br />
<div class='excerpt post-body entry-content'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div><br />
<b style="color: red;"><a expr:href="data:post.url">Continue Reading</a></b><br />
<b:else/><br />
<div class='post-body entry-content'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div><br />
</b:if></code></blockquote>Be careful to add this in the correct place, just above the <code><b:else/></code> tag, otherwise it will not be displayed!<br />
<br />
Now preview your template. The "linked" ellipsis should now be replaced with a plain one, and you should see the "Continue reading" link appear beneath the extract. You could change the link text to anything you prefer (eg: "Read more", "Full Post", etc). Then proceed to save your template.<br />
<br />
<br />
<h3>Post Summary Options</h3>The jQuery plugins used for these methods are almost identical, except that the "extracts" version has the "more" link removed.<br />
<br />
Both plugins therefore have identical options which you can set by adding or changing code in your blog template.<br />
<br />
The options can be configured within the internal javascript in the head section which by default appears like this:<br />
<br />
<blockquote><br />
<code><script type='text/javascript'><br />
$(document).ready(function() {<br />
<br />
$('.excerpt').expander({<br />
slicePoint: 280, // default is 100<br />
expandText: '[...]', // default is 'read more...'<br />
});<br />
<br />
});<br />
</script></code></blockquote><br />
<br />
Here are some of the most used options available, and how they can be changed. A full list of options can be found on the <a href="http://plugins.learningjquery.com/expander/index.html#options">expander plugin for jQuery page</a>.<br />
<br />
<br />
<blockquote><br />
<code><script type='text/javascript'><br />
$(document).ready(function() {<br />
<br />
$('.excerpt').expander({<br />
slicePoint: 280, // change this to the length in characters you would like to display. <br />
// HTML tags included in this count.<br />
// the folllowing functions apply when choosing the expanding post version<br />
expandEffect: 'fadeIn', // the effect used for displaying expanded text.<br />
expandText: '[...]', // Change this from an ellipsis to "Read More" for example<br />
userCollapseText: '[^]' // This is the icon used for truncating the post after it has been expanded.<br />
});<br />
<br />
});<br />
</script></code></blockquote><br />
You can add or change any of the lines above as appropriate for your needs.<br />
<br />
<br />
<h3>License, Credits and Download</h3>This function uses the<a href="http://jquery.com/"> jQuery JavaScript library</a> and the<a href="http://plugins.learningjquery.com/expander/index.html#getting-started"> jQuery expander plugin</a> for the base functions. <br />
<br />
The Expander Plugin for jQuery was created by Karl Swedberg and is dual licensed under the <a href="http://www.opensource.org/licenses/mit-license.php%20">MIT</a> and <a href="http://www.gnu.org/licenses/gpl.html%20">GPL</a> licenses. <br />
<br />
If you would prefer to host the jQuery scripts on your own server, you can download a zipped folder including all scripts from this tutorial and a basic Minima template in which this function has been added for demonstration or testing purposes. As in the case of the original Expander Plugin and jQuery file, these are provided under the GPL licence.<br />
<br />
<b><a href="http://halotemplates.s3.amazonaws.com/jquery-truncator/elegant-post-summaries-for-blogger.zip">Download Elegant Blogger Post Summaries Files</a></b><br />
<br />
I hope you have found this tutorial to be a useful and elegant solution for creating and using post summaries for your Blogger template. Please feel free to leave your comments and any suggestions for improvement 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-56470073991894499732008-08-15T09:54:00.003+01:002008-08-16T19:31:38.919+01:00Blogger's New "Reactions" Feature - How to add to customized blog templatesBlogger have added a new feature for us to use in our post: Reactions. This widget acts like a mini-poll beneath each of your blog posts and offers the ability for readers to leave feedback quickly.
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQkHSz0NHJPGUCuSdi0pKH1G2xa8XpQlje-qOqb30f_xzDD6W686OyMv09W8_LbPwjNC8K1211iFrJwT1ApiMjMMXScPTbBQI8G6kIlYUTQnlqVEFulWcLMX6tcj6_34UPDJO3dHjai2A/s1600-h/reactions.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2rH1OXnhwRHztK82qy2SEFZpAF7hgmjelh3z34PYCsI_ljkexcJU9Hcemfs7DRTzpOGj8T8kc8Wg2ROl1yqgAJoxfDqbpHHsvea35o1qBb4bXND0hfIdjgVUGMEPhE86AfmKa1lyiNfQ/s400-r/reactions.gif" border="0" /></a></div>The "Reactions" add-on is currently available through <a href="http://draft.blogger.com/">Blogger in Draft</a>, though looks set to be moved over to the regular Blogger interface soon enough. It can be moved around like other elements in the post-footer and will adapt to the color scheme of your blog template. You can customize the buttons and labels through the "Blog Posts" widget in your dashboard if you prefer to use something different to the "funny/interesting/cool" labels which are implemented by default.
<span id="fullpost">
<h3><span>How to add "Reactions" to your Blogger template</span></h3><span>To add this new function to your Blogger layout, you will need to activate the feature through Blogger in Draft. Once logged in to your Draft dashboard, go to Layout>Page Elements and click the "Edit" link for the "Blog Posts" widget.
In this pop-up window, you will see the option to add "Reactions" to your posts:
</span>
<div class="separator" style="clear: both; text-align: center;"><span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuik8HWrL22E5BL6D9OIViAbb2xbwD9QLIAdrzRs5V4Hi2-kQh3xi3zm79jyopeEyQtxg7GtCqCv325iXEKSuC6hRb1dyrjBX-bp4ITooXYa6MEDoIztn5vir9s913CcjNVk7R27qhjGk/s1600-h/adding-reactions-feature.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooDnZ6Pkje7VkmlvfSpM9_Hg7vgRsM8MztCNaNLOcrtrps8e3uex1r5DgXlmyasqYp-Cu4isEOmLP7z7poqkiDDhahdrriwirtazGXQrUtw9hg420Io4OvSZZN8plRtZaNQH81waHvNI/s400-r/adding-reactions-feature.gif" border="0" /></a></span></div><span>Tick the options box and edit the labels for your buttons as required. Then finally save this setting.</span>
<h4><span>Adding the required code to your template</span></h4><span>Depending on the type of template you are using, you will need to use one of two methods to add the required code to your template.
<b>If you are using a default Blogger template with no modifications to widgets or the post layout...</b>
Go to the Layout>Edit HTML page in your Blogger dashboard, and look for the "Revert Widget Templates to Default" link near the bottom of the page.
Clicking on this link will replace all of the widget templates with the updated code. All of your existing widgets will remain, so don't worry about losing any data! Instead, this will simply replace outdated code with new code, and ensure you can add all of Blogger's new features with ease.
<b>If you use a customized/third party template...</b>
You will need to add the required code to your template manually.
In this case, go to Layout>Edit HTML in your Blogger dashboard and check the "Expand widget templates" box.
Next, search for the following line of code (or similar):</span>
<blockquote><span><p class='post-footer-line post-footer-line-1'></span></blockquote><span>Immediately after this line, add the following section of code:</span>
<blockquote><span><span class='reaction-buttons'></span>
<span> <b:if cond='data:top.showReactions'></span>
<span> <table border='0' cellpadding='0' width='100%'><tr></span>
<span> <td valign='center'><span class='reactions-label'></span>
<span> <data:top.reactionsLabel/></span></span>
<span> </td></span>
<span> <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td></span>
<span> </tr></table></span>
<span> </b:if></span>
<span> </span></span></blockquote><span>Preview your template to see the "Reactions" add-on appear beneath each of your blog posts, and finally, save this new addition to your template.
If you cannot find the "post-footer-line" in your blog template, search for <code><p><data:post.body/></p></code> instead, and paste the code immediately after this line.</span>
<h3><span>Color Schemes for the Reactions Add-on</span></h3><span>The colors for the reactions add-on are taken from existing variables in your color scheme:</span>
<ul><span>
<li><span style="font-size:small;">Foreground: <span style="font-family:'courier new',monospace;">textcolor</span>, <span style="font-family:'courier new',monospace;">textColor, mainTextColor
</span></span></li>
<li><span style="font-size:small;">Highlight: <span style="font-family:'courier new',monospace;">linkcolor, linkC</span><span style="font-family:'courier new',monospace;">olor, mainLinkColor</span></span></li>
</span></ul><span>This is to ensure that the color matches the overall scheme of your blog. So if you change the color scheme through the Fonts and Colors section, the colors of your reactions will change too.
To learn more about this new feature, be sure to read <a href="http://bloggerindraft.blogspot.com/2008/08/new-feature-reactions.html">the announcement post on Blogger in Draft.</a> Please let me know if there's anything else you need to know about this new feature by leaving your comments below.
</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-53447003448528205842008-08-12T20:00:00.000+01:002008-08-12T23:59:39.405+01:00Numbered Page Navigation for Blogger<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjxCvna_mmdjRdMwURHvfnOS9b0O8Xwvo5dj4DVb_l_rJkoNqjX8dLNEOTCvwYYnIhTtzbu1O9xMeliTuOzrgVWhQpYJX5FLmq7BJrgvW8fdDw4S_fnKd7oBdjAL6DHfbBez_bZGsq8E/s1600-h/page-navigation.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; clear: right; margin-bottom: 1em; float: right; margin-left: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-hUulSLNSVXdiatSjyhoZzhlGTda6rCdjQbiZ5hXkiqiPd3kPRwUPu4Mn_I8SmHmd7WLdksZcfcExARF2vHqjaLhmS-xZinIk83PLua56V-YNE18OREn5UTpgNUrvDDX6GDV7eVFccc/s320-r/page-navigation.jpg" style="border: 0pt none ;" /></a>The ability to 'paginate' Blogger blogs has been a long requested feature. Pagination allows us to number blog pages like those of a book, offering readers the ability to navigate deeper into the archives with ease when compared to the 'newer' and 'older' post links.<br />
<br />
After many failed attempts, I was almost ready to admit defeat with this function until I discovered this excellent script by Mohamed of Blogger Accessories. This script replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page.<br />
<span id="fullpost"><br />
<br />
Mohamed's Blogger pagination script may be installed using two different methods:<br />
<ul><li><a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Customizing the template code</a></li>
<li><a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-menu-widget-for-blogger.html">Adding as an HTML/JavaScript widget (gadget) below the main posts section</a></li>
</ul>Both of these installation methods will achieve a similar effect. I personally find adding the code directly to the template makes it easier to customize the style of the pagination links, but if you feel uncomfortable editing your template, the widget installation may be much easier for you.<br />
<br />
Here is how the finished installation will appear in your blog:<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqRLupURLDGHF0mcJh7qe0ze0vEkUk9xl6Xx-OSAKIpP9g1po8vQW_yCI33ibNBqfUhvhtrx24PgOffpcbKMTBc0Xrcva5B-BdWdFilNwPpX_ZmqVAUWT60ewwsC83HJl0KX9YG7B9E0/s1600-h/blogger-accessories-paginat.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFbPwXcoiW-Q24en4QvEBz5W3H3h_IBMiWo2MIM1qmAD9IfQMOUKnoq3KMZ-nRxOM_NsTpWwxB_hS8lTWLHGF1qFM1w8_Aht-Gk_bTCyvEh5YvsDoWijzY8pKh7AuTWhbIdVLmOYMXhBg/s400-r/blogger-accessories-paginat.jpg" style="border: 0pt none ;" /></a></div><br />
Once installed, these "page numbers" will appear on your home, archive and labels pages, allowing your readers to easily access pages in your archives. However, the page numbers will not appear on individual post pages. I've noticed many blogs which use pagination like this, and among them none displayed these page links beneath individual posts.<br />
<br />
To learn more about using the numbered pagination script for Blogger, pop over to Blogger Accessories to read the useful tutorials Mohamed has posted. <br />
<br />
<br />
<h3>My Slightly Modified Version</h3>As you may have noticed, I'm using a slightly modified version of this script here on Blogger Buster. When customizing the style of Mohamed's original version, I noticed a few elements which I preferred to change for my own preferences, and also modified the CSS for how the numbered links are displayed.<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvPj5S_svTNsRHKf8kLXVcVs_Fqu2qksdpYEDMnJa-_DN2foTYtPmRi-ChQi1nYrkpmwmTDlQX0cILFMlUJzcu57GaRzaPQuCwrzIQhcpUVyluSAOGmPs7BK9U7si3qT-Gy_Tqxd4eWJU/s1600-h/bb-pagination.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkOQ-xScEh1DjE2HoIV_7pebHdOTBaUDDqfLZHqkwIp_euF74x8i6gkEO22yqAXm4bjSscT3C9OBRTVxgVI_tctNjUfO_4exuZgSPLlRncOeCGvO_aYxz0SgypIDtcc2LnSrTg3QbyNvs/s400-r/bb-pagination.jpg" style="border: 0pt none ;" /></a></div><br />
If you would prefer to use this slightly different version instead, here is what you should do.<br />
<br />
<br />
<h4>Add the CSS code to your style section</h4>Firstly, copy all of the code below and paste this just before the closing <code></b:skin></code> tag in your template:<br />
<br />
<br />
<blockquote><br />
<pre id="line1">.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</pre></blockquote>This should change the colors of text and links in the pagination to match the styles already present in your blog template. So if your default text is white against a dark background, the "Pages (#)" section of the script should appear the same way. The color for the background and hover effects of the numbers can be altered according to your preferences by editing the hex values to match the style of your own template. <br />
<h4>Add the JavaScript code beneath your posts</h4>The second part of the installation is to add the JavaScript code beneath your posts which will locate and replace the existing "Newer/Older Posts" link. To add this script, go to Layout>Edit HTML in your Blogger dashboard, and do not tick the "expand widget templates" box (it's much easier to add the code while the widgets are contracted). Then find this section of code (or similar) in your template: <br />
<blockquote><code><b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section></code></blockquote>Immediately after the closing <code></b:section></code> tag, add the following section of code:<br />
<br />
<br />
<blockquote><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />
<br />
function showpageCount(json) {<br />
var thisUrl = location.href;<br />
var htmlMap = new Array();<br />
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.<b><span style="color: rgb(255, 0, 0);">com/</span></b>&quot;;<br />
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;<br />
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;<br />
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;<br />
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;<br />
var thisNum = 1;<br />
var postNum=1;<br />
var itemCount = 0;<br />
var fFlag = 0;<br />
var eFlag = 0;<br />
var html= &#39;&#39;;<br />
var upPageHtml =&#39;&#39;;<br />
var downPageHtml =&#39;&#39;;<br />
<br />
var pageCount = <b><span style="color: rgb(255, 0, 0);">5</span></b>;<br />
var displayPageNum = <b style="color: rgb(255, 0, 0);">5</b>;<br />
var upPageWord = &#39;Previous&#39;;<br />
var downPageWord = &#39;Next&#39;;<br />
<br />
<br />
<br />
var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;<br />
<br />
for(var i=0, post; post = json.feed.entry[i]; i++) {<br />
var timestamp = post.published.$t.substr(0,10);<br />
var title = post.title.$t;<br />
if(isLablePage){<br />
if(title!=&#39;&#39;){<br />
if(post.category){<br />
for(var c=0, post_category; post_category = post.category[c]; c++) {<br />
if(encodeURIComponent(post_category.term)==thisLable){<br />
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />
if(thisUrl.indexOf(timestamp)!=-1 ){<br />
thisNum = postNum;<br />
}<br />
<br />
postNum++;<br />
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;<br />
}<br />
}<br />
}<br />
}//end if(post.category){<br />
<br />
itemCount++;<br />
}<br />
<br />
}else{<br />
if(title!=&#39;&#39;){<br />
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />
if(thisUrl.indexOf(timestamp)!=-1 ){<br />
thisNum = postNum;<br />
}<br />
<br />
if(title!=&#39;&#39;) postNum++;<br />
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;<br />
}<br />
}<br />
itemCount++;<br />
}<br />
}<br />
<br />
for(var p =0;p&lt; htmlMap.length;p++){<br />
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){<br />
if(fFlag ==0 &amp;&amp; p == thisNum-2){<br />
if(thisNum==2){<br />
if(isLablePage){<br />
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;<br />
}else{<br />
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;<br />
}<br />
}else{<br />
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;<br />
}<br />
<br />
fFlag++;<br />
}<br />
<br />
if(p==(thisNum-1)){<br />
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;<br />
}else{<br />
if(p==0){<br />
if(isLablePage){<br />
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;<br />
}else{<br />
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;<br />
}<br />
}else{<br />
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;<br />
}<br />
}<br />
<br />
if(eFlag ==0 &amp;&amp; p == thisNum){<br />
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;<br />
eFlag++;<br />
}<br />
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){<br />
}//end for(var p =0;p&lt; htmlMap.length;p++){<br />
<br />
if(thisNum&gt;1){<br />
if(!isLablePage){<br />
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;<br />
}else{<br />
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;<br />
}<br />
}<br />
<br />
html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;<br />
<br />
if(thisNum&lt;(postNum-1)){<br />
html += downPageHtml;<br />
<br />
}<br />
<br />
if(postNum==1) postNum++;<br />
html += &#39;&lt;/div&gt;&#39;;<br />
<br />
if(isPage || isFirstPage || isLablePage){<br />
var pageArea = document.getElementsByName(&quot;pageArea&quot;);<br />
var blogPager = document.getElementById(&quot;blog-pager&quot;);<br />
<br />
if(postNum &lt;= 2){<br />
html =&#39;&#39;;<br />
}<br />
<br />
for(var p =0;p&lt; pageArea.length;p++){<br />
pageArea[p].innerHTML = html;<br />
}<br />
<br />
if(pageArea&amp;&amp;pageArea.length&gt;0){<br />
html =&#39;&#39;;<br />
}<br />
<br />
if(blogPager){<br />
blogPager.innerHTML = html;<br />
}<br />
}<br />
<br />
}<br />
&lt;/script&gt;<br />
<br />
&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</code></blockquote><br />
<br />
Once you have added this code, attempt to preview your template to ensure there are no code errors. You will not be able to see the script in action on the preview, but this step ensures no adverse effects to your layout.<br />
<br />
In the code above, you will notice that I have highlighted three sections of code in bold red. You may need to customize these sections to better suit your preferences:<br />
<br />
On line 5, you may need to change the ".com" to reflect your domain extention if you use a custom domain.<br />
<br />
<blockquote>var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.<b><span style="color: rgb(255, 0, 0);">com/</span></b>&quot;; </blockquote><br />
This default installation should work fine for anyone hosted on Blog*Spot or a dot.com domain, but you will need to alter this section if your custom domain ends in .co.uk or .info for example.<br />
<br />
In lines 19 and 20, you can change these values to alter how many posts are displayed on each page, and how many links will be visible at the same time.<br />
<br />
The <code>var pageCount = 5;</code> section defiines the number of posts displayed on each page, while <code>var displayPageNum = 5;</code> defines the number of links which are displayed (eg: 1 - 2 - 3 - 4 - 5) beneath the posts section.<br />
<br />
Once you have added this JavaScript code and made any changes nescessary for your needs, save your template and open up your blog in your browser. Now you should see the pagination links appear beneath your main posts section, and also on Labels and Archive pages.<br />
<br />
<br />
<h3>Your thoughts?</h3>I hope this post has helped you learn about how numbered page navigation can be achieved in Blogger powered blogs using Mohamed's original methods or my slightly modified script.<br />
<br />
Please let me know what you think of these methods, or if you experience any problems, 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-600362196086613742008-08-06T22:26:00.001+01:002008-08-07T09:17:42.674+01:00Tabbed Sidebar Navigation for Recent Posts, Labels and Archives<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6nlScZaWJDuPWys9sJgjvkHNX3bP9mMdrRl7sFuVdHDFn5Klkhwssoa5lGhzW94QB2qEKNtUtCVCWXdEncVAxQaJz5zu3NdqrfW5BLlSqgyIIdwoXW3C2ffTNiZeZVfup8SGuIJn7BNo/s1600-h/tabbed-sidebar.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; clear: right; margin-bottom: 1em; float: right; margin-left: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZn6Xo-4N9R3rGmnkHBuV1cjuusjTRGK5zKBmYzdfPQDAmfWuMEy0npOwvgw6O53KWAvZChsyXQZiREGom9Za0jICYKABubNqlKjW0HR8N4f_MGXQyhYToAlJ1JPlA9pNcEtPaefIjB0A/s320-r/tabbed-sidebar.jpg" style="border: 0pt none ;" /></a></div>These past few weeks, many readers have requested a tutorial for tabbed sidebar navigation, including integrated widgets for recent posts, labels and archives. This customization is a useful and stylish method to organize widgets in your sidebar (or other widgetized area of your blog template): it reduces the space used in your sidebar, and offers readers easy access to the information they may need about your blog.<br />
<br />
So in this tutorial I will explain the method I use for tabbed navigation in Blogger Buster including all the code and CSS styling so you can customize your own tabbed widget to match the theme of your blog.<br />
<br />
<span id="fullpost"><br />
<h3>About this tutorial</h3>One of the reasons I have delayed writing this article is because of the vast differences between template styles. <b>It is very easy to install and use tabbed sidebar navigation, but may be much more complicated to make this match the style of your own template</b>.<br />
<br />
For this reason, I will explain the style code I use for the tabbed widgets in Blogger Buster, along with methods you could use to change the appearance for your own blog.<br />
<br />
If you experience problems styling the widgets to match your own template, <a href="http://forum.bloggerbuster.com/topic/support-for-tabbed-sidebar-widget">please refer to the forum thread for this article</a> where it is easier to offer and receive support.<br />
<br />
<br />
<h3>Step One: Back-up Your Template!</h3>When customizing your Blogger template, it is standard practice to back up your existing template first! This ensures you can revert back to your working template if you make a mistake. It is especially important with this customization as you may not notice such mistakes when previewing your design.<br />
<br />
To back-up your Blogger template, go to Layout>Edit HTML and click on the "Download full template" link near the top of the page.<br />
<br />
You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.<br />
<br />
<br />
<h3>Step Two: Adding CSS Code</h3>For this initial step of installing tabbed sidebar navigation, we will add the relevant style code. With this in place, it will be easier to see how your tabs will work.<br />
<br />
To add this style code, find the closing <code></b:skin></code> tag in your template's HTML code.<br />
<br />
Just BEFORE this line, paste the following section of code:<br />
<br />
<br />
<blockquote><div style="overflow: auto; height: 200px;">div.domtab{<br />
padding:0;<br />
width:100%;<br />
font-size:90%;<br />
}<br />
ul.domtabs{<br />
float:left;<br />
width:100%;<br />
margin:0; <br />
list-style:none; <br />
padding-left: 0; <br />
}<br />
ul.domtabs li{<br />
float:left;<br />
padding:0 5px 0 0;<br />
text-align: center;<br />
width: 110px;<br />
}<br />
ul.domtabs a:link,<br />
ul.domtabs a:visited,<br />
ul.domtabs a:active,<br />
ul.domtabs a:hover{<br />
padding:.5em 1em 0;<br />
display:block;<br />
background:#999;<br />
color: #333;<br />
height:2em;<br />
font-weight:bold;<br />
text-decoration:none;<br />
}<br />
html>body ul.domtabs a:link,<br />
html>body ul.domtabs a:visited,<br />
html>body ul.domtabs a:active,<br />
html>body ul.domtabs a:hover{<br />
height:auto;<br />
min-height:2em;<br />
}<br />
ul.domtabs a:hover{<br />
background:background:#ccc;<br />
}<br />
div.domtab div{<br />
clear:both;<br />
width:auto;<br />
color:#ddd;<br />
padding:0 5px;<br />
margin: 0 0 1em 0;<br />
}<br />
div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content {<br />
margin: 0 0 0; <br />
padding: 0; <br />
}<br />
ul.domtabs li.active a:link,<br />
ul.domtabs li.active a:visited,<br />
ul.domtabs li.active a:active,<br />
ul.domtabs li.active a:hover{<br />
background:#ccc;<br />
color: #333;<br />
}<br />
div.domtab div .sidebar-tab ul li {<br />
list-style: none; <br />
padding: 3px 0 5px 0; <br />
}<br />
div.domtab div .sidebar-tab ul li a {<br />
list-style: none; <br />
margin: 0; <br />
padding: 0;<br />
}<br />
div.domtab div .sidebar-tab ul {<br />
width: 100%; <br />
margin: 0; <br />
padding: 0;<br />
}<br />
#domtabprintview{<br />
float:right;<br />
padding-right:1em;<br />
text-align:right;<br />
}<br />
#domtabprintview a:link,<br />
#domtabprintview a:visited,<br />
#domtabprintview a:active,<br />
#domtabprintview a:hover{<br />
color:#ccc;<br />
}<br />
div.domtab div a:link,<br />
div.domtab div a:visited,<br />
div.domtab div a:active{<br />
color:$linkcolor;<br />
padding:1em .5em;<br />
font:bodyfont;<br />
text-decoration: none;<br />
}<br />
div.domtab div h2 a,<br />
div.domtab div h2 a:hover,<br />
div.domtab div h2 a:active{<br />
color:#cfc;<br />
display:inline;<br />
padding:0;<br />
font-weight:normal;<br />
font-size:1em;<br />
}<br />
<br />
body#layout #sidebar-tabs-1 .widget, <br />
body#layout #sidebar-tabs-2 .widget, <br />
body#layout #sidebar-tabs-3 .widget {<br />
display: block; clear: both;<br />
}<br />
div.domtab div {display: block; clear: both;}</div></blockquote><br />
Be sure to copy all of the code inside this box before you paste this into your template.<br />
<br />
<br />
<h3>Step Two: Add JavaScript Code to the Head Section of your Template</h3>The tabbed navigation requires JavaScript to switch between the different widget areas. To add this functionality to your template, locate the closing <code></head></code> tag in your template, and paste the following lines of code immedietly before this line:<br />
<br />
<br />
<blockquote><!--[if gt IE 6]><br />
<style type="text/css"><br />
html>body ul.domtabs a:link,<br />
html>body ul.domtabs a:visited,<br />
html>body ul.domtabs a:active,<br />
html>body ul.domtabs a:hover{<br />
height:3em;<br />
}<br />
</style><br />
<![endif]--><br />
<script src='http://bloggerbuster.com/scripts/domtab/domtab.js' type='text/javascript'/></blockquote><br />
If you prefer to host the JavaScript required for this customization on your own server, feel free to <a href="http://bloggerbuster.com/scripts/domtab/domtab.js">download the script</a> and alter the tags above to reflect the location on your own server.<br />
<br />
<b>Save your template at this point. </b><br />
<br />
<br />
<h3>Step Four: Add The Required Code to your Sidebar</h3>For this step, you will need to find the opening DIV tag for your sidebar.<br />
<br />
In most Blogger templates, this tag will appear like this (highlighted in red):<br />
<br />
<blockquote><br />
<b style="color: rgb(255, 0, 0);"><div id='sidebar-wrapper'></b><br />
<b:section class='sidebar' id='sidebar-top-section' preferred='yes'><br />
<b:widget id='HTML3' locked='false' title='Subscribe' type='HTML'></blockquote><br />
However, you may need to be creative! In some templates, the sidebar section is coded like these examples, or possibly something else entirely!<br />
<ul><li><div id='sidebar></li>
<li><div id='right-column'><br />
</li>
</ul>Whatever the opening DIV for your sidebar section appears like, you need to paste the following section of code immedietly after it, and before the opening <code><b:section></code> tag:<br />
<br />
<br />
<blockquote><div style="overflow: auto; height: 500px;"><div class='domtab'><br />
<ul class='domtabs'><br />
<li><a href='#recent'>Recent Posts</a></li><br />
<li><a href='#cats'>Categories</a></li><br />
<li><a href='#arc'>Archives</a></li><br />
<br />
</ul><br />
<div style='border: 3px solid #ccc;'><br />
<p><a id='recent' name='recent'> </a><b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'><br />
<b:widget id='Feed99' locked='false' title='' type='Feed'><br />
<b:includable id='main'><br />
<div class='widget-content'><br />
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'><br />
<b:loop values='data:feedData.items' var='i'><br />
<li class='sidebar-list'><br />
<span class='item-title'><br />
<a expr:href='data:i.alternate.href'><br />
<data:i.title/><br />
</a><br />
</span><br />
<b:if cond='data:showItemDate'><br />
<b:if cond='data:i.str_published != ""'><br />
<span class='item-date'><br />
- <data:i.str_published/><br />
</span><br />
</b:if><br />
</b:if><br />
<b:if cond='data:showItemAuthor'><br />
<b:if cond='data:i.author != ""'><br />
<span class='item-author'><br />
- <data:i.author/><br />
</span><br />
</b:if><br />
</b:if><br />
</li><br />
</b:loop><br />
</ul><br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable><br />
</b:widget><br />
</b:section></p><br />
<br />
</div><br />
<div style='border: 3px solid #ccc;'><br />
<p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'><br />
<b:widget id='Label99' locked='false' title='Labels' type='Label'><br />
<b:includable id='main'><br />
<div class='widget-content'><br />
<ul><br />
<b:loop values='data:labels' var='label'><br />
<li class='sidebar-list'><br />
<b:if cond='data:blog.url == data:label.url'><br />
<span expr:dir='data:blog.languageDirection'><br />
<data:label.name/><br />
</span><br />
<b:else/><br />
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><br />
<data:label.name/><br />
</a><br />
</b:if><br />
</li><br />
</b:loop><br />
</ul><br />
<br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable><br />
</b:widget><br />
</b:section></p><br />
</div><br />
<div style='border: 3px solid #ccc;'><br />
<p><a id='what' name='arc'/><br />
<a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'><br />
<b:widget id='BlogArchive99' locked='false' title='' type='BlogArchive'><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 />
<div id='ArchiveList'><br />
<div expr:id='data:widget.instanceId + "_ArchiveList"'><br />
<b:if cond='data:style == "HIERARCHY"'><br />
<b:include data='data' name='interval'/><br />
</b:if><br />
<b:if cond='data:style == "FLAT"'><br />
<b:include data='data' name='flat'/><br />
</b:if><br />
<b:if cond='data:style == "MENU"'><br />
<b:include data='data' name='menu'/><br />
</b:if><br />
</div><br />
</div><br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable><br />
<b:includable id='flat' var='data'><br />
<ul><br />
<b:loop values='data:data' var='i'><br />
<li class='archivedate'><br />
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)<br />
</li><br />
</b:loop><br />
</ul><br />
</b:includable><br />
<b:includable id='menu' var='data'><br />
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'><br />
<option value=''><data:title/></option><br />
<b:loop values='data:data' var='i'><br />
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option><br />
</b:loop><br />
</select><br />
</b:includable><br />
<b:includable id='interval' var='intervalData'><br />
<b:loop values='data:intervalData' var='i'><br />
<ul><br />
<li expr:class='"archivedate " + data:i.expclass'><br />
<b:include data='i' name='toggle'/><br />
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a><br />
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span><br />
<b:if cond='data:i.data'><br />
<b:include data='i.data' name='interval'/><br />
</b:if><br />
<b:if cond='data:i.posts'><br />
<b:include data='i.posts' name='posts'/><br />
</b:if><br />
</li><br />
</ul><br />
</b:loop><br />
</b:includable><br />
<b:includable id='toggle' var='interval'><br />
<b:if cond='data:interval.toggleId'><br />
<b:if cond='data:interval.expclass == "expanded"'><br />
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'><br />
<span class='zippy toggle-open'>▼ </span><br />
</a><br />
<b:else/><br />
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'><br />
<span class='zippy'><br />
<b:if cond='data:blog.languageDirection == "rtl"'><br />
◄<br />
<b:else/><br />
►<br />
</b:if><br />
</span><br />
</a><br />
</b:if><br />
</b:if><br />
</b:includable><br />
<b:includable id='posts' var='posts'><br />
<ul class='posts'><br />
<b:loop values='data:posts' var='i'><br />
<li><a expr:href='data:i.url'><data:i.title/></a></li><br />
</b:loop><br />
</ul><br />
</b:includable><br />
</b:widget><br />
</b:section></p><br />
</div><br />
<br />
</div><br />
</div></blockquote><br />
Again, be sure to copy all of the code in the scrolling box above before pasting this into your template.<br/>
<br/>
To help anyone who has experienced the "Your template could not be parsed" error when trying to copy and paste this code, I have copied all the above to a text file which you can download here.
<ul><li><a href="http://forum.bloggerbuster.com/topic/support-for-tabbed-sidebar-widget?replies=5&bb_attachments=243&bbat=18">Code for tabbed widget in sidebar (TXT file)</a></li></ul>
I hope this will help solve these problems for you!<br />
<br />
Now, preview your template. If you have made any errors when copying and pasting the code, you will be unable to preview your template. In this case, click on the "Clear edits" button near the bottom of the page and begin again, ensuring you have copied all of the code from the box above. <b>Be sure you paste your code between the opening DIV tag for your sidebar and the opening b:section tag.</b><br />
<br />
If your installation is successful, you will see a tabbed section above your regular sidebar widgets. As you are previewing your template, the initial section will be blank. This is the Feed widget where we can add the URL for your blog feed to display these recent posts. In this instance, save your template so we can add the recent posts and perhaps change some style elements for your tabbed widget area.<br />
<br />
<br />
<h3>Step Five: Add the Feed URL for Recent Posts</h3>Once you have successfully installed the tabbed navigation code and saved your template, it's time to add the URL to your blog feed. This will enable you to display recent posts in the first tabbed section.<br />
<br />
Go to Layout>Page Elements in your Blogger dashboard and look out for the new widget section which should appear like this:<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivuwUK7zfnc-kNVnOGtbFULgiB615uAEx6avuKoBdvUX7trfWlAcGTfLIi3ly5Xto-oZP5PNDi4aIUkUMaMbpcjW_lFYDDlBW1Pl-7W-sMjaRv9EI1_qIaq9PR65j5bNmT-LpAFtmZF_0/s1600-h/tabbed-sidebar-feed-element.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijhzWgrPtFjSHbWFamRbsdZVMWRNB8iSV7t4FCsQ0q7WkAAhWLcx0_toeGH9kaUabBKvWYLahqVNnbV3si2VIoylhdQKatgMGaWCxuMX96KdicYhdZTzNdWyFxYUsT6P-1sLHtxjnDhxI/s400-r/tabbed-sidebar-feed-element.jpg" style="border: 0pt none ;" /></a></div><br />
Click on the "Edit" link, and add the URL to your blog feed in the pop-up window:<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHdFGhbMUH9u2Z212Nn5_oHHqM1Su5QHTecn4aGhjaR3_fdRdBHudgTlMFa1aAvcWGrsi0jWyXikqDBHBJEmfGwuofCOBXSwc55jqFXGSvXyMyXnHRF_M4mWB7V8emTFxCI6ijMiVi37w/s1600-h/add-feed-url.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEmAdnQX7FW2QX1W4o3rc-OhcXGchkg9pcG8OQmy_czzy04LrXH787xF6DtzEj7SmqAdJ2YnWzXFPciLpSpGOyxFjOclie8YS__QsZ-LBI3FAyJ0hYjcFrldXIr-dx3TGfUT_X4vgcCjk/s400-r/add-feed-url.jpg" style="border: 0pt none ;" /></a></div>Choose how many items to display, and then click save. This will add your recent posts to your tabbed sidebar navigation widget.<br />
<br />
<b>Note</b>: <i>It is not possible to drag and drop the Feed, Label or Archive elements for your tabbed widget on the Page Elements page. These elements appear stacked on top of each other, and cannot be moved separately; this is also why the Feed widget looks different to other page elements on this page.</i><br />
<i><br />
</i><br />
<i>At the moment, this is a bug of the tabbed widget. Despite many attempts, I have been unable to prevent these widgets from stacking on top of one another, and it is impossible to edit the Archive and Label widgets on this page. If anyone can figure out a solution, I would be very glad to hear from you!</i><br />
<br />
<br />
<h3>Step Six: Customizing the Appearance of your Tabbed Widgets</h3>Depending on the template you are using, this may be the most complicated step of installation!<br />
<br />
The default style code I have offered in this tutorial will be suitable for pale templates with a wide sidebar. If you have a narrow sidebar or different color scheme, you will almost certainly need to change some elements of the style!<br />
<br />
Here are the most prominent style issues, and what you can do to resolve them:<br />
<br />
<br />
<h4>The tabs appear on top of each other</h4>This will happen if the combined width of your tabs is wider than the width of the sidebar area.<br />
<br />
To alter this, you will need to change the width for the tabs. Here is the section of code you need to change:<br />
<br />
<br />
<blockquote>ul.domtabs li{<br />
float:left;<br />
padding:0 5px 0 0;<br />
text-align: center;<br />
<b style="color: rgb(255, 0, 0);">width: 110px;</b><br />
}</blockquote><br />
Reduce the width to a smaller pixel value. For example, if your sidebar is 200px wide, change the tab width to 60px. Then the combined width of the three tabs will equal 180px and allow for space between them.<br />
<br />
<br />
<h4>Changing the color of borders and tabs</h4>In the code for this tutorial, I have used two shades of grey for the border and tab colors:<br />
<ul><li>#ccc is the paler grey</li>
<li>#999 is the slightly darker shade</li>
</ul>Using your browser's search function, you can locate all instances of these colors in the style section of your template and replace these with the hex values for your preferred colors instead.<br />
<br />
<br />
<h3>Over to you!</h3>As I mentioned at the beginning of this tutorial, different template designs may require different methods for customizing the appearance of your tabbed widgets. To offer support, I have created <a href="http://forum.bloggerbuster.com/topic/support-for-tabbed-sidebar-widget">a thread in the Blogger Buster forums specifically for help with this tutorial</a>.<br />
<br />
If you need help customizing your widget, please post your questions there with some details of the template you are using or a link to your blog. It's much easier for me to post code on the forums than in comments, and also provides a means for others to locate solutions of they are using a similar template style.<br />
<br />
<br />
I hope this tutorial has provided a good explanation of how to install tabbed navigation in your Blogger template! Please feel free to leave your comments and opinions about this tutorial, or if you have suggestions for how this may be enhanced.<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-91422849676693852652008-08-05T18:00:00.000+01:002008-08-05T18:00:00.584+01:00Numbering Comments in BloggerA great many readers have asked if it is possible to number blog comments in Blogger. Although I had tried many different methods, I had been unable to realize a successful and reliable method.<br />
<br />
Luckily, <a href="http://randomnessf1.blogspot.com/">Fernandooo1</a> has come to our rescue! <a href="http://randomnessf1.blogspot.com/2008/08/translation-numbering-comments.html">In his explanatory post over at Randomness</a>, he explains how to use a simple combination of JavaScript and CSS styling to produce this effect in Blogger templates.<br />
<br />
<span id="fullpost"><br />
<br />
Fernandooo1 uses this technique in the design for Randomness which appears like this:<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRXdo-L69BMO44NtwDMTE2XmW99Cbe2zis1TZuFhUqOV03w5B6nRmSFDDyjzB7ls0apm8oI9u1HUGF8naG5gCwp6Xrxdq7XMfusU7FR_qmwm3UXFULWXnuRp2W5Tsm-59huVmhB4DGgg/s1600-h/numbered-comments.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghc9V2VdcXOTm0IUaGWKK3FChH4dNvqR2SbVWY8ZT2yW49rudmEHHc3O9BV9QPABcZEybxPxznoLj5FPaT9bFMylqSmU5Q_PAhGrCcmP4yrkUPK0AnJNcmtJQS5aVvTBkRqUpaoM8qj8A/s400-r/numbered-comments.jpg" style="border: 0pt none ;" /></a></div><br />
The <a href="http://randomnessf1.blogspot.com/2008/08/translation-numbering-comments.html">tutorial for numbering comments in Blogger</a> includes the full code and technique required for customizing your Blogger template. You'll be happy to know that no external files are required: it's all achieved by some simple edits to the HTML code. If you would like to add this functionality to your own Blogger template, please take a look at Fernandoo01's well-written tutorial. <br />
<br />
For Fernandooo1: thank you for posting your original tutorial and this subsequent translation in English :)<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-78605612294156301042008-07-16T16:00:00.000+01:002008-07-16T16:00:00.579+01:00How to add Quick Edit Pencil to Blogger Posts<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2mspQXKqrSwYc7llexCXqLHHif_pDJmzzN_2M0tfJD25N3dBA-cpX11RwnTfTguwm_XkY4uajhibXr3cZQ8mB4poPu1QsMscLR-T7WeTiIHf3Y8tkvVOhj3_OQzkHJnACHeG2aYsIajQ/s1600-h/blogger-quick-edit-pencil.gif" imageanchor="1" style="border: 0pt none ; background-color: transparent; clear: right; margin-bottom: 1em; float: right; margin-left: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLjVgmsDA_To1YsrGjkSqYyRrEkEHIXc6USitYMU5q3E_gOjeePPeliCBjnIslqjXxLH0d_RdyfEJ7ftCI7VtyEN2_i6TiC3CNNyrBq7Mk0EekxNC_afFzVRDtY758QfUM2KsxxuCUG4k/s320-r/blogger-quick-edit-pencil.gif" style="border: 0pt none ;" /></a>The "Quick Edit" pencil icon provides a link to edit our blog posts while viewing blog pages in our browser.<br />
<br />
This function is always present in Blogger's default templates. However, if you have customized your template or are using a non-standard template, you may notice this function is missing from your blog pages.<br />
<br />
In this quick tutorial, I'll explain how you can check if the "Quick Edit" function is present in your blog template, and how this can be restored if you find it's missing.<br />
<br />
<span id="fullpost"><br />
<br />
<h3>Check the quick edit settings</h3>
The first thing we should do is check that the quick editing is activated in your blog's settings. To check this, go to Settings>Basic in your Blogger dashboard and scroll down to the section which says "Show quick editing on your blog".<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2TxM8s-r-pObc_4qZyjxDUwPvPsOE2-ciOcX-oXVdN99nZhT7nXfUzGmPS0wjgBCYbE-R0AjenUexitC_aIhX2_E5e4bRjzaaELeENflYCv21ST7tb2oU8beb874M6iyOtzoure5ZeWs/s1600-h/show-quick-editing-setting.gif" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTY1No6RjrJQ53Ee25hBXwRFVEpF_QCNyoATKvX9uK7Wei3ogCOrSifJONa-ZaXndcHspSMCw9TcjuVjAupUgf27TapJo5Y7ZASU1X2j_en7jUqQQs5RiHN5yd8YEEsYd6r42CyyRmaKA/s400-r/show-quick-editing-setting.gif" style="border: 0pt none ;" /></a></div>
<br />
You should ensure this option is set to "yes" and save this setting.<br />
<br />
Then go to Layout>Page Elements in your Blogger dashboard, and click on the "edit" link for the Blog Posts widget.<br />
<br />
On this pop-up page, you should ensure you have checked the "Show quick editing" option which enables you to quickly edit your blog posts.<br />
<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hcRKUWV89RR0FTVfUIbUF55bxOEHf6VB1uZn67SDcJVD9hKyzvDYLNEMTox63om9xv9JphG8-3ydGA0CqyCtN5jPmYw5wMJN6ERM_B7jOMlVuczz5Ky9SU5X2pWnAqlOIG_1uTpt3VI/s1600-h/configure-quick-editing-in-.gif" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-vLx9TqPk_9vAboUelwOkhL-rZ0ML-yOsaEXhPyMS71Pu2uivuVwqHgtiBsQ0_Wg1MCLIwMpBZhMUyYI-havdUhJNe7iMq3Z31KKInxuT8Nc63WMV_fBxXkAfqnvef8RJb_mkE1ldDY/s400-r/configure-quick-editing-in-.gif" style="border: 0pt none ;" /></a></div>
<br />
<br />
<br />
<h3>Check if the required code is present in the template</h3>
<br />
Next we need to check if the code required to make these icons appear is still present in your template.<br />
<br />
To find out, go to Layout>Edit HTML in your Blogger dashboard. Check the "Expand widget templates" box, then search for this section of code:<br />
<br />
<br />
<blockquote class="tr_bq"><code><b:includable id='postQuickEdit' var='post'><br />
<b:if cond='data:post.editUrl'><br />
<span expr:class='"item-control " + data:post.adminClass'><br />
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'><br />
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/><br />
</a><br />
</span><br />
</b:if><br />
</b:includable></code></blockquote>
The easiest way to locate this section is to use your browser's search function and find the following phrase: <br />
<br />
<blockquote class="tr_bq"><code>b:includable id='postQuickEdit' var='post'</code></blockquote>
If this section of code is present in your template, you're already halfway towards adding those quick edit icons again.<br />
<br />
If this section of code is not present in your template, you will need to copy the entire <code>b:includable</code> section above, then paste this just before the following line of code in your template:<br />
<br />
<blockquote class="tr_bq"><code><b:includable id='comments' var='post'></code></blockquote>
Once you are sure that this code is present in your template, you need to add a simple line of code to the posts section where you would like your quick edit icon to appear:<br />
<br />
<blockquote class="tr_bq"><code><b:include data='post' name='postQuickEdit'/></code></blockquote>
In this template, my quick edit icon is located in the "post-footer" section, like this:<br />
<br />
<blockquote class="tr_bq"><code><div class='post-footer-line post-footer-line-1'><br />
<b:include data='post' name='postQuickEdit'/><br />
</div></code></blockquote>
If the "post-footer-line" section is not present in your own Blogger template, you may prefer to add the quickedit code just after this line instead:<br />
<br />
<blockquote class="tr_bq"><code><data:post.body /></code></blockquote>
Once you have added this line of code, preview your template. The quickedit icons will not appear in the preview, but if you have made any errors during these changes, the preview will make you aware of this.<br />
<br />
Finally, you can proceed to saving your template. Then view your blog in your browser. Your quick edit icons should now appear below each of your blog posts which allows you to easily edit posts when you are logged in to your Blogger account.<br />
<br />
<br />
<h3>Did this work for you?</h3>
I hope this tutorial has enabled you to restore missing quick edit pencil icons for your Blogger posts with the minimum of fuss!<br />
<br />
Please let me know if this tutorial has been useful for you by leaving your comments and opinions below.<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-84897094803606739562008-07-09T22:00:00.000+01:002008-07-09T17:12:56.521+01:00Create Extra Columns in your Blogger Layout - Magazine Style!<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIN9wmMibzEiJY4qNefadTfgX-i7IHhlhNLyI1OLlKBCuEUxGF2GjLaxu9-SsCmDJeYu6yOFmt2I_1eis3DXyScT2tNc1tPDAmMQQNrFKhrDvEcrSbCjGGBovaZEnhLpueWH9eIEQnp7Q/s1600-h/magazine-style-layout.gif" imageanchor="1" style="border: 0pt none ; background-color: transparent; clear: right; margin-bottom: 1em; float: right; margin-left: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFyXFUaFDdXdtgT_lRiO1_htRFMT7vilUriZZO7YwsqVciEFbAXdnJvQIG-yPAxrh6LR627Lsiad13yKj2pHTRvCjR0pEQXpe7kPgMM8MQRKjw_NFcT37jw6x_wbwe6nBN8ubCQNXec-0/s320-r/magazine-style-layout.gif" style="border: 0pt none ;" /></a>One of the newest (and popular) trends of blog design is the magazine style layout. As the name suggests, this design style presents content in magazine format where extra columns and content are featured on the home page, offering readers an overview of the entire site.<br />
<br />
At present, Blogger Buster's home page features a magazine style layout. Rather than display a list of recent posts in typical blog style, the home page summarizes the most recent post, followed by links to other articles by category, and additional information about the site.<br />
<br />
Many readers have requested a tutorial to create a similar layout for their own Blogger powered blogs, so in this tutorial I'll explain how you can add extra columns and widget sections on your blog's home page to create a magazine style layout of your own.<br />
<br />
<span id="fullpost"><br />
<h3>How Magazine Style Layouts Work in Blogger</h3>
In this template (and also in the Blue Steel template), I have added extra widget sections beneath the main posts column. This allows me to add (or change) the content displayed on the home page from the Page Elements section of my dashboard, without having to manually change my template code.<br />
<br />
Also, I have used the b:if function to prevent these widgets from being displayed on post and archive pages (where they are not required).<br />
<br />
To create a magazine style for your own blog, you will need to make two main changes to your template:<br />
Insert the code required for your new widget sections<br />
Add relevant styling code to the <b:skin> section of your template to change how these widget sections appear.<br />
<b><br />
</b><br />
<b>In this tutorial, I will explain the simplest method of creating a magazine style front page</b>. This involves adding two columns for widgets (to appear side by side) beneath the main posts section of your blog. Once you have added these sections, you can add widgets and change the settings for your blog to alter the appearance and overall look for your template.<br />
<br />
<b>Be sure to back up your existing template before making any changes!</b> Then if you change your mind about your design (or make mistakes during the process) you can easily restore your template.<br />
<br />
To make a back-up of your existing template, go to Layout>Edit HTML in your blog's dashboard and click on the "Download full template" link. This will save your template as an XML file to your computer.<br />
<br />
<br />
<br />
<h3>Add new widget sections below your posts</h3>
To add new columns for widgets below your posts, we will need to add some code to the main posts section of your blog.<br />
<br />
Go to Layout>Edit HTML in your blog template, and <u>do not</u> check the "expand widget templates" box. Then search for this section of code in your template:<br />
<br />
<blockquote class="tr_bq"><code> <div id='main-wrapper'><br />
<b:section class='main' id='main' showaddelement='no'><br />
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br />
</b:section><br />
</div> </code></blockquote>
<br />
In your own template, this section may look a little different. For example, you may find <div id='main'> or <div id='content'> instead of <div id='main-wrapper'>.<br />
<br />
If you are having problems locating this section, use your browser's search function to locate the phrase "blog posts" or "Blog1", and be aware of the surrounding <code>b:section</code> and div tags.<br />
<br />
Once you have found this section in your template, you will need to copy and paste the following code <b>just after the closing <code></b:section></code> tag</b> and <b>before the closing </div></b> <br />
<br />
<br />
<blockquote class="tr_bq"><b:if cond='data:blog.url == data:blog.homepageUrl'><br />
<b:section class='sidebar' id='magazine-left' showaddelement='yes' > <br />
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/> <br />
</b:section> <br />
<br />
<b:section class='sidebar' id='magazine-right' showaddelement='yes' > <br />
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/> <br />
</b:section> <br />
<br />
<div style="clear: both;"></div><br />
</b:if></blockquote>
By adding this code, we have inserted two extra widget areas which contain a "dummy" text widget so you can preview their appearance. These sections are also contained in <b:if> tags, which determine they are only seen on your blog's home page.<br />
<br />
At this stage, you can preview your template and will see these dummy widgets appear below your posts section. However, as we have not yet styled these sections, they will appear beneath each other rather than side by side.<br />
<br />
<br />
<h3>Adding style to your new widget sections</h3>
Now that we've added the code required for our new widget sections, we need to add some styling code to ensure they appear side by side.<br />
<br />
<br />
For this, locate the closing </b:skin> tag in your blog's template. Just before this tag, you should paste the following section of code:<br />
<br />
<br />
<blockquote class="tr_bq">#magazine-left {<br />
width: 45%;<br />
float: left;<br />
}<br />
#magazine-right {<br />
width: 45%;<br />
float: right;<br />
}</blockquote>
<br />
Then preview your template. Now you should see your the titles for the dummy widgets appear side by side with a gap between them. These titles should have similar styling to your sidebar headings and match the overall theme of your template.<br />
<br />
Once you are sure everything looks okay, you can proceed to save your template.<br />
<br />
If you do receive an error when attempting to preview or save these customizations, click the "Clear edits" button and begin adding your code from the beginning, being extra careful when copying and pasting this code.<br />
<br />
<br />
<br />
<h3>Adding widgets and styling your home page</h3>
Now that you have added the required code for your magazine style front page, you may want to remove the dummy text widgets and replace them with your widgets of choice.<br />
<br />
Simply go to Layout>Page elements in your Blogger dashboard, where you will see your new widgets appear below the Blog Posts section like this:<br />
<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5G5gjjS2yBHCcL6zFW7lS0UWWfjJAQelYX3YYYduynD0a6pHlehL_SXHE0JYwxBvtzHHvVza-Zg3NEb_dOnW_vliR_N1QN46LjgzJoz4nih6y1hD9GbGxMcZgUjSUhl88coI_EpigbZE/s1600-h/new-widgets-in-layout.gif" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDoDuxpGzEjRnR3a2-Mz_2wj9g-HVSmq56nqrvyiVeyMZCXVaHeKQd01W8Vr3mbFpbc-gZVB82tLj0YZpE_SYJ46Ww4qMGZF_-GPnQFwoOOUQY13-6p0K0TNruEo-qHISjzYjsPjmgEP0/s400-r/new-widgets-in-layout.gif" style="border: 0pt none ;" /></a></div>
<br />
Click on the edit link for the existing "Test Title 1/2" widgets, and choose to remove these if you prefer. Then add new page elements of your choice to customize the appearance of your blog's home page.<br />
<br />
You may also prefer to limit how many posts are displayed on your blog's home page so that your new widgets will feature higher up on your blog's home page.<br />
<br />
To change the number of posts which are displayed, go to Settings>Formatting and choose the number of posts to display using the first option on this page:<br />
<br />
<br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQRnRUDieQ1YxQEXj0s_jPtpdU8lLhsDhLJs-TnEzzJzJRoYonY5TJHlE0hfec4p3_tZ689rAJ6ycRqjLl18PFhuYyWxk6NZaS2xl9-kkluEqcVq2g2UGu4vjBGMFmL3EgHN7G-XNJfg/s1600-h/how-many-posts-display.gif" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLo3d9HVOs6a3Yx2pBGlBEqXtwpYPMs7IDwMAMRAvLofRjB6Tf7UB3ocPr-lpFmo9gpHj3gMtH6_qUHJevhR2WNFpzu25KKVEl7aK7GtDDigrIzDUBtXpEA-G0QHAr_iqMN-SADhlFMdA/s400-r/how-many-posts-display.gif" style="border: 0pt none ;" /></a></div>
<br />
In many magazine style blogs, only one post is displayed on the home page, but if your posts are short, it should be acceptable to post more than one without affecting the overall look and style of your design.<br />
<br />
<br />
<br />
<h3>More ideas for your magazine style design</h3>
If you want to take your magazine style design a step further, you may also like to check out these tutorials:<br />
<br />
<ul>
<li><a href="http://www.bloggerbuster.com/2007/10/how-to-add-three-columns-to-your-footer.html">How to add three columns to your footer section</a></li>
<li><a href="http://www.bloggerbuster.com/2008/02/easy-way-to-make-great-blog-header.html">The easy way to make a great blog header</a></li>
<li><a href="http://www.bloggerbuster.com/2008/02/how-to-create-post-summaries-in-blogger.html">Install post summaries in Blogger</a> </li>
</ul>
I hope this tutorial has helped explain how to add new widget areas for a magazine-style front page with Blogger. Please feel free to leave your comments and opinions 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-52163482474396070862008-07-03T22:00:00.002+01:002009-07-26T02:00:13.714+01:00How To Add Star Ratings to your Blogger Blog<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdt6iW79uG1Wxcy336892Zg9tsbBZnaqbxOn_xMd2VBmTpF05BusOWwuxuEEteZJ8GkOl7gZBIE97hvcO5yFhrULzTKqQuzVSoWzY2ZuGktcKwDcK5XEIqMkgq4SoDhulVJq1pmufVKk/s1600-h/blogger-star-ratings.gif" imageanchor="1" style="border: 0pt none ; background-color: transparent; clear: right; margin-bottom: 1em; float: right; margin-left: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDAuIaAJsoT03wqT3Wlz-neX_VjAKOdtTS-_Gr6S3wKPKV9RAJg-phUQe5u82_hkMRqkMMEbN2NWzFS5uKk_EuV5Dw6S5uPMzvD5oormcqCogDrSE8OtJ1-PyEC-wDVVKlQwlHu3-vcQ/s320-r/blogger-star-ratings.gif" style="border: 0pt none ;" /></a>Star ratings is a new feature currently available through Blogger in Draft. This enables you to add a widget beneath your posts which readers can use to rate your articles on a scale of 1-5, like this:<br />
<br />
If you use a default Blogger template, you should be able to activate this feature right away when logged through Blogger in Draft: simply go to Layout>Page Elements and edit the "Blog Posts" widget to activate the display.<br />
<br />
However, those using a customized or third party template will need to add the required code to their templates first. In this tutorial, I'll explain how you can add "star-rating" functionality to your customized Blogger template.<br />
<span id="fullpost"><br />
<br />
To use the "star ratings" feature, you will first need to activate this through Blogger in Draft (it's still in beta, and not yet available for use in the regular Blogger dashboard).<br />
<br />
Log into Blogger in Draft and choose the blog you wish to work with. Then go to Layout>Page Elements, and click the "Edit" link on the "Blog posts" widget.<br />
<br />
This screen offers many options for you to add (or remove) from the posts section of your blog. If you scroll down a little, you'll see the "star ratings" option. Tick this option to activate this setting for your blog, then scroll down to save your settings.<br />
<br />
If you are using a default template, you should see the star ratings widget appear on the post pages of your blog. However, if you have customized your template (or are using a third party template), it is likely that your template does not include the code required to make the star ratings display.<br />
<br />
<h3>Here is how you can add the required code for star ratings to your non-standard Blogger template</h3>
<br />
<br />
<ol>
<li>Go to the Edit HTML page in your blog's dashboard, and ensure you have checked the "expand widget templates" box.</li>
<li>Using your browser's search function, try to find this line of code:<br />
<blockquote><div class='post-footer-line post-footer-line-1'></blockquote>
If you cannot locate this, search for the following instead:<br />
<blockquote><p><data:post.body /></p> </blockquote>
</li>
<li>Immediately after this line (either the post-footer or post.body), add the following section of code:<br />
<blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<br />
<span class='star-ratings'><br />
<b:if cond='data:top.showStars'><br />
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/><br />
</b:if><br />
</span><br />
<br />
</b:if></blockquote>
</li>
<li>Next, find this line in your Blogger template (this should be a little further down):<br />
<blockquote><b:include name='nextprev'/></blockquote>
</li>
<li>Just after this line, paste the following section of code:<br />
<blockquote><b:if cond='data:top.showStars'><br />
<script src='http://www.google.com/jsapi' type='text/javascript'/><br />
<script type='text/javascript'><br />
google.load("annotations", "1");<br />
function initialize() {<br />
google.annotations.createAll();<br />
google.annotations.fetch();<br />
}<br />
google.setOnLoadCallback(initialize);<br />
</script><br />
</b:if></blockquote>
</li>
<li>Then save your template.</li>
</ol>
<br />
Now when you view a post page on your blog, you should see the star ratings appear beneath your posts!<br />
<br />
Anurag Bansal has posted <a href="http://www.knowliz.com/2008/07/how-to-add-star-rating-to-custom.html">a similar tutorial</a> on his blog, Knowliz. If you have any problems with this version, I'd advise you to <a href="http://www.knowliz.com/2008/07/how-to-add-star-rating-to-custom.html">check out this page instead</a> (thanks for the comment and info, Anurag!).<br />
<br />
If you would prefer the star ratings to appear on all pages of your blog, you can remove the lines which include the <b:if> tags. These lines tell Blogger to display the star ratings only on your post pages; removing them enables them to be displayed on all pages of your blog (<a href="http://www.bloggerbuster.com/2008/06/display-elements-only-on-home-item-or.html">take a look at this post</a> for more information about the b:if function).<br />
<br />
I hope this tutorial will help you understand how to apply the star-ratings function on your Blogger powered blogs! Please let me know what you think about this post by leaving your comments below.<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-14756579430930891942008-06-27T10:16:00.010+01:002008-06-30T17:31:07.849+01:00How to add a comment form beneath your blog posts<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUvPRN1iDZmHalfTY5Bgnutwdrbrw6NGnGXsNMx6I3ps7jaHgstNBd4L879HiHgOt3XfRq9jau-bfprGdXz7rUwyg8ctZAb2ou5WqkBdwvcuhrqzdD6DgR02wixcepFv-EZPw8vdONnkI/s1600-h/inline-comments-blogger.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTHQykB237QijyfGuwXvdnqI_QhlsdxnD4g7PzectZYKIwBcU4CuPohUAWDJYpNI4Tzoarpdi3LxMzjrjuK2x8_BWv92wqo6-yk8sFUeUOoLdcMR-kg5MzXHkpr-EoAdFZxQ8fFn2p3zI/s400-r/inline-comments-blogger.jpg" style="border: 0pt none ;" /></a></div>
<div xmlns="http://www.w3.org/1999/xhtml">Blogger have developed an inline (embedded) comment form which can be enabled through <a href="http://bloggerindraft.blogspot.com/">Blogger in Draft</a>. This is probably the most requested feature for Blogger, and I'm sure many of you will want to use this straight away!</div>
<br />
<span id="fullpost">
To enable inline comments for your Blogger powered blog, you need to log into your dashboard through <a href="http://bloggerindraft.blogspot.com/">Blogger in Draft</a>. Then go to Settings>Comments and scroll down the page to see the new "Comment form placement" setting:<br /><br />
</span><br />
<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZUcb-AD7PlWf2aOAoVp0QMujJUP90J9i2iRhdNnqXDwBzHOA_ZjntnoxIf13u2Qgm5TVbbz_fpiTnlScGx3MjDnn-Bzhm3ay7mAYnxq5VcGdu0IDwUBYlRCzjbYgbiBOsvBqmso9TsgA/s1600-h/blogger-comment-form-placem.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuQCCWDWysrLFWLmN-X8aPyYVzt8dgTPryjkpb2PgHdhDfOqd9CYagG9z97T-XlVAGKTOTND5xnXFz5znzohaez4gqTMDUwU8K5d9C11LmoIPXdyuLu_kaDjVF44U56P8XHgkmYKLP3f8/s320-r/blogger-comment-form-placem.jpg" style="border: 0pt none ;" /></a></div>
Check the radio setting for "Embedded below post" which will enable the display of the comment form below your blog posts.<br />
<br />
If you have customized your template, you will need to make a small change to your template code for this comment form to display. But don't worry, it's a very simple customization to make!<br />
<br />
Simply go to Layout>Edit HTML in your blog's dashboard and check the "Expand widget templates" box.
Then search for this section of code:
<br />
<br />
<br />
<blockquote><p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</p></blockquote>
Replace this entire section of code with the following instead:
<br />
<br />
<br />
<blockquote><p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p></blockquote>
Then save your template.
Now when you view a post page in your blog, you should see the new comment form in place!<br />
<br />
<u><b>Update:</b></u> As many of you have pointed out in the comments, not all templates feature the code I've described above.<br />
<br />
Luckily, Is has offered a method which is much easier to use, and has worked for every template I've tried so far. So if my original method isn't working for you, try this instead:<br />
<br />
Search for this line in your template code:<br />
<br />
<blockquote class="tr_bq"><code><b:include data='post' name='comments' /></code></blockquote>
Immediately after this line, add the following line of code:<br />
<blockquote class="tr_bq"><code><b:include data='post' name='comment-form'/></code></blockquote>
Then save your template. This method adds the required code for the comment form without having to alter the whole comment area, and is very useful if you have experienced problems using the original method Thanks for the hint, <a href="http://www.blogger.com/profile/00184908157927273832">Is</a>!<br />
<br />
If you don't see your comment form, make sure you have changed this setting through <a href="http://draft.blogger.com/">Blogger in Draft</a> and have added your code in the correct place in your template.<br />
<br />
You can see this comment form in action beneath this post. Using this comment form allows readers to comment using their Google account, OpenID, Name/URL and all of the settings previously available when using a pop-up or full page comment form (depending on the settings you have chosen).<br />
<br />
I am very happy to see that Blogger have listened to our requests and have added this great functionality to our blogs. There are also some other new features added to Blogger in Draft including an improved posting page and import/export features which you can read about in <a href="http://bloggerindraft.blogspot.com/">the Blogger in Draft blog</a>.<br />
<br />
Please let me know what you think of this new feature by leaving your comments below.<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-13246135489427997722008-06-27T09:40:00.004+01:002008-06-27T10:39:09.607+01:00Inline comments are available for Blogger blogs!<div class="separator" style="text-align: center; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqbmz1Ev__3bo1cy1HSlaqczzp3o2jJ4fdJAvPt4StiSPGmJf8i7Zv7vrpUOL7tqtQmPM5KOSqDg9UGw2uI4iDof7EMA4QSz0gLqzSdM0qYZ_W2Ng2Rm_EnjaX32g-mIFQw5S9_gf3QE/s1600-h/inline-comments-blogger.jpg" imageanchor="1" style="border: 0pt none ; background-color: transparent; margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD8Jk6EDfTG6yciuut7uJrQoAMmxl55H6Y2gMpjc82Ezdmuv0A-A3ueroSJ5t6pzaevstcUxrXgTRaQCwnPSHP0e0nLt_JCuBHiGXV8UzHtTlVxogpA2spHrAz8d_GucI5pOrN8BLVooU/s400-r/inline-comments-blogger.jpg" style="border: 0pt none ;" /></a></div>
<div xmlns="http://www.w3.org/1999/xhtml">I'm thrilled to tell you that the Blogger team <b>have enabled a comment form below the post - Wordpress style!</b> This is probably the feature we ALL wanted added to the Blogger service, so many thanks go out to the Blogger team for enabling this service for us.</div>
<br />
The inline comment form is currently available through <a href="http://draft.blogger.com/">Blogger in Draft</a>. To activate this, go to Settings>Comments in your Blogger dashboard and scroll down to "Comment form placement" where you can check the radio setting for "Embedded below post".<br />
<br />
There is only one problem with this at the moment: those of us who have customized our templates cannot currently use this feature. This is because our templates do not contain the code required to display the comment form. If you use a default template, your comment form should automatically appear below your post once you have changed the comment settings in your blog.<br />
<br />
<strike>I will post about this in full detail in the next couple of hours with instructions for those who have modified their templates. </strike><b>Update:</b> I have now posted <a href="http://www.bloggerbuster.com/2008/06/how-to-add-comment-form-beneath-your.html">full details for adding comment form functionality to your customized Blogger template</a>, and you can also see this in action beneath this (and every) post on Blogger Buster. <br /><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-57963127931412517412008-06-24T22:00:00.001+01:002009-07-26T02:00:13.714+01:00Recent Comments for FTP Bloggers<div xmlns='http://www.w3.org/1999/xhtml'>All blogs which are hosted on Blogger publish a comments feed along with their blogs. <strike>But those who choose to publish via FTP to their own hosting account are unable to publish a feed for their comments.</strike> Update: FTP blogs do publish a comment feed! I have written <a href="http://www.bloggerbuster.com/2008/06/update-ftp-blogs-do-publish-comment.html">a separate post about comment feeds for FTP blogs</a>, which includes the URL structure you should use, and also a script which can be used to display recent comments.<br/><br/>Thanks to Pete for <a href="http://www.bloggerbuster.com/2008/06/recent-comments-for-ftp-bloggers.html#comment-1086060292141787942">this helpful information</a>!<br/><br/>In this post, I'll explain two different methods you could use to display recent comments in your FTP published Blogger blog without accessing the comments feed.<br/><span id='fullpost'><br/><h3>Method 1: Using template tags to display recent comments from the main page</h3><br/>Blogger <a href='http://help.blogger.com/bin/answer.py?hl=en&answer=42522'>recommends making use of template tags</a> to display recent comments in the sidebar of Classic templates. <br/><br/>This is not strictly a list of recent comments, as it can only parse and display comments from the page on which it is displayed.<br/><br/>Therefore, on the home page, this code will display comments which are associated with posts displayed on the home page. More recent comments may have been made on previous posts in the archives, but due to the nature of this code, these comments will not be displayed.<br/><br/>If you would like to make use of this method, you can make use of the following section of code:<br/><br/><div style='border: 2px solid rgb(204, 204, 204); padding: 5px;'><MainPage><br/> <h2 class="sidebar-title">Recent Comments</h2><br/> <ul><br/> <Blogger><br/> <BlogItemCommentsEnabled><br/> <BlogItemComments><br/> <br/> <li><$BlogCommentAuthor$> // <br/> <a href="<$BlogCommentPermalinkURL$>"><br/> <$BlogCommentDateTime$></a></li><br/> <br/> </BlogItemComments><br/> </BlogItemCommentsEnabled><br/> </Blogger><br/> </ul><br/></MainPage></div><br/><br/>Paste this code into the sidebar (or other) section of your blog's HTML code, which can be seen in the Template>Edit HTML section of your blog's dashboard.<br/><br/>This will display a list of the names of commenters, followed by the comment permalink.<br/><br/>If you would prefer to also display the body of the comment in this list, you could use the following section of code instead:<br/><br/><div style='border: 2px solid rgb(204, 204, 204); padding: 5px;'><MainPage><br/> <h2 class="sidebar-title">Recent Comments</h2><br/> <ul><br/> <Blogger><br/> <BlogItemCommentsEnabled><br/> <BlogItemComments><br/> <br/> <li><$BlogCommentAuthor$> // <br/> <a href="<$BlogCommentPermalinkURL$>"><br/> <$BlogCommentDateTime$></a><br/> <p class="comment-body"><br/> <$BlogCommentBody$><br/> </p><br/> </li><br/> <br/> </BlogItemComments><br/> </BlogItemCommentsEnabled><br/> </Blogger><br/> </ul><br/></MainPage></div><br/><br/>This will display the commenter's name and comment permalink followed by the entire body of the comment. <br/><br/>Be careful when using this method, as there is no way to display only a summary of the comment. If readers leave rather long comments on your posts, this will take up much space in the sidebar!<br/><br/><h3>Method 2: Using Storago's Recent Comments Service</h3><br/><a href='http://www.storago.com/'>Storago</a> provides a useful service to display recent comments which will display a true list of recent comments for those publishing by FTP.<br/><br/>This system works by collecting recent comments posted to your blog, and using JavaScript to display them. Storago collects these comments using Blogger's comment notification by email system. You will need to add a unique Storago email address to your comment notification settings for this to work, and it may take a while for the recent comments to begin displaying in your sidebar.<br/><br/><b>Here's how you can set up the Storago method to display recent comments in your Blogger FTP blog:</b><br/><br/><a href='http://www.storago.com/signup'>Sign up for your free membership to Storago</a> and wait for your welcome email (mine arrived in about 10 seconds, you you shouldn't be waiting too long!) Once this arrives you can validate your membership and log into your account.'<br/><br/>After logging in, you will see a page featuring the tools accessible to you. Choose the "Free recent comments add-on" link.<br/><br/><img width='500' src='http://lh5.ggpht.com/amandafaz/SGEaOp1hi5I/AAAAAAAABrU/8rjgrR6L718/%5BUNSET%5D.jpg'/><br/><br/>Then choose to add a new blog.<br/><br/>The following page may seem a little confusing as there are no clear instructions of what you should be doing with the information presented:<br/><br/><img src='http://lh4.ggpht.com/amandafaz/SGEbsInG_iI/AAAAAAAABrY/_zfLx8yt2QM/%5BUNSET%5D.jpg'/><br/><br/>On this page, you need to copy the "Comment Notification Email" address, which will be something like recom-123-someword@storago.com.<br/><br/>Then go to Settings>Comments in your Blogger dashboard. Add this email address into the comment notification area near the bottom of the page, then save your settings.<br/><br/><img src='http://lh5.ggpht.com/amandafaz/SGEceZ7-t5I/AAAAAAAABrc/07dQ9EjtZUc/%5BUNSET%5D.jpg'/><br/><br/>Once you have added the comment notification email address provided by Storago, go back to the Storago page and choose the "Add recent comments to your Blogger template" link. This should bring up a page which looks like this:<br/><br/><img src='http://lh3.ggpht.com/amandafaz/SGFB7PDpU2I/AAAAAAAABrg/L54sm2HMwFw/%5BUNSET%5D.jpg'/><br/><br/>You should copy and paste the JavaScript code from inside the gray box into the sidebar section of your blog's HTML code (where you would like this to appear in your design). <br/><br/>By default, the recent comments script is designed to display the commenter's name and the title of the post on which they have commented with the date of the comment beneath. <br/><br/><img src='http://lh6.ggpht.com/amandafaz/SGFFJTHHelI/AAAAAAAABrk/33XRONS1pJo/%5BUNSET%5D.jpg'/><br/><br/>As far as I can tell, Storago does not allow us to post the body of the comment in the widget. However, we can force the full title and other features by adding code phrases to the JavaScript code (which are detailed on the page where you can find the widget code for Storago).<br/><br/>Comments published on your FTP blog will display in your recent comments widget as soon as they are posted. If you do choose to moderate comments, you will need to approve comments before they are posted in your recent comments widget.<br/><br/>I hope these methods have helped you understand how recent comments may be added to your FTP published Blogger blog without accessing the comments feed.<br/><br/>Please note that this post has now been edited to reflect the information posted by Pete in the comments, and that <a href="http://www.bloggerbuster.com/2008/06/update-ftp-blogs-do-publish-comment.html">an update about FTP comment feeds can be read here instead</a>.<br/><br/></span></div><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-78158746026924854612008-06-11T22:00:00.000+01:002008-06-11T22:04:13.767+01:00Display Elements only on Home, Item or Archive Pages in Blogger<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtk869t4e_I50XEt1s30ZG19kDwnjkptOneLapWwxY3dwjXno527_XwNvIe1_MZKyGn_8mjBPYaNZGkFPWXDc6e0R_J3YdIePl_CXWMfyiztpKvU6YutBVBJWZCnPbUfIy1Mtr_aPlZfI/s1600-h/b-if-page-type-blogger.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtk869t4e_I50XEt1s30ZG19kDwnjkptOneLapWwxY3dwjXno527_XwNvIe1_MZKyGn_8mjBPYaNZGkFPWXDc6e0R_J3YdIePl_CXWMfyiztpKvU6YutBVBJWZCnPbUfIy1Mtr_aPlZfI/s320/b-if-page-type-blogger.jpg" border="0" alt="Display widgets on pages in Blogger"id="BLOGGER_PHOTO_ID_5210651774882200738" /></a>When designing your Blogger template, you may prefer certain elements to appear only on certain types of pages.</p><p>If you would prefer certain widgets or elements of your design to appear on the home page, but not on individual post pages, for example, you can use the "b:if cond='data:blog.pageType'" function to control this.</p><p>In this tutorial, I'll explain how you can easily control page elements to display (or not) on certain types of pages in your Blogger powered blog.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>To display elements of your layout on certain page types, you will need to edit your blog's template code.</p><p><span style="font-weight:bold;">Be sure to make a full backup of your existing template before attempting to use the information in this tutorial!</span></p><p>To make a backup of your template, go to the Edit HTML page in the Layout section of your blog's dashboard. Then simply click on the "Download full template" link near the top of the page.</p><p>This will enable you to save your template as an XML file to your computer, which you can use to restore your template <span style="font-style:italic;">if</span> you accidentally mess things up!</p><h3>How the layout tags work</h3><p>The <code><b:if></code> function tells Blogger we are setting conditions for the following section of content.</p><p>To control whether elements are displayed for a particular page type (ie: index, archive or item pages) we add the <code>data:blog.pageType</code> tag to the <code>b:if</code> statement, and complete this by stating which type of page where we would like this content to be displayed.</p><p>After this tag, we add the code or content to be displayed. Then finally we close of the b:if conditional statement with a <code></b:if></code> tag.<p>Trust me, this is not as complicated as it sounds! Let me give you an example.</p><p>If I wanted to display a "Welcome to my blog" message only on the home page, I could use the following section of code:
<blockquote><code><b:if cond='data:page.type == &quot;index&quot;'><br/>Welcome to my blog!<br/></b:if></code></blockquote></p><p>This code roughly translates as:
<blockquote>If this is the home page, display my "Welcome to my blog" message.<br/>If this isn't the home page, don;t display anything here!</blockquote></p><p>When we can <span style="font-style:italic;">translate</span> the code into something more understandable, it becomes easier for us to use!</p><h3>The three different page types</h3><p>In the example above, I wanted to display my "Welcome" message on the home (or index) page.</p><p>In total, there are three page types for which you can use a similar statement:
<ul><li>index (the home page)</li>
<li>archives (to be displayed when readers view your archive pages)</li>
<li>item (the individual post page)</li></ul></p><p>We can replace the <code>&quot;index&quot;</code> section in the above example with either <code>&quot;archives&quot;</code> or <code>&quot;item&quot;</code> instead if we prefer to display only on archive or item pages.</p><h4><u>To clarify:</u></h4><p><span style="font-weight:bold;">If I want to display my welcome message on <u>archive</u> pages</span>, I would use this section of code:
<blockquote><code><b:if cond='data:page.type == &quot;archive&quot;'><br/>Welcome to my blog!<br/></b:if></code></blockquote></p><p><span style="font-weight:bold;">If I want to display this only on <u>item</u> pages</span>, I would use this code instead:
<blockquote><code><b:if cond='data:page.type == &quot;item&quot;'><br/>Welcome to my blog!<br/></b:if></code></blockquote></p><p>In your own blogs, of course, you may not wish to use this function to display a welcome message! In place of "welcome to my blog", you can insert any type of HTML code you like, such as an image, a hyperlink, and even an entire widget as we will explore below.</p><p>You can also wrap existing template code inside the <code>b:if</code> statements: simply type the first line above the section of content, and type the closing <code></b:if></code> tag directly below.</p><h3>How to display widgets on certain page types</h3><p>When we come to look at how widgets can be displayed on certain page types, the method is <span style="font-style:italic;">slightly</span> more complicated (but not much!).</p><p>We cannot wrap an entire widget section in the b:if tags:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjti5nBgDHdKkE_a6suudIpe6LklJpuCNxny8JbiSGnhgXLGV1-8uxUZCp_n_iA8E6wteatfv1NmaDxXzf2gpEn_CRs4Ki3dQWjKyYSkC2ZddNCjYU3GgX_vsLfX4xMsDU017KhswNnir4/s1600-h/b-if-conditions-widgets.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjti5nBgDHdKkE_a6suudIpe6LklJpuCNxny8JbiSGnhgXLGV1-8uxUZCp_n_iA8E6wteatfv1NmaDxXzf2gpEn_CRs4Ki3dQWjKyYSkC2ZddNCjYU3GgX_vsLfX4xMsDU017KhswNnir4/s400/b-if-conditions-widgets.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5210616821209099122" /></a></p><p>Instead, we must check the "expand widget templates" box near the top of the screen, and place the <code>b:if</code> tags just inside the <code>b:includable</code> tags which appear in the expanded widget template code.</p><p>Here is a diagram which displays where to add the two <code>b:if</code> lines to make a widget display only on the home page (click on the image for a larger version):</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL9IcanuXy2QKeJRiFuZt5Z3LtlZKroztK5oFOOFDcSBGblRnFTDTmLTW2w1aYQ1etvOzdHdAecAIKBSd2E12_57MPN21S4x__rM-4S-0fBhUye_FndJ3hsV4AfjtegylvPn5CJZKeawA/s1600-h/conditional-widget-code.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL9IcanuXy2QKeJRiFuZt5Z3LtlZKroztK5oFOOFDcSBGblRnFTDTmLTW2w1aYQ1etvOzdHdAecAIKBSd2E12_57MPN21S4x__rM-4S-0fBhUye_FndJ3hsV4AfjtegylvPn5CJZKeawA/s400/conditional-widget-code.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5210622364755923346" /></a></p><h4><u>To clarify:</u></h4><p>Place the initial <code><b:if cond='data:blog.pageType == &quot;index&quot;></code> tag just after the opening <code><b:includable id='main'></code> tag.</p><p>Place the closing <code></b:if></code> tag just before the closing <code></b:includable></code> tag.</p><p><span style="font-weight:bold;">Note:</span> if you paste the sections of conditional code in the wrong place, you will receive an error message and cannot save your modified template code.</p><h3>The "if not" statement</h3><p>Let's say I wanted to display my "Welcome to this blog" message on all page types except for post pages. It would be much easier to say "if this is not an item page, display my message" than to use two seperate statements for archive and index pages.</p><p>For this, we can use (what I call) the "if NOT" tags.</p><p>In the examples above, you will notice the page type statement contains two "equals" symbols before the page type, like this:
<pre class="code"><b:if cond='data:page.type <span style="font-weight:bold; color: red;">==</span> &quot;item&quot;'></pre></p><p>The doubling of the equals symbols basically tells Blogger:
<blockquote>If this page IS this particular type of page, display the following code.</blockquote></p><p>To tell Blogger to display a section if the page is NOT a particular page type (for example, if the page is NOT a post page), we can substitute the first equals sign with an apostrophe, like this:
<pre class="code"><b:if cond='data:page.type <span style="font-weight:bold; color: red;">!=</span> &quot;item&quot;'></pre></p><p>The closing <code></b:if></code> tag should remain the same.</p><h4><u>To clarify:</u></h4><p>In the examples above,<p><code>== &quot;[page-type]&quot;</code> (with two equals signs)</p><p>This means "If this IS the specified page type, display the content"</p><p><code>!= &quot;[page-type]&quot;</code> (with an exclamation mark followed by one equals sign)</p><p>This means "If this is NOT the specified page type, display the content.</p><p><span style="font-style:italic;">Note: these examples are just a part of the complete <b:if> template tags; for the entire conditional page type function to work, you will need to use the complete tags, as referenced above.</span></p><h3>There are some limitations...</h3><p>Unfortunately, there are some limitations when using page conditional tags in Blogger templates which I haven't yet been able to work around:</p><h5>The "index" page type also functions for search pages and label pages.</h5><p>Blogger's help center does state that one of the page types is "main", which refers to the home page.</p><p>However, using "main" in the pageType statement has never worked for me. Instead, we can use the "index" page type (not referenced in Blogger's help pages for some strange reason...), though this will also affect the search pages, which includes label pages too.</p><h5>We cannot display elements only on certain page URLS</h5><p>A few readers have asked if it is possible to display sidebar widgets only on certain post pages (which would be rendered by their unique URL).</p><p>I have tried many combinations of template tags, HTML and JavaScript code to accomplish this, but have had no success with this so far.</p><p>I have a feeling that Blogger may soon introduce password protected pages (since this is on the current wish list for user voting), though until such template tags are introduced, we are unable to display template elements for certain post URLs.</p><p>If anyone has successfully coded either of these two functions, please do get in touch to let me know how it may be achieved in Blogger!</p><h3>Conclusions</h3><p>Using the conditional page type function in our templates, we can choose to display widgets and other blog content only on index, archive and item pages. We can also choose not to display specified content on these page types.</p><p>I hope this tutorial has offered a good overview of how the b:if and data:page.type template tags can be used in your Blogger templates. Please let me know if this has been useful for you, or if there is anything you would like explained in more detail by leaving your comments 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-79680579590029448572008-06-02T22:00:00.000+01:002009-07-26T01:54:31.168+01:00Top Tips for a Faster Loading Blog<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgzXDvjJ2bBMzfhZFv3fVnr5CMkzF8Am9HvCIAH3ITFADgeQXJBznqz2_TXjLVrj0QZ4IZ_vz3KW3d_ALIIWSnYHkpYhA7Zlehjbp0u2G8_NI0qwP0Z0qS5PYQxrO3Z-wPtpq9RiUMZA/s1600-h/speed-blog-load-time.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgzXDvjJ2bBMzfhZFv3fVnr5CMkzF8Am9HvCIAH3ITFADgeQXJBznqz2_TXjLVrj0QZ4IZ_vz3KW3d_ALIIWSnYHkpYhA7Zlehjbp0u2G8_NI0qwP0Z0qS5PYQxrO3Z-wPtpq9RiUMZA/s400/speed-blog-load-time.gif" border="0" alt="Speed up your blog loading time"id="BLOGGER_PHOTO_ID_5207376201279883090" title="Decrease blog loading time" /></a>Blog readers can be quite impatient. When accessing your blog through search results, Stumbleupon or links to your blog, it is ideal that your entire blog page should load within a few seconds, otherwise such visitors may move on to another site instead.</p><p><span style="font-weight:bold;">The question, "How can I make my blog load more quickly?" is one which is asked often by readers of this site</span>. So in this post, I'll offer a few simple tips and tricks you could try which should ensure you have a faster loading blog.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>While you may think your blog loads quickly when viewed on your own computer, you should be aware that your visitors may be using different (and possibly slower) connections to access your pages.</p><p><span style="font-weight:bold;">The aim of a fast-loading blog is to ensure your pages load in a reasonable time for all connection types.</span></p><p>Those using dial-up will undoubtedly be used to slower page loading times than visitors who have DSL access; however you must also consider that search engine spiders need to access your site and can index pages much more quickly when a site is optimized for speed.</p><h3>Find out how quickly your site loads</h3><p>One of the best tools I have found for understanding page loading time is <a href="http://www.websiteoptimization.com/services/analyze/index.html">Web Optimization's web page speed report</a>.</p><p>This tool is very easy to use: simply type your blog's home page URL into the text box, and hit the "Submit Query" button:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6Iv4_Ok5nesf8N4U2QL9_0k2I8_HSLE1HJD_Ho1RougqTOjhFnrhVIc0Vdc9Zr-v0Bow5Ne3Pcb3mKUkvjioWGG34_nICYLfwLwQSn4OAypvygsO1ixjqPOquyQLo6FUMUEQbucvJHQ/s1600-h/web-page-speed-check.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6Iv4_Ok5nesf8N4U2QL9_0k2I8_HSLE1HJD_Ho1RougqTOjhFnrhVIc0Vdc9Zr-v0Bow5Ne3Pcb3mKUkvjioWGG34_nICYLfwLwQSn4OAypvygsO1ixjqPOquyQLo6FUMUEQbucvJHQ/s400/web-page-speed-check.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5207215784251377426" /></a></p><p>It does take a few minutes to parse the information from your website, though once the page has loaded, you will see loads of useful information about your site.</p><p>Now I admit that the information in this page can seem quite intimidating! This service is generally aimed at experienced webmasters who understand the technical details of HTTP requests, external objects and so on. The section we are most interested in is the "Analysis and Recommendations" which will look something like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnQcUKPHV-Rxi9O95FnJqBxb08dRJD2Fbj0u_zndbBiieonTk1wjSm_UXSaA7FpLPLGc9X1h4rUIHQX0E9S4gvLuv-BV_tCthMnoeHoqhQb-N03JrRitC6qddFRopH5XVzIFuXqOVthc/s1600-h/page-loading-analysis.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnQcUKPHV-Rxi9O95FnJqBxb08dRJD2Fbj0u_zndbBiieonTk1wjSm_UXSaA7FpLPLGc9X1h4rUIHQX0E9S4gvLuv-BV_tCthMnoeHoqhQb-N03JrRitC6qddFRopH5XVzIFuXqOVthc/s400/page-loading-analysis.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5207217631087314722" /></a></p><p>At a glance, we can see which areas of our blogs require some tweaking in order to load more quickly:
<ul><li>The sections highlighted in <span style="background: green; color:white;">green</span> are the areas of the site which have optimal performance, and do not need to be changed.</li>
<li>The sections highlighted in <span style="background: yellow; color:white;">yellow</span> are not critical, but could be optimized for better loading times.</li>
<li>Those sections highlighted in <span style="background: red; color:white;">red</span> demonstrate areas which really slow down page loading time, and are top of the list for immediate optimization!</li></ul></p><p>If all of these sections display in green and yellow when using this tool, you have little to worry about in regard to your page loading time. However, if you see many red sections you are advised to make some changes to your blog, or potentially lose readers due to excessive loading times!</p><p>Ideally, we need to work towards a page loading time of under 8 seconds using a 56k dial-up connection (page loading times will be much faster for DSL and T1 connections).</p><p>To achieve this optimal loading time, we need to <span style="font-style:italic;">try</span> to follow these guidelines:
<ul><li>The overall size of the page should not exceed 80kb</li>
<li>Use as few external JavaScripts as possible</li>
<li>Try not to display many images on each page, both in your posts and blog template</li>
<li>Aim for the smallest file size possible for your images</li>
<li>Reduce the size of your CSS (style) section wherever possible!</li>
<li>Make few HTTP requests (in other words, aim to have scripts, images and any other external elements on as few servers as you can!)</li></ul></p><p>This may seem like a lot of work, and if you are new to blogging or web design, it may also seem bewildering! So rather than focus on each factor in great technical detail, I'm going to suggest 6 useful methods you could use to reduce your blog loading time dramatically.</p><h3>1. Remove any widgets/scripts you don't <span style="font-style:italic;">really</span> need</h3><p>Unofficial Blogger widgets and JavaScripts can add some great interactive elements to your layout. Unfortunately, each different widget/script you use will need to be referenced from a different server (known as HTTP requests), and will slow down page loading time.</p><p>So take a look at all of the widgets and scripts you use in your Blogger layout:
<ul><li>Do you really need to have each and every single widget?</li>
<li>Does each widget offer some value to your readers?</li>
<li>Would your readers really notice (and complain) if you removed a few of these widgets/scripts from your layout?</li></ul></p><p>If you answered "no" to these questions in regard to some of the scripts you use, you should consider removing them from your template altogether.</p><p>I know that widgets can help your blog appear more pretty, but consider the impact on your page loading time: you could be losing precious readers if these slow your page down!</p><h3>2. Try to reduce the amount of images you use in your layout</h3><p>Loading externally hosted images is another high contribution to your page loading time. So if you use a lot of image-based buttons; feature many image widgets in your sidebar, or use a template which is heavily image based, try cutting down on these to see if this may help your blog load more quickly.</p><p><span style="font-weight:bold;">Bonus Tip!</span></p><p>If you really don't want to reduce the number of images you use in your template, you could host these with Blogger instead of an external image host.</p><p>To do this, create a new blog post, and upload all of the images you would like to use to this post. These images will then be hosted on one of Blogger's image servers.</p><p>Preview your post, and right click on each of these images. You should be able to copy the image location, which you can use to replace the image URLs in your template code.</p><p><span style="font-weight:bold;">Using this trick reduces the number of HTTP requests for your images</span>: all of the images you use will be hosted by Blogger, rather than a completely different host. This can have a dramatic impact on your page loading time, especially as Blogger's servers are hosted by Google (which in theory, should be one of the most stable hosts in the world...)</p><h3>3. Reduce the file size of your images</h3><p>Another method of reducing the impact of images on page load time is to <span style="font-weight:bold;">reduce the file size (not actual size) of all images used</span> (whether in posts or layout).</p><p>Many image manipulation programs allow you to optimize images for the web, which reduces the overall file size (in bytes and kilobytes) of the image.</p><p>You may also like to try using an <a href="http://tools.dynamicdrive.com/imageoptimizer/" title="Reduce the file size of images">online image optimizer</a> to reduce the size of your images. There may be some loss of quality (especially for larger images) but on the other hand, your overall page loading time will be reduced.</p><h3>4. Simplify your CSS</h3><p>The CSS section of your Blogger template takes up a lot of the overall file size of your blog pages. This is because each element of your <b:skin> (or <style> for those using classic Blogger templates) is featured on a separate line. There is a lot of unnecessary "white space" (page breaks, indentations and spaces) and possibly HTML comments.</p><p>By eliminating unnecessary white space and HTML comments, you can reduce the overall size of your blog pages. However, doing this can make it difficult to edit the style section afterwards!</p><p>If you would like to improve page loading time by optimizing the style section of your Blogger template, here is the easiest method you could use:
<ol><li>Copy all of the code between the <b:skin> and </b:skin> tags in your blog's HTML code (for classic template users, this is the section between the <style> and </style> tags).</li>
<li>In a new browser window or tab, visit the <a href="http://www.cssoptimiser.com/" title="Optimize your CSS code">CSS Optimizer website</a>, and paste your style code into the "direct input" box.</li>
<li>Click the "Optimize" button (there is no need to check the box which says "do not remove line breaks").</li>
<li>The next page will offer your optimized style code inside a text box, along with data of how much this has been compressed.<br/><br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcaCGa49QboR-kL15KdAx3v6TZZQxqgcGeheQ8RfTKkzJZk6y8ORPDZfigAJVQp3zUuMH70fjtOSQeZriHfpItTaXVCraLXpjW_r2rL2yp_gs88Nl_NT7Ae2dSdg7-0KMFaftsuHzPaA/s1600-h/css-optimizer.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcaCGa49QboR-kL15KdAx3v6TZZQxqgcGeheQ8RfTKkzJZk6y8ORPDZfigAJVQp3zUuMH70fjtOSQeZriHfpItTaXVCraLXpjW_r2rL2yp_gs88Nl_NT7Ae2dSdg7-0KMFaftsuHzPaA/s400/css-optimizer.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5207331533620004658" /></a><br/><br/>Copy all of this code to your clipboard.</li>
<li>Replace all of the existing code in your Blogger template (between the <b:skin> or <style> tags with this optimized code.</li>
<li>Preview your template to ensure your template displays properly with these modifications, and finally save your template.</li></ol></p><h3>5. Optimize the placement of scripts/widgets in your template</h3><p>There will undoubtedly be some externally hosted widgets and JavaScript's you would like to keep in your layout. To improve the impact these have on blog loading time, you can move these towards the bottom of your template code.</p><p>If you use a widgetized layout, move such widgets to your right-hand sidebar (or possibly even the footer section) of your blog. This will ensure that your blog content will appear before these scripts begin to load, so visitors can appreciate your posts while the page continues loading.</p><h3>6. Reduce the number of posts which appear on your front page</h3><p>Each post which appears on your home page will add to the overall file size and loading time of your blog.</p><p>Even if you only display summaries of your posts on the home page, the entire HTML code for your posts will be visible in the source code. This is because the post summary hack hides the main part of the post using CSS.</p><p><span style="font-weight:bold;">When choosing how many posts to display on the home page, you should consider the general length and style of your blog posts.</span></p><p>If you write around 5-600 words for each post, using few or small images (and infrequent multimedia), then 5-7 posts would be optimal to display on your home page.</p><p>If you write much longer posts (as I do here at Blogger Buster); use many images, or video in posts, any more than 3 or 4 posts would slow down the loading time of your blog.</p><p>On the other end of the scale, if your posts are generally short with few (if any) images, you could probably display 10 or more without affecting page load time.</p><p>To change the number of posts which can be displayed on your blog's home page, go to Settings>Formatting while logged in to your Blogger dashboard. The first option enables you to choose how many posts are displayed on the front page:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhila8y8HkznlU7dwpBXFLX5-3sdCesUwFsfUU9PHsjNk14im74XMg2okDj68rYPmgCbc0pUG_DIFBITeseEjet6zc3BBW_biK4_zJYMgd-sakUHgW4Y8ZlJ4VygLAtGghl-JhlKKQ7owQ/s1600-h/blog-loading-time-posts.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhila8y8HkznlU7dwpBXFLX5-3sdCesUwFsfUU9PHsjNk14im74XMg2okDj68rYPmgCbc0pUG_DIFBITeseEjet6zc3BBW_biK4_zJYMgd-sakUHgW4Y8ZlJ4VygLAtGghl-JhlKKQ7owQ/s400/blog-loading-time-posts.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5207368947080120130" /></a></p><h3>Overview</h3><p>When considering how to reduce blog loading time, the main thing to consider is reducing the amount of code and files which are used in your blog's mark-up.</p><p>Removing (or optimizing) as much unnecessary JavaScript and images as you are able; reducing the number of posts displayed on the main pages, and optimizing the style section of your blog's template code will certainly help your blog to load more quickly. This is beneficial for new visitors who may become impatient while waiting for large pages to load, and is also a key aspect of optimizing your blog for search engines (as spiders are able to crawl your content more quickly.</p><p><span style="font-weight:bold;">A word of caution...</span></p><p>I must tell you that Blogger Buster (in it's current form) is NOT a good example of optimal blog loading time!</p><p>The template I use currently requires lots of JavaScript and images; in this instance I have forsaken page loading time for aesthetic appeal...</p><p>In researching blog loading time and methods of optimization for this post, I have learned the value of a fast loading blog, and also many methods I could use to ensure this blog loads much more quickly.</p><p>Over these next few weeks, I will "practice what I preach" by gradually toning down the use of scripts and images. A faster loading blog will be of benefit to us all!</p><p> <span style="font-weight:bold;">What do you think?</span></p><p>In this article, I've tried to cover the most significant changes you can make to optimize the loading time of your Blogger blog. Have you used other methods to speed up your own blog's loading time? If so, which methods did you use to achieve this?</p><p>Feel free to leave your own ideas and comments by leaving a message 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-72563856834507105452008-05-28T23:00:00.001+01:002009-07-26T02:00:13.715+01:00How to Print your Blogger Posts Effectively<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaqE8CZq6z9Oz4hny2btzUVg9CzS8iKaU9sRzKbX3MehK30go1csXod2bzLjwwkb96b8-7Oz1cfrku_iUEm3Ebsb8KOHBcNZZukOgoJWVpbPhpmCvdjlv_JkIO1AVD0jbh4P8pT3DjqE4/s1600-h/blogger-print-posts.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaqE8CZq6z9Oz4hny2btzUVg9CzS8iKaU9sRzKbX3MehK30go1csXod2bzLjwwkb96b8-7Oz1cfrku_iUEm3Ebsb8KOHBcNZZukOgoJWVpbPhpmCvdjlv_JkIO1AVD0jbh4P8pT3DjqE4/s320/blogger-print-posts.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5205501542544459490" /></a>As many of the posts here are tutorials, I thought it would be useful for readers to print off individual blog posts for future reference. Sure, it would be possible for a reader to choose the "print" option from their web browser window, but this would have printed the header, sidebars and other irrelevant sections of the blog, wasting paper and ink and time.</p><p>Using a combination of CSS and JavaScript, I've developed a simple yet effective method of printing <span style="font-style:italic;">only the blog post</span> (and comments) from each blog page.</p><p>In this post, I'll explain how you can also add <span style="font-weight:bold;">effective print functionality to your Blogger posts in just two simple steps</span>.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>To get an idea of what this post would appear like when printed, use the "Print Preview" function in your web browser. Whereas the current page appears colorful and includes the header, sidebars and other elements of this template, printed pages from this blog will appear like this instead:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAW7jYADKNdnQPMmCdGYlFDxbfPtYJFLlGby4LQS6S2lHtFreMZ4LSk940iTDMDSAMbmpFdUztZmKDeN3Xji3w0AwcQcuERhe-fX_db6eicvGoxhS6_0YIArDkOjaiWj_rsnFpwaEURY/s1600-h/blogger-print-preview.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAW7jYADKNdnQPMmCdGYlFDxbfPtYJFLlGby4LQS6S2lHtFreMZ4LSk940iTDMDSAMbmpFdUztZmKDeN3Xji3w0AwcQcuERhe-fX_db6eicvGoxhS6_0YIArDkOjaiWj_rsnFpwaEURY/s400/blogger-print-preview.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5205529975227959026" /></a></p><p>As you can see in this example:
<ul><li>The header and sidebar sections do not appear</li>
<li>Text is black printed against a plain white background</li>
<li>The post spans the width of the printed page</li>
<li>The post retains images and formatting</li>
<li><span style="font-weight:bold;">Only the necessary areas will be printed!</span></li></ul></p><h3>How to install effective printing format for your Blogger posts</h3><p>Although it took me a few attempts to ensure my posts would print in this way, I have created this tutorial to make it simple and fast for you to install in your own blogs.</p><p>There are only two steps to add this functionality to your own Blogger template:
<ol><li>Add a few lines of CSS code (to make printed pages appear in this way)</li>
<li>Add one line of JavaScript beneath your posts (which creates a link for readers to print the post)</li></ol></p><p>There are a few different options for the style of the print link, as I'll explain below.</p><h4>Add CSS Style Code to your Blogger Template</h4><p>To add the print styling code to your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and search for the closing <code></head></code> tag.</p><p>Immedietly before this line, add the following lines of code (copy and paste this directly to your Blogger template):
<div style="width: 100%; padding: 5px 10px;"><code><style media='print' type='text/css'><br/>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}<br/>
#main-wrapper {width: 95%}<br/>
</style><br/></code></div></p><p>If you like, you can preview your blog before saving. On this preview page, you'll be able to see the print preview displays only your blog posts (not the sidebar or other unwanted areas).</p><p>Finally, save your template.</p><h4>Add a "Print this post" link</h4><p>To notify your readers that your posts can be printed effectively, you'll probably want to add a "Print" link beneath each of your Blogger posts.</p><p>I've created three different styles for the print link, so you can choose the option which works best for your overall design.</p><p>To add the print link, go to the "Edit HTML" page again, and this time ensure that you've ticked the "expand widget templates" box.</p><p>Now search for this line:
<pre class="code"><p><data:post.body/></p></pre>
Immediately after this line, paste one of these three sections of code:</p><p><small><span style="font-weight:bold;">For a simple text link:</span></small><div style="width: 25%; float: left;"><a href='javascript:window.print()'>Print this post</a></div><div style="width: 60%; float: right; border: 1px solid #ccc; padding: 5px; overflow: auto;"><code><b:if cond='data:blog.pageType == &quot;item&quot;'><br/><a href='javascript:window.print()'>Print this post</a><br/></b:if></code></div><div style="clear: both;"></div></p><p><small><span style="font-weight:bold;">For a button link</span></small><div style="width: 25%; float: left;"><form>
<input type="button" value="Print This Post" onClick="window.print()" /></form></div><div style="float: right; width: 60%; border: 1px solid #ccc; padding: 5px; overflow: auto;"><code><b:if cond='data:blog.pageType == &quot;item&quot;'><br/><form>
<input type="button" value="Print This Page" onClick="window.print()" />
</form><br/></b:if></code></div><div style="clear: both;"></div></p><p><small><span style="font-weight:bold;">For a snazzy link with printer icon</span></small><div style="float: left; width: 25%;"><span style='background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span></div><div style="float: right; width: 65%; overflow: auto; border: 1px solid #ccc; padding: 5px;"><code><b:if cond='data:blog.pageType == &quot;item&quot;'><br/><span style='background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span><br/></b:if></code></div><div style="clear: both;"></div></p><p>Once you have added this code, save your template. These links will only be visible on post pages (to enable visitors to print the full post and any comments which appear beneath the post), so visit one of your post pages to see the link in action.</p><p>You can see an example of the print link near the bottom of this post. If you click on this link, you will be prompted to print this entire post (and comments) using your default printer.</p><h3>Why it may be useful to enable printing for your Blogger posts</h3><p>If you publish tutorials or lengthy content, your readers may benefit greatly from being able to print and read your posts offline.</p><p>Using the methods outlined here, readers can print only the content of your posts, and not the unnecessary distractions of the sidebar, footer and header sections (which saves on paper and printer ink too!).</p><p>You may also want to print off your blog posts for your own benefit, such as to back up your posts in print format, or to demonstrate your abilities in a print portfolio.</p><p>Unlike other plugins I have come across, this method also allows you to print any comments under your post too. Comments can add a great deal of value to blog posts, and may contain reader insights which are not included in the body of the post itself.</p><p>I hope this tutorial has been useful for you! Please feel free to print this off for future reference ;) and as always your comments are most welcomed.</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-89004823152981392312008-05-22T00:00:00.000+01:002008-05-22T00:00:00.866+01:00How to Highlight Author Comments<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirTwqKGrmTcz3vz9AtAvpJEvxCvkFgmTuemR9HZY0oR5IUNJ_pR5QFT030fPWcxNfxD7TzZ-LoUwDTDZlCypMwWp3HrhYGH41u_L4oAuAKYTi1YV_1VV3aqj-HKlkGMSddP1vfRYaKEBo/s1600-h/highlight-author-comments.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirTwqKGrmTcz3vz9AtAvpJEvxCvkFgmTuemR9HZY0oR5IUNJ_pR5QFT030fPWcxNfxD7TzZ-LoUwDTDZlCypMwWp3HrhYGH41u_L4oAuAKYTi1YV_1VV3aqj-HKlkGMSddP1vfRYaKEBo/s400/highlight-author-comments.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5202934345511332338" /></a>Highlighting author comments using a different background color, border or different style of text helps readers understand when you have personally posted a response.</p><p>So far, "How to Highlight Author Comments" has been the most requested article in my Skribit widget, so <span style="font-weight:bold;">in this post I'll explain how you can change comments which you have posted yourself to distinguish these from other comments on your posts</span>.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h3>First things first!</h3><p>The main obstacle I've faced in writing up this article so far is that <span style="font-weight:bold;">different Blogger templates code the comments section differently</span>.</p><p>While the easiest method for me to write would have been to say "Find this code and replace it with this", such a method would only be usable by bloggers whose template matches the code.</p><p>Instead, my explanation may be a little more complicated than usual, though I hope this explanation will ensure <span style="font-style:italic;">anyone using a Blogger template</span> will understand how to implement the highlighted author comments hack!</p>
<h3>Backup your Blogger Template!</h3><p>Before even attempting to customize your Blogger template, the first thing you should do is back up your template. This ensures you can easily restore your original template if something goes wrong. Also, as most of us cannot see comments unless we are viewing a post page, it would be impossible to see if code changes have adversely affected the comments section.</p><p>To make a backup of your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link. This will save your existing template as an XML file which you could use to restore your blog, just in case :)</p>
<h3>Finding the Comments Block in your Blogger Template</h3><p>The first thing we need to do in order to implement this hack is to locate the "comments block" within your Blogger template.</p><p>To find the comments section, <span style="font-weight:bold;">you will need to tick the "expand widget templates" box</span> as this code is contained within your main "Blog Posts" widget.</><p>As I've already pointed out, the section of code used to display comments varies in different templates, so in order to find this section, <span style="font-weight:bold;">you may need to search for some specific tags rather than complete sections of code</span>.</p><p>To give you an idea of what you are searching for, here is the complete comments-block code from the Minima template:</p><div style="padding: 10px;"><code>
<dl id='comments-block'><br/>
<b:loop values='data:post.comments' var='comment'><br/>
<dt class='comment-author' expr:id='data:comment.anchorName'><br/>
<a expr:name='data:comment.anchorName'/><br/>
<b:if cond='data:comment.authorUrl'><br/>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br/>
<b:else/><br/>
<data:comment.author/><br/>
</b:if><br/>
<data:commentPostedByMsg/><br/>
</dt><br/>
<dd class='comment-body'><br/>
<b:if cond='data:comment.isDeleted'><br/>
<span class='deleted-comment'><data:comment.body/></span><br/>
<b:else/><br/>
<p><data:comment.body/></p><br/>
</b:if><br/>
</dd><br/>
<dd class='comment-footer'><br/>
<span class='comment-timestamp'><br/>
<a expr:href='data:comment.url' title='comment permalink'><br/>
<data:comment.timestamp/><br/>
</a><br/>
<b:include data='comment' name='commentDeleteIcon'/><br/>
</span><br/>
</dd><br/>
</b:loop><br/>
</dl><br/></code></div>
<p>If you are using Minima (or a similar template) you should be able to locate this section of code easily. However, some templates use <ul> and <li> instead of <dl> and <dd> tags, in which case the code you are looking for may look more like <a href="http://bloggerbuster.com/af/comments-ul-list.txt">the section on this page</a> instead, or could even be wrapped in simple <div> tags.</p><p>If you are having trouble locating the comments section in your blog's HTML code, do a CTRL+F (or CMD+F for Mac users) search within your template code for the following template tags:
<ul><li><code><b:loop values='data:post.comments' var='comment'></code></li>
<li><code><data:comment.author/></code></li>
<li><code><data:comment.body/></code></li>
</ul></p><p><span style="font-weight:bold;">The comments section of your blog's HTML code should contain all three of these template tags</span>. Simply locate these tags and the surrounding code in your template, then work out where this section begins and ends using your discretion.</p><p>Generally speaking, this section will usually begin with <dl> or <ul> or <div> and end with a matching closing tag.</p><h3>Changing the comments code to add author highlighting</h3><p>Once you have located your comments section in your blog's HTML code, you will need to highlight this entire section of code and replace it with the following section of code instead:</p>
<div style="width: 100%; height: 300px; overflow: auto;"><code> <ul class='commentlist' style='margin: 0; padding: 0;'><br/>
<b:loop values='data:post.comments' var='comment'><br/>
<b:if cond='data:comment.author == data:post.author'><br/>
<br/>
<li class='author-comments' style='margin: 0 0 10px 0;'><br/>
<b:if cond='data:post.dateHeader'><br/>
<div class='commentcount'/><br/>
</b:if><br/>
<cite><br/>
<b:if cond='data:comment.authorUrl'><br/>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a><br/>
<b:else/><br/>
<data:comment.author/><br/>
</b:if><br/>
</cite><br/>
<br/><br/>
<div style='clear: both;'/><br/>
<b:include data='comment' name='commentDeleteIcon'/><br/>
<p><data:comment.body/></p><br/>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'><br/>
<data:comment.timestamp/><br/>
</a></div><br/>
<br/>
<div class='clear'/><br/>
<br/>
</li><br/>
<br/>
<br/>
<b:else/><br/>
<br/>
<li class='general-comments' style='margin: 0 0 10px 0;'><br/>
<b:if cond='data:post.dateHeader'><br/>
<div class='commentcount'/><br/>
</b:if><br/>
<cite><br/>
<b:if cond='data:comment.authorUrl'><br/>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a><br/>
<b:else/><br/>
<data:comment.author/><br/>
</b:if><br/>
</cite><br/>
<br/><br/>
<div style='clear: both;'/><br/>
<b:include data='comment' name='commentDeleteIcon'/><br/>
<p><data:comment.body/></p><br/>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'><br/><br/>
<data:comment.timestamp/><br/>
</a></div><br/>
<div class='clear'/><br/>
</li><br/>
<br/>
</b:if><br/>
</b:loop><br/>
</ul><br/></code></div>
<p>The simplest way to change your comment code is to follow these steps:
<ol><li>Copy the code above to your clipboard</li>
<li>Highlight the entire section of your comment code in your Blogger template</li>
<li>Paste the code from your clipboard in place of the existing code by keying CTRL+V (or CMD+V).</li></ol></p><p>One quick method to check if you have made code errors is to preview your template. If you have accidentally omitted some code, you will receive an error message. In this case, you should press the "clear edits" button and begin again.</p><p>If you don't get an error message, you can then proceed to save your template.</p><h3>Adding style for author comments</h3><p>At this stage, your own comments will still appear in the same style as other comments. <span style="font-style:italic;">To highlight author comments, we need to add some style code to your blog template.</span></p><p>This step is much easier than locating and changing the comment section. Simply locate the closing <code></b:skin></code> tag in your Blogger template, and immedietly before this, paste the following section of code:</p>
<div style="padding: 5px;"><code>.author-comments {<br/>
background: #cccccc;<br/>
border: 1px solid #333333;<br/>
padding: 5px;<br/>
}</code></div>
<p>If you prefer, you can change the hex colors (#cccccc and #333333) to match the color scheme of your own template (discover the color codes for your preferred schemes using <a href="http://www.bloggerbuster.com/2007/02/web-color-calculator-find-hex-values.html">the web color calculator</a>).</p><p>Then save your template.</p><p>Now when you make a comment on your blog while signed in to your Blogger account, <span style="font-style:italic;">your comments will have a different border and background color to comments posted by your readers.</span></p><p>Here is the effect of this author comment highlighting hack <a href="http://test-blog-3000.blogspot.com/2008/01/test.html">as seen in one of my test blogs</a>:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikcHPgHz3Z9dwycvXtaenLCstHdc6NjFhUNhMnUm0_kGD_NMzSV0K4ntI0jX31ZbzTGJtTRaRc1YzqErTtz-Ash58W68N84uG6VXlog_2EEg2yv-48n5r8dbEILsY63Yhk94GQgYPJgIo/s1600-h/author-comment-highlight.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikcHPgHz3Z9dwycvXtaenLCstHdc6NjFhUNhMnUm0_kGD_NMzSV0K4ntI0jX31ZbzTGJtTRaRc1YzqErTtz-Ash58W68N84uG6VXlog_2EEg2yv-48n5r8dbEILsY63Yhk94GQgYPJgIo/s400/author-comment-highlight.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5202932064883698146" /></a></p><p>I hope this tutorial has helped you discover how to highlight author comments in your own Blogger blogs.</p><p>You may also be interested to read <a href="http://www.bloggerbuster.com/2007/11/how-to-add-comment-avatars-to-see-your.html">how I added MyBlogLog comment avatars</a>, which is the method I use here to distinguish between my own and readers comments.</p><p>Please let me know your opinions of this post by leaving your comments 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-13970676841422301742008-05-20T21:42:00.004+01:002009-07-26T02:00:13.715+01:00How to Display More then 5 Recent Posts<p>My latest post at Blogging Tips explains <a href="http://www.bloggingtips.com/2008/05/19/display-more-than-5-recent-posts-in-blogger-sidebar/">three different methods you could use to display more than 5 recent posts in your Blogger sidebar</a>.</p><p>A few people have asked how to do this (even more so through Blogging Tips) so if this is something you are interested in learning about, please pop over to read this article in full.</p><p>I really do appreciate suggestions for future posts here at Blogger Buster, and am currently writing up articles which have received the most votes in the Skribit widget in the sidebar.</p><p>Please do vote up any suggestions which you would like to see written about soon, or add anything you think should be included by using the "Suggest a Future Post" link at the top of the widget.</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-16567804518716222722008-05-17T18:00:00.001+01:002009-07-26T02:01:38.763+01:00How to Install Intense Debate Comments in Blogger Blogs<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPSUm_8VM9SxtjqUDXR7AyU3bm7kaZ7mhLcz64ELfCz-xVK9IRVu8Q_MtgkaCmOvpRo7smPQlEsHVuiOum0ZPwp2lIS8VYxtbkbd2Iu6Q4gKHwuQ12uSmZMoWFJFiEBwJCYAgkhwT53U/s1600-h/intense-debate.PNG"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPSUm_8VM9SxtjqUDXR7AyU3bm7kaZ7mhLcz64ELfCz-xVK9IRVu8Q_MtgkaCmOvpRo7smPQlEsHVuiOum0ZPwp2lIS8VYxtbkbd2Iu6Q4gKHwuQ12uSmZMoWFJFiEBwJCYAgkhwT53U/s320/intense-debate.PNG" border="0" alt=""id="BLOGGER_PHOTO_ID_5198461786731233250" /></a><a href="http://www.intensedebate.com/">Intense Debate</a> is a commenting system which is designed to inspire conversation. Including such features as threaded comments (allowing readers to reply to each other in comment threads), avatars and a voting system, many Blogger users are now choosing this as an alternative to the default Blogger commenting system.</p><p>Many readers have requested a tutorial about installing and using Intense Debate. So in this post I'll explain exactly what this new service has to offer, and how easily this can be installed in your Blogger powered blogs (including some troubleshooting tips to make sure everything runs smoothly!)</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h3>What Are the Main Features of Intense Debate?</h3><p><a href="http://www.intensedebate.com/">Intense Debate</a> is a fully featured commenting system which provides many more features than Blogger's standard comments, including:
<ul><li>Comment form beneath posts (on the same page)</li>
<li>Threaded comments, which allow commenters to reply directly to each other and be visible as a comment "heirachy"</li>
<li>Comment avatars (of registered Intense Debate members)</li>
<li>The ability to vote comments up/down (so the most popular comments can float to the top of the list)</li>
<li>Profiles for registered members, which include links to members' blogs and social media profiles</li>
<li>Widgets for top commenters and recent comments which you can add to your Blogger layout with ease</li></ul></p><p>You can <a href="http://www.intensedebate.com/features">read about these features in full detail</a>, or watch the two minute video of Intense Debate functionality which explains this service in a snap!</p><h3>How to Install Intense Debate in your Blogger Blog</h3><p>It is surprisingly easy to install Intense Debate commenting in your Blogger template! Even when I tried this method for non-standard and highly customized templates, I found this method worked just fine.</p><p>If you would like to use Intense Debate as an alternative to Blogger's commenting system, here is what you should do:
<ol><li>Head over to the Intense Debate home page and add your blog's URL in the box provided. Then click on the Install Intense Debate" button:<br/><br/>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJtD7fi9uVmTHCnO9neW4cH4WtHnFhOBi8lpcniLbRiEtJzuoc8lH0yvm4R1JnS1UBXvtzXUSTXbOtbZIxRoftwTI9MkJycpW10Z0HoKkm1gqS7iQnqUGEaOu00OSC66r8DTDjRcIpoM/s1600-h/install-intense-debate-blog.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJtD7fi9uVmTHCnO9neW4cH4WtHnFhOBi8lpcniLbRiEtJzuoc8lH0yvm4R1JnS1UBXvtzXUSTXbOtbZIxRoftwTI9MkJycpW10Z0HoKkm1gqS7iQnqUGEaOu00OSC66r8DTDjRcIpoM/s400/install-intense-debate-blog.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5198470084608049138" /></a></li>
<li><span style="font-weight:bold;">If your blog is hosted on Blogspot</span> (eg: yourblog.blogspot.com), Intense Debate will automatically detect your blogging platform.<br/><br/><span style="font-weight:bold;">If you use a custom domain</span> (eg: www.yourblog.com), you will need to choose Blogger as your blogging platform.<br/><br/>Once Intense Debate is sure of the platform you are using, you will see a screen like this:<br/><br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YFg6mx-cHuN7pV5bqj9WNmZNDvxp7Tv746VGNun7fw5iSNUbk0rRW7CbFMQiboD4WV2jbWJhvNB8OTOUlBamqVgSBtIl20m9FH5i-nTjIsxSNsO6N6IyE69bLSRLCKoIN-__oF7NgaA/s1600-h/intense-debate-install.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YFg6mx-cHuN7pV5bqj9WNmZNDvxp7Tv746VGNun7fw5iSNUbk0rRW7CbFMQiboD4WV2jbWJhvNB8OTOUlBamqVgSBtIl20m9FH5i-nTjIsxSNsO6N6IyE69bLSRLCKoIN-__oF7NgaA/s400/intense-debate-install.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5198473374552997890" /></a><br/><br/>Here you have the choice of installing Intense Debate comments as a widget (the easy method) or directly in your Blogger template, to appear below your posts (the recommended method).<br/><br/><span style="font-weight:bold;">If you choose to add this as a widget</span>, simply click on this option and follow the steps to add this as a widget in your blog sidebar.<br/><br/><span style="font-weight:bold;">If you would prefer to use the full commenting system</span>, continue reading instead!</li>
<li>Installing the full Intense Debate commenting system really is a breeze! In this case, you will need to follow the steps provided on the installation page to make a back-up of your full Blogger template by going to Layout>Edit HTML in your Blogger dashboard, and clicking on the "Download full template" link.<br/><br/>This saves a copy of your existing blog template (including any widgets and customizations) to your computer.<br/><br/>Once you have done this, go back to the Intense Debate installation screen and click the "Browse" button to locate your template file on your computer.</li>
<li>Next, you have a decision to make: you can either:
<ul><li>Choose to install Intense Debate on posts where there are no existing comments</li>
<li>Choose to replace all comments with Intense Debate comments instead.</li></ul>
If you do choose to replace all comments, these existing comments will not be lost! You can retrieve and import these to Intense Debate afterwards if you choose to do so (as shall be explained shortly).<br/><br/>Check the radio selection for the option you prefer, then click the "Upload file and continue" button.</li>
<li>On this next screen, you will see a box filled with code. This is your Blogger template code which has been modified to include the Intense Debate commenting system.<br/><br/>Copy all of the code in this box to your clipboard. Then go to Layout>Edit HTML in your Blogger dashboard.</li>
<li>Replace all of your existing template code with this modified code from Intense Debate.<br/><br/>You can check that you have installed this correctly by previewing your changes. If the installation was successful, you will receive no error notifications and can proceed to save your template.</li>
<li>Finally, click on the "Finish" button right near the bottom of the Intense Debate installation page. Then visit your blog in your web browser to check out your new commenting system!</li></ol></p>
<h3>Changing the Comment Settings</h3><p>Once you have installed Intense Debate comments in your Blogger blog, you may like to change some of the settings to suit your individual requirements.</p><p>To change your Intense Debate settings, you will need to access your Intense Debate dashboard and click on the "settings" link for the blog you wish to access.</p><p>Here are the different comment settings you can change to suit your needs:
<ul><li><span style="font-weight:bold;">Blog Info</span>: Here you can alter any details for your blog, such as the URL, blog title and RSS feed.</li>
<li><span style="font-weight:bold;">Comment Posting</span>: This section includes any moderation opions you may wish to alter. You can choose to moderate all comments before they appear beneath your blog posts; moderate posts containing words in a blacklist, and even automatically delete comments if they contain certain "banned" words and phrases.</li>
<li><span style="font-weight:bold;">Email Notifications</span>: Choose whether you would like an email to be sent to blog authors whenever a new comment is posted (similar to Blogger's comment settings).</li>
<li><span style="font-weight:bold;">Display Settings:</span> If you would like to enable "threads" (this allows a person to comment directly to another commenter), tick the appropriate box. You can also set the default order of comments (readers will be able to re-order this list for themselves if they choose).</li>
<li><span style="font-weight:bold;">Comment Link Text</span>: In this section you can choose to alter the text used for your comment links. By default this is set to Comments ([#]) where [#] is the number of comments. You could change this to "[#] Responses", "Observations: ([#])" or indeed any other link text which you prefer!</li>
<li><span style="font-weight:bold;">Add another blog admin</span>: This setting allows you to add new moderators who can access your Intense Debate settings, which is useful for group bloggers.</li></ul></p><h3>Changing the Appearance of your Intense Debate Comments</h3><p>When you first install Intense Debate comments, you will notice <span style="font-weight:bold;">the color scheme and fonts match those already present in your template!</span> This is lucky since Intense Debate do not recommend that you alter the CSS for your comments (this is still in beta, the code used may alter and render such changes invalid).</p><p>There are however a few changes you can make from within your Intense Debate dashboard. To access these layout settings, go to your Intense Debate dashboard and click on the "Layout" link for the blog layout you wish to alter.</p><p>From this page, you will be able to alter the following settings:
<ul><li><span style="font-weight:bold;">Comment Size</span>: This setting means you can alter the avatar and font size for each comment as "compact", "normal" or "large".</li>
<li><span style="font-weight:bold;">Button Style</span>: This affects how links to "post a comment", "post-reply" and "submit" are displayed in your comment section. Choose from either a button or text link style (which appear like normal links in your posts)</li>
<li><span style="font-weight:bold;">Comment Layout</span>: This option enables you to change how comments appear beneath your posts. The default setting is for comments to be permanantly displayed beneath each post. Alternatives include "peekaboo comments" (activated by clicking on the comment link), and comments in a pop-up page.<br/><br/>Most bloggers choose the default (comments already present beneath posts) setting, which is also my personal preference as clicking on a link adds another step for readers and offers less incentive for actually leaving a comment on your posts.</li></ul></p><p>One thing you may notice on the layout page is that "Chameleon" is the only choice of style for your Intense Debate comments, though there is an image which suggests other styles may become available soon:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpX-Xz4brQkShw2B86rDVHJS8cWPmPXAOIu_Wc12PSGW0Eff6Dfcjw11xEC3BglxtHs8yOscc2_1cfezWyM2N9i7-3jvdQgrXndD3vfZvZFAMaGaLWGTkK4kOEaUQ_u1GcG-uXooF4c6A/s1600-h/intense-debate-comment-styl.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpX-Xz4brQkShw2B86rDVHJS8cWPmPXAOIu_Wc12PSGW0Eff6Dfcjw11xEC3BglxtHs8yOscc2_1cfezWyM2N9i7-3jvdQgrXndD3vfZvZFAMaGaLWGTkK4kOEaUQ_u1GcG-uXooF4c6A/s400/intense-debate-comment-styl.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5201137167985928578" /></a></p>
<h3>Import Existing Comments from Blogger</h3><p>If you choose to install Intense Debate for all your existing blog posts (including those posts which already have comments) you may prefer to import any existing comments from Blogger to be displayed alongside your new Intense Debate comments.</p><p>Importing your old comments is very easy. Simply go to your Intense Debate dashboard and click on "Overview" for the blog whose comments you wish to import.</p><p>Next click on the "Blog Tools", then on the "Import Comments" link in the left hand column.</p><p>On this page, you will be prompted to log in to your Blogger account, which will allow Intense Debate to access the API for importing your comments. Once logged in, you will be able to choose which blog you wish to import from and to (be sure to import/export comments from the same blog, otherwise Intense Debate will not be able to allocate them to the correct posts!).</p><p>When you choose to import these comments from Blogger, the existing comments will not be deleted! If you decide to uninstall Intense Debate for any reason, you can export all your Intense Debate comments to an XML file, and restore the view of your existing Blogger comments.</p><p>I'm not sure that it's possible to export Intense Debate comments back to Blogger at this time as Blogger's API does not allow comments to be automatically created using such third party software (though I strongly suspect it may be possible for respected services like Intense Debate to do this in the future).</p>
<h3>Manage your Intense Debate Profile</h3><p>One of the more useful functions of Intense Debate is <span style="font-weight:bold;">profiling</span>. By using your Intense Debate profile to leave comments on ID-enabled blogs, you can increase your reputation, link to your other social networking profiles, add an avatar and monitor comments left on all blogs you visit!</p><p>Readers can vote comments up or down (depending on their perceived value to the conversation). Comments which are voted up increase that commenters reputation (whilst the reverse also applies too).</p><h3>Troubleshooting Intense Debate Installations</h3><p>From my experiences is using Intense Debate so far, I am happy to say that there are very few possible problems which could occur.</p><p>While testing Intense Debate installation with both default and heavily customized (third party) Blogger templates, I have only found two possible problems which may occur during installation: imported comments may not appear as soon as they are imported, and the comment count on heavily customized templates may not appear.</p><p>Both of these can usually be resolved easily using the following methods:</p><h4>Imported comments do not appear</h4><p>First of all, check the comments in your Intense Debate dashboard to ensure these do appear for the appropriate blog (if not, you should attempt to import them again).</p><p>If the imported comments are present, chances are that Intense Debate has not caught up with these comments yet. Be patient, and soon enough you should notice these comments appear in the Intense Debate comment area beneath your posts.</p><p>If after a day or so the imported comments do not appear, you should <a href="http://www.intensedebate.com/forum">ask for help in the forum</a>. This forum is watched by members of the Intense Debate team who seem very helpful and will be able to help you resolve this problem quickly.</p><h4>The comment count does not update</h4><p>I've only ever noticed this problem occur in heavily customized templates where the comment count appears near the top of each post, rather than in the post-footer section.</p><p>I suspect this problem may occur because the comment-link tags is separated from other elements of the comments section, and is not parsed correctly by Intense Debates (otherwise flawless) installation system.</p><p>The fix for this problem is a little more complicated, but not too difficult.</p><p>Depending on whether you have chosen to replace all comments with Intense Debate, or only the posts which do not already have comments, you should use one of the following methods to solve this:
<ul><li><span style="font-weight:bold;">If you have chosen to replace only posts which don't already have comments:</span><br/><br/>Firstly, backup your existing template code (to ensure you can restore your template if thhere are any problems).<br/><br/>Find this section of code in your Blogger template:
<blockquote><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:top.commentLabel/> <b:if cond='data:post.numComments == 1'>(1) <b:else/>(<data:post.numComments/>) </b:if></a></blockquote>Check that this section of code is not surrounded by Intense Debate HTML comments, which appear like this:
<blockquote><!-- Intense Debate --><br/><br/><!-- /Intense Debate --></blockquote>
If these comments do not appear around this section of code, replace the code with the following instead:
<div style="width: 100%; height: 200px; overflow: auto;"><!--Intense Debate-->
<b:if cond='data:post.numComments == 0'>
<div expr:id='"IDCommentPostInfoTitle"+data:post.id' style='display:none'><data:post.title/></div>
<div style='display:none' expr:id='"IDCommentPostInfoTime"+data:post.id'><data:post.timestampISO8601/></div><div style='display:none' expr:id='"IDCommentPostInfoAuthor"+data:post.id'><data:post.author/></div><div style='display:none' expr:id='"IDCommentPostInfoCats"+data:post.id'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div> <a expr:href="data:post.url" expr:name="data:post.id" class="IDCommentsReplace">Comments</a>
<b:else/>
<!--/Intense Debate-->
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
<!--Intense Debate-->
</b:if>
<!--/Intense Debate--></div><br/><br/>Finally, save your template. If this was successful, you should see the comment count appear on your posts which relates to the true number of comments (whether Intense Debate or Blogger generated comments).</li>
<li><span style="font-weight:bold;">If you have chosen to replace all comments with Intense Debate:</span><br/><br/>Again, backup your existing template to restore if there are problems using this method.<br/><br/>Find the following section of code in your template and ensure it is not surrounded by the Intense Debate HTML comments:
<blockquote><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:top.commentLabel/> <b:if cond='data:post.numComments == 1'>(1) <b:else/>(<data:post.numComments/>) </b:if></a></blockquote>
Providing this section is not surrounded by the Intense Debate HTML comments, replace this section with the following code:
<div style="width: 100%; height: 200px; overflow: auto;"><!--Intense Debate-->
<div expr:id='&quot;IDCommentPostInfoTitle&quot;+data:post.id' style='display:none'><data:post.title/></div>
<div expr:id='&quot;IDCommentPostInfoTime&quot;+data:post.id' style='display:none'><data:post.timestampISO8601/></div><div expr:id='&quot;IDCommentPostInfoAuthor&quot;+data:post.id' style='display:none'><data:post.author/></div><div expr:id='&quot;IDCommentPostInfoCats&quot;+data:post.id' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div><a class='IDCommentsReplace' expr:href='data:post.url' expr:name='data:post.id'>Comments</a>
<br/><br/>
<!--/Intense Debate-->
<!--Intense Debate-PRE ID <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:top.commentLabel/> <b:if cond='data:post.numComments == 1'>(1) <b:else/>(<data:post.numComments/>) </b:if></a> --></div><br/><br/>Then save your template and check to make sure the comment count appears in your blog posts.</li></ul></p><p>If you are still experiencing problems with your Intense Debate comments, the best advice I can offer is to <a href="http://www.intensedebate.com/forum">visit the forums</a> where members of the Intense Debate team will be on hand to assist you with your problems.</p>
<h3>Over to you!</h3><p>Do you already use Intense Debate? Or are you considering using this free service as an alternative to Blogger's default commenting system?</p><p>If so, please let us know your own opinions of Intense Debate comments by leaving your comments 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-58641445654278886512008-05-11T00:24:00.006+01:002008-05-11T03:12:13.337+01:00Change the Title Tags for your Blog<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtD9I8MhmV0sieIDk3xXmu0BC1U_N1-LvK8QwHDrpc2yhUNBmwijis5sLMVm_ePcbctH7dflHCSFR9hJkTiMd0RUS4jb8G_P70Xb0YgWF5BCI8I8ywnn5zy2YpS6u82xqBWdkBmCxcu08/s1600-h/change-blog-title.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtD9I8MhmV0sieIDk3xXmu0BC1U_N1-LvK8QwHDrpc2yhUNBmwijis5sLMVm_ePcbctH7dflHCSFR9hJkTiMd0RUS4jb8G_P70Xb0YgWF5BCI8I8ywnn5zy2YpS6u82xqBWdkBmCxcu08/s400/change-blog-title.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5198901050216464418" /></a></p>
<p>Until recently, the title tags generated for each page of your Blogger blog would display the blog title first, then the name of your post.</p><p>This wasn't so good for SEO (search engine optimization) as this made keywords from your post titles appear after your blog title.</p><p>Luckily, Blogger have come up with a simple fix for this problem for those who use Layouts templates: the <code><strong><data:blog.pageName/></strong></code> tag!</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>This new tag is already installed for new blogs (or if you change your existing template to one of Blogger's default ones).</p><p>However, if you have customized your template or uploaded a third party template, you will need to change the original <code><data:blog.pageTitle/></code> to the new <code><data:blog.pageName/></code> tag for this change to take effect.</p><p>But don't worry: this is REALLY easy! Here's what you have to do:
<ol><li>Go to Layout>edit HTML in your Blogger dashboard.</li>
<li>Search for this tag: <code><span style="font-weight:bold;"><data:blog.pageTitle/></span></code></li>
<li>Replace this tag with the following:
<blockquote><b:if cond='data:blog.pageType == &quot;index&quot;'><br/>
<title><data:blog.title/></title><br/>
<b:else/><br/>
<title><data:blog.pageName/></title><br/>
</b:if></blockquote></li>
<li>Save your template! (See, this is an easy hack!)</li></ol></p><p>Once you've changed this tag, you'll see that on post pages, the default <span style="font-style:italic;">[blog name] page title</span> format for your post titles in the browser window will be replaced solely by your post title instead.</p><p>This will increase the chances of your posts being picked up in search engine results for keywords which appear in your post titles (and can ultimately help draw more targeted traffic to your blog.</p><p>I hope this little trick will be useful to you all! And for the Blogger team (if you're reading this): <span style="font-weight:bold;"><span style="font-style:italic;">Thank you!</span></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-32044345677909182552008-04-29T12:00:00.001+01:002009-07-26T02:01:38.764+01:00How to Create an Animated Page Loading Icon (Ajax Style)<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTp4a871h_eLDzgDA8IL9T6Fsdc-zfe9yzYbkWUlbnOXaxVcR2sSsDnHU8yVH4_Nhvv5Kb8KFJGcSJjFNZeT2o6IulO4U5mRntoReQGlK8BpJMCCMTrxQChte9QW-ZxP002p8tzfiwQoQ/s1600-h/loading-icon.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTp4a871h_eLDzgDA8IL9T6Fsdc-zfe9yzYbkWUlbnOXaxVcR2sSsDnHU8yVH4_Nhvv5Kb8KFJGcSJjFNZeT2o6IulO4U5mRntoReQGlK8BpJMCCMTrxQChte9QW-ZxP002p8tzfiwQoQ/s400/loading-icon.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5194462978293033154" /></a>You've probably seen "ajax-style" loading icons before. These small animations appear on web-pages while page elements are loading, and disappear (or are replaced by content) when the page has fully loaded.</p><p>Inspired by the page loading feature I noticed in <a href="http://meta-microcosmos.blogspot.com/">Meta-Microcosmos</a>, I decided to find out how to add an animated ajax-style loading icon to Blogger templates.</p><p>After a little trial and error, I discovered a solution which is cross-browser compatible and can be added to your template in one easy step. So in this tutorial, I'll explain how you can add an ajax-style page loading icon to appear in the top corner of your Blogger template which disappears once the page has loaded.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>The loading icon used for this tutorial is the same as that which appears in the top-right hand corner of this blog when you load the page:</p><p align="center"><img src="http://bloggerbuster.com/images/loading.gif" style="padding: 20px; border: 3px solid #ccc;" /></p><p>This small, unobtrusive image has a minimal file size, and is easy on the eyes so it doesn't detract from other style elements of the page.</p><p>Of course, if you would prefer to use a different icon, you can change the URL of the image in the code used for this hack as I will explain shortly.</p><h3>Adding the Loading Icon to your Template</h3><p>Adding this page loading icon is as simple as copying and pasting a section of code!</p><p>Simply go to Layout>Edit HTML in your Blogger dashboard, and find the opening <code><body></code> tag.</p><p>Then replace this tag with the following section of code (copy to your clipboard, then paste this in place of the <code><body></code> tag):</p><p><div style="border: 3px solid #ccc; padding: 5px; width: 100%; height: 250px; overflow: auto;"><code><body onLoad='init()'><br/>
<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='http://bloggerbuster.com/images/loading.gif'/></span><br/>
<script><br/>
var ld=(document.all);<br/>
<br/>
var ns4=document.layers;<br/>
var ns6=document.getElementById&amp;&amp;!document.all;<br/>
var ie4=document.all;<br/>
<br/>
if (ns4)
ld=document.loading;<br/>
else if (ns6)<br/>
ld=document.getElementById(&quot;loading&quot;).style;<br/>
else if (ie4)<br/>
ld=document.all.loading.style;<br/>
<br/>
function init()
{<br/>
if(ns4){ld.visibility=&quot;hidden&quot;;}<br/>
else if (ns6||ie4) ld.display=&quot;none&quot;;<br/>
}<br/>
</script><br/></code></div><p>You can then preview your blog to see the page loading icon appear in the top right-hand corner of your blog template momentarily until the page has loaded.</p><p>Providing there were no errors received when you previewed the page, you can then proceed to save your template.</p><p>That was easy, wasn't it?</p><h4>Changing the Animated Icon</h4><p>Of course, some of you may prefer to use a different animation to the one featured here.</p><p>Any animated GIF image may be used as a page loading icon, and all you have to do to alter the image is change the URL in this line of the script to match the location of your preferred image instead:</p><p style="border: 3px solid #ccc; padding: 5px;"><code><span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'><img border='0' src='<span style="font-weight:bold; color: red">http://image-host.com/your-loading-image.gif</span>'/></span></code></p><p><a href="http://www.ajaxload.info/">Ajaxload</a> is a really useful resource for generating your own color styles of image loading icons. Alternatively you can find a great selection over at <a href="http://www.sanbaldo.com/wordpress/1/ajax_gif/">Sanbaldo.com</a></p><h4>Adding text to the loading icon</h4><p>You can even add an explataroty "loading..." message to your icon by adding this just before the icons image tags, like this:</p><p style="border: 3px solid #ccc; padding: 5px;"><code><span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'><span style="font-weight:bold; color: red">Loading...</span><img border='0' src='http://image-host.com/your-loading-image.gif'/></span></code></p><h4>A little info about this script</h4><p>I had originally experimented with the script used in <a href="http://meta-microcosmos.blogspot.com/">Meta-Microcosmos</a> to feature the loading icon which is housed in the <code><head></code> section of the template.</p><p>However, this caused some problems when viewed in IE6 as this caused the icon to appear above the template, rather than in the corner (it occasionally caused the page to freeze too!).</p><p>So instead I adopted this version which uses the body onload function to cause the script to take action. This ensured that the icon appeared correctly in all browsers I have tested in, including IE6 and 7, Firefox and Flock.</p><p>If you notice any problems in other web browsers, please let me know about this!</p><p>Also you may have noticed the need to "escape" certain HTML characters within the script itself. This is because Blogger parses JavaScript differently when it is featured in the body (rather than the head) section of the template. However, when you look at the source code of your template, you will see the original script coded correctly.</p><h4>Final Thoughts</h4><p>While this Blogger hack may be mostly cosmetic, it is a fun and interesting feature which can add style and personality to your template design.</p><p>I hope this article has been useful for you! If you have enjoyed this tutorial, please consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing to Blogger Buster</a> for future tutorials and Blogger news.</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-67912883368977383802008-04-24T12:00:00.002+01:002008-04-28T02:30:50.471+01:00Creating an Archives Page in Blogger<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_keNTfYwPyzrh9JWPoNHzJF75xhWA6e0EeGrR63GFGr2jxuv1Qb-n_U3noS3yBl_Zzm3K7M_bOl5WTdOf_vZZhfh0rrSAC64mNDMvJeBsx5HoWnyxC5En_hn0OeuNQjhFGzuO5x03mkw/s1600-h/blogger-archives-page.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_keNTfYwPyzrh9JWPoNHzJF75xhWA6e0EeGrR63GFGr2jxuv1Qb-n_U3noS3yBl_Zzm3K7M_bOl5WTdOf_vZZhfh0rrSAC64mNDMvJeBsx5HoWnyxC5En_hn0OeuNQjhFGzuO5x03mkw/s400/blogger-archives-page.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5192818332236179522" /></a>An archives page can be a really useful place for your readers to locate posts of interest or simply browse through your previous posts at leisure.</p><p>Recently I've received some feedback from readers who suggested I create an easier method to browse previous posts. So I decided to create a dedicated "Archives Page" which I hope will help readers easily locate previous posts to suit their needs. <a href="http://www.bloggerbuster.com/2007/05/blogger-buster-archives.html" title="View the Blogger Buster Archives">My archives page</a> features links to my monthly archives, an explanation for each category and also a simple search function for easy browsing.</p><p>In today's post, I'll explain <span style="font-weight:bold;">how I created my Blogger archives page</span>, and list some of the reasons why <span style="font-style:italic;">this method of archiving could be useful for you too</span>.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h3>Why you may want to create an "Archives" page</h3><p>Most successful blogs feature a link to their archives pages for visitors who would like to read through previous posts.</p><p>Such archives pages need not be limited to temporal pages which contain links to a monthly or weekly list of posts though. You could also use an archives page to link to your labels/categories and provide an explanation of your filing system which can help your readers locate posts of interest.</p><p>Blogger does not offer us a template to create an archives page for our blogs. Instead, we have an "Archives" widget available which you can add to your sidebar (or indeed anywhere you are able to insert a new "Page Element" within your template). However, such widgets don't offer much of an explanation for your readers about your archiving system. Also, if you have been blogging for a long time (or use weekly/daily archives) this list can become quite long.</p><p>Creating a dedicated archives page for your blog allows you to offer your readers a better insight about your blog, offer an easy means of locating and browsing through previous posts, and may be styled in any way you like.</p>
<h3>How to create an archives page in Blogger</h3><p>When creating an archives page for your Blogger blog, you must understand that there is no magic script which will generate all necessary links for you. Instead, we have to manually create all links to our monthly/weekly archives pages, and also to any labels pages we may like to present.</p><p>While this may seem like a daunting task (especially if you have a huge backlog of posts or a large number of categories), the good news is that once you've compiled your page you can periodically update this with much less effort.</p><h4>Deciding on a format for your archives page</h4><p>For my own archives page, I decided to include:
<ul><li>Links to my monthly archives pages</li>
<li>Links to each label/category page with a brief explanation of what these posts are about</li>
<li>A simple search function which may help readers locate the content they are searching for</li></ul></p><p>For your own archives page, you may prefer to include a slightly different set of links, such as a list of your most popular posts or important pages from your archives.</p><p>Once I had decided what I wanted to include, I set about designing the format I preferred to present these links in. While long lists of links was an option, I decided to make better use of the page and use a columns system so that each set would be divided into two columns on the page.</p><p>Here is a breakdown of the design of my archives page:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrV359IiAeEZn0R4iVFebODo62bBl7Ln-QOlp1xOlvmUkABk3y_Yi2sUk1nzJpxzAi8vVppNQSF2ved6s967145vlIgP9HHPI-BSyO3tXMLexEcdvJlGi7eHUg5MU08aIweLD-LdSMTQ8/s1600-h/archives-explanation.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrV359IiAeEZn0R4iVFebODo62bBl7Ln-QOlp1xOlvmUkABk3y_Yi2sUk1nzJpxzAi8vVppNQSF2ved6s967145vlIgP9HHPI-BSyO3tXMLexEcdvJlGi7eHUg5MU08aIweLD-LdSMTQ8/s400/archives-explanation.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5193132762496952418" /></a></p><p>I used headings (<h3> and <h4>) for the section titles, and divided up the sections into two columns using DIV's which were styled like this:</p><p style="padding-left: 20px;"><code><div style="width: 45%; float: left;">Left Column Content Here</div></code></p><p style="padding-left: 20px"><code><div style="width: 45%; float: right;">Right Column Content Here</div></code></p><p style="padding: left: 20px;"><code><div style="clear: both;"></div></code></p><p>The final DIV with the "clear: both" styling ensures that any content beneath the columns does not bunch up between the columns and disorganize the array.</p><p>This method of styling your post can only be achieved when editing your posts in Edit HTML mode, so if you usually use the Rich Text editor for your posts, you may need to switch temporarily in order to duplicate this process.</p><h4>Adding links to the monthly archives and labels pages</h4><p>As I mentioned earlier, it is necessary to add these links manually. The easiest method is to add both a label and archive widget to your sidebar (you can always remove these afterwards), then open up your blog in a new tab or browser window.</p><p>Then on your post editing page (in a different tab/window to your blog) write the link text for each archive/label. Copy the required links from your sidebar widgets (usually you can right click on a link and choose to copy the link location to your clipboard), then use the hyperlink function in your post editor to add these links to your post.</p><h4>Adding a simple search function to the page</h4><p>If you would also like to add a simple search box to your archives page, can simply add the following section of code where you would like the search box to appear in your post:</p><p style="padding: 5px; border: 3px solid #ccc;"><code><p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="Search" type="submit"/> </form></p></code></p><p>This simple search code is the same which is used in the Blogger nav-bar which searches through your posts to provide relevant search results for your readers queries (read more about <a href="http://www.bloggerbuster.com/2007/07/search-widget-for-your-blog.html">this simple search function</a>).</p><h4>Saving and Linking to your archives page</h4><p>Like <a href="http://www.bloggerbuster.com/2007/10/create-wordpress-style-pages-for-your.html">other pages you may like to create</a> for your Blogger blog, it is a good idea to backdate this post so that it doesn't appear to be a recent blog entry.</p><p>You can do this by changing the date in the "Post Options" link below your post editor.</p><p>Then once you have saved your post, locate the URL for this in the Edit Posts page of your Blogger dashboard and copy this link to your clipboard.</p><p>Finally, add a link to your archives page from somewhere in your blog template. If you have a <a href="http://www.bloggerbuster.com/2007/10/create-navigation-buttons-for-your-blog.html">navigation bar</a> in your design, this would be an ideal place to feature your link so readers can easily locate this. Alternatively you may prefer to add a link in a sidebar widget, or in the footer section of your blog.</p><p>I placed a link to the Blogger Buster archives page beneath the search box in the header section, among other important links.</p><p>And there you have it: <span style="font-weight:bold;">a custom-made archives page for your Blogger blog!</span></p><p>I hope you have found my explanation useful to help you create your own archives page using Blogger. I would love to see other examples of Blogger archives pages, so if you create one of your own, please let me know by leaving your comments 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-57330602887818429772008-04-23T12:17:00.004+01:002008-04-23T21:23:44.033+01:00Change your Blog Background According to the Time of Day<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UXMZpxd4bJZXcL_puyPQHbyHLu1bJ5UgTAOVmTTaYUZvnEM8avCEjUfy8lyEnWhu5qeB6Btj_uN1fEm-B_EJoE7VmWl4Udff2-HAXJ5xpQrtAfT84MgAP4KSSeHdNOTkLb_gBaKj_zM/s1600-h/time-of-day-backgrounds.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UXMZpxd4bJZXcL_puyPQHbyHLu1bJ5UgTAOVmTTaYUZvnEM8avCEjUfy8lyEnWhu5qeB6Btj_uN1fEm-B_EJoE7VmWl4Udff2-HAXJ5xpQrtAfT84MgAP4KSSeHdNOTkLb_gBaKj_zM/s400/time-of-day-backgrounds.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5192537746317699122" /></a>I've been working on a script which you can use to change the background color, or even any other background element of your blog, depending on the time of day.</p><p>You can see this script in action on the <a href="http://testingtimeofdaybackgroundscript.blogspot.com/">Time of Day test blog</a>. Here I have used the script to change the main background color of the Minima template according to the time of day. Take a look at different times to see the changes take effect.</p><p>There are two versions of this script available for you to install instantly in your blog:
<ul><li>A pale color palette</li>
<li>A dark color palette</li></ul></p>
<p>This means you can choose the color scheme which would work best for your existing fonts and color settings without having to also change the colors of existing elements in your blog.</p><p>If you would prefer to use your own color schemes, add images to the background, or change the background of other elements of your blog, I have also provided instructions for you to customize this script and adapt it to your own personal needs.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>Here are the two different color schemes you could install in your blog:</p><h4>Pale Scheme</h4>
<div style="clear: both;"><div style="width: 200px; border: 1px solid #000; padding: 10px; margin: 5px; background: #ccccff; float: left;">Morning (6am-12pm)</div><div style="width: 200px; border: 1px solid #000; padding: 10px; margin: 5px; background: #99ccff; float: right;">Daytime (12pm-6pm)</div><div style="width: 200px; border: 1px solid #000; padding: 10px; margin: 5px; background: #99cccc; float: left;">Evening (6pm-12am)</div><div style="width: 200px; border: 1px solid #000; padding: 10px; margin: 5px; background: #cccccc; float: right;">Twilight (12am-6am)</div></div>
<div style="clear: both;"></div>
<h4>Dark Scheme</h4>
<div style="clear: both;"><div style="width: 200px; border: 1px solid #000; padding: 10px; margin: 5px; background: #336666; color: #ffffff; float: left;">Morning (6am-12pm)</div><div style="width: 200px; border: 1px solid #000; padding: 10px; margin: 5px; background: #003366; color: #ffffff; float: right;">Daytime (12pm-6pm)</div><div style="width: 200px; border: 1px solid #000; padding: 10px; margin: 5px; background: #003333; color:#ffffff; float: left;">Evening (6pm-12am)</div><div style="width: 200px; border: 1px solid #000; padding: 10px; margin: 5px; background: #333333; color: #ffffff; float: right;">Twilight (12am-6am)</div></div>
<div style="clear: both;"></div>
<h3>Installing the Time of Day Background Color Script in your Blog</h3><p>The script used to change the background color is really easy to install. Simply locate the closing <code></head></code> tag in your Blogger template, and add one of the following lines directly before it (choose the script according to the color scheme you would prefer to use):</p><p>For the pale color scheme:</p><div style="height: 50px; scrolling: auto;"><script src='http://bloggerbuster.com/scripts/time-of-day-pale.js' type='text/javascript'/></div>
<p>For the dark color scheme:</p><div style="height: 50px; scrolling: auto;"><script src='http://bloggerbuster.com/scripts/time-of-day-dark.js' type='text/javascript'/></div>
<p>Then locate this section of your Blogger template:</p>
<p><code>body {<br/>
<span style="font-weight:bold; color: red;">background: $bgcolor;</span></code></p><p>This section may not appear exactly like this, or you may notice there is also a background image referenced in the <code>background</code> line. In either case, you need to delete the background statement which is highlighted in red text to ensure the JavaScript line you previously added is able to accurately declare the background color according to the time of day.</p><p>Now preview your blog. If all has gone to plan, you should see the background color of your blog has changed to the color specified for the time of day. You can then proceed to save your template.</p>
<h3>Customizing the Time of Day Background Script</h3><p>If you are able to edit and host the "Time of Day" JavaScript file yourself, you can use this as a basis for further customization including:
<ul><li>Using different background images for different times of day</li>
<li>Use different color schemes to those suggested above</li>
<li>Change the background color for a different section of your blog (for example, the header section)</li>
<li>Change the font colors depending on the time of day</li></ul></p><p>First you should download a copy of the Time of Day Background script, then make your changes in your favorite editor (I use Notepad ++ though you could just as easily use Notepad or another simple text editor).</p><p>Once you have made your changes, you will need to upload your revised script to a hosting provider, and link to the script from the <code><head></code> section of your blog template as described above.</p>
<p>Here is a transcript of the JavaScript in its simplest form, which is used only to alter the background color:</p><p style="border: 3px solid #ccc; padding: 5px;"><code>var d = new Date()<br/>
var h = d.getHours()<br/>
<br/>
//<br/>
if (h < 6) document.write('<style type="text/css">body{background: black; color: black}"></style>')<br/>
else if (h < 12) document.write('<style type="text/css">body{background: blue; color: black}"></style>')<br/>
else if (h < 18) document.write('<style type="text/css">body{background: yellow; color: black}"></style>')<br/>
else if (h < 24) document.write('<style type="text/css">body{background: red; color: black}"></style>')<br/></code></p>
<p>Each time section features a JavaScript command, like this:</p>
<p><code>document.write('<style type="text/css"><span style="font-weight:bold; color: red;">body{background: black; color: black}</span>"></style>')</code></p><p>You can change the code highlighted in red to alter the effects of the script. For example, <span style="font-weight:bold;">if you wanted to use a background image instead of a color</span>, you could change the red section of code to something like this:</p><p><code>body {background:url(http://image-host.com/yourimage.jpg)}</code></p><p><span style="font-weight:bold;">To change the color of the header section</span> (rather than the main body background), you would change this as follows:</p><p><code>#header {background: #ffff00;}</code></p><p><span style="font-weight:bold;">In fact, you can use this script to alter any CSS styled element of your blog template to suit the time of day! </span>Just be sure to change the properties for each time slot in the JavaScript code to ensure your design will appear the way you prefer.</p><p>I'm currently working on a new template for Blogger blogs which uses a variation of this script in a rather elegant way. I will put this up for download as soon as it's ready, but in the meantime I would love to see how you have used this script to personalize your own blogs!</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-41325298052589056732008-04-16T14:34:00.006+01:002008-04-16T18:05:40.502+01:00Add a "Top of Page" Icon Link<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMW8i2qvMAsexEqMySk7NWCAxTkwoIaKkGZ-SXKyjhjfETyVjP3TgteJ6oc0BIbug5bvgtZzOrJVs9rjzylf3XWuQ6ng9K_eNMjfABU8rZy8VWZIIZDlrSm-bTYozLNFOUvLefTt5WfQ/s1600-h/top-of-page.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMW8i2qvMAsexEqMySk7NWCAxTkwoIaKkGZ-SXKyjhjfETyVjP3TgteJ6oc0BIbug5bvgtZzOrJVs9rjzylf3XWuQ6ng9K_eNMjfABU8rZy8VWZIIZDlrSm-bTYozLNFOUvLefTt5WfQ/s400/top-of-page.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5189889731720700242" /></a>While researching <a href="http://www.bloggerbuster.com/2008/04/54-inspiring-and-original-blogger.html">blog designs</a>, I came across a really feature: an icon link to the top of the page which floats in the bottom right-hand corner. As a blog reader, I found this feature to be really useful as it enabled me to jump back to the top of the page after reading a long article or browsing through many posts on the home page. Take a look at the bottom right hand corner of this blog for an example of this in action.</p><p><span style="font-weight:bold;">This customization is surprisingly easy to install</span>. You can simply add the code required into an HTML/JavaScript widget in your blog's layout or, if you use a Classic Blogger template, add this code directly into your template code.</p><p>So in this post, I'll explain how to add an icon link to the top of your blog with an example image and code for you to use this right away.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h3>How this works</h3><p>The icon is styled to appear in the bottom right-hand corner of the page (no matter what screen resolution a visitor uses to access your blog), and is linked to target the top of the page using the "#" symbol.</p><p>The icon link used in this blog is small and unobtrusive; to help new visitors understand how this can be used, I added title text to the image so the "Back to Top" prompt will appear when the visitor hovers their mouse over the link.</p><p>The code used to add a "Top of Page" icon link is constructed as follows (I have forced line breaks for clarity):
<pre class="code"><span style="font-weight:bold; color: red;"><a href="#"></span> <-- This link targets the top of the page</pre>
<pre class="code"><span style="font-weight:bold; color: red;"><img src="url-of-image"</span> <-- The URL of your icon</pre>
<pre class="code"><span style="font-weight:bold; color: red;">alt="alternative text"</span> <-- Alt text for accessibility</pre>
<pre class="code"><span style="font-weight:bold; color: red;">title="Back to Top"</span> <-- This will produce the hover text</pre>
<pre class="code"><span style="font-weight:bold;color: red;">style="display: scroll;</span> <-- This allows the image to scroll</pre>
<pre class="code"><span style="font-weight:bold;color: red;">position: fixed;</span><-- This fixes the image in place</pre>
<pre class="code"><span style="font-weight:bold;color: red;">bottom: 5px;</span> <-- Makes the image appear 5px from the bottom</pre>
<pre class="code"><span style="font-weight:bold;color: red;">right: 5px;" /></a></span> <-- Makes the image appear 5px from the right, <br/>then closes all tags</pre></p><h3>How to install the "Top of Page" Icon Link</h3><p>To use an icon link like the one used here at Blogger Buster, simply copy all of the code below and paste this into an HTML/JavaScript widget in your layout:
<div style="width: 100% height: 50px; scroll: auto;"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://bloggerbuster.com/images/arrow-up.gif"/></a></div></p><p>If you use a Classic Blogger template (with no drag and drop widgets), you can paste this code into your blog's HTML code, somewhere between the <code><body></code> and <code></body></code> tags instead.</p>
<h3>Customizing the Icon Link</h3><p>If you would prefer to use a different image than the one used here, simply replace the URL of the image with the URL of your preferred image instead.</p><p>You can also reposition the icon to suit your design needs. For example, if you wanted the icon to be flush with the bottom right corner (no space), change the code explained above to read this instead:
<pre class="code">position: fixed;<br/>bottom: 0px;<br/>right: 0px;</pre></p><p>To position the icon further away from the right or bottom sides, simply increase the pixel value to reflect this distance.</p>
<h3>Some Examples of "Top of Page" Icon Links</h3><p>You needn't be restricted to using an arrow for your top of page link! Some of the designs I showcased in this recent post used ingenious methods of linking to the top of the page:</p><p align="center"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://la-blogueria.blogspot.com"><img style="cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXNHmcrM29B7tS8dkNND_8hRpXhicbY3D3SLzg1q9-61JlE2F2Tp8NSFwHtPJUOdRNn4xHMjzU6WmvU3llfAtOo3wb9xETERA_wCU0Y-re_u65Vk5vYOAWbrsOW-8OML0VPUbyVgXcmw/s200/la-blogueria-top.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5189884105313542434" height="123px" title="La Blogueria" /></a> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://laeulalia-blogdeprobes.blogspot.com/"><img style="cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0-wowWRxBZ-u77ZHJiwJOi7pP7-7cUSnWqY3EmSEOb6s6J6cgGdm2bzvcrRSUs35QBIDEiZ_v6rzJSNJgbOC6x2aUwKfSfMOVJPojWLtHhSu5JWHBz6j3FlFaW0Bn8i-oU98WOx3Ipc/s200/tuneando-top-page.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5189884822573080882" height="123px" title="Tuneando el Blog" /></a> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://mi-microcosmos.blogspot.com/"><img style="cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2m0AX7Ghyqy8etxP1e-MszbLzc1VWocrizgHOUgGdxBIHjraofEZcoIgxJmHcKzyvrgqeFEpn1UJDYGY_1vAmNXC39j8hJxREFtF75NN189QWCpkCG2MiB61NnsESaQNXfZepHo5oq-I/s200/mi-microcosmos-top.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5189885883430003010" height="123px" title="Mi-Microcosmos" /></a></p><p><span style="font-weight:bold;">Left:</span> La Blogueria uses paperclips to link to the top (and other parts) of the blog.</p><p><span style="font-weight:bold;">Center:</span> In Tuneando el Blog, the icon link is animated when the mouse hovers over it!</p><p><span style="font-weight:bold;">Right:</span> This page curl at the bottom right of Mi-Microsmos is a cleverly disguised (and very stylish) link which features a prompt on mouseover.</p><p>I hope this tutorial has been useful and helped you create your own scrolling icon links to the top of your blog.</p><p>If you have found this post useful, please consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing to Blogger Buster</a> for updates of new articles as they are published.</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-40339147805302745992008-04-09T12:00:00.002+01:002009-07-26T02:01:38.766+01:00Create a Cross-Fading Featured Posts Slideshow in Blogger with SmoothGallery<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqQwWdjQWhlA-EQ3VnbVahX0Y0IW0OqQiOPB0E8kLzz5yfhF7k22eJqGXMUCUeNTY4vCkJUJBo-NedF21ody22i4X5H5L7vK8Mo3Gx4Su4sTfMHRxSHCcRRu7rhuHvo6_pPH9u2NgSbs/s1600-h/blogger-smooth-slideshow.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqQwWdjQWhlA-EQ3VnbVahX0Y0IW0OqQiOPB0E8kLzz5yfhF7k22eJqGXMUCUeNTY4vCkJUJBo-NedF21ody22i4X5H5L7vK8Mo3Gx4Su4sTfMHRxSHCcRRu7rhuHvo6_pPH9u2NgSbs/s320/blogger-smooth-slideshow.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5187193063373115378" /></a>The slide show of featured posts which appears in my sidebar was among the most talked about feature of my recent redesign. This slide show is powered by <a href="http://smoothgallery.jondesign.net/" title="Learn more about SmoothGallery">JonDesign's SmoothGallery</a>: a combination of JavaScript and Mootools which creates a cross-fading gallery of images which link to these posts.</p><p>In this article, I'll explain <span style="font-style:italic;">the simplest methods</span> of using SmoothGallery to create your own slide show of featured posts which you can display in your blog sidebar.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<p>SmoothGallery offers many different styles of gallery, but unfortunately not all options function properly in Blogger powered blogs.</p><p>So in this tutorial I will explain two different styles of SmoothGallery slide shows which I know can be used in Blogger blogs and have tested in different browsers:
<ul><li>A timed slide show (similar to the one featured in the sidebar)</li>
<li>A manual slide show, where your visitors can skip through each slide using arrow buttons</li></ul></p><p>The initial installation for these slide shows is essentially the same; you can configure the different options for display after installation as I shall explain later in this tutorial.</p><h3>Requirements (read this first!)</h3><p><span style="font-weight:bold; font-style: italic;">You need to ensure you have access to a hosting account</span> where you may upload images, JavaScript and CSS files. Most free file hosting services allow you to upload these file types, including Google Pages and the hosts listed on this page.</p><p><span style="font-weight:bold;"><span style="font-style:italic;">You will also need several images which are all exactly the same size</span></span>. For the purpose of this tutorial I would recommend these images to be 200x100 pixels in size which would fit neatly in most Blogger sidebars. If you prefer to use images of different dimensions, you will need to change the size of the gallery in your style section, as I shall explain later in this tutorial.</p><p><span style="font-weight:bold;">If you are able to meet these requirements, read on to see how easy it is to install your own SmoothGallery slide show!</span></p><h3>How to install your SmoothGallery Slide show</h3><p>First of all, you need to download the files needed to make the slide show function. For your convenience, I have included the files required to run this in Blogger blogs in a zip file which you can download below.</p><p><a href="http://bloggerbuster.com/scripts/Blogger-SmoothGallery.zip" title="Download the foles for adding SmoothGallery to your Blogger Blog" style="background: url(http://bloggerbuster.com/images/zip-file.png) left no-repeat; padding-left: 20px;">Download Blogger_SmoothGallery.zip</a></p><p>When you have downloaded these files, retain the same directory structure and upload these to your file host.</p><p>Next, go to Layout>Edit HTML in your Blogger dashboard and search for the closing <code></head></code> tag. Immediately before this line, paste the following section of code (substituting "your-file-host" for the URL where your Blogger SmoothGallery files are hosted:
<div style="width: 500px; height: 150px; overflow: auto;"><script src='http://your-file-host.com/Blogger-SmoothGallery/scripts/mootools.v1.11.js' type='text/javascript'/><br/>
<script src='http://your-file-host.com/Blogger-SmoothGallery/scripts/jd.gallery.js' type='text/javascript'/><br/>
<link href='http://your-file-host.com/Blogger-SmoothGallery/css/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/></div></p><p>Then search for the closing <code></b:skin></code> tag on your template. Immediately before this line, add the following section of code:
<blockquote>#myGallery{<br/>
width: 200px !important;<br/>
height: 100px !important;<br/>
overflow: hidden; <br/>
} </blockquote></p><h4>Adding your slide show to your blog sidebar</h4><p>In your blog's HTML code, find the DIV where your sidebar wrapper begins. The code will look something like this:
<blockquote><div id='sidebar-wrapper'></blockquote><p>Immedietly beneath this line, paste the following section of code:
<blockquote><script type='text/javascript'><br/>
function startGallery() {<br/>
var myGallery = new gallery($('myGallery'), {<br/>
timed: true,<br/>
showArrows: false,<br/>
showCarousel: false<br/>
});<br/>
}<br/>
window.addEvent('domready', startGallery);<br/>
</script></blockquote></p>
<h4>Adding your images and links to the gallery</h4>
<p>For the next part of the installation, you will need to use your images and the relevant links to your popular/featured posts.</p><p>Remember that your images should all be the same size!</p><p>Upload all of the images you would like to use to your file host and note down the URLs.</p><p>This last step is a little bit tricky, so be sure to double check the code you are replacing and ensure you don't accidentally delete any tags!</p><p><ol><li>Copy all of the code below and paste into a simple text editor (eg: Notepad or Notepad ++).</li>
<li>Replace all image URLs with those of your own images.</li>
<li>Replace all link URLs with the links to your posts.</li>
<li>Replace the titles (between the <code><h3></code> and <code></h3></code> tags) with the titles of your posts.</li>
<li>Replace the descriptions (between the <code><h3></code> and <code><h3></code> tags) with a brief description of your posts, preferably a short one-liner.</li></ol></p><div style="width: 500px; height: 380px; overflow: auto; border: 1px solid #000; padding: 5px;"><div id='myGallery'><br/>
<div class='imageElement'><br/>
<a class='open' href='http://your-post-url.blogspot.com'/><br/>
<img class='full' src='http://imagehost.com/your-image1.jpg' /><br/>
<h3>Post Title 1</h3><br/>
<p>Description of post 1</p><br/>
</div><br/>
<div class='imageElement'><br/>
<a class='open' href='http://your-post-url.blogspot.com'/><br/>
<img class='full' src='http://imagehost.com/your-image2.jpg' /><br/>
<h3>Post Title 2</h3><br/>
<p>Description of post 2</p><br/>
</div><br/>
<div class='imageElement'><br/>
<a class='open' href='http://your-post-url.blogspot.com'/><br/>
<img class='full' src='http://imagehost.com/your-image3.jpg' /><br/>
<h3>Post Title 3</h3><br/>
<p>Description of post 3</p><br/>
</div><br/>
</div></div><p>Once you have made all these edits (and checked that you haven't accidentally deleted any tags!), copy this entire modified section of code to your clipboard and paste this below the final <code></script></code> tag which you recently added in your sidebar.</p><p>Now, preview your template. If all has gone well, you should see your slide show appear in the sidebar. This initial installation will add a timed slide show where your images will change every three seconds.</p><p>Once you are sure you have installed this slide show correctly, you can proceed to save your template.</p>
<h3>Change the "timed" slide show to a manual one</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fc5PNWnwk9-mZRDZkF24khph1l1kG6PwBcSlzO3Su1ewV77piGbR-BjyWZOEaY0MKUwpJ365ltS6iI8IWQmzNN_ePeelTLC5NrdLmY5m2uL_vqRSOT3Zf7dWjGlSKu4nddvoOeQVgUE/s1600-h/manual-slideshow-example.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fc5PNWnwk9-mZRDZkF24khph1l1kG6PwBcSlzO3Su1ewV77piGbR-BjyWZOEaY0MKUwpJ365ltS6iI8IWQmzNN_ePeelTLC5NrdLmY5m2uL_vqRSOT3Zf7dWjGlSKu4nddvoOeQVgUE/s320/manual-slideshow-example.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5187197792132108290" /></a>If you would prefer your readers to choose when the next slide will come into effect, you need only make two small changes to the script for your SmoothGallery installation.</p><p>Find these lines in your template code:
<blockquote>timed: true,</br>
showArrows: false,</blockquote>
And change the values to their opposites, like this:
<blockquote>timed: false,</br>
showArrows: true,</blockquote>
All other values need to remain the same!</p><p>Now when you preview your template, you will see semi-transparent arrows in your slide show which become opaque when your mouse hovers over them. Clicking on these arrows will take you to the next slide in the show.</p><h3>Changing the dimensions of the slide show</h3><p>If you would prefer your slide show to be a different size than 200x100 pixels, you will need to change all of the images you use to this same size.</p><p>Then find this section of code in the <code><b:skin></code> section of your blog template:
<blockquote>#myGallery{<br/>
width: <span style="font-weight:bold; color: red;">200px</span> !important;<br/>
height: <span style="font-weight:bold; color: red;">100px</span> !important;<br/>
overflow: hidden; <br/>
} </blockquote>
And change the dimensions highlighted in bold red to the new dimensions of your images.</p>
<h3>Credits</h3><p>The original SmoothGallery scripts was developed by <a href="http://smoothgallery.jondesign.net/">JonDesign</a> and <a href="http://www.mootools.net">Mootools</a>. Both the original scripts and those featured here are provided under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU General Public license</a>.</p><h3>Final Thoughts</h3><p>Here at Blogger Buster, I use SmoothGallery to create a slide show of featured posts in my sidebar, but you could just as easily use this to create a stylish gallery of your photos with captions, or an animation of products in your blog.</p><p>I hope you have found this tutorial to be useful to you (despite being a little complicated!) and would love to see how you use this in your own Blogger powered blogs.</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-47765457033380403622008-04-07T16:00:00.000+01:002009-07-26T01:52:25.565+01:00Background Styles for the Minima Blogger Template (Readers Questions)<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCAANcJX883kVdb8ODnSh7dzGT2_D325nj8ner1R-49dtrL50BOZx1mwiiJ8ss7FSQrVeYqMkvR-MG1vk4BzrYLK825c2hgIzYbc0pvTPsPNN5qgJThAKv5k5JtYjrCw6c_SI4K-BUnk/s1600-h/minima-bg-styles-head.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCAANcJX883kVdb8ODnSh7dzGT2_D325nj8ner1R-49dtrL50BOZx1mwiiJ8ss7FSQrVeYqMkvR-MG1vk4BzrYLK825c2hgIzYbc0pvTPsPNN5qgJThAKv5k5JtYjrCw6c_SI4K-BUnk/s320/minima-bg-styles-head.jpg" alt=""id="BLOGGER_PHOTO_ID_5186832114321559522" /></a>The Minima template features only one definition for the background property, so if you change the color (or add a background image) this will affect the whole of the template, including the posts area and sidebars.</p><p>Over the past few weeks, many people have emailed or commented who would like to know how to add a background image/change the main background color in Blogger's Minima template, while retaining a flat color for the posts and sidebar areas. So in this post, I'll explain how to achieve this.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h3>How backgrounds work in the default Minima template</h3><p>The only style for a background property in the default (uncustomized) Minima template is for the main body section:
<blockquote>body {<br/>
<span style="font-weight:bold; color: red;">background:$bgcolor;</span><br/>
margin:0;<br/>
color:$textcolor;<br/>
font:x-small Georgia Serif;<br/>
font-size/* */:/**/small;<br/>
font-size: /**/small;<br/>
text-align: center;<br/>
}</blockquote></p><p>None of the other areas in the template have any background properties defined, so if you change the background color (or add an image to the background), all areas of the template will change too.</p><p>This can be especially problematic if you try to use a background image, as the text may be very difficult to read against a patterned background!</p><h3>How to add a different background to the main content area (posts and sidebar)</h3><p>The main posts section and sidebars in the Minima template are contained in a section called #outer-wrapper. This section is styled in the <b:skin> section (the style area) of your template, like this:
<blockquote>#outer-wrapper {<br/>
width: 660px;<br/>
margin:0 auto;<br/>
padding:10px;<br/>
text-align:$startSide;<br/>
font: $bodyfont;<br/>
}</blockquote></p><p>If you would like this entitr section to have a different background to the sides of your blog (the main <code>body</code> background, you can change this by adding one simple line of code:
<blockquote>#outer-wrapper {<br/>
<span style="font-weight:bold; color: red;">background: #ffffcc;</span><br/>
width: 660px;<br/>
margin:0 auto;<br/>
padding:10px;<br/>
text-align:$startSide;<br/>
font: $bodyfont;<br/>
}</blockquote></p><p>Here the hex value of <code>#ffffcc</code> will make the main sections of your blog have a cream colored background, like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ8fMCstdwbzBY3iSKOO-oGOTCV2jVSNU9oWxh3R1YkGXiVKcDinaZmv_9eLfJc8pS207QN0Nw8SRKIqYh-jQf-ADeDIH4YRfiQs-LZaOoX1dSK7VErmfdzcu4JRIzx6tsLSxOlbYHys/s1600-h/minima-background-propertie.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ8fMCstdwbzBY3iSKOO-oGOTCV2jVSNU9oWxh3R1YkGXiVKcDinaZmv_9eLfJc8pS207QN0Nw8SRKIqYh-jQf-ADeDIH4YRfiQs-LZaOoX1dSK7VErmfdzcu4JRIzx6tsLSxOlbYHys/s320/minima-background-propertie.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5186826668303028178" /></a></p><p>You can of course use any background color you like (check out the web color calculator of you need to find the hex value for your preferred color choice).</p><p>Once you have saved your template with the outer-wrapper background in place, you can then change the main background color of your blog in the Fonts and Colors section to any other color you prefer, and this change will not affect the main content of your blog.</p><h3>Adding a background image to the sides of your blog</h3><p>If you would prefer to use a patterned background (or background image) for the sides of your Minima template, you can easily do this by adding the URL of your image to the <code>body</code> section, like this:
<blockquote>body {<br/>
background:$bgcolor <span style="font-weight:bold; color: red;">url(http://imagehost.com/your-image-url.jpg)</span>;<br/>
margin:0;<br/>
color:$textcolor;<br/>
font:x-small Georgia Serif;<br/>
font-size/* */:/**/small;<br/>
font-size: /**/small;<br/>
text-align: center;<br/>
}</blockquote></p>This example would add a background image which is repeated across the whole template. It is best used for tiled background patterns, which would then appear like this in your template:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipw1hBkTD7tAOnKJV0QuQvQep9O9jYic9zbRUeVTO9lSevQuH4bCmPVsElF1cp-anXMl0n0px7PVKgrSsGVFQPGd4kTtMuLVXH06lZHvrLozbiaXoZAj7RfDuRtjXJx7J-shYPtTSlDE0/s1600-h/minima-background-image.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipw1hBkTD7tAOnKJV0QuQvQep9O9jYic9zbRUeVTO9lSevQuH4bCmPVsElF1cp-anXMl0n0px7PVKgrSsGVFQPGd4kTtMuLVXH06lZHvrLozbiaXoZAj7RfDuRtjXJx7J-shYPtTSlDE0/s320/minima-background-image.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5186826006878064578" /></a></p><h3>Further resources</h3><p>I hope this post has explained how to use different background styles in the Minima template. Here are some other articles you may be interested to read too:
<ul><li><a href="http://www.bloggerbuster.com/2007/10/how-to-use-background-image-for-your.html">How to use a background image for your blog</a></li>
<li><a href="http://www.bloggerbuster.com/2008/03/styling-sections-of-your-blogger-blog.html">Styling sections of your blog with borders and backgrounds</a></li>
<li><a href="http://www.bloggerbuster.com/2007/02/web-color-calculator-find-hex-values.html">Web Color Calculator</a> (to find the perfect color for your backgrounds)</li></ul></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-59131239887078451152008-04-01T12:00:00.000+01:002008-04-01T23:51:00.007+01:00Add Stylized Captions to Images in your Blog Posts Using CSS<p><span class="captionright"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsKMRR6SZySb4uBlWwdTzCi8P7i0cH4yFJtoCEG_N9LmCRwnFLy_pLZasi5UJOgHtSjUXJfSa5WdRGXaVErm5t-dXGhUiBpSg08SRhCA-X6ZPwe7dDbBSphZq9HV_Umlj6G8XVZYLOg5Q/s1600-h/captions-in-blog-posts.jpg"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsKMRR6SZySb4uBlWwdTzCi8P7i0cH4yFJtoCEG_N9LmCRwnFLy_pLZasi5UJOgHtSjUXJfSa5WdRGXaVErm5t-dXGhUiBpSg08SRhCA-X6ZPwe7dDbBSphZq9HV_Umlj6G8XVZYLOg5Q/s400/captions-in-blog-posts.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5184412729178951378" /></a><p>Photo by <a href="http://flickr.com/photos/jurvetson/">Jurvetson</a></p></span>In recent weeks, you may have noticed the captions I add to images in my blog posts. Where I am showcasing the work of another author, I prefer to add a caption explaining where this image has come from, whether this be Flickr or a screenshot of another blog/website.</p><p>I've tried a few different methods to display captions beneath images, and the best solution I have found so far is to use CSS. This allows me to align images (and their relevant captions) to the left, right or center of the post with ease.</p><p>So in this post, I will explain how I achieve stylized captions beneath my images in Blogger posts using only CSS and HTML tags.</p>
<span id="fullpost">
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1469326100994945";
/* 468x60 Post Content, created 30/03/08 */
google_ad_slot = "3546559894";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h3>Some examples of images with captions</h3><p><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghy6rIiLV1Uyz__Lne2vZ2e1YrBrUMAUD_jw6riTZkNwQQtpup6UY1U1KDRehJG60NOyuVxxwpxjeUTYeUAjZlxDXkvrzgTpVZpF2c3w69Zm8wLSY38Ors09U5Y0gfm9URS04bgS0U-Qw/s1600-h/sunset-left.jpg"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghy6rIiLV1Uyz__Lne2vZ2e1YrBrUMAUD_jw6riTZkNwQQtpup6UY1U1KDRehJG60NOyuVxxwpxjeUTYeUAjZlxDXkvrzgTpVZpF2c3w69Zm8wLSY38Ors09U5Y0gfm9URS04bgS0U-Qw/s320/sunset-left.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5184359858131537538" /></a><p>Left Image</p></span><span class="captionright"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlDZtfRF-dDAMbCQdyy9GsyJgcLzetMam1IHIJeWsRyE59EIeM0CaB45Fd9jnhhZf9Aq1a0irlyP7vZCpWGyPAf79QN4JGB_uZ335F3DwYG7-BGa3N-OqTO74Sy-kWbCIEIYX1AffXjc/s1600-h/beach-right.jpg"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlDZtfRF-dDAMbCQdyy9GsyJgcLzetMam1IHIJeWsRyE59EIeM0CaB45Fd9jnhhZf9Aq1a0irlyP7vZCpWGyPAf79QN4JGB_uZ335F3DwYG7-BGa3N-OqTO74Sy-kWbCIEIYX1AffXjc/s320/beach-right.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5184361146621726354" /></a><p>Right Image</p></span>Here are some images aligned to the left, right and center with their relevant captions beneath. The caption appears below the image with a border beneath which separates it from the main body of the post.</p><p>This is achieved by wrapping both the images and the captions in <span> tags which have a "class" depending on their alignment (left, right or center aligned).</p><p><span class="captionfull"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjckLWrZVfWBWz0rxObmvNYIFEE9_2brxjjlmHbmu6Sc5dyZj7q_wDknccuLm-_K2higslVbfTP9Yy6oxPkpZldYGoOUa3EGhFqS6OO7qNfZhZ6_mmokcFqksw-LDhCCtmB3Sb5Mi6qo1k/s1600-h/panorama.jpg"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjckLWrZVfWBWz0rxObmvNYIFEE9_2brxjjlmHbmu6Sc5dyZj7q_wDknccuLm-_K2higslVbfTP9Yy6oxPkpZldYGoOUa3EGhFqS6OO7qNfZhZ6_mmokcFqksw-LDhCCtmB3Sb5Mi6qo1k/s1600/panorama.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5184367692151885490" width="500px" /></a><p align="center">Center aligned image (Photo by <a href="http://flickr.com/photos/yakobusan/">Montrasio International</a>)</p></span></p><h3>How these captions work</h3><p>This image demonstrates the code I use to make the captions appear beneath each image:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-hdTfBJ19AXkq7RlO0ttbmYuwlbbSsp0QUdo9XzlCe7fVfmvEWB0k_Cmijqjd7uwPGtByNIJ76yJ2qk7g1J227Y0MQQEcl-386t0KtRZKW5s9ca9B-GuuC9gQ1Ddmkic4fbF2-7qlvA/s1600-h/how-post-captions-work.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-hdTfBJ19AXkq7RlO0ttbmYuwlbbSsp0QUdo9XzlCe7fVfmvEWB0k_Cmijqjd7uwPGtByNIJ76yJ2qk7g1J227Y0MQQEcl-386t0KtRZKW5s9ca9B-GuuC9gQ1Ddmkic4fbF2-7qlvA/s400/how-post-captions-work.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5184408648960020162" /></a></p><p>In the body of my posts, the code for the images and captions will appear like this:
<pre class="code"><span class="<span style="font-weight:bold; color: red;">left-caption</span>"><br/>
<img src="http://url-of-image.com/image.jpg" /><br/>
<p>Caption of this image</p><br/>
</span></pre>
This example would produce an image and caption which is aligned to the left of the text in my post.</p><p>To align an image to the right, I would replace "left-caption" with "right-caption", or to center the image I would use "center-caption".</p><h3>The CSS code used to produce these images and captions</h3><p>If you would like to use captions which are styled like those I use in my posts, you will need to use the following styling code:
<div style="overflow: auto; width: 500px; height: 200px; border: 1px solid #333; padding: 5px; background: #fff;">.left-caption { float: left; margin: 0 1.5em 1em 0; padding: 0.5em; text-align: center; }<br>.right-caption { float: right; margin: 0 0 1em 1.5em; padding: 0.5em; text-align: center; }<br>.center-caption { margin: 0 0 1em 0; padding: 0; text-align: center; }<br>.left-caption img, .right-caption img, .center-caption img { margin: 0 auto; display: block; }<br>.left-caption p, .right-caption p, .center-caption p { background: #eee; margin: 0; line-height: 1.6em; padding: 0.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; font-size: 0.9em; color: #333; }</div>
Copy this entire section of code and paste this just before the closing </b:skin> tag in your blog's template code.</p><h3>How to use these captions in your Blogger posts</h3><p>Once you have added this style code to your blog's template, you can display captions beneath the images in your posts.</p><p>To achieve this, you will need to wrap both your image and your caption in span tags according to the alignment you prefer. Here are the three different formats you could use:</p><p><span style="font-weight:bold;">To align these to the left</span>
<pre class="code"><span class="left-caption"><br/>
<img src="http://image-host.com/yourimage.jpg" /><br/>
<p>Your Caption Here</p><br/>
</span></pre></p><p><span style="font-weight:bold;">To align these to the right:</span>
<pre class="code"><span class="right-caption"><br/>
<img src="http://image-host.com/yourimage.jpg" /><br/>
<p>Your Caption Here</p><br/>
</span></pre></p><p><span style="font-weight:bold;">To align these to the center of the page:</span>
<pre class="code"><span class="center-caption"><br/>
<img src="http://image-host.com/yourimage.jpg" /><br/>
<p>Your Caption Here</p><br/></p>
</span></pre></p><p>Note that the captions are also wrapped in paragraph tags, like this:
<pre class="code"><p>Your Caption Here</p></pre>
This ensures the caption is properly styled, as the CSS code contains the styles for paragraphs which appear within this span class.</p><p><span style="font-weight:bold;">If you upload your image using Blogger's image upload function, you must make sure that you choose "None" in the layout choices.</span></p><p>It may be easier for you to use the HTML editor to create posts with image captions as this will allow you to see all of the code you are using.</p><h3>Other methods of adding captions to your posts</h3><p>As I explained at the beginning of this post, there are many different methods you could use to display captions beneath your images. The method I explained here is the one which works best for me, though you may prefer to use a different technique.</p><p>Here are some links to other articles which offer alternative methods to display captions beneath your post images:
<ul><li><a href="http://www.1976design.com/blog/archive/2003/11/25/captions/">JavaScript Image Captions</a> from 1976 Design<br/><br/>This method automatically inserts a caption based on the title of the image.</li>
<li><a href="http://blogger-tricks.blogspot.com/2008/01/captions-for-images-in-blog-posts.html">Captions for Images in Blog Posts</a> by Blogger Tips and Tricks<br/><br/>This is a much simpler method, using only HTML code in the body of the post.</li>
<li><a href="http://www.askthecssguy.com/2006/12/image_captions_generated_with.html">Image Captions with CSS and JavaScript</a> by Ask The CSS Guy<br/><br/>Similar to 1976 Design's post, this article uses a combination of styling code and scripting to add a partially transparent caption over the bottom section of the image.</li></ul></p><p>I hope this tutorial has been useful in explaining how you could add captions to your post images in Blogger. If you have any questions or would like to suggest further uses for this, feel free to leave your comments and suggestions 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-85887536645427357502008-03-21T12:00:00.012+00:002009-07-26T01:49:57.755+01:00How to add CSS Rounded Corners to your Blogger Template<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9L3gaYJp607cLHoyIrk614Np1T6gPMiNh5KvFc9a_BFAiaX25t-ETVst4d-hK8_CI1JryO6V3EPoabfOrF12WKTub7_eDNZcRd_XZjHvE_MC799mxC1zcbXE69IeTd61ZLvbcjJw5P4E/s1600-h/rounded-corners.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9L3gaYJp607cLHoyIrk614Np1T6gPMiNh5KvFc9a_BFAiaX25t-ETVst4d-hK8_CI1JryO6V3EPoabfOrF12WKTub7_eDNZcRd_XZjHvE_MC799mxC1zcbXE69IeTd61ZLvbcjJw5P4E/s400/rounded-corners.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5180248273054173682" /></a>Rounded corners can add a great deal of style to an otherwise simple Blogger template. Luckily, you don't need to create complicated images and CSS code to achieve this: <a href="http://www.spiffycorners.com" title="Create image-less rounded corners">Spiffy Corners</a> is a free service which generates code that you can simply add to your Blogger template, and no externally hosted images are required!</p><p>Since I <a href="http://www.bloggerbuster.com/2007/09/create-rounded-corners-without-using.html">originally wrote about Spiffy Corners</a>, many people have asked me where they should paste the generated code in order to make those rounded corners appear. So in this article, I will offer a full explanation of how to use Spiffy Corners to create rounded corners in the main and sidebar sections of your Blogger template.</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>What is Spiffy Corners and How Does It Work?</h3><p><a href="http://www.spiffycorners.com">Spiffy Corners</a> is an online generator which creates CSS and HTML code to create anti-aliased rounded corners for your web/blog design. The code generated by Spiffy Corners <span style="font-weight:bold;"><span style="font-style:italic;">does not</span> require any images or JavaScript</span>; using this method to create rounded corners for elements of your blogger template <span style="font-weight:bold;">will not slow down page loading time at all</span>, and can add a truly distinguished look for your theme.</p><p>The way this method works when added to your Blogger template is simple and yet truly effective! Spiffy Corners generates purely HTML tags which are styled using CSS; when you add the HTML section to your Blogger template, the area it creates appears to have rounded corners because of CSS styling.</p><p>The HTML tags are contained within a DIV element.As DIVs expand to the complete width of their containing element, it is important that this code is placed inside another element, or the color will seem to bleed across the whole template and spoil the effect.</p><h3>How to use Spiffy Corners in your Blogger template</h3><p>To explain how to use Spiffy Corners in your own Blogger template, I will use the default Minima template as an example. The same principles will apply no matter which template you are using, and I will outline possible differences in template code where appropriate.</p><p>Currently, my Minima template appears like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSAwNrRMQgs0JZYLwzWLlxzUCOEYF5zdBUYMwfBnwLkWK2M2p9RGFSuR7xmPsaDLEwWolUhCGnRLPUgxu3zcDsKR9145FELIODqW7RzIm_bwKlJR-6NvahqA62Aw89NnpLDfrRn3GVM0/s1600-h/Screen-Shot81+Mar.+21+14.27.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSAwNrRMQgs0JZYLwzWLlxzUCOEYF5zdBUYMwfBnwLkWK2M2p9RGFSuR7xmPsaDLEwWolUhCGnRLPUgxu3zcDsKR9145FELIODqW7RzIm_bwKlJR-6NvahqA62Aw89NnpLDfrRn3GVM0/s320/Screen-Shot81+Mar.+21+14.27.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5180201608234502546" /></a></p><p>I would like to add a pale blue background with rounded corners to the main posts column. Note that the main background color of my blog is white.<p>First of all, I need to <a href="http://www.spiffycorners.com">visit the Spiffy Corners website</a> to generate the correct code and color scheme to create the rounded corners for my main section.</p>Here is what the initial screen looks like:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7NSVjbct1gZmL-PGD-LHb8K45hNJ6P9xErXyhFvOBwVRGlBqIxjdcwOLAtJqehpi6h4KndcFOtCzg8NNq33cV7CntRCUEacjd6lsaRBRF-Yy3ecQMgtVLk0odQaWk4esUEJpZsm1yn4/s1600-h/Screen-Shot80+Mar.+21+14.21.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7NSVjbct1gZmL-PGD-LHb8K45hNJ6P9xErXyhFvOBwVRGlBqIxjdcwOLAtJqehpi6h4KndcFOtCzg8NNq33cV7CntRCUEacjd6lsaRBRF-Yy3ecQMgtVLk0odQaWk4esUEJpZsm1yn4/s400/Screen-Shot80+Mar.+21+14.21.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5180200251024836994" /></a></p><p>Here I need to choose the background and foreground colors to generate the correct code for my design.</p><p>As my background color is white (hex value #FFFFFF), I choose this for the background color. The hex value #C3CCEE is a nice shade of pale blue which I choose for the foreground color.</p><p>There are three degrees of "roundness" defined beneath the color choices: 3px, 5px and 9px, but unfortunately only the 5px radius currently works!</p><p>When I click on the 5px button, this displays an example of what my rounded corners will look like, and generates the correct code for me to use in my blog template:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBI4kpbw_3NeKZmWWnttMGbN9b64eutcl_sLrra3mIcTPyHDKPxwRLriXMSapIlsVoE9Wp_tEtr7avtClhslf0mHoMNIkRfCLACQXpQv79oM8JY__g4k7y73iU_pY8PykRyQCQWEJtNoQ/s1600-h/Screen-Shot82+Mar.+21+14.36.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBI4kpbw_3NeKZmWWnttMGbN9b64eutcl_sLrra3mIcTPyHDKPxwRLriXMSapIlsVoE9Wp_tEtr7avtClhslf0mHoMNIkRfCLACQXpQv79oM8JY__g4k7y73iU_pY8PykRyQCQWEJtNoQ/s320/Screen-Shot82+Mar.+21+14.36.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5180203893157104034" /></a></p><h4>How to use the code provided</h4><p>This is generally considered the most problematic part of using Spiffy Corners (especially when used for Blogger template designs!).</p><p>I'm going to break this down into three sections of code which should help explain exactly where to copy and paste the code.</p><p><span style="font-weight:bold; text-decoration: underline;">The CSS Section</span></p><p>The CSS code which I generated for my pale blue rounded boxes appears like this:</p><pre class="code"><span style="font-weight:bold; color: red;"><style type="text/css"></span><br/>
.spiffy{display:block}<br/>
.spiffy *{<br/>
display:block;<br/>
height:1px;<br/>
overflow:hidden;<br/>
font-size:.01em;<br/>
background:#C3CCEE}<br/>
[more code here]<br/>
.spiffy5{<br/>
border-left:1px solid #d2d8f2;<br/>
border-right:1px solid #d2d8f2}<br/>
.spiffyfg{<br/>
background:#C3CCEE}<br/>
<span style="font-weight:bold; color: red;"></style></span></pre></p><p>In this example, notice that I've highlighted the <style> tags in bold red. <span style="font-weight:bold;">When using this code in your Blogger template, these style tags are unnecessary!</span></p><p>To add this style code to my template, I will copy the CSS code (<span style="font-style:italic;">excluding the unnecessary style tags</span>) to my clipboard.</p><p>Then in a different tab/browser window, I need to go to Layout>Edit HTML in my Blogger dashboard <span style="font-style:italic;">without</span> clicking the "expand widget templates" box. The style code I have copied needs to be pasted just before the closing <b:skin> tag in my template:
<pre class="code">.spiffy{display:block}<br/>
.spiffy *{<br/>
display:block;<br/>
height:1px;<br/>
overflow:hidden;<br/>
font-size:.01em;<br/>
background:#C3CCEE}<br/>
[more code here]<br/>
.spiffy5{<br/>
border-left:1px solid #d2d8f2;<br/>
border-right:1px solid #d2d8f2}<br/>
.spiffyfg{<br/>
background:#C3CCEE}<br/><br/><span style="font-weight:bold; color:red;">]]></b:skin></span></pre></p><p><span style="font-weight:bold; text-decoration: underline;">Now for the HTML code!</span></p><p>I now need to add the HTML code which creates the rounded corners to the main posts area of my blog template.</p><p>The <span style="font-weight:bold;">HTML code</span> generated by Spiffy Corners should clearly shows where to put my content (IE: the widget used to display my blog posts). But to work with this effectively, the code should be split into two sections, like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwalvXzZ4SCdCCW8RsqL7Bx_dFtOuZK0iBWmcPiIUky30nLBICt6pi97wCNbifZoa9n8Cah_1Gxl25oIrnM3bNgATuWt66ecx4M6iW2We_as0LI7Dhd4mudUIEp2cfnY6R-3x9gmQ50M/s1600-h/spiffy-code.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwalvXzZ4SCdCCW8RsqL7Bx_dFtOuZK0iBWmcPiIUky30nLBICt6pi97wCNbifZoa9n8Cah_1Gxl25oIrnM3bNgATuWt66ecx4M6iW2We_as0LI7Dhd4mudUIEp2cfnY6R-3x9gmQ50M/s400/spiffy-code.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5180212259753396658" /></a></p><p>Splitting the HTML code into these two sections will make it much easier to work with!</p><p>To start with, I will copy "Part 1" of this code to my clipboard. I need to add this just after the opening DIV tag for the main posts section.</p><p>Next I will copy "Part 2" of the HTML code, and paste this just before the closing DIV tag for the main posts section.</p><p>Here is the code in my Blogger template which shows exactly where I should paste these different sections of code:
<pre class="code"> <div id='main-wrapper'><span style="font-weight:bold;">; <!-- This is the opening DIV tag ></span><br/>
<span style="font-weight:bold; color: red;">Paste Part 1 of the HTML Code Here!</span><br/>
<b:section class='main' id='main' showaddelement='no'><br/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br/>
</b:section><br/>
<span style="font-weight:bold; color: blue;">Paste Part 2 of the HTML Code Here!</span><br/>
</div> <span style="font-weight:bold;"><!-- This is the closing DIV tag --></span></pre></p><p>Note: For different templates, the "main-wrapper" DIV may be named something different, such as "main-wrap" or even "main". The best way to find where exactly to paste your code is to look for this section in your blog template:
<pre class="code"> <b:section class='main' id='main' showaddelement='no'><br/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br/>
</b:section></pre>
And paste the relevant sections of code above and below this.</p><p>Now if all goes to plan, when previewing the template it <span style="font-style:italic;">should</span> appear like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaXWqIPABZo-bx3R9FyqySJtwvERkPUmRyuKVGWJR-FLyyTMTK6AwpQxC7o3gqI7PBiHP0RmMNFoo2q66wwoVMFC9lLVtrKcMMWAb7FVBnFwRL67aj06Ax3jcntXiTvxXJj4W75_9IVfw/s1600-h/Screen-Shot84+Mar.+21+16.09.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaXWqIPABZo-bx3R9FyqySJtwvERkPUmRyuKVGWJR-FLyyTMTK6AwpQxC7o3gqI7PBiHP0RmMNFoo2q66wwoVMFC9lLVtrKcMMWAb7FVBnFwRL67aj06Ax3jcntXiTvxXJj4W75_9IVfw/s400/Screen-Shot84+Mar.+21+16.09.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5180227962153830850" /></a></p><p>In this case, I <span style="font-style:italic;">can</span> save my template for the rounded corners to appear around my main posts section.</p><p>But unfortunately, Blogger templates can be quite finicky when trying to use Spiffy corners... Which is where the troubleshooting comes into play!</p><h4>Troubleshooting Spiffy Corners</h4><p>The most common problem experienced when using Spiffy Corners in Blogger templates is a gap between the corners and the main content section:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDvPozOFJDTr8FEfeGm8fNBtTb2sHM0HBlgdlRupdbsT3whryH8W7Vp59vSLY9a9t6nTeJqtotUCkfWPLoLfe_p4VNRxgy2cBxbYU7ZggUEnozMQX4jgzqi9vo6RB_8QIUumS6JxBMsc/s1600-h/Screen-Shot85+Mar.+21+16.14.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDvPozOFJDTr8FEfeGm8fNBtTb2sHM0HBlgdlRupdbsT3whryH8W7Vp59vSLY9a9t6nTeJqtotUCkfWPLoLfe_p4VNRxgy2cBxbYU7ZggUEnozMQX4jgzqi9vo6RB_8QIUumS6JxBMsc/s400/Screen-Shot85+Mar.+21+16.14.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5180229242054085074" /></a></p><p>This can be quite infuriating, especially as this doesn't occur in all template styles! But there is a solution: adding negative margin values to the top and bottom of the "spiffyfg" div. This draws the top and bottom margins inwards and reduces the gap.</p><p>The easiest way to draw the margins in is to add margin properties in the style section of your Blogger template.</p><p>In my example template, the style for "spiffyfg" is defined like this:
<pre class="code">.spiffyfg{
background:#C3CCEE<span style="font-weight:bold; color: red;">;
margin: -15px 0 -20px 0;</span>}</pre>
The code highlighted in bold red is <span style="font-weight:bold;">additional margin properties which I have added to draw those margins inwards</span>. In your own template, you may need to adjust the values of these negative margins slightly to prevent any of your content being clipped by the margins.</p><p>This technique has worked for me each time there was a gap between the top and bottom sections of my rounded corners. I hope it will work for you too!</p><h3>Using Spiffy Corners in Sidebar Sections</h3><p>To round the corners of your sidebar(s), the same principles apply.</p><p>Here is the template code for the sidebar in my example template which shows where you will need to add the Spiffy Corners code:
<pre class="code"> <div id='sidebar-wrapper'><br/>
<span style="font-weight:bold; color: red;"><!-- Paste Part 1 here --> </span><br/>
<b:section class='sidebar' id='sidebar' preferred='yes'><br/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/><br/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/><br/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/><br/>
</b:section><br/>
<span style="font-weight:bold; color: blue;"><!-- Paste Part 2 here --> </span><br/>
</div></pre></p><p>In different templates, the <div id='sidebar'> may be named differently. If you are able to locate this section of code (or similar) you should paste the HTML code for your Spiffy Corners directly above and below as appropriate:
<pre class="code"> <b:section class='sidebar' id='sidebar' preferred='yes'><br/>
<!-- widget codes here --><br/>
</b:section></pre></p><h3>Using different color schemes for different elements</h3><p>One of the great things about Spiffy Corners is that you can create many different color schemes and name each one differently.</p><p>For example, if you wanted a red foreground for your main posts section, and a blue foreground for your sidebar, you can generate two different sets of code named "Red" and "Blue" respectively.</p><p>You can then add the CSS code for both "Red" and "Blue" to the <b:skin> section of your Blogger template, and paste the corresponding HTML code in the main and sidebar sections.</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-22766367849599139592008-03-14T12:30:00.009+00:002009-07-26T01:49:57.755+01:00Styling Sections of your Blogger Blog with Borders and Backgrounds<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85lb3SWFDPyxNvtTLZ2wpV8imhPpLvD7vAAh9BgK-pi5rlxg9tZfEGknj0A6tix5qmP7luTIcj3U8HK-luMLzIGjtMirwzcjdGsGqyMZOb_0HAkW1rMvKf5R16fnsPwsoiJjkOCglWBw/s1600-h/chalkboard.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85lb3SWFDPyxNvtTLZ2wpV8imhPpLvD7vAAh9BgK-pi5rlxg9tZfEGknj0A6tix5qmP7luTIcj3U8HK-luMLzIGjtMirwzcjdGsGqyMZOb_0HAkW1rMvKf5R16fnsPwsoiJjkOCglWBw/s320/chalkboard.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5177711003157349874" /></a>Using borders and backgrounds for the main areas of your blog are simple techniques which can achieve dramatic stylistic effects.</p><p>Borders and background colors help separate areas of your blog, and can be used to highlight important content, such as your blog posts, or features in your blog sidebar.</p>Most importantly, backgrounds and borders don't require you to have extensive knowledge and skill with creating and using images. Instead you can use simple colors, or generate tiled backgrounds to create a completely unique template for 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>Here are some of my favorite examples of how borders and backgrounds can be used to separate content:</p><div style="clear: both;"><p><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5cqB6nqiXvVhRDqkHEUzrxvDyPwFZpeIfx7kRBLeogM2CqUFDr784zcGg2RigMCSC3NUtjA89DW6_Z1LIuwkG25jghWP-JsgqQO4_9MtceJ7BOGc59qrZba7J69gUCeqxFZK6bN_KvQ/s1600-h/ScreenHunter_16+Mar.+14+17.06.gif"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5cqB6nqiXvVhRDqkHEUzrxvDyPwFZpeIfx7kRBLeogM2CqUFDr784zcGg2RigMCSC3NUtjA89DW6_Z1LIuwkG25jghWP-JsgqQO4_9MtceJ7BOGc59qrZba7J69gUCeqxFZK6bN_KvQ/s320/ScreenHunter_16+Mar.+14+17.06.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5177645371762099634" /></a><p><a href="http://www.problogdesign.com/">Pro Blog Design</a></p></span>This is this excellent design exemplifies the theme of this post perfectly. Thick borders and simple backgrounds immediately convey which areas are important.</p></div><div style="clear: both;"><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrCF168rNtBdbUaqqQfZhDFHg-aem5pa6fM9cGXqFktMtonl7YbOVnxn_UVPEOWjmGfwGGhTb4uDQQ3tW0-DEMzJNbqKuMqOBFqovqp9eTTKG7qgNSJa6ZEWJ0tIEC3XfkgegXVIP-lE/s1600-h/ScreenHunter_17+Mar.+14+17.11.gif"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrCF168rNtBdbUaqqQfZhDFHg-aem5pa6fM9cGXqFktMtonl7YbOVnxn_UVPEOWjmGfwGGhTb4uDQQ3tW0-DEMzJNbqKuMqOBFqovqp9eTTKG7qgNSJa6ZEWJ0tIEC3XfkgegXVIP-lE/s320/ScreenHunter_17+Mar.+14+17.11.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5177646376784446914" /></a><p><a href="http://mimbo.prothemedesign.com/">Mimbo Pro</a></p></span>Here colored backgrounds are put to great effect, with only fine borders beneath elements to add a sense of perspective.</p></div><div style="clear: both;"><p><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sLG7A6EJvdmEtdTnNQt8vJ0TkaGC57guqXBB0ZYP_IiS2apZBK09WLL_XcKQrUwx5xJaAbOHt8I3QV4M6XOmpP9xJXihjowx0Tbbrr656rCbqE_OdFPsfugeoi0fgC9IBpCTpqyw0Kg/s1600-h/ScreenHunter_18+Mar.+14+17.54.gif"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sLG7A6EJvdmEtdTnNQt8vJ0TkaGC57guqXBB0ZYP_IiS2apZBK09WLL_XcKQrUwx5xJaAbOHt8I3QV4M6XOmpP9xJXihjowx0Tbbrr656rCbqE_OdFPsfugeoi0fgC9IBpCTpqyw0Kg/s320/ScreenHunter_18+Mar.+14+17.54.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5177657513634645458" /></a><p><a href="http://justintadlock.com/options/">Options Theme (By Justin Tadlock)</a></p></span>The border and background colors are varying shades of the same palette: subtle changes in color add depth to each element of this theme.</p></div><p>After seeing these examples, you're probably wondering how you may achieve these same effects in your Blogger templates! So allow me to explain the basics of adding backgrounds and borders to your blog.</p><h3>Different styles for borders</h3><p>There are many ways to set the properties for borders in your blog template. In this tutorial, I will only explain the basic concepts to help you get started.</p><p>The easiest method of all to add a border to an element of your template is to add border properties for a particular blog element in the <b:skin> section of your Blogger template.</p><p>For example, the "#main-wrapper" section in most Blogger templates refers to the main posts section. To add a border to this section, we could add a line like this:
<pre class="code">#main-wrapper {<br/>
<span style="font-weight:bold;color: red;">border: 3px solid #000000;</span><br/>
[other properties here]<br/>
}</pre>
This will reproduce a 3 pixel wide, solid black border, like this:</p><div style="margin: 10px; padding: 10px; border: 3px solid #000; color: red; text-align: center;">A section with a solid black border, three pixels wide</div><p>Using this example, you could also change the color, and width of the border, like this:</p><div style="margin: 10px; padding: 10px; border: 5px solid #f00; text-align: center;">A section with a solid red border, five pixels wide</div><h4>Borders don't have to be solid!</h4><p>Instead of solid borders, you could add different properties to create unusual effects such as:</p><div style="margin: 10px; padding: 10px; border: 3px dotted #000; text-align: center;">Dotted<br/>border: 3px dotted #000;</div><div style="margin: 10px; padding: 10px; border: 5px dashed green; text-align: center;">Dashed<br/>border: 5px dashed green;</div><div style="margin: 10px; padding: 10px; border-style: double; border-color: blue; text-align: center;">Double<br/>border-style: double; border-color: blue;</div><div style="margin: 10px; padding: 10px; border-style: outset; border-color: #404040; text-align: center;">Outset<br/>border-style: outset; border-color: #404040;</div><h3>Different styles for backgrounds</h3><p>Backgrounds can either be a flat color (defined as a hex value, such as #000000) or as an image (which is defined by the URL of the image).</p><p>Flat color backgrounds are easily created by adding the hex color value of the image as a property in the style section of your Blogger template. For example, if I wanted to add a yellow background color to my sidebar, I could add the line in red to the #sidebar-wrapper properties in my template code, like this:
<pre class="code">#sidebar-wrapper {<br/>
<span style="font-weight:bold;color: red;">background: #ffcc00;</span><br/>
[other style properties here]<br/>
}</pre></p><p>To use an image as a background for a section of your template, you will need to host the background image online, and define the image by linking to the URL of the image, like this:
<pre class="code">#sidebar-wrapper {<br/>
<span style="font-weight:bold;color: red;">background: url(http://imagehost.com/yourimage.jpg);</span><br/>
[other style properties here]<br/>
}</pre></p><p>You can also combine color and image background properties, like this:
<pre class="code">#sidebar-wrapper {<br/>
<span style="font-weight:bold;color: red;">background: #ffcc00 url(http://imagehost.com/yourimage.jpg) no-repeat top left;</span><br/>
[other style properties here]<br/>
}</pre>
The example above would feature an image at the top left of the sidebar, while all other space would be yellow.</p><p>You can read more about adding background images to your Blogger blog <a href="http://www.bloggerbuster.com/2007/10/how-to-use-background-image-for-your.html" title="Adding Background Images to Blogger Blogs">in this previous article</a>.</p><h3>Combining Border and Background Properties</h3><p>This is where the border and background properties can become very stylish when applied to elements of your Blogger template.</p><p>By combining
<div style="margin: 10px; padding: 10px; border: 5px solid #333333; text-align: center">A wide grey border</div>With...</p><div style="background: #333333; margin: 10px; padding: 10px; text-align: center; color: white;">A Paler Grey Background</div>You can create an effect like this:<div style="background: #333333; margin: 10px; padding: 10px; text-align: center; color: white; border: 5px solid #666666;"><span style="font-weight:bold;color: yellow;">A stylish section for your blog!</span><br/>border: 5px solid #666666;<br/>background: #333333;</div>You could even add a background image, repeating across the whole section, like this:<div style="border-style: outset; border-width: 3px; border-color: #99cccc; margin: 10px; padding: 10px; text-align: center; background: #99cccc url(http://www.stripegenerator.com/generators/generate_stripes.php?fore=99cccc&h=30&w=5&p=5&back1=B8DFDF&back2=99cccc>=3&d=7&shadow=0&);"><span style="font-weight:bold; color: blue;">Another example, using images, border and background color</span><br/>border: 3px outset #99cccc;<br/>background: #99cccc url(http://imagehost.image.jpg);</div></p><h3>Where could you add border and background styles in your Blogger template?</h3><p>The main sections of your Blogger template would be the header, posts section, sidebar(s) and the footer section.</p><p>The style properties for these sections in your template would probably look like this:
<ul><li><span style="font-weight:bold;">Header Section</span> - #header-wrapper or #header-wrap</li>
<li><span style="font-weight:bold;">Main Posts Section</span> - #main-wrapper, #main-wrap or #main</li>
<li><span style="font-weight:bold;">Sidebar(s)</span> - #sidebar-wrapper, #sidebar-wrap, #sidebar or .sidebar </li>
<li><span style="font-weight:bold;">Footer Section</span> - #footer-wrapper, #footer-wrap or #footer</li></ul></p><p>If you edit any of these sections in the <b:skin> section of your Blogger template, be sure to check if there are already any border or background properties defined. If there are, you will need to edit these sections, rather than add more new ones. Otherwise your edits will not appear the way you would like them to look!</p><p><span style="font-weight:bold;"><u>Remember:</u> you can always preview changes before saving your template! Then if you decide you don't like the changes you have made, you can click the "clear all edits" button and begin again.</span></p><h3>Experiment with different styles!</h3><p>Using properties for the borders and background properties of the different sections in your template, the style possibilities are endless! Try different color schemes, contrasting borders and backgrounds, and experiment with tiling images to see what would work well for your own blog design.</p><p>Here are some useful resources to help you use borders and background images in your own Blogger template designs:
<ul><li><a href="http://www.w3schools.com/css/css_border.asp" title="W3Schools explain border properties">CSS Border Properties</a>: Learn more about using borders</li>
<li><a href="http://www.bloggerbuster.com/2007/02/web-color-calculator-find-hex-values.html" title="Hex Values of your Favorite Colors">Web Color Calculator</a>: Find the hex values of your favorite colors</li>
<li><a href="http://colorblender.com/" title="Find your perfect color scheme">Color Blend</a>: Find the perfect color scheme for your blog design</li>
<li><a href="http://www.stripegenerator.com" title="Create Web 2.0 Stripes">Stripe Generator</a>: Create striped backgrounds</li>
<li><a href="http://www.squidfingers.com/patterns/" title="Free Background Images">Squidfingers:</a> My favorite resource for tiling image backgrounds</li></ul></p><p>I hope this post has helped you learn more about border and background properties. Please let me know how you have used these techniques in your own designs by leaving your comments 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-41094078291162657002008-03-13T22:02:00.002+00:002009-07-26T01:49:57.755+01:00Blogger Template Design Series Update<p>It's been a while since I added posts to the <a href="http://www.bloggerbuster.com/search/label/Blogger%20Template%20Design%20Series">Blogger Template Design series</a>, but from this week onwards I will be posting more regularly in this category.</p><p>In previous posts from this series, I have explained <a href="http://www.bloggerbuster.com/2008/01/creating-three-column-or-wide-two.html">some possibilities for blog layouts</a>, and also for <a href="http://www.bloggerbuster.com/2008/02/easy-way-to-make-great-blog-header.html">customizing the header section</a>.</p><p>Next we will be moving on to style the main posts area of the template:
<ul><li>Adding a simple background color and border</li>
<li>How to make your posts appear printed on paper (the simpler method)</li>
<li>Creating rounded corners for the main posts area</li>
<li>A complete wrapper for the posts section (the tricky method)</li></ul></p><p>Later in the series, I'll explain methods of customizing blog titles, adding links beneath the titles and other customizations which can be applied to blog posts.</p><p>Between these posts, I will of course write other articles about Blogger and various aspects of this redesign too.</p><p>If there is any particular tutorial you would like me to post, please leave your comments below or <a href="http://www.bloggerbuster.com/2007/06/contact-me.html">send me an email</a>. Your comments and opinions are always welcome!</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-72229348967111310182008-03-08T12:00:00.001+00:002009-07-26T02:01:38.768+01:00How I Customized the MyBlogLog Recent Readers Widget to Match my Blogger Template<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbd4IxR5-me3zYZurdRQ93xr8ygVQKi1ThJTAh8DJOpIaFbhYC4I2bZdiHTcLj8gTmLpRpVF0YLLwlB-JkmN88AucdG-3QrzKqD8VNVUOCZKbntryehAiQGW1nDc-1FSmJ01jCH8FltA/s1600-h/mybloglogrec.png"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbd4IxR5-me3zYZurdRQ93xr8ygVQKi1ThJTAh8DJOpIaFbhYC4I2bZdiHTcLj8gTmLpRpVF0YLLwlB-JkmN88AucdG-3QrzKqD8VNVUOCZKbntryehAiQGW1nDc-1FSmJ01jCH8FltA/s400/mybloglogrec.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5175175954545460450" /></a>The "Recent Readers" widget you see towards the bottom of the sidebar is powered by <a href="http://mybloglog.com" title="Build a community around your blog with MyBlogLog">MyBlogLog</a>. Here you will see the avatars of MyBlogLog members who have recently spent some time here reading the Blogger Buster blog.</p><p>The default MyBlogLog widgets didn't fit in too well with the style of my new template, so I decided to customize this using CSS to hide the parts I don't want to display.</p><p>In this article, I'll explain how I achieved this. It's quite a simple technique to try out if you'd like to use - and customize - your own MyBlogLog Recent Readers widget 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><span style="font-weight:bold;">For this tutorial, I'm going to assume that you're already a member of MyBlogLog</span>. If you're not yet a member, you may well want to <a href="http://mybloglog.com" title="Create your free MyBlogLog account">sign up to MyBlogLog</a> and begin using this excellent (and free!) community based service to help build traffic and a community for your blog!</p><p>Once your a member and have registered your blog, you'll need to create the code for a Recent Readers widget, which you can use in your sidebar. To do this, visit you profile page, and click on the "widgets" link for your blog. In my own MyBlogLog dashboard, this link appears like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihlV_-0hGtlL6Y88ip0r6GYNrcPfWg0IIeAALlTGoyMiJ8Vb53xhDetcMdPrugYTigroxxNTERI9hXIKCsPInsJvbhf5GGo2MzmxOMhyNeZW7uakfQOrY5LleS4OUIwlGWA2j8Gu_HRvs/s1600-h/myblogloglink.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihlV_-0hGtlL6Y88ip0r6GYNrcPfWg0IIeAALlTGoyMiJ8Vb53xhDetcMdPrugYTigroxxNTERI9hXIKCsPInsJvbhf5GGo2MzmxOMhyNeZW7uakfQOrY5LleS4OUIwlGWA2j8Gu_HRvs/s400/myblogloglink.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5175166260804273346" /></a></p><p>Now, MyBlogLog have recently introduced a shiny new widget, which has some great functionality. But this is not the widget we need to use for this tutorial! You need to use the "Crusty Old Widget" instead!</p><p>At first, the "crusty old widget" will look like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUCe090CgU2Giigc_d723iNYGucoNzzpzJQJPa0AIyrsJPehR_g7PtAJi96SpZXnaAF9B3TsaJMELTPji8jr0KJ_obVJhjWPg5kPuKF1aY6fOEkoD_cV7LPj1OeoBVWEAcgFIb7uBNVU/s1600-h/ScreenHunter_15+Mar.+08+00.50.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUCe090CgU2Giigc_d723iNYGucoNzzpzJQJPa0AIyrsJPehR_g7PtAJi96SpZXnaAF9B3TsaJMELTPji8jr0KJ_obVJhjWPg5kPuKF1aY6fOEkoD_cV7LPj1OeoBVWEAcgFIb7uBNVU/s400/ScreenHunter_15+Mar.+08+00.50.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5175166965178909906" /></a></p><p>On this page, you'll need to make a few customizations to the appearance of your widget:
<ul><li>Change <span style="font-weight:bold;">all</span> of the colors to match the background color of your sidebar.</li>
<li>Change the width of the widget if you need to make this narrower or wider to fit neatly inside your sidebar.</li>
<li>For the "Show Screen Names" option, check "No".</li></ul></p><p>Once you've made this necessary changes, click the button which says "preview and get code".</p><p>Copy all of the code to your clipboard, then insert into an HTML/JavaScript widget in your blog.</p><p>At first, this widget will still look a little disorganized: we need to add a little code to the style section to finish things off.</p><p>So go to Template>Edit HTML in your Blogger dashboard, and search for the closing <span style="font-weight:bold;"><b:skin></span> tag.</p><p>Immedietly before this tag, paste the following section of code:
<pre class="code">table#MBL_COMM td.mbl_fo_hidden {<br/>
display:none;<br/>
}<br/>
table#MBL_COMM td.mbl_join_img {<br/>
background: url(http://bloggerbuster.com/images/blank.gif);<br/>
}<br/>
table#MBL_COMM td.mbl_join {<br/>
background: url(http://bloggerbuster.com/images/blank.gif);<br/>
}<br/>
table#MBL_COMM tr#tr0 {<br/>
background: url(http://bloggerbuster.com/images/blank.gif);<br/>
display: none;<br/>
}<br/>
table#MBL_COMM th.mbl_h {<br/>
display:none;<br/>
}</pre></p><p>Now when you preview your template, you'll notice that all the unwanted parts of the widget are hidden; your widget should blend perfectly with your template featuring only the avatars of your recent blog readers.</p><p>If you would also like to add the links for "View Reader Community" and "Join This Community", you can add the following code inside your recent readers HTML/JavaScript widget, changing the values in red to match those of your MyBlogLog community profile:
<pre class="code"><center><ul><li><a href="http://www.mybloglog.com/buzz/community/<span style="font-weight:bold; color: red;">YourCommunityName</span>/"<br/>title="Visit the MyBlogLog Community">View the reader community</a></li><br/>
<li><a href="http://www.mybloglog.com/buzz/yjoin/?ref_id=<span style="font-weight:bold;color: red;">[your community ID#]</span>&ref=w"<br/>title="Do you want to be a part of this community?">Join this community</a></li></ul></center></pre></p><p>To find these values for your blog's community, go to the "Settings" page for your blog.</p><p>The URL Display Name is the value of <span style="font-weight:bold;color: red;">YourCommunityName</span>, while that long number at the end of the URL in your address bar is that of <span style="font-weight:bold; color: red;">[your community ID#]</span>.</p><p>With this new feature in place, you'll be well on your way to creating a customized and wholly stylish look for your blog!</p><p>I hope you've enjoyed this tutorial. Feel free to post your comments and questions below.</p><p>If you'd like to learn about the other customizations I've made to the Blogger Buster template, be sure to <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html" title="Subscribe in a reader or by email for updates">subscribe to the feed</a> to receive news of updates as they are posted.</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-25368893416096483312008-02-28T11:25:00.005+00:002009-07-26T01:52:25.565+01:00How to Create Post Summaries in Blogger Layouts Blogs<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi00dqO279MaJmBs9hyKOCjaMFJ0vdWXp1Q7DL0GdWxJylhWwekg8sjtrrM7YihD8wBhpIHKo6sPW185M1ZTIZ2V8l0CnCxeJYifMXLTnSqJeayLZgEPUu2rUoVRjDXqz-tBgJNqSQid4Y/s1600-h/summary.png"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi00dqO279MaJmBs9hyKOCjaMFJ0vdWXp1Q7DL0GdWxJylhWwekg8sjtrrM7YihD8wBhpIHKo6sPW185M1ZTIZ2V8l0CnCxeJYifMXLTnSqJeayLZgEPUu2rUoVRjDXqz-tBgJNqSQid4Y/s320/summary.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5172196820613914722" /></a>One of the questions I am asked most about my blog is how I create post summaries on my main and archive pages.</p><p>The hack I use for this is <a href="http://hackosphere.blogspot.com/2006/11/selective-expandable-posts.html" title="Read about selective expandable posts on Hackosphere">Ramani's "selective expandable posts"</a>. This hack enables me to choose whether my posts are summarized or not, and provides a "Read full post" link only for those which I have chosen to summarize.</p><p>Whereas I would normally refer readers to <a href="http://hackosphere.blogspot.com/2006/11/selective-expandable-posts.html">Ramani's original post</a> to learn how to implement this technique, many readers have expressed their difficulties in using this, and Ramani seems unavailable for support. So I have decided to write a full explanation of how to use this hack in the hope that this will answer many of your questions, and enable you to use this hack in your own Blogger layouts blogs.</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><span style="font-style:italic;"><span style="font-weight:bold;">Please note</span>: This "selective expandable posts" hack was written for Blogger layouts blogs (those which use widgets). If you need to learn how to use such a technique for Classic Blogger templates, please <a href="http://nofancyname.blogspot.com/2005/02/making-expandable-blog-posts-in.html">refer to this post instead</a>.</span></p><h3>How the selective expandable posts hack works</h3><p>This technique uses a combination of JavaScript and Blogger code to display your selected portion of a blog post on your main, archive and search pages. On item (post) pages, the full content of your post will be displayed.</p><p>This technique is very useful for bloggers who write long posts, or who prefer to provide a "teaser" of their full post on the main page, which would encourage readers to read the whole article on item pages instead.</p><p>Before installing the selective expandable posts hack to your blog, you should be aware of two things:
<ul><li><span style="font-weight:bold;">Only your future posts (and any previous posts you choose to edit) will feature a summarized version on the main pages of your blog</span>. This is because you must use a post template to make the summaries appear. Those posts which do not include this template will not be summarized.</li>
<li>To ensure the summary hack works, <span style="font-weight:bold;">you will find it necessary to edit your posts in HTML mode</span>, rather than using the rich text editor. Again, this is due to the necessity of the post template; if you edit in compose mode, you will run the risk of accidentally deleting some code which is not visible in the rich text editor.</li></ul></p><p>If these considerations are something you can live with, you're ready to install the "selective post summary" hack.</p><h3>How to Install the Selective Post Summaries Hack</h3><p>This isn't the easiest hack to install in a Blogger template. In fact, it took me a few attempts to get this right the first time I installed it! So I would advise you to remember two important things:</p><h4>Back up your existing template before making any changes whatsoever!</h4><p><span style="font-weight:bold;">You should always back up your blog template before making any changes to the template code</span>. It is even more important to back-up before installing this hack, as we are dealing with the display of your blog posts, rather than a simple edit to your styling code!</p><h4>Read each step fully, familiarize yourself with the code, and then read it again!</h4><p>It is important to pay attention to detail when installing this, otherwise you may place code in the wrong place and get that dreaded "Your template could not be parsed" message.</p><p>Also, there may be slight differences to the code which you will be looking for in your template. I will point this out where appropriate, along with the alternatives which may be present in your template.</p><p>Here is my step by step guide to installing the selective post summary hack in your blog template:
<ol><li><span style="font-weight:bold;">Back up your existing template code!</span><br/><br/>To do this, go to Layout>Edit HTML in your Blogger dashboard, and click on the link which says "Download full template". This will allow you to save a copy of your existing template in XML format which you can use to restore your blog if ever your template edits go awry.</li>
<li><span style="font-weight:bold;">Choose to create a new post</span>. On this page, click on the "Edit HTML" tab so this becomes highlighted. Then in the content box below, paste this entire section of code, exactly how this is written here:
<pre class="code">This is the summary<br/>
<span id="fullpost"><br/>
This is the rest of the post<br/>
</span></pre>
Then save this post.<br/><br/>This will only be a temporary post, to help you understand if the following edits you make are working. Once you have installed this hack into your template, you can delete this post.</li>
<li>Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box.</li>
<li><span style="font-weight:bold;">We now need to add the required JavaScript code to the head section of your blog template.</span><br/><br/>This is the easy part of the installation! Simply <a href="http://rarunach.googlepages.com/hackosphere.js.html" target="_blank" title="Ramani's JavaScript code, opens in a new window">copy all of the code on this page</a> to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).<br/><br/>Next, locate this line in your blog template:
<pre class="code"></head></pre>
Paste the code from your clipboard <span style="font-weight:bold;">directly before this line</span>.</li>
<li>Here comes the tricky part...<br/><br/>In your blog template, <span style="font-weight:bold;">you will need to locate the DIV section which contains this line</span>:
<pre class="code"><p><data:post.body/></p></pre>
In many templates, this section will look something like this:
<pre class="code"><div class='post-body><br/>
<p><data:post.body/></p><br/>
<div style='clear: both;'/> <!-- clear for photos floats --><br/>
</div></pre>
However, the class of the containing DIV section may be called something different, such as:
<pre class="code">div class='post'<br/>
div class='entry'<br/>
div class='post-body entry-content</pre>
In the case of third party templates, this could well be something else entirely!<br/><br/>The best way to locate this is to search for <span style="font-weight:bold; color: red;"><data:post.body/></span> using the CTRL+F function in your browser, then take a look at the surrounding code to work out where you need to edit.</li>
<li>Once you have found this section of code, take a look at the code below. I've added some code in red, which is what you will need to add in your own template. As I have explained, the <div class='post-body'> section may be named differently in your own blog template, so do bear this in mind!
<pre class="code"><div class='post-body' <span style="color:red;"> expr:id='"post-" + data:post.id' </span>><br /><span style="color:red;"><br /> <b:if cond='data:blog.pageType == "item"'><br /> <style>#fullpost{display:inline;}</style><br /> <p><data:post.body/></p><br /> <b:else/><br /> <style>#fullpost{display:none;}</style><br /></span><br /> <p><data:post.body/></p><br /><span style="color:red;"><br /> <span id='showlink'><br /> <a expr:href='data:post.url'>Read More......</a><br /> </span><br /> <script type='text/javascript'><br /> checkFull("post-" + "<data:post.id/>");<br /> </script><br /> </b:if><br /></span><br /> <div style='clear: both;'/> <!-- clear for photos floats --><br /> </div><br /></pre>
Before you attempt to save your template, I would advise you to preview your blog.<br/><br/><span style="font-weight:bold;">If you have pasted the code correctly</span>, you will see the test post you created earlier will now feature only the summary, followed by the "Read more..." link, like this:<br/><br/>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHBlpWb_L-3V1EqaVhPnX2OuPFX-eECQLHlPn8SRUT4B5TBWXVxLUH85AP2FtTBRJsEOeb6tIXxCMNni0h7r4FeVnVsYboc_6Dhx_mrK5E1_TW0cOMtE6AsIq_mYBUkI9mq-BDZre-S4/s1600-h/ScreenHunter_15+Feb.+28+18.16.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHBlpWb_L-3V1EqaVhPnX2OuPFX-eECQLHlPn8SRUT4B5TBWXVxLUH85AP2FtTBRJsEOeb6tIXxCMNni0h7r4FeVnVsYboc_6Dhx_mrK5E1_TW0cOMtE6AsIq_mYBUkI9mq-BDZre-S4/s400/ScreenHunter_15+Feb.+28+18.16.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5172097130128007234" /></a><br/><br/><span style="font-weight:bold;">If you have pasted the code incorrectly</span>, one of two things will happen: you will either be unable to preview, or your test post will appear in full, rather than as a summary.<br/><br/>In either case, you should clear all edits you have made, and start again from the top: it's a far better idea to begin the process again, paying attention to every detail, than to try and edit the code!</li>
<li>After you have successfully made the changes outlined above, you can proceed to save your template.</li>
<li>The final step is to <span style="font-weight:bold;">add a post template in your blog settings</span>.<br/><br/>This is the same code we used to add the content to our test post, though this time we will add this as a permanent template which will appear in your post editor each time you write a post.<br/><br/>Go to Settings>Formatting in your Blogger dashboard, and scroll right down near the bottom of this page where you will see a text box for your post template.<br/><br/>Inside this box, you must paste the following section of code:
<pre class="code">This is the summary<br/>
<span id="fullpost"><br/>
This is the rest of the post<br/>
</span></pre>
<span style="font-weight:bold;">Be sure to copy and paste this code exactly as you see it here</span>. If you accidentally insert any extra spaces, extra characters or line breaks by typing this manually, you run the risk of breaking the operation of the script.<br/><br/>Finally, save these settings, and enjoy the convenience of selectively summarizing your blog posts!</li></ol></p><h3>Using the Selective Expandable Posts Hack</h3><p>For me, Ramani's selective post summaries hack has been the most effective method of summarizing my posts. However, when using this hack you may need to change the manner of your blogging habits slightly, and learn how best this can be used.</p><p>Here are some tips which I have learned through using this hack on a regular basis, which will probably be useful for you too:
<ul><li><span style="font-weight:bold;">You must create and edit your posts in Edit HTML mode</span>. The <span> tags which are included in your new post template will only be visible in Edit HTML mode. If you use the regular "Compose" mode, you may accidentally delete some of the required code, which will cause your posts to be displayed improperly.</li>
<li><span style="font-weight:bold;">If you do not want to summarize a post</span>, simply delete all of the post template when creating your post! In this case, there will be no "Read more" link beneath the post, and your complete post will appear on the main pages (ideal for short posts).</li>
<li>If you are used to writing your posts in paragraphs using appropriate paragraph code, like this:
<blockquote><p>This is a paragraph</p><br/><p>This is another paragraph</p></blockquote>
you will need to wrap all of your content in paragraphs, and may need to add the appropriate paragraph tags to the lines in your post template too.</li>
<li>When using this hack, you can easily implement Google AdSense code to appear in your post pages only, and can choose to display this within the body of the post itself, as well as above/below your post content.</li></ul></p><p>As I mentioned earlier, <span style="font-weight:bold;">this hack will only work for posts which you create after installing the required code and post template</span>. Your existing posts will not be summarized unless you edit them to add the required code inside the post.</p><p>If you have a great many posts, I would advise you only to edit the posts which appear on your front page. So if you display seven posts on your home page, you would only need to edit the previous seven posts, if you would like these to be summarized. The reason I advise this is because in my experience, fewer people browse through your archives using the "newer/older posts" links than would search through using the blog search function. This means that your readers' experience would suffer little disruption from seeing older posts in their full form.</p><h4>Troubleshooting</h4><p>If ever you notice a "summarized" posts appears strangely, or other posts seem to disappear from beneath this on your main pages, the problem is most likely that you have accidentally deleted the closing </span> tag from the very bottom of your post. Don't worry if this happens, it is easily solved by adding that line right at the very end of your post!</p><p>Another possible problem Ramani has noted is that sometimes the "read more" link will appear on archive pages, even for those posts which have not been summarized. This issue is not yet resolved, though if I come across a definitive solution I will be sure to update this post</p><h3>Final thoughts</h3><p>This is by no means the only method you could use to summarize your posts (<a href="http://www.jackbook.com/blogger-hack-blogspot-hack-blogger-templates-customizing/7-blogger-hacks-to-create-expandable-posts-on-blogger">Jackbook has discovered seven different methods</a>), though for most bloggers the selective method will be the most effective and easily maintained choice.</p><p>I hope that my explanation of <a href="http://hackosphere.blogspot.com/2006/11/selective-expandable-posts.html">Ramani's excellent hack</a> will help you implement this version of post summaries in your Blogger layouts blog.</p><p>If you have any more hints or suggestions for using this hack, please feel free to leave your comments 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-64733663061415996152008-02-22T11:12:00.008+00:002009-07-26T01:49:57.758+01:00How to add icons beside your navigation links<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0kvBzTD_xHbN0kFgFE3MMWBTkv-3MWEET_nZ31N_zPsTcffzYavSp6xm76lVNwvr-AatFgtK4HVX1CjR3FSm1lsFRtaXN_lLib7ZOieA9Ap2IXn4BqfAHeYNRMk-ti-ZSL5_hiKa21E/s1600-h/ScreenHunter_06+Feb.+22+12.12.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0kvBzTD_xHbN0kFgFE3MMWBTkv-3MWEET_nZ31N_zPsTcffzYavSp6xm76lVNwvr-AatFgtK4HVX1CjR3FSm1lsFRtaXN_lLib7ZOieA9Ap2IXn4BqfAHeYNRMk-ti-ZSL5_hiKa21E/s400/ScreenHunter_06+Feb.+22+12.12.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5169776679557062658" /></a></p>
<p>Having relevant icons beside your navigation links is a great way to draw attention to them. In the image above, you can probably tell at a glance where all the links will lead. This trend of modern web design not only looks good, but is also <span style="font-weight:bold;">a useful way to help your readers navigate to important content in your blog</span>.</p><p>In this post, I'll explain the method I use to add icons beside navigation links in Blogger template designs.</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>Explaining the method</h3><p>In the image above, the links are part of a link-list. Each individual link in the list is displayed <span style="font-style:italic;">inline</span>, and is wrapped in span tags. Furthermore, each link is coded with its own <span style="font-style:italic;">class</span>.</p><p>There are three essential steps to make icons appear beside links in your blog:
<ol><li>Find icons (in GIF format) to suit your blog's theme, and upload these to an image hosting service.</li>
<li>Add the code for the links into an HTML/JavaScript widget in the blog layout.</li>
<li>Style these links with a background image by adding some code to the <b:skin> section of your blog template.</li></ol></p><p>We need to add the links manually in an HTML/JavaScript widget for this to work. This is because we cannot edit each individual link in a regular link list widget, which is required to ensure each link features its own image.</p><p><span style="font-weight:bold;">This method is really not as complicated as it sounds!</span></p><p>Once you've tried this method for yourself, you'll get a much better understanding of how this method can work for you. To get started, <span style="font-weight:bold;">try using the code and example images below to add images to a navigation area in your own blog template</span>. Then afterwards, you can easily change the icons and style to suit the style of your own blog theme.</p><h3>How to add icons beside your navigation links (example icons and code)</h3><p>In this example, we will add icons to the three most popular navigation links used by bloggers: the "Home", "About" and "Contact" links.</p><p>The end result will look something like this in your template (though the font and colors may differ, depending on the styles already in place in your own template):</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvtI5qS0BXVDxxkUCgQaxaZou33hTXeeAZL3LfveZyzMAnU5Rcb4z-COwlKkQI1uKWlHeW0Bi4luX5_4FILRhfy7t-37YJcU_ZN22YP8wkeX-K9NFaLH-_6gD23JpRIoiUzCHF-EtSgo/s1600-h/ScreenHunter_07+Feb.+22+23.19.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvtI5qS0BXVDxxkUCgQaxaZou33hTXeeAZL3LfveZyzMAnU5Rcb4z-COwlKkQI1uKWlHeW0Bi4luX5_4FILRhfy7t-37YJcU_ZN22YP8wkeX-K9NFaLH-_6gD23JpRIoiUzCHF-EtSgo/s400/ScreenHunter_07+Feb.+22+23.19.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5169952206280515602" /></a></p><h4>Step 1: Add the code for your links in an HTML/JavaScript widget</h4><p>In the layouts section of your Blogger dashboard, choose to create a new HTML/JavaScript widget where you would like these navigation links to appear. This could be in your blog's sidebar, <a href="http://www.bloggerbuster.com/2007/06/blogger-hack-add-sticky.html">in a widget above the posts</a> or <a href="http://www.bloggerbuster.com/2008/02/easy-way-to-make-great-blog-header.html">within the header section</a> if you prefer.</p><p>Then paste the following code into your new widget, substituting the links highlighted in red for the URLs of your home page and relevant post pages:
<blockquote><div id="menu-items"><br/>
<ul><br/><li><span class="home"><a href="<span style="font-weight:bold; color: red;">http://your_blog_url.com</span>">Home</a></span></li><br/>
<li><span class="about"><a href="<span style="font-weight:bold; color: red;">http://your_blogs_about_page.com</span>">About</a></span></li><br/>
<li><span class="contact">;<a href="<span style="font-weight:bold; color: red;">http://your_blogs_contact_page.com</span>">Contact</a></span></li></li><br/>
</ul><br/></div></blockquote></p><p>At first, these links will appear like a regular, unordered list with bullet points instead of the images we require. So now, we need to add some style to the template, which will make the links appear beside each other (inline display), feature relevant background images for each link, and be evenly spaced.</p><h4>Adding the relevant code to your blog's template</h4><p>For this part of the tutorial, you need to edit your blog's HTML code, so go to Layout>Edit HTML in your Blogger dashboard.</p><p>To add the style for your new navigation links, you can simply copy and paste the following code just before the closing <b:skin> tag on your blog template:
<blockquote>#menu-items ul li {
display: inline;
font-weight: bold;
list-style-type: none;
padding: 5px 5px 5px 0;
margin: 0;
}<br/>
#menu-items li span.home {
background: url('http://bloggerbuster.com/images/bb_post/home.gif') no-repeat;
padding: 0 0 0 20px; }<br/>
#menu-items li span.about {
background: url('http://bloggerbuster.com/images/bb_post/about.gif') no-repeat;
padding: 0 0 0 20px; }<br/>
#menu-items li span.contact {
background: url('http://bloggerbuster.com/images/bb_post/contact.gif') no-repeat;
padding: 0 0 0 20px; }</blockquote></p><p>Now if you preview your blog, you will see your newly added navigation links now feature the icon images to their left. Once these modifications are complete, you can choose to save your template and enjoy the added style to your navigation links.</p><p>I<span style="font-weight:bold;">f you would prefer to host these icons on your own server</span>, you can download the icons to your computer, upload them to a new location, and change the URI's for these to match their new location.</p><p>Here are links to the icon files (right click and choose "Save As..."</p><p><ul style="list-type-style: square;"><li><a href="http://bloggerbuster.com/images/bb_post/home.gif">home.gif</a></li>
<li><a href="http://bloggerbuster.com/images/bb_post/about.gif">about.gif</a></li>
<li><a href="http://bloggerbuster.com/images/bb_post/contact.gif">contact.gif</a></li></ul></p><p><span style="font-weight:bold;">If you would like to add more links and different images</span>, the simplest method would be to duplicate the format of the style (using a different class), then add another link to the list, referring to the class you have just created.</p><p>Here is an example of what the style code may look like in your template:
<blockquote>#menu-items li span.<span style="font-weight:bold; color: red;">anotherpage</span> {
background: url('<span style="font-weight:bold; color: red;">http://yourimagehost.com/images/anothericon.gif</span>') no-repeat;
padding: 0 0 0 20px; }</blockquote></p><p>The items highlighted in red are those which you would need to alter to suit your new links and icons.</p><p>Here is an example of how to call a new link (and associated icon), which could be added to the code in your HTML/JavaScript widget, just before the closing </ul> tag:
<blockquote><li><span class="<span style="font-weight:bold; color: red;">anotherpage</span>"><a href="<span style="font-weight:bold;color: red;">http://another_blog_page.com</span>"><span style="font-weight:bold;">New Page</span> Title</a></span></li></blockquote></p><h4>Important notes</h4><p>The icons used in this example are have the dimensions 16x16px. To display larger icons, you may need to adjust the padding of the lost items, otherwise your images may appear cropped from above and below.</p><p>If you need to use icons which have transparency, you should ensure these images are presented in GIF format, rather than PNG. Internet Explorer 6 and below cannot display PNG transparencies correctly, so when viewed in these browsers, your icons would appear incorrectly.</p><h3>Final thoughts</h3><p>I hope this tutorial has provided you with the tools and knowledge to create your own styled navigation links, and expand on these examples to create links which are more suited to the style of your own blog.</p><p>Here are some resources for free icons if you're looking for alternatives to the ones used in this example:
<ul style="list-style-type: square;"><li><span style="font-weight:bold;"><a href="http://iconlet.com">Iconlet</a></span>: a search engine for free icons</li>
<li><span style="font-weight:bold;"><a href="http://www.famfamfam.com/lab/icons/silk/">Silk Icons</a></span>: a huge download featuring over 700 free 16x16px icons</li>
<li><span style="font-weight:bold;"><a href="http://www.2pt3.com/news/twotone-icons-for-free/">TwoTone icons</a></span>: A collection of simple 16x16px icons in editable Photoshop and GIF format.</li></ul></p><p>Feel free to leave your comments and suggestions below. I look forward to seeing how you have used this tutorial to add style to your own Blogger template designs.</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-3800778311075444412008-02-15T21:51:00.006+00:002009-07-26T01:49:57.758+01:00Adding style to search forms<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76PiP85ViANUUO_WzQiUyDzrUyhBpRU51vIFVBPwy4yxnqftLF65AZ8-WzKFnN2XYjcCIGFjp6yZNoB3chXEWNvhbehDB_rJM_CVvkErTAnHHnH5cEfh_0TH2HZtogDIS9QY4eYh2VvQ/s1600-h/search.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76PiP85ViANUUO_WzQiUyDzrUyhBpRU51vIFVBPwy4yxnqftLF65AZ8-WzKFnN2XYjcCIGFjp6yZNoB3chXEWNvhbehDB_rJM_CVvkErTAnHHnH5cEfh_0TH2HZtogDIS9QY4eYh2VvQ/s320/search.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5167334015691710242" /></a>If you've added a search widget to your blog, you may be wondering how it could look a bit more stylish! After all, the default gray button isn't the most desirable button in the world.</p><p>Styling a search widget isn't difficult at all. You can customize the button using CSS or replace this with an image instead. Another customization option is to add some informative text inside the search box and remove the search button altogether.</p><p>In this post, we're going to look at some options and methods of customizing the search widget, so you can choose the method which works best for you and style your search box to match the overall design of your own customized 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>In the previous installment of the <a href="http://www.bloggerbuster.com/search/label/Blogger%20Template%20Design%20Series">Blogger Template Design Series</a>, I explained an easy method of changing the layout of the header, enabling widget elements to be added. Search widgets are an excellent example of what could be included in a blog header, and in this post we will learn how search forms can be styled to suit your theme.</p><p>Search widgets are a type of form, constructed of a text box (the area where you type the search terms), a submit button, and some hidden elements which send information to the server about the search which is being performed.</p><p>If you're using a simple Blogger search widget, the code for your search widget will look something like this:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><br/>
<span style="font-weight:bold; color: red;"><input id="search-box" name="q" size="25" type="text"/><br/>
<input id="search-btn" value="Search" type="submit"/><br/></span>
</form></blockquote>
The elements which we can style are highlighted in red. The "search-box" element is the box which contains the search text, while the "search-btn" is the button keyed to submit the search query to the server.</p><p>By default, this simple search widget will appear like this in your template:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text"/><input id="search-btn" value="Search" type="submit"/></form></blockquote>
But using some simple techniques, we can make this look a whole lot prettier!</p><h3>Using CSS to style the search widget</h3><p>The easiest customizations can be achieved using only "inline CSS": <span style="font-style:italic;">this means that the search box and button can be styled within the code used for the search box</span>.</p><p>For example, let's say we wanted the search box to have a pale blue background and a dark blue border. To achieve this, we simply add some style declarations to the "search-box" element, like this:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><br/>
<input id="search-box" name="q" size="25" type="text" <span style="font-weight:bold; color: red;">style="background: #ccccff; border: 2px solid #000066"</span>/><br/>
<input id="search-btn" value="Search" type="submit"/><br/>
</form></blockquote>
By adding these style declarations, we can create a search form which looks like this:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/><input id="search-btn" value="Search" type="submit"/></form></blockquote>
We can add style to the search button in the same way. This time, the background will be dark blue with a red border, while the text is white and bold:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><br/>
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/><br/>
<input id="search-btn" value="Search" type="submit" <span style="font-weight:bold; color: red;">style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"</span>/><br/>
</form></blockquote></p><p>Note that in this example, I used "outset" rather than "solid" for the border property; this ensures the button looks raised rather than flat, and helps readers understand that it is a button which can be clicked.</p><p>Here is the resulting form:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/><input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/></form></blockquote></p><p>You can experiment with different colors ans styles for your own search form to create a unique design.</p><h3>Changing the visible text within the form</h3><p>You could add some text within the search box as a guide for your readers (eg: Search this blog!).</p><p>This is achieved by adding a "value" to the search box, like this:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><br/>
<input id="search-box" name="q" size="25" type="text" <span style="font-weight:bold; color: red;">value="Enter search terms"</span>/><br/>
<input id="search-btn" value="Search" type="submit"/><br/>
</form></blockquote>
This will appear like this:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" value="Enter search terms"/><input id="search-btn" value="Search" type="submit"/></form></blockquote>
To change the text on the search button, we only need to change the value to our preferred term:
<blockquote><input id="search-btn" <span style="font-weight:bold; color; red;">value="Search"</span> type="submit"/></blockquote>
If you prefer the button to say "Go!", you could simply replace the value of "Search" with "Go!" instead:
<blockquote><input id="search-btn" <span style="font-weight:bold; color; red;">value="Go!"</span> type="submit"/></blockquote></p><h3>Using an image instead of a button</h3><p>Using an image instead of a button isn't as complicated as you may think! For this, we simply need to change the input type from "Submit" to Image" and specify a URL for the image.</p><p>First of all, you will need to find the image you would like to use, and upload this to an external hosting account.</p><p>It is advisable to use a small image or icon for this (16x16px or slightly larger would be a perfect size for a search form). There are many free search icons available from <a href="http://www.iconlet.com">Iconlet</a>, or you could <a href="http://www.smashingmagazine.com/2007/08/25/20-free-and-fresh-icon-sets/">download an icon pack</a> and choose a suitable image instead.</p><p>For this example, I'm going to use this icon from Iconlet:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXySDnNJOxtxbWu99XPaZkbs-xBn7jEuCWZt077oDLcVNaXJNIyiuiBdpG51tHT8SF3edU4snwow4QITJsFk6KNJwDW8dPEjRxheVZATJtbHlPILIWiaCrHYWHWGPdvhs3D-9kW0-9pE4/s1600-h/search-small.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXySDnNJOxtxbWu99XPaZkbs-xBn7jEuCWZt077oDLcVNaXJNIyiuiBdpG51tHT8SF3edU4snwow4QITJsFk6KNJwDW8dPEjRxheVZATJtbHlPILIWiaCrHYWHWGPdvhs3D-9kW0-9pE4/s320/search-small.jpg" style="padding: 5px;" border="1" alt=""id="BLOGGER_PHOTO_ID_5167350370927173426" /></a></p><p>To use this icon instead of the button for my search form, this is the code I will use:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><br/>
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/><br/>
<input id="search-btn" value="Search" <span style="font-weight:bold; color: red;">type="image" src="http://bloggerbuster.com/images/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"</span>/><br/>
</form></blockquote></p><p>Notice that I have changed the type of the input in this form from "submit" to "image", and have added the URL of my image afterwards. The style declarations align the image against the search box, adding some space to the left, and ensuring this doesn't float above the search box.</p><p>This is what the image will look like in the search form:
<blockquote><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" value="Enter search terms"/><input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXySDnNJOxtxbWu99XPaZkbs-xBn7jEuCWZt077oDLcVNaXJNIyiuiBdpG51tHT8SF3edU4snwow4QITJsFk6KNJwDW8dPEjRxheVZATJtbHlPILIWiaCrHYWHWGPdvhs3D-9kW0-9pE4/s320/search-small.jpg" style="margin: 3px 0 0 5px;"/></form></blockquote></p><p>When using your own image instead of the submit button, <span style="font-weight:bold;">be sure to reference the correct URL of your image</span>.</p><p>You may also need to adjust the margins slightly for images of a different size to the one used in this example.</p><p><h4>Coming soon...</h4><p>In the next installment of the <a href="http://www.bloggerbuster.com/search/label/Blogger%20Template%20Design%20Series">Blogger Template Design series</a>, we will learn how to style links in a navigation bar using both CSS and icons.</p><p>If you have enjoyed this tutorial, please <a href="http://feeds.feedburner.com/BloggerBuster">subscribe to the feed</a> to receive updates of new posts.</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-91188008680700085522008-02-13T19:44:00.006+00:002009-07-26T01:49:57.758+01:00The easy way to make a great blog header!<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKftKZvKoUGitgdHNrqj3VssRrMguTfEe_eEsxtvttXpgHSP-2QasgbN6RcFOrtrQ-FeEe7UNM7-yg0R4S92LH2KYOEoMDJ7mgIkbB8JB-mvdHGgmkGl66OPCs30NjpWpK5NJ33elx2I/s1600-h/simple_header.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKftKZvKoUGitgdHNrqj3VssRrMguTfEe_eEsxtvttXpgHSP-2QasgbN6RcFOrtrQ-FeEe7UNM7-yg0R4S92LH2KYOEoMDJ7mgIkbB8JB-mvdHGgmkGl66OPCs30NjpWpK5NJ33elx2I/s320/simple_header.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5166601191191797522" /></a>In yesterday's post, I wrote about <a href="http://www.bloggerbuster.com/2008/02/what-makes-great-blog-header.html">what makes a great blog header</a>. As I'm sure many of you will agree, a great blog header doesn't only include your blog's title and logo. Visitors
need to know what your blog is about (branding) and how easily they will be able to find the information they need (navigation, and possibly search elements).</p><p>So in this installment of the blogger template design series, I'm going to show you a quick and easy way for you to add more than just your header image to your Blogger blog: adding extra sections for widgets, in which you can place anything you want!</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>If you take a look at <a href="http://blogger-template-design-series.blogspot.com/">the Blogger Template Design blog</a> now, you'll see the <span style="font-style:italic;">bare bones</span> of a header beginning to take shape. The title and description for this blog are now featured in the left-hand section, while on the right you can find a search box, and a simple navigation bar:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uhzfdIxNbRHN6OPxXnTCaWshHCkBlkmu_qfK76uH7BQBdx6gVlKY8ntTAT8hkSPp-J6g9BRqjDue8LnJNdTnBmA9lCXasEjopdhAk3gxSflRGgK-46BDs7KSJfPiFmRS7ot_1dwmRMU/s1600-h/ScreenHunter_96+Feb.+13+20.01.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uhzfdIxNbRHN6OPxXnTCaWshHCkBlkmu_qfK76uH7BQBdx6gVlKY8ntTAT8hkSPp-J6g9BRqjDue8LnJNdTnBmA9lCXasEjopdhAk3gxSflRGgK-46BDs7KSJfPiFmRS7ot_1dwmRMU/s400/ScreenHunter_96+Feb.+13+20.01.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5166557592978775778" /></a></p><p>The search box and navigation links are actually widgets which can be edited through the layouts section, rather than being built into the template itself. This is by far the easiest way to change elements of the header section, and it's really easy to install this in your own blog template!</p><h3>How to add more elements to your header section</h3><p>In this tutorial, there are only three essential steps needed to add these extra elements to your own blog:
<ol>
<li>Copy and paste a section of code in the header section of the template.</li>
<li>Add some styling code to the CSS portion of the template</li>
And finally...<br/>
<li>Add some widgets to your newly created widget sections!</li></ol></p><p>Trust me when I tell you that this is a really easy hack. You can be up and running with a new, more interactive header in no time at all, and once the basic structure is in place, you can begin styling each section to best suit your needs.</p><h4>Step by step instructions</h4>
<ol><li>Go to Template>Edit HTML in your Blogger dashboard, and find this section of code:
<blockquote> <div id='header-wrapper'><br/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br/>
<b:widget id='Header1' locked='true' title='Your blog title will appear here (Header)' type='Header'/><br/>
</b:section><br/>
</div></blockquote>
Highlight this entire section of code, and replace it with this instead:
<div style="margin: 5px 0 5px 0; height: 100px; overflow: auto; border: 2px solid; padding: 5px;"> <div id='header-wrapper'><br/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br/>
<b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/><br/>
</b:section><br/>
<div id='header-right'><br/>
<b:section class='header' id='header-right-top' showaddelement='yes'><br/>
</b:section><br/>
</div><br/>
<div id='header-right-bottom'><br/>
<b:section class='header' id='header-right-bottom-section' showaddelement='yes'><br/>
</b:section><br/>
</div><br/>
</div></div></li>
<li>Next we need to change some of the style in the <b:skin> section. So find this entire section of code:
<blockquote>#header-wrapper {<br/>
border: 1px solid #000000;<br/>
margin:0 auto 10px;<br/>
border:1px solid $bordercolor;<br/>
clear: both;<br/>
word-wrap: break-word;<br/>
overflow: hidden;<br/>
}<br/>
<br/>
#header-inner {<br/>
background-position: center;<br/>
margin-left: auto;<br/>
margin-right: auto;<br/>
}<br/>
<br/>
#header { <br/>
margin: 5px;<br/>
border: 1px solid $bordercolor;<br/>
text-align: center;<br/>
color:$pagetitlecolor;<br/>
}</blockquote>
<span style="font-style:italic;">Note: the code which appears in your own template may have slightly different styling attributes to the example above. The important thing here is to replace the #header-wrapper, #header-inner and #header sections, and add some extra styling code.</span><br/><br/>
Once you have found this section, highlight it and replace it with the following section of code:
<div style="margin: 5px 0; height: 200px; overflow: scroll; border: 2px solid #000;">#header-wrapper {<br/>
width: 950px;<br/>
border: 1px solid #000000;<br/>
margin:0 auto 10px;<br/>
border:1px solid $bordercolor;<br/>
clear: both;<br/>
word-wrap: break-word;<br/>
overflow: hidden;<br/>
}<br/>
<br/>
#header-inner {<br/>
background-position: center;<br/>
margin-left: auto;<br/>
margin-right: auto;<br/>
}<br/>
<br/>
#header { <br/>
width: 500px;<br/>
float: left;<br/>
margin: 5px;<br/>
border: 1px solid $bordercolor;<br/>
text-align: center;<br/>
color:$pagetitlecolor;<br/>
}<br/>
<br/>
#header-right {<br/>
width: 400px;<br/>
float: right;<br/>
border: 1px solid $bordercolor;<br/>
color: $pagetitlecolor;<br/>
margin: 5px;<br/>
}<br/>
#header-right-top {<br/>
padding: 0 5px 10px;<br/>
}<br/>
<br/>
#header-right-bottom-section {<br/>
padding: 0 5px 10px;<br/>
}<br/>
<br/>
#header-right ul {<br/>
margin: 0;<br/>
padding: 5px;<br/>
}<br/>
<br/>
#header-right ul li {<br/>
display: inline;<br/>
padding: 5px;<br/>
}<br/>
<br/>
#header-right-bottom {<br/>
width: 400px;<br/>
float: right;<br/>
border: 1px solid $bordercolor;<br/>
color: $pagetitlecolor;<br/>
margin: 5px;<br/>
}<br/>
<br/>
#header-right-bottom ul {<br/>
margin: 0;<br/>
padding: 5px;<br/>
}<br/>
<br/>
#header-right-bottom ul li {<br/>
display: inline;<br/>
padding: 5px;<br/>
}<br/>
</div>
<span style="font-style:italic;">Note: if your own blog template is narrower than 950px, you may want to make some alterations to the styling code above. Change the width of the #header-wrapper to match the width of your outer-wrapper, so that it will not disrupt the overall width of your blog. You may also want to lessen the widths of the #header section, and the #header-right and #header-right-bottom sections too. </span><br/><br/>
If you preview your template you will see that the title and description are now aligned to the left, with space on the right for you to add your new widgets. So save your template, and let's add some widgets to these new sections!</li>
<li>Adding widgets to these new sections is the easiest part of this tutorial. Simply go to Template>Page Elements and add your widgets in the new sections which have appeared beside your header!<br/><br/>Both of these sections now have styling for list items, so <span style="font-weight:bold;">if you want to add a navigation bar</span>, choose to add a "Links List" page element. Add your links as required and save. When you preview your template, you'll see that this display inline (horizontally) rather than in a long list.<br/><br/><span style="font-weight:bold;">To add a search box to your header</span>, you could either choose to add a <a href="http://www.bloggerbuster.com/2007/06/create-custom-google-search-engine-for.html">Google Custom search widget</a>, or use a <a href="http://www.bloggerbuster.com/2007/07/search-widget-for-your-blog.html">simple blog search widget</a> instead.</li></ol></p><p>Width these extra widget sections in place, there are endless possibilities for what you may add to your header section! I used a search box and navigation links as an example, but you could easily substitute these for a description, feed links or anything else you choose instead.</p><h4>Your blog logo/custom header image</h4><p>As before, you can still add your custom logo or header image to the header widget. This will be resized to the new width of your header section (in the example above, this is 500px wide), so for best results you should upload an image of the same size.</p><p>If your image is wider than this, you should check the "Shrink to fit" box inside the widget editing box to ensure the header doesn't overshadow the other widgets on the page.</p><h3>Coming soon...</h3><p>The next two installments of the Blogger Template Design series will focus on styling your new header elements:
<ul><li>Creating a more interesting search box</li>
<li>Adding style and icons to the navigation links</li></ul></p><p>If you'd like to see the progress of this series to date, you could <a href="http://blogger-template-design-series.blogspot.com/">check out the demonstration blog</a> to see the what we have accomplished, along with links to all previous tutorials in this series.</p><p>To keep up to date with this series, be sure to <a href="http://feeds.feedburner.com/BloggerBuster">subscribe to the feed</a> or <a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=965272&loc=en_US">sign up for email updates</a>!</p><p>As always, your comments and opinions are much appreciated. I'd love to know what you think of this series so far!</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-80934530283627355612008-02-12T16:50:00.000+00:002009-07-26T01:49:57.759+01:00What makes a great blog header?<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6Qfjio7ztKowviZMaTN87Z0OriKJIkdv8OJj8OtpL6uZCmUeIW_xVGeIyIFo3z6txHNMemxXYIGKqTgKEop6IO_tx1Cttexndh2ECNG_YUc5ZADE5btPjiULrKUPN6ZCPiwBbyDybb0/s1600-h/header_image.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6Qfjio7ztKowviZMaTN87Z0OriKJIkdv8OJj8OtpL6uZCmUeIW_xVGeIyIFo3z6txHNMemxXYIGKqTgKEop6IO_tx1Cttexndh2ECNG_YUc5ZADE5btPjiULrKUPN6ZCPiwBbyDybb0/s320/header_image.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5166226347921039058" /></a><small>Photo by <a href="http://flickr.com/photos/coyotejack/">Martin Kingsley</a></small></p><p>A blog's header is the first thing visitors see when they visit your site. In my opinion, <span style="font-weight:bold;">a good header section is one of the most important aspects of a well designed blog</span>. It needs to <span style="font-style:italic;">make an impact</span> on the visitor, both in terms of design and functionality, in order to make them want to see more of your site.</p><p>When I began to construct the design for Blogger Buster, I built the header section first, then designed all other elements around this. Setting the tone of a great blog design by focusing on the header first can help all other elements fall into place. So in this installment of the Blogger Template Design series, we will take a look at the elements of a great blog header, and methods we could use to create one.</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>Some examples of great blog headers</h3><p>When you come to think of great blog designs, there are probably a few sites which first come to mind. So take a look at these sites now, and focus on the header sections of these designs.</p><p><span style="font-weight:bold;">What elements of the header section make these blog designs stand out for you?</span></p><p>Here are some examples of headers in blogs whose design I admire:</p><p><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs-z_CeyMSeYvW8zTQgOxgqlpej9B0m-w82RvdgetHbwKZX5R8hQR14B5Y4KPn2bCjBcoP2x0ucbGfBvaad98Ga9daldEjreMIDA55B7VqiaO-7f7r2Qb-CWYKvR8r5Jmd1Qfi_4Q6Rg4/s1600-h/ScreenHunter_91+Feb.+12+18.20.gif"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs-z_CeyMSeYvW8zTQgOxgqlpej9B0m-w82RvdgetHbwKZX5R8hQR14B5Y4KPn2bCjBcoP2x0ucbGfBvaad98Ga9daldEjreMIDA55B7VqiaO-7f7r2Qb-CWYKvR8r5Jmd1Qfi_4Q6Rg4/s320/ScreenHunter_91+Feb.+12+18.20.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5166184673853365874" /></a><p>Adii.co.za</p></span><br/><br/><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxTiBIaqnZhkLXKi6_ug2frHJt-BbNx4WEqtbp01aeq-t276ddEqFc3oFM3_R-SaHENBBI4KqUtwJ9ZHc_xMcR-twdfM-RkNGaNZJKE2u5U80w-flDXlWtWDiR4BeIWlmVO8p7hqEMq4/s1600-h/ScreenHunter_92+Feb.+12+18.39.gif"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxTiBIaqnZhkLXKi6_ug2frHJt-BbNx4WEqtbp01aeq-t276ddEqFc3oFM3_R-SaHENBBI4KqUtwJ9ZHc_xMcR-twdfM-RkNGaNZJKE2u5U80w-flDXlWtWDiR4BeIWlmVO8p7hqEMq4/s320/ScreenHunter_92+Feb.+12+18.39.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5166185854969372290" /></a><p>Skelliewag.org</p></span><br/><br/><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYa2_Y2pmA6Riwo0L4TEmraJZKrxi5kXd5LXpyDJe_vf-3XwJICcVrgtT-pEgQr8uMkXmHl29izyhg1MtTbWZH4sVjHpQbF4_qfX3VNP7e-Oa1-BelxvjGbzMIqpMPuVp0vMrWpb5KQ_A/s1600-h/ScreenHunter_93+Feb.+12+19.03.gif"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYa2_Y2pmA6Riwo0L4TEmraJZKrxi5kXd5LXpyDJe_vf-3XwJICcVrgtT-pEgQr8uMkXmHl29izyhg1MtTbWZH4sVjHpQbF4_qfX3VNP7e-Oa1-BelxvjGbzMIqpMPuVp0vMrWpb5KQ_A/s320/ScreenHunter_93+Feb.+12+19.03.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5166186224336559762" /></a><p>Ndesignstudio</p></span><br/><br/><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3CL3zUWrqLP4ZPIKOnB2sQu5loorWaif9v4yUtrqjUH6KCnPg9niqJqQWgwXrFgdMFxHr9rKBQ161dCfZf2NZi3tkhsGVeWWbNj5dmK_wHl2fEkEripXNwdq6jV7HWto5eHRHow1yp-w/s1600-h/ScreenHunter_94+Feb.+12+19.13.gif"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3CL3zUWrqLP4ZPIKOnB2sQu5loorWaif9v4yUtrqjUH6KCnPg9niqJqQWgwXrFgdMFxHr9rKBQ161dCfZf2NZi3tkhsGVeWWbNj5dmK_wHl2fEkEripXNwdq6jV7HWto5eHRHow1yp-w/s320/ScreenHunter_94+Feb.+12+19.13.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5166186559344008866" /></a><p>JohnCow.com</p></span><br/><br/><span class="captionleft"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmqyLb7SprSQc5GakSEXxCLTHV9VzyIU6ItIyY2PuxbKDTHiOWAKPizXRNZ6zZP_AsZLDVibHhFmJylI1A-wbNzFHmLifsHSuUhYtYm7xzAfV3x7MSl-F-Yxq56b042r82Nkwb_t46tE/s1600-h/ScreenHunter_95+Feb.+12+19.15.gif"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmqyLb7SprSQc5GakSEXxCLTHV9VzyIU6ItIyY2PuxbKDTHiOWAKPizXRNZ6zZP_AsZLDVibHhFmJylI1A-wbNzFHmLifsHSuUhYtYm7xzAfV3x7MSl-F-Yxq56b042r82Nkwb_t46tE/s320/ScreenHunter_95+Feb.+12+19.15.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5166186829926948530" /></a><p>Revolution theme by Brian Gardner</p></span>In all of these themes, there are three main features which I consider are essential in the design of a great blog header:
<ol><li>The blog title/logo</li>
<li>Brand reinforcement</li>
<li>Navigation links</li></ol></p><p>Additional features of a blog header may also include a search box and subscription links (indeed, the header is the first place I look for these features when browsing other blogs!).</p><h3>Why are these features important?</h3><p>When a new visitor finds your blog, there are three essential things your design needs to convey in a glance:
<ol><li>Something striking or unique which will catch their attention and make them want to read on!</li>
<li>General information about your blog: what is it called? What are they likely to read about in your posts? Do these messages suggest the reader will find the information they are interested in?</li>
<li>How easily readers will be able to find the information they are looking for.</li></ol></p><p><span style="font-weight:bold;">A great blog header should be able to convey all three messages within the space of a few seconds.</span></p><p>Of the examples mentioned above, Adii's blog header is perhaps the most striking in terms of branding and information: strong colors and unusual fonts convey Addi's personality as a designer, while the visual descriptions of his site and status tell the reader exactly what to expect in the content.</p><p>John Chow's header is put to great use, illustrating his theme of "making money online" through the image of cash in the header and also the blog description. The navigation and search box quickly help visitors understand how to find the information they need.</p><h3>There is no reason why Blogger headers cannot look this good too!</h3><p>Those who are familiar with these blog designs may realize that these are not Blogger powered templates. So let me assure you of one thing: <span style="font-weight:bold;">all of the header designs featured here can easily be recreated in Blogger templates!</span></p><p>Using some simple techniques, you can easily create a header section which looks as good as any of the excellent designs featured above.</p><p>In the next installment of this series, I will offer you <span style="font-weight:bold;">a very easy way to create a great layout for your header section!</span> This layout will include sections for your blog logo/title and description, a search box and easily configurable navigation links. Best of all, you will be able to simply copy and paste the code required for this layout into your blog template, including the sections for widgets which you can configure yourself.</p><p>In the meantime, why not <a href="http://www.smashingmagazine.com/2008/02/01/smashing-header-graphics-contest/">get some inspiration</a> for your header design/blog logo, and imagine what you could achieve with your own Blogger blog!</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-86672164106874176412008-02-05T23:58:00.000+00:002008-02-26T13:11:29.938+00:00MyBlogLog commment avatars not working? Try this fix<p>I just noticed that the MyBlogLog comment avatars weren't working in this blog. It seems that <a href="http://blog.merlinox.com/mybloglog-blogger-plugin-blogger-2-too/">Merlinox</a> (the blogger who invented this hack) has either removed or relocated the script we were using to make the avatars appear in our Blogger blogs. So the avatars just weren't appearing at all.</p><p>Thankfully, I had saved a copy of the JavaScript file which I've now uploaded to my own host, and not the avatars are working for me again.</p><p>So if you have installed <a href="http://www.bloggerbuster.com/2007/11/how-to-add-comment-avatars-to-see-your.html">the MyBlogLog comment avatars hack</a> and your avatars do not display, here is the fix:</p><p>Find this line in your blog template:
<blockquote><script src='<span style="font-weight:bold; color: red;">http://blog.merlinox.com/MrX/Blog/test/myBlogAvatar2.js</span>' type='text/javascript'/></blockquote></p><p>And change the line in red to this instead:
<blockquote>http://bloggerbuster.com/scripts/myBlogAvatar2.js</blockquote></p><p>This will link to the script hosted on my server instead, and will ensure your MyBlogLog comment avatars display as normal.</p><p>Alternatively, you can download the JavaScript to your computer, upload this to your own hosting service, then change the URL in your blog template accordingly.</p><p>Hope this solves any problems you may have been experiencing as users of this hack!</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-68342389572429328872008-01-30T13:50:00.001+00:002010-05-07T12:42:41.805+01:00Your free eBook: The Cheats' Guide to Customizing Blogger templates<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwOHN_X1zM_9dwUFdbhqrN9ukoh0LWtsywNZYOtpEVxkoAqbGfcbQ0_yRjve9AI6l_c2LCOFZ3hYkkkHq7NuzBlV3XeODtK6MYVbdvKtzAm3lHBiPsNOVQP0oX-u1F5lWqv0AijcpRdE/s1600-h/cheats_guide_release.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5161271612275223554" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwOHN_X1zM_9dwUFdbhqrN9ukoh0LWtsywNZYOtpEVxkoAqbGfcbQ0_yRjve9AI6l_c2LCOFZ3hYkkkHq7NuzBlV3XeODtK6MYVbdvKtzAm3lHBiPsNOVQP0oX-u1F5lWqv0AijcpRdE/s400/cheats_guide_release.jpg" style="cursor: pointer; float: right; margin: 0pt 0pt 10px 10px;" /></a>I'm really happy to be able to release my first eBook: The Cheats' Guide to Customizing Blogger Templates.<br />
Based on the original article published here, this eBook will offer you many options and examples to customize your existing Blogger template quickly and easily, <span style="font-style: italic;">whichever style of template you are using</span>.!<br />
Read on for more information and to download this free eBook.<br />
<span id="fullpost">
</span><br />
<div 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 src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<h3>
<span id="fullpost">Features of this eBook</span></h3>
<span id="fullpost">This eBook is much more comprehensive than the original online article, and features:
</span><br />
<ul><span id="fullpost">
<li>New examples of template customizations</li>
<li>An entire chapter about customizing stretch (fluid) templates</li>
<li>How to use buttons, banners and images</li>
<li>Many useful resources for template customization</li>
<li>An optional download folder containing all of the templates and images used in the eBook</li>
</span></ul>
<h3>
<span id="fullpost">Format</span></h3>
<span id="fullpost">The Cheats' Guide to Customizing Blogger Templates eBook is available in PDF format.</span><br />
<span id="fullpost">You can download Adobe Reader using the link below:</span><br />
<div align="center">
<span id="fullpost"><a href="http://www.adobe.com/products/acrobat/readstep2.html" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5161307535381687330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpX8i8IgX_4tP8UtozmJHKNiQ4ZlOqdIuCr8AzauekCB3MXZwS7iUmu0bulAIJ1akp0P6HNc_hBWyEVIeAxjuSmmSXkw7UNkHNQxCAFrOkfE_MNInacsrVjRc6BIzLeyqxlGTiaiN2waU/s400/get_adobe_reader.gif" style="cursor: pointer;" /></a></span></div>
<h3>
<span id="fullpost">License</span></h3>
<span id="fullpost"><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" rel="license">
<img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" style="border-width: 0pt; float: right; margin: 0pt 0pt 10px 10px;" /></a>The Cheat's Guide to Customizing Blogger Templates eBook is licensed under a <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" rel="license">Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License</a>.</span><br />
<span id="fullpost">This means that you are free to redistribute this eBook for non-commercial purposes, without modification, so long as you include a link to the original author.</span><br />
<h3>
<span id="fullpost">Download</span></h3>
<span id="fullpost">Here you can download the Cheats' Guide to Customizing Blogger Templates eBook and also the download folder which contains all of the templates and images used in the guide:</span><br />
<span id="fullpost"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5161310713657486386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1BuwoUb8yPISCtS6wudVhPIJMSDvX3EARXpRDZvpvIqib52PRqWtggI-f9OfPbE930rk3ziD9Vum6Hyn4sqbpkophn7uf57cJGxoN3cn0XmpjpXXGu5m4E_rZLnqHJvMHkxchbw9R2c/s400/download.jpg" style="cursor: pointer; float: left; margin: 0pt 10px 10px 0pt;" /><a href="http://docs.google.com/fileview?id=0B4qfKCEK9vP6ZTkwNmZjMzUtYTkwMC00YzQwLTg3ZjAtYWE4YzE1ZWE4YzAy&hl=en">Download the eBook (PDF format)</a><br /><br /><a href="http://bloggerbuster.com/ebooks/cheats_guide_downloads.zip">Cheats' Guide downloads folder (templates, images, etc)</a></span><br />
<h3>
<span id="fullpost">Final words</span></h3>
<span id="fullpost">Please <a href="http://www.bloggerbuster.com/2007/06/contact-me.html">send me an email</a> if you have any questions about the content or usage of this eBook, and I'll get back to you as soon as possible.</span><br />
<span id="fullpost">If you've found The Cheats' Guide to be a useful read, <span style="font-style: italic;">why not help me spread the word</span> so that others can find this too? It has taken much time and effort to complete this eBook, so I would really appreciate any and all publicity I can get!</span><br />
<span id="fullpost">I would love to read your thoughts and opinions about this eBook, so please do leave your comments and suggestions below.</span><br />
<span id="fullpost"></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-83570132302741518802008-01-29T09:31:00.000+00:002009-07-26T01:49:57.759+01:00Styling the header and footer sections (Blogger template design series)<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1RPMneb8d9ulOoI8qMIijokoM97D7osXU_kY_bAtpfCGrYpE1Dj1IMNsboXisJU5dAdYfjYDKI-BXePlrf-LtEP1SfqAhRGCVd6VJjX9QggPwPNZyWO34fSYaZwWzXfAjc0L9fhujQVY/s1600-h/ScreenHunter_52+Jan.+24+22.53.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1RPMneb8d9ulOoI8qMIijokoM97D7osXU_kY_bAtpfCGrYpE1Dj1IMNsboXisJU5dAdYfjYDKI-BXePlrf-LtEP1SfqAhRGCVd6VJjX9QggPwPNZyWO34fSYaZwWzXfAjc0L9fhujQVY/s200/ScreenHunter_52+Jan.+24+22.53.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5161206165563566994" /></a>If you've been following the Blogger Template Design series so far, you'll have seen the demonstration template looking something like this. <a href="http://www.bloggerbuster.com/search/label/Blogger%20Template%20Design%20Series">In the series so far</a>, we've created the layout (canvas) for our template, then changed the margins and padding for the main elements. But there is no distinguishing style yet for this template.</p><p>So in this installment, we'll look at some quick customization options for the blog's header and footer to pretty things up a little bit, and provide a stylistic base for future customizations so we have a better idea of the overall design we want to work towards.</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've always considered the blog header and footer to stylistically "frame" the main content of the blog, and feel it's important to pay much attention to these areas when designing a custom template.</p><p>Broadly speaking, there are two major styles for the header and footer sections of blog templates:</p><p>Where the width spans only the width of the content, like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NpSNLQqpvI6bhQ2APGBMaDm8OhDtyrLtg63rq1M8asQCVmC8gNckmMRSjKHv8aTOAdc3pJYUh1llRLtQCGOAcafaJ2q1O59BrOsVwN7LKP7l3zJinEEL4DCs6r7riDt7K2W65AwVBDY/s1600-h/constrained_frame.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NpSNLQqpvI6bhQ2APGBMaDm8OhDtyrLtg63rq1M8asQCVmC8gNckmMRSjKHv8aTOAdc3pJYUh1llRLtQCGOAcafaJ2q1O59BrOsVwN7LKP7l3zJinEEL4DCs6r7riDt7K2W65AwVBDY/s400/constrained_frame.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5161221361157860274" /></a>
</p><p>Where the width spans the entire window, like this:<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNGg1OmkKw8qWrTQfB6ZJM2NckkbqpeDFk4VjKaZN_zgQuhpKX3JiQbq2pun-08pCM0TOXgdAUxSmrTMCgmGnmA0OGukullJFpGL-LyrEn0XKyZJjrD6liUQSMWQgM8PS8EACqHXykn4/s1600-h/ScreenHunter_63+Jan.+30+11.18.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNGg1OmkKw8qWrTQfB6ZJM2NckkbqpeDFk4VjKaZN_zgQuhpKX3JiQbq2pun-08pCM0TOXgdAUxSmrTMCgmGnmA0OGukullJFpGL-LyrEn0XKyZJjrD6liUQSMWQgM8PS8EACqHXykn4/s400/ScreenHunter_63+Jan.+30+11.18.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5161227528730897346" /></a></p><p>In this tutorial, I'll explain how both styles can be achieved so you can choose which style you'd prefer for your own custom template.</p><h3>Changing the width of the header and footer (for both styles)</h3><p>For both of the example styles displayed above, we will need to change the dimensions for the header and footer sections, which ensures the content spans the entire width of the blog.</p><p>Here's how to do this:
<ol><li>Go to Template>Edit HTML in your Blogger dashboard. Do not expand the widget templates (it is unnecessary for these customizations and can in fact make things more difficult for you!)</li>
<li><span style="font-weight:bold;">Find the width of your outer-wrapper.</span> In the demonstration template, this is 950px, as can be seen in the following section of code:
<blockquote>#outer-wrapper {<br/>
border: 1px solid #000000;<br/>
<span style="font-weight:bold; color: red;">width: 950px;</span><br/>
margin:0 auto;<br/>
padding: 10px;<br/>
text-align:$startSide;<br/>
font: $bodyfont;<br/>
}</blockquote>
We need to know this width so we can adjust the header and footer wrappers to be the same width.</li>
<li><span style="font-weight:bold;">Change the width of the header-wrapper.</span> Currently the header wrapper in the demonstration template is only 660px wide. We need to change this to match the width of the outer-wrapper. So find this section in your template code:
<blockquote>#header-wrapper {<br/>
<span style="font-weight:bold; color: red;">width: 660px;</span><br/>
border: 1px solid #000000;<br/>
margin:0 auto 10px;<br/>
border:1px solid $bordercolor;<br/>
}</blockquote>
And change the line highlighted in red to match the width of your outer-wrapper instead. In the demonstration template, the adjustment will look like this:
<blockquote>#header-wrapper {<br/>
<span style="font-weight:bold; color: red;">width: 950px;</span><br/>
border: 1px solid #000000;<br/>
margin:0 auto 10px;<br/>
border:1px solid $bordercolor;<br/>
}</blockquote></li>
<li><span style="font-weight:bold;">Change the width of the footer.</span> In similarity to the header-wrapper, the footer measures only 660px in width, so we need to increase this width. So find this section of code in your blog template:
<blockquote>#footer {<br/>
border: 1px solid #000000;<br/>
<span style="font-weight:bold; color: red;">width: 660px;</span><br/>
margin:0 auto;<br/>
padding-top:15px;<br/>
line-height: 1.6em;<br/>
text-transform:uppercase;<br/>
letter-spacing:.1em;<br/>
text-align: center;<br/>
}</blockquote>
And once again change the line in red to match the width of your outer-wrapper (eg: width: 950px).</li>
<li><span style="font-weight:bold;">Make the style for the footer consistent! </span>If we take a look at the template code which calls the footer section, we can see that there is a div called "footer-wrapper" which is not features in the <b:skin> portion of our template:
<blockquote><<span style="font-weight:bold;color: red;">div id='footer-wrapper'</span>>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div></blockquote>
To ensure this doesn't cause problems later on in the customization process, we need to change the style code in the template.<br/><br/>So find the footer styling in your blog template again, and add the phrase highlighted in red:
<blockquote>#footer<span style="font-weight:bold; color: red;">-wrapper</span> {<br/>
border: 1px solid #000000;<br/>
width: 950px;<br/>
margin:0 auto;<br/>
padding-top:15px;<br/>
line-height: 1.6em;<br/>
text-transform:uppercase;<br/>
letter-spacing:.1em;<br/>
text-align: center;<br/>
}</blockquote></li></ol></p><p>Now if you preview your template, you will notice that the header and footer sections have increased in width and span the whole of the blog.</p><h3>Making the header and footer sections span only the width of the blog</h3><p>If you only want the header and footer sections to be as wide as the main blog content, you need make no further extensive customizations to these sections!</p><p>If you prefer, you can add a background color to the header and footer wrappers to make these stand out and frame the main content, as I showed in the examples above.</p><p>To do this, you only need to add one line of code to both the header-wrapper and footer-wrapper sections of your styling code:
<blockquote>background: #000000;</blockquote>
The hex value "#000000" is black, though you can just as easily substitute this value for the color of your choice.</p><p>To add your background color to the header-section, paste the line of code just below this phrase in your template code:
<blockquote>#header-wrapper {</blockquote>
To add this to the footer section, paste the line of code just below this phrase instead:
<blockquote>#footer-wrapper {</blockquote></p><p>After adding a black background to the header and footer wrappers in my demonstration template, the end result looks like this:</p><p>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4AMqE-rvCJNrhQZhJMHD2pcritEm3lh1jghrKjOmd4Iik1ikRz6tvAQSBVk-AufqKkuIZc5gzYnwYVxHCsc7eD4dw1ciuK1XmBN9sB3CAAgRK39KRpGQKuLXoAC456qAhL3OE0eH8A0/s1600-h/constrained_frame.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4AMqE-rvCJNrhQZhJMHD2pcritEm3lh1jghrKjOmd4Iik1ikRz6tvAQSBVk-AufqKkuIZc5gzYnwYVxHCsc7eD4dw1ciuK1XmBN9sB3CAAgRK39KRpGQKuLXoAC456qAhL3OE0eH8A0/s320/constrained_frame.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5161241697828006866" /></a></p><p>This is the style of framing I have used for the Blogger Buster template, which also allowed me to use a background image for the header.</p><h3>Making the header and footer sections span the width of the browser window</h3><p>This style of framing the content can look very striking, as it creates bands of color to the top and bottom sections of the blog, segregating the main content from the framing elements and drawing more attention to the blog posts and sidebar sections.</p><p>However, <span style="font-weight:bold;">it is much more difficult to achieve!</span></p><p>To achieve this, we must take the header and footer sections outside the outer-wrapper, then wrap these in new div elements which span the entire browser window.</p><p>It is quite complicated to explain, so I will take you through the process step-by-step:</p><p><ol><li><span style="font-weight:bold;">Add some styling code to your <b:skin> section.</span> This is the simplest part of the process. Simply copy the code below and paste this just before the closing </b:skin> tag in your template:
<blockquote>#outer-header {<br/>
background: #000000;<br/>
}<br/>
#outer-footer {<br/>
background: #000000;<br/>
}</blockquote></li>
<li><span style="font-weight:bold;">Take the header outside the outer-wrapper. </span> Find this section ion your blog's template code:
<blockquote> <div id='header-wrapper'><br/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br/>
<b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/><br/>
</b:section><br/>
</div></blockquote>
Now delete this entire section!</p><p>Now we can paste a modified version of this code outside the outer-wrapper, so the header will span the width of your browser window.</p><p>So find this line in your blog template:
<blockquote><div id='outer-wrapper'></blockquote>
And paste the following section of code <span style="font-weight:bold;">immedietly before it</span>:
<blockquote> <div id='outer-header'><br/>
<div id='header-wrapper'><br/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br/>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/><br/>
</b:section><br/>
</div><br/>
</div><br/>
<span style="font-weight:bold; color: red;"><div id='outer-wrapper'></span></blockquote>
Now if you preview your template, the header section should look something like this:<br/><br/>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhevLcIG-e5KRWYJYVQYkT7xkdrZ_vRfXKUC2kqkXXNxTiUzk7155ULsyxFvBIP01OeZqVEvMN18n0TzL2zN7boLFNpBcqa0iCAERZSIW1o0DnuuDEwKCDsQqcZw_4W7jzZT5E_G5fE81o/s1600-h/ScreenHunter_64+Jan.+30+12.46.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhevLcIG-e5KRWYJYVQYkT7xkdrZ_vRfXKUC2kqkXXNxTiUzk7155ULsyxFvBIP01OeZqVEvMN18n0TzL2zN7boLFNpBcqa0iCAERZSIW1o0DnuuDEwKCDsQqcZw_4W7jzZT5E_G5fE81o/s400/ScreenHunter_64+Jan.+30+12.46.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5161250253402860514" /></a></li>
<li><span style="font-weight:bold;">Take the footer section outside the outer-wrapper.</span> We're going to use the same method to ensure the footer section moves outside the outer-wrapper, so that it will not be constrained in width.<br/><br/>So find this section in your blog's HTML code, and delete the entire section:
<blockquote> <div id='footer-wrapper'><br/>
<b:section class='footer' id='footer'/><br/>
</div></blockquote>
Next, find this line in your blog template:
<blockquote> </div></div> <!-- end outer-wrapper --></blockquote>
And paste the following section of code immediately after this line:
<blockquote> <span style="font-weight:bold;color: red;"></div></div> <!-- end outer-wrapper --></span><br/>
<div id='outer-footer'><br/>
<div id='footer-wrapper'><br/>
<b:section class='footer' id='footer'><br/>
<b:widget id='Text1' locked='false' title='' type='Text'/><br/>
</b:section><br/>
</div><br/>
</div></blockquote></li>
<li>At this stage, your template may seem a little maladjusted. This is because the style for the outer-wrapper doesn't feature the required code to prevent it from running into the new footer section.<br/><br/>This is easily solved by adding the required code to the style for the outer-wrapper in the <b:skin> section of the template.<br/><br/>Find the outer-wrapper section in the <b:skin> portion of your blog template, and add the lines highlighted in red:
<blockquote>#outer-wrapper {<br/>
border: 1px solid #000000;<br/>
width: 950px;<br/>
margin:0 auto 5px;<br/>
text-align:$startSide;<br/>
font: $bodyfont;<br/>
<span style="font-weight:bold;color; red;"> word-wrap: break-word; <br/>
overflow: hidden; <br/></span>
}</blockquote>
Now if you preview your template, all of the elements should fit neatly into place, like this:<br/><br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEwZrX0juis6y4z0bE6HoNRvGAtIBxV4GX3izc-FRzF63uFxMQLd2GkBvy4TYO6tnX6SDQRNTFAktGGxINIwpHTj-0JHO4SzQxb4JYYr9NX-py5YgkSOAm5VAxi9d94ufibmAohcMX-uQ/s1600-h/ScreenHunter_63+Jan.+30+11.18.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEwZrX0juis6y4z0bE6HoNRvGAtIBxV4GX3izc-FRzF63uFxMQLd2GkBvy4TYO6tnX6SDQRNTFAktGGxINIwpHTj-0JHO4SzQxb4JYYr9NX-py5YgkSOAm5VAxi9d94ufibmAohcMX-uQ/s400/ScreenHunter_63+Jan.+30+11.18.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5161261033770773490" /></a></li></ol></p><p>If you prefer, you can change the background color of the header and footer sections by substituting #000000 for your chosen hex value in the style for the outer-header and outer-footer sections (use the <a href="http://tools.bloggerbuster.com/colors">Color Calculator in the Tools section</a> to find the hex value for your chosen color).</p><p>By now, I hope I have provided enough information for you to format your own header and footer sections to match the style of your overall template!</p><p>I know that some of the customizations described here are a little difficult to implement, so if you do have any problems, feel free to leave a comment or send an email and I'll do my best to advise for your own particular template.</p><h4>Status of the demonstration template</h4><p>For <a href="http://blogger-template-design-series.blogspot.com/">the demonstration template used to exemplify the tutorials in this series</a>, I have chosen to span the header and footer backgrounds across the whole browser window. You can view the progress of this <a href="http://blogger-template-design-series.blogspot.com/">demonstration blog</a> at any time, and also find links to all previous installments in this series.</p><h4>Coming soon...</h4><p>In the next <span style="font-weight:bold;">main</span> installment, I will begin to explain how to add interactivity to your header section. Also, I will be posting some resources of inspiration for blog style and design in the next few days to give you some ideas of the header images, icons and color schemes you may like to use in your own templates, which will be helpful to refer to when designing your own schemes.</p><p>As always, please feel free to leave your comments and opinions below. I really do appreciate your feedback on this series, especially regarding tutorials like this which are more difficult to explain.</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-34473437617340075292008-01-24T14:49:00.000+00:002009-07-26T01:49:57.760+01:00Adjusting the margins and padding in your blog template (Blogger Template Design Series)<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOitZQX_mlitN7BC0WzLlbM0-hGBfo-2hQZ2J2v261ZrCJs7f2Ety2uRX-1dbhK91zSDM0IUh5JjWKznqwqrvqGOWAW-f3rSlF-Cg1mIOIRQptCfICV5gbrOryfv3-vGZcPVyfqg13_A/s1600-h/squares.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOitZQX_mlitN7BC0WzLlbM0-hGBfo-2hQZ2J2v261ZrCJs7f2Ety2uRX-1dbhK91zSDM0IUh5JjWKznqwqrvqGOWAW-f3rSlF-Cg1mIOIRQptCfICV5gbrOryfv3-vGZcPVyfqg13_A/s320/squares.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5159192818039188178" /></a>Margins and padding are important aspects of Blogger design: they add space between and inside each element of your blog, while ensuring your content is well styled and easy to read.<p>In this installment of the Blogger Template Design series, I'll share the method I use to change the margins and padding in Blogger templates to ensure a cohesive layout. This post follows on from the previous installment which explained how to change the overall layout of 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>Blog margins define the space of each element <span style="font-style:italic;">in relation to each other</span>, while padding defines <span style="font-style:italic;">the space within each element</span>.</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYLOh4sRKc2vLi4j8cITU2C9-p929VVjWw_35Y8W0iExKPAieaZJNOKbrEvWwEI0jtFkvZEVJSHz4j-feOC_FXgrsquA1z3jW52ZAXsMbXnAYiNWcK29OYQmjxp2XsGGw1gaJ5eKixJo/s1600-h/padding_and_margins.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYLOh4sRKc2vLi4j8cITU2C9-p929VVjWw_35Y8W0iExKPAieaZJNOKbrEvWwEI0jtFkvZEVJSHz4j-feOC_FXgrsquA1z3jW52ZAXsMbXnAYiNWcK29OYQmjxp2XsGGw1gaJ5eKixJo/s400/padding_and_margins.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5159099441155205682" /></a></p><p>In its current state, the <a href="http://blogger-template-design-series.blogspot.com/">demonstration blog used to explain the tutorials in this series</a> is visibly coherent despite that we have not yet altered the padding and margins. However, as we begin to alter each element of the blog template (the sidebars, header and main posts column), we will may notice these elements become squashed together, since there is no space defined <span style="font-style:italic;">between</span> or <span style="font-style:italic;">within</span> them.</p><h3>The easy way to see how padding and margins will affect your template</h3><p>Here is a method I almost always use when tweaking the margins and padding of my Blogger templates: <span style="font-weight:bold;">add borders to each of the layout elements.</span></p><p>When we transform the template from this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjkr542dcKQk1FzFFZ9olhJvxsrdaK6mJzDzDGvLyz0M7q_6zJue72ocqNw6DZruTUVe6CeWZCySAHcUrJzkJ_zgAR-qc9XVMvknO8zQk3d3QGcIOl9YySHuZ1irVpXfUXt-vqpRe5T4g/s1600-h/ScreenHunter_46+Jan.+24+19.50.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjkr542dcKQk1FzFFZ9olhJvxsrdaK6mJzDzDGvLyz0M7q_6zJue72ocqNw6DZruTUVe6CeWZCySAHcUrJzkJ_zgAR-qc9XVMvknO8zQk3d3QGcIOl9YySHuZ1irVpXfUXt-vqpRe5T4g/s400/ScreenHunter_46+Jan.+24+19.50.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5159133169533381186" /></a></p><p>To this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Dyd_59VdvQqIf-Cy3-iztEi44pjsLgVsFlwGisdZXY9ptllw62xU05Df6w5Z6ZrDhVqGUW3v7K1vo7pudqKSMiq5AyNfsotQFnQ-KOQqBYUOO1wIIviBpZT_J66xvpNSyQZ7JKRYzC0/s1600-h/ScreenHunter_45+Jan.+24+19.50.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Dyd_59VdvQqIf-Cy3-iztEi44pjsLgVsFlwGisdZXY9ptllw62xU05Df6w5Z6ZrDhVqGUW3v7K1vo7pudqKSMiq5AyNfsotQFnQ-KOQqBYUOO1wIIviBpZT_J66xvpNSyQZ7JKRYzC0/s400/ScreenHunter_45+Jan.+24+19.50.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5159133354216974930" /></a></p><p>It becomes much easier to see how padding and margins will improve the overall appearance of the template!</p><h3>Adding borders to your layout elements</h3><p>When tweaking my templates, I find it best to add borders to the following areas:
<ul><li>The outer wrapper</li>
<li>The header section</li>
<li>The Sidebar(s)</li>
<li>The main posts column</li>
<li>The Footer</li></ul></p><p>To do this, we only need to add a single line of code to the styling for each of these sections:
<blockquote>border: 1px solid #000000;</blockquote></p><p>Copy this line of code to your clipboard, then find each of the following lines in your template. Paste the line you have copied directly beneath each of the following lines in yout template's HTML code:
<blockquote>#outer-wrapper {<br/>
#header-wrapper {<br/>
#main-wrapper {<br/>
#sidebar-wrapper {<br/>
#footer {</blockquote>
If you have a three column layout, you will also need to add this in the styling for the new sidebar wrapper:
<blockquote>#new-sidebar-wrapper</blockquote></p><p>Before you save this, you should preview your template to ensure each of the borders is in place. You may well notice a problem with the layout after adding these borders: your sidebar(s) may now be pushed out of place!</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpHqa3iarIa1Qy7UIC7OppcpqG80kEKB55G_bp2zzHhpg9awgdz7v3L3fvnWY0rejBXX4e1I-zICiycputZUL8g4R37RcZG7bMPo2GTmJduYR7LRQkJja6uKd5huSVIVDCOyKiIvaDYwM/s1600-h/ScreenHunter_47+Jan.+24+20.17.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpHqa3iarIa1Qy7UIC7OppcpqG80kEKB55G_bp2zzHhpg9awgdz7v3L3fvnWY0rejBXX4e1I-zICiycputZUL8g4R37RcZG7bMPo2GTmJduYR7LRQkJja6uKd5huSVIVDCOyKiIvaDYwM/s400/ScreenHunter_47+Jan.+24+20.17.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5159140054365956706" /></a></p><p align="center"><small>This is how the problem looks in the three column demonstration template.</small></p>But don't worry: this is easily solved by taking a few pixels away from the width of the main posts column</p><p>In the demonstration template, the width of the main posts column is 450px:
<blockquote>#main-wrapper {<br/>
border: 1px solid #000000;<br/>
<span style="font-weight:bold; color: red;">width: 450px;</span><br/>
float: $startSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote>
By taking six pixels from this value (leaving this at 444px instead), we can ensure the sidebars are properly aligned:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftHODp5yQUvK88LlMzQzg30B0LUiOaNkFSOmpkSSPMoCWarOZ-9SSUIV9nzUVVnqQ528egUML_9Z8HG6PU_-F6G0zYEKJ6nFK_4D4oW5hEPU-TGO8GVdggm6SrYbScjTBG_ugJvvZB8w/s1600-h/ScreenHunter_48+Jan.+24+20.23.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftHODp5yQUvK88LlMzQzg30B0LUiOaNkFSOmpkSSPMoCWarOZ-9SSUIV9nzUVVnqQ528egUML_9Z8HG6PU_-F6G0zYEKJ6nFK_4D4oW5hEPU-TGO8GVdggm6SrYbScjTBG_ugJvvZB8w/s400/ScreenHunter_48+Jan.+24+20.23.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5159141527539739250" /></a></p><h3>How to define margins</h3><p>As I mentioned earlier in this post, <span style="font-weight:bold;">margins define the space between each element in the layout</span>. In the image above, we can see there is no space between the main posts column or either of the sidebars. We can use margins to create space between each of these elements.</p><p><span style="font-weight:bold;">However, we must be aware that adding margins to a layout element is almost like adding extra width to them. Unless we take some pixels away from an element, we risk pushing the layout out of place!</span></p><p>With this in mind, let's have a look at the demonstration template again:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGguJrGMhhIZ3YjSrWlO44uwMiDpQsQ8gYyWCct8tc_QlTutuWCIj1GEd1psEZv_YxFx-B-5DWgRL19Km39taD-zzqCok-n80M_Y0pKV9SIKwXRHNqtC1MJVzoAxMYZl_56IIDL1ndkg/s1600-h/Untitled-1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGguJrGMhhIZ3YjSrWlO44uwMiDpQsQ8gYyWCct8tc_QlTutuWCIj1GEd1psEZv_YxFx-B-5DWgRL19Km39taD-zzqCok-n80M_Y0pKV9SIKwXRHNqtC1MJVzoAxMYZl_56IIDL1ndkg/s400/Untitled-1.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5159146002895661698" /></a></p><p>We can see there is already some space to the left of the main column, and to the right of the right-hand sidebar (created by padding in the outer wrapper). However, there is no space between the main column and each of the sidebars.</p><p>To create this space, we will add a margin to the right of the main-wrapper, and a margin to the right of the first sidebar.</p><h4>Adding a margin to the right of main wrapper</h4><p>In the demonstration template, I'm going to add a margin of 10 pixels to the right hand side, which will create some space between the main wrapper and the neighboring sidebar.</p><p>To do this, I need to add a line of code to the style declarations for the main-wrapper, which is highlighted in red below:
<blockquote>#main-wrapper {<br/>
border: 1px solid #000000;<br/>
<span style="font-weight:bold; color: red;">margin-right: 10px;</span><br/>
width: 444px;<br/>
float: $startSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCHnpfNJck_HW_7c8edkYzgbQAWAcc38K-JJyO1Bp4Hi7fj382hIFag7_da51DHAMZDZz3FxkLdIq2vIvWSz86tRep07GbVtm5lnahca8znMVZeSdr1C_5Q9WqsJqBuZZcmpP4EB_7xhQ/s1600-h/ScreenHunter_49+Jan.+24+21.49.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCHnpfNJck_HW_7c8edkYzgbQAWAcc38K-JJyO1Bp4Hi7fj382hIFag7_da51DHAMZDZz3FxkLdIq2vIvWSz86tRep07GbVtm5lnahca8znMVZeSdr1C_5Q9WqsJqBuZZcmpP4EB_7xhQ/s320/ScreenHunter_49+Jan.+24+21.49.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5159163792650201746" /></a>As I haven't yet deducted any of the width from other elements, this now makes pushes one sidebar beneath the other.</p><p>But if I take 10px away from the current width of the main wrapper (making this 434px), the sidebar should fall back into place:</p><p><blockquote>#main-wrapper {<br/>
border: 1px solid #000000;<br/>
<span style="font-weight:bold; color: red;">width: 434px;</span><br/>
margin-right: 10px;<br/>
float: $startSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote>
Making the layout appear like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2dcIfPbjQgOP3yAWfySjn2N23E_ar3fq9tPcu8M1Lab10FWCsqLm7Qz4UEuU6N4tSpx2h6GRYG6aCZ-NBCIzqID09il1vbwMlYziqer6Pqmu7UlTQSGb-yASrEdsm88xDAIpapeKJXY4/s1600-h/ScreenHunter_50+Jan.+24+22.02.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2dcIfPbjQgOP3yAWfySjn2N23E_ar3fq9tPcu8M1Lab10FWCsqLm7Qz4UEuU6N4tSpx2h6GRYG6aCZ-NBCIzqID09il1vbwMlYziqer6Pqmu7UlTQSGb-yASrEdsm88xDAIpapeKJXY4/s320/ScreenHunter_50+Jan.+24+22.02.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5159167142724692642" /></a></p><h4>Adding a margin to the right of the sidebar</h4><p>I'm going to use the same techniques to add a space between the sidebars (which is also applicable for those who have their sidebar aligned to the left of the main column).</p><p>First, I'll add the margin declaration to the style for the sidebar-wrapper:
<blockquote>#sidebar-wrapper {<br/>
border: 1px solid #000000;<br/>
width: 250px;<br/>
<span style="font-weight:bold; color: red;">margin-right: 10px;</span><br/>
float: $endSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote></p><p>But since I prefer the width of the sidebar to remain at 250px, I will deduct another 10px from the main wrapper instead, leaving the width of this section at 424px:
<blockquote>#main-wrapper {<br/>
border: 1px solid #000000;<br/>
<span style="font-weight:bold; color: red;">width: 424px;</span><br/>
margin-right: 10px;<br/>
float: $startSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote></p><p>Now there is space between both the main and sidebar sections, providing a better overall appearance to the layout of the blog template:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44kUhcItQHXwwWtjE8slo3RMArO8ohltHQFfNX0mnhZfNeSWZS4pfZFgvCMqLeaTWYQcxjdUYjTp75STNog2CeYQadNojq6raaJAXMWdHGUNW2h4Fe8peS2QYLGhk1N8EYsGa8TmGOvI/s1600-h/ScreenHunter_51+Jan.+24+22.13.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44kUhcItQHXwwWtjE8slo3RMArO8ohltHQFfNX0mnhZfNeSWZS4pfZFgvCMqLeaTWYQcxjdUYjTp75STNog2CeYQadNojq6raaJAXMWdHGUNW2h4Fe8peS2QYLGhk1N8EYsGa8TmGOvI/s400/ScreenHunter_51+Jan.+24+22.13.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5159169981698075314" /></a></p><p>In your own templates, you can increase or decrease the size of these margins as you wish, so long as you remember to deduct the same amount in pixels from a different area of the layout!</p><p>Now that we have arranged the margins between the layout elements, let's focus on ensuring the content of each section doesn't run too close to the borders.</p><h3>How to define padding</h3><p><span style="font-weight:bold;">Padding defines the space between the outer edges of an element and the content within.</span></p><p>Because I have defined borders in the demonstration template, it is easy to see that there is currently no padding between the edges and the content of the sidebars and main posts column (although there is already some space above and below the content).</p><p>I want to add 5 pixels of padding to each side in the main column and each of the sidebars in my demonstration template. This will decrease the available space within each of these elements by ten pixels of width (5 pixels from each side).</p><p>For this, I can use the same declaration for each of the elements:
<blockquote>padding: 0 5px 0 5px;</blockquote></p><p>This declaration differs in style from that we used to define the margins. Rather than define the padding for each side of the element, we can define the padding for all four sides (top, right, bottom and left) in one declaration. In the example above, the zeros refer to the padding above and below the content, while the 5px's refer to the padding for the right and left areas.</p><p>To add this padding declaration to the main wrapper and each of the sidebars, we only need to copy this line:
<blockquote>padding: 0 5px 0 5px;</blockquote>
And paste this just below the following lines in the blog template:
<blockquote>#main-wrapper {<br/>
#sidebar-wrapper {<br/>
#new-sidebar-wrapper {</blockquote><p><p>Unfortunately, these padding declarations once again cause the layout to be misaligned. This means that I need to deduct width from the sidebars in order to re-align them.<p>In my demonstration template, I have taken 25px in width from the width of both the sidebars, reducing them to 235 pixels each:
<blockquote>#sidebar-wrapper {<br/>
padding: 0 5px 0 5px;<br/>
border: 1px solid #000000;<br/>
<span style="font-weight:bold; color: red;">width: 235px;</span><br/>
margin-right: 10px;<br/>
float: $endSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}<br/>
#new-sidebar-wrapper {<br/>
padding: 0 5px 0 5px;<br/>
border: 1px solid #000000;<br/>
<span style="font-weight:bold; color: red;">width: 235px;</span><br/>
float: $endSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote>
<span style="font-style:italic;">In theory, this misalignment should not occur (this certainly doesn't happen when coding regular web pages!), and I cannot find an explanation or alternative solution for this, so if anyone could shed some light I would be very glad to hear from you!</span></p><p>With these padding declarations in place and the nescessary adjustments have been made, the demonstration template now looks like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2WSsby8CAv_pEC19xHaPXTnFBZnMVsP_1T1mV4dX8ttAU4UQZNmtKwEVBvTKMHQAEfom5lNCpL7yXvqNsOSmvAGDojQ-tSaxDDAHzzbmYZi6c193n881_w84L4JgWFhEG_jtXbAV6IEg/s1600-h/ScreenHunter_52+Jan.+24+22.53.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2WSsby8CAv_pEC19xHaPXTnFBZnMVsP_1T1mV4dX8ttAU4UQZNmtKwEVBvTKMHQAEfom5lNCpL7yXvqNsOSmvAGDojQ-tSaxDDAHzzbmYZi6c193n881_w84L4JgWFhEG_jtXbAV6IEg/s400/ScreenHunter_52+Jan.+24+22.53.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5159180152180632258" /></a></p><p>The available width for the content of the main section is now 414px while that of the sidebars is 225px because of the padding inside these elements. We need to take note of these widths for later styling purposes, and to ensure any images we upload will fit in the available space.</p><h3>Final words</h3><p>This post has become rather long and complex, though I hope my explanations offer detailed and understandable instructions to help you change the margins and padding for your own custom templates.</p><h4>Progress of the demonstration blog</h4><p>For the time being, I have left the borders in place in my <a href="http://blogger-template-design-series.blogspot.com/">three column demonstration template</a> as we have yet to make adjustments to the header and footer sections. And for those of you who were wondering about future installments, there's a little hint of what we'll accomplish in the future...</p><h3>Coming soon...</h3><p>The next installment will be a much shorter one, focusing on tidying the header and footer sections so they become easier to work with.</p><p>Then next week's installments, we will begin working on making the header section into a completely customized, highly functional area of the blog!</p><p>Please consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing to the feed for updates</a> to the Blogger Template Design series, plus Blogger related news and articles as they are posted.</p><p>As always, your comments and opinions are always welcomed!</p>
</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-76614055439647533692008-01-17T14:50:00.000+00:002009-07-26T01:49:57.760+01:00Creating a three column (or a wide, two column) canvas - Blogger template design series<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1RbjLScUt8O3IfAHBlKSg4zWlguohnpRPsxio2PVUsl9Un1RTA-i2WpmZy98eq_GH6fQnl3NGzfr1Ll5Ccw9FUJZzCCWVZI2340QVtwGbVPuvmof3rTMHJ-ofWTTFyvL9vY5aXqmX_A/s1600-h/blank_canvas.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1RbjLScUt8O3IfAHBlKSg4zWlguohnpRPsxio2PVUsl9Un1RTA-i2WpmZy98eq_GH6fQnl3NGzfr1Ll5Ccw9FUJZzCCWVZI2340QVtwGbVPuvmof3rTMHJ-ofWTTFyvL9vY5aXqmX_A/s320/blank_canvas.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5156589128633893122" /></a>When I begin to design a new Blogger template, the first thing I take into consideration is the overall layout. <span style="font-weight:bold;">Creating the perfect layout is crucial to the design process</span>, and should be the first step in designing a custom Blogger template.</p><p>The most popular layout styles for Blogger blogs are:
<ul><li>Three columns, with sidebars to the left and right</li>
<li>Three columns with two sidebars to the right</li>
<li>A wide two column template, with a wider posts area and a wide sidebar to the right</li></ul></p><p>So in this installment of the <a href="http://www.bloggerbuster.com/search/label/Blogger%20Template%20Design%20Series">Blogger Template Design series</a>, I will offer <span style="font-weight:bold;">basic instructions</span> for how each of these layouts can be constructed. Then in the next installment, I will focus on tweaking these layouts in order to make the canvas complete.</p><p>For the purpose of this series, I have created a demonstration blog <a href="http://blogger-template-design-series.blogspot.com/">which you can view here</a>. This demonstration blog will be used to demonstrate customizations throughout the series, and will include links back to each chapter of the series for your reference.</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>Things you should consider when deciding on your blog layout</h3><p>Visual appeal is not the only thing you should consider when deciding which layout you will adopt for your template. The three different styles I highlighted above can all serve different functional purposes; depending on you wish to display in your sidebars, one or other may be better suited to your needs:
<ul><li><span style="font-weight:bold;">Three column templates with sidebars to the left and right are best suited to blogs which <span style="font-style:italic;">don't</span> use many Javascripts or images in the sidebars.</span><br/><br/>This is because Javascripts and images call upon different servers and slow down page loading time. If you have many scripts or images loading in the left sidebar, this can delay the loading of your posts, which is off-putting for new visitors to your blog (especially those who access the Internet through dial-up!)</li>
<li><span style="font-weight:bold;">Three column templates with both sidebars aligned to the right are a good choice for blogs which feature a lot of different content in the sidebars.</span><br/><br/>This style helps neaten the content of sidebars, prevents lengthy loading delays of the blog entries (the primary content) and stops the sidebars from becoming too long in relation the main content on post pages.</li>
<li><span style="font-weight:bold;">Two column templates with a wide posts section and wide sidebar are most suitable for those who feature ads in the sidebar, or who need much content to be "above the fold" of the page.</span><br/><br/>Wider sidebars allow for wider ads, or rows of the popular 125x125 square ad boxes which can feature higher up the page. Also, it is easier to display wider images, or text blocks. A wider posts section will also allow more content to be featured above the fold, and can prevent home pages from becoming too lengthy.</li></ul></p><p>With this in mind, let's take a look at the different methods available for creating a template canvas.</p><h3>The best way to create a customized template...</h3><p><span style="font-weight:bold;"><span style="font-weight:bold;">Is to base this on an existing template!</span></span></p><p>Blogger templates contain a vast variety of tags and code, which is very difficult to reconstruct by hand. By basing your customized template on an existing template which already has tags and code in place, you will make the job much easier for yourself, and will save hours (if not days) of time troubleshooting a hand coded template.</p><p>The recent poll I offered concluded that the most familiar template to Blogger Buster readers is the Minima template, so for the purpose of this series, I will base all tutorials on modifications of this template. <span style="font-style:italic;">By the time this series is complete, the resulting "demonstration" template will not resemble Minima at all!</span></p><h4>Before we begin!</h4><p>I would strongly recommend that you use a test blog to create your customized template rather than interfere with your main blog. For more information about test blogs, <a href="http://www.bloggerbuster.com/2007/09/how-to-set-up-test-blog-and-why-you-may.html">take a look at this post</a>, or read through my guide to <a href="http://www.bloggerbuster.com/2008/01/essential-tools-for-blogger-template.html">essential tools for customizing Blogger templates</a>.</p><p>If you choose not to use a test blog, <span style="font-weight:bold;">you must back up your existing template before making any changes to it!</span></p><p>From this point forwards, I will assume that you are either using a test blog to create your new template, or that you have fully backed up your existing template.</p><h3>Making a wider template</h3><p>Over the years, the default Blogger templates have not changed much. Aside from the stretch designs (which are designed to accommodate the entire width of the browser window), most are rather narrow when compared to the size of most readers' browser screens.</p><p>So the first thing we will do to the Minima template is make it wider. The resulting width will then be large enough to include either two sidebars (instead of only one), or alternatively a wider posts column and a thicker sidebar.</p><h4>The optimum width of a blog template</h4><p>Most modern blog templates, whether hosted on Blogger, Wordpress or Typepad platforms, are between 800 and 950 pixels wide. This seems to be the optimum size range for blog templates, as this width can accommodate two sidebars or an expanded entries column.</p><p>I would recommend that you make your template no wider than 950 pixels. Even though this width may not fully span the width of your own browser window, you can be fairly certain that it will not run off the screen of smaller browsers.</p><p>In these tutorials, I will show you how to create a blog layout which is 950 pixels wide, though you can certainly make this a different value if you prefer.</p><h4>Alter the outer-wrapper</h4><p>The overall width of the Minima template is determined by the "outer-wrapper" div. This is styled within the <b:skin> section of the template as follows:
<blockquote>#outer-wrapper {<br/>
<span style="font-weight:bold; color: red;">width: 660px;</span><br/>
margin:0 auto;<br/>
padding:10px;<br/>
text-align:$startSide;<br/>
font: $bodyfont;<br/>
}</blockquote></p><p>To change the width of the template to 950 pixels, we simply need to change the line highlighted in red to this:
<blockquote><span style="font-weight:bold; color: red">width: 950px;</span></blockquote>
After this change, my demonstration blog now looks like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiqgeCtcwX6Lz4MyqPArnhB-o1I0SsSNNlJxR6ZWbPcih01ZCheNBK2s8Bh2OA6iUJAahzQPKcswKQCprPboq9MomN4e1vfXGwIqb1gbg3G3f0pYQ5b5p5_aA_2mtqTRgsBmpdXQjwMLo/s1600-h/ScreenHunter_02+Jan.+17+21.19.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiqgeCtcwX6Lz4MyqPArnhB-o1I0SsSNNlJxR6ZWbPcih01ZCheNBK2s8Bh2OA6iUJAahzQPKcswKQCprPboq9MomN4e1vfXGwIqb1gbg3G3f0pYQ5b5p5_aA_2mtqTRgsBmpdXQjwMLo/s320/ScreenHunter_02+Jan.+17+21.19.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5156558462567399618" /></a></p><p>As you can see, there is now a wide gap between the posts column and the sidebar. We can fill this gap by using one of these methods:
<ol><li><a name="#three">Creating a second sidebar</a></li>
<li><a href="#wide">Widening the main posts column and the sidebar</a></li></ol></p><p>Depending on your choice of blog layout, you will need to use one of the following methods for your custom template.</p><a name="#three"></a><h3>Creating a three column template (with a second sidebar)</h3><p>Although I have previously written a post about this method, I have decided to revamp my method here to add some extra functionality to the finished template.</p><p>In this tutorial, we will create the following dimensions in the layout:
<ul><li>Two sidebars, measuring 250px in width</li>
<li>The main posts column will be 450 px wide</li></ul></p><p>This ensures regularity of each element, and will make it easier to add margins and passing at a later stage.</p><h4>Change the width of the sidebar</h4><p>It is easier to change the width of the existing sidebar before we add another one. To do this, open your template (no need to expand the widget templates) and find this section of code in the <b:skin> section:
<blockquote>#sidebar-wrapper {<br/>
<span style="font-weight:bold; color: red;"> width: 220px;</span><br/>
float: $endSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote></p><p>Change the line highlighted in red to this:
<blockquote>width: 250px</blockquote></p><p>Your sidebar will now be slightly wider.</p><h4>Adding the style for the second sidebar</h4><p>Before we can call the secind sidebar in the blog template, we will need to add the styling for this sidebar, and make it unique.</p><p>Find and copy this whole section from your template (this is the section we modified in the previous step):
<blockquote>#sidebar-wrapper {<br/>
width: 250px;<br/>
float: $endSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote>
Once you have copied this to your clipboard, paste this section of code immedietly beneath the original set of code. Then change this line in your newly pasted code:
<blockquote>#sidebar-wrapper {</blockquote>
To say this instead:
<blockquote>#new-sidebar-wrapper {</blockquote></p><p>This is the identity of the div which contains the sidebar wrappers. Each div element which has an ID must be unique and should only be called once within the page. By adding the "new" part to the title of the style for the div, we can ensure the new sidebar will display properly.</p><p>If you want your second sidebar to fleat to the right of the main posts column, you can leave the styling as it is.</p><p>However, <span style="font-weight:bold;">if you prefer the sidebar to appear to the left of the main posts column</span>, you will need to change the following line:
<blockquote>float: $endSide;</blockquote>
To this instead:
<blockquote>float: $startSide;</blockquote></p><p>This will ensure that your new sidebar will float to the left.</p><h4>Calling the second sidebar in your blog template</h4><p>To call the secind sidebar, we need to add a section of code to the actual template section. The location for this code changes depending on whether you wish the second sidebar to be aligned to the left or the right of the main posts column.</p><p>There are two possible locations for this second sidebar. Assuming you have not added any extra widgets to your Minima template, you will be able to find the following section of code in your Blogger template (do not expand the widget templates):
<blockquote> <div id='crosscol-wrapper' style='text-align:center'><br/>
<b:section class='crosscol' id='crosscol' showaddelement='no'/><br/>
</div><br/>
<br/>
<span style="font-weight:bold; color: red;"><!-- Insert code here for left sidebar --></span><br/>
<div id='main-wrapper'><br/>
<b:section class='main' id='main' showaddelement='no'><br/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br/>
</b:section><br/>
</div><br/>
<br/>
<span style="font-weight:bold; color: red;"><!-- Insert code here for right aligned sidebar --></span><br/>
<div id='sidebar-wrapper'><br/>
<b:section class='sidebar' id='sidebar' preferred='yes'><br/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/><br/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/><br/>
</b:section><br/>
</div>
</blockquote>
I have included some comments here to show where to paste the following code, depending on your choice of alignment. When you have decided where you would like your second sidebar to appear, copy and paste the following section of code in the appropriate place:
<blockquote> <div id='new-sidebar-wrapper'><br/>
<b:section class='sidebar' id='new-sidebar' preferred='yes'/><br/>
</div></blockquote></p><p>You should save your new template at this point.</p><p>There is currently no content in this second sidebar, so if you preview your blog, nothing will be displayed in it's place. But if you go to Template>Page Elements in your Blogger dashboars, you will see a new "Add page element" section. Here you can add a new widget and take a look at your blog to see how it will be displayed.</p><p>In my demonstration blog, I added the new sidebar to appear to the right of the main column which now appears like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBoUxqSagS82D5PtGUsXJQNKEb6q5U6dT8JiJyAYL52JkfXZ18b7M1lQNHsgSs0fF7ZTXtUa0cihPuIGOCvaN9SDFmlYL9nnVA00ujVtxpWtkv0Jj7Pw_rQAQ4ZxsHL7P1W7vtZtlZQbg/s1600-h/ScreenHunter_03+Jan.+17+22.04.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBoUxqSagS82D5PtGUsXJQNKEb6q5U6dT8JiJyAYL52JkfXZ18b7M1lQNHsgSs0fF7ZTXtUa0cihPuIGOCvaN9SDFmlYL9nnVA00ujVtxpWtkv0Jj7Pw_rQAQ4ZxsHL7P1W7vtZtlZQbg/s320/ScreenHunter_03+Jan.+17+22.04.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5156569964489818322" /></a></p><h4>Change the width of the main posts column</h4><p>The final customization to this three column layout is changing the width of the main posts column slighly to make better use of the space available.</p><p>This is another simple edit. Simply find this section in the <b:skin< section of your template code:
<blockquote>#main-wrapper {<br/>
<span style="font-weight:bold; color: red;">width: 410px;</span><br/>
float: $startSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote>
Change the line highlighted in red to the following:
<blockquote><span style="font-weight:bold; color: red;">width: 450px;</span></blockquote>
Then save your template.</p><p>The finished result should look something like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIl7BnaIXISYiNmU3H4Z4px6_un9ek8LTdq2nV3Z5rk7S-RI4cbjwzRKh0w0hobUBsVSo-W4b_AZMjw4sKR2ye4Qs4vvGXTeheDlRhB5PwzlHpe4LwaYoPaGMVcm26tUnCwlewc7Ce_5o/s1600-h/ScreenHunter_05+Jan.+17+22.13.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIl7BnaIXISYiNmU3H4Z4px6_un9ek8LTdq2nV3Z5rk7S-RI4cbjwzRKh0w0hobUBsVSo-W4b_AZMjw4sKR2ye4Qs4vvGXTeheDlRhB5PwzlHpe4LwaYoPaGMVcm26tUnCwlewc7Ce_5o/s320/ScreenHunter_05+Jan.+17+22.13.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5156572348196667618" /></a></p><p>You will notice that there is no space between the sidebars or main posts column. To make space appear between each sections, we will need to use margins and/or padding in the style section, which I will demonstrate in the next chapter of the Blogger Template Design series.</p><a name="#wide"></a><h3>Creating a wide, two column template</h3><p>Creating a wider template with added space for the main posts column and sidebar is a much simpler process.</p><p>In this example, we will make the width of the posts column to 650px, and the width of the sidebar to 300px. You can change these values if you prefer, so long as the total of these two sections is 950px.</p>Assuming you have already changed the width of the "outer-wrapper" to 950px, you will now only need to make two small edits to the style section of your template.</p><h4>Change the width of the main posts column</h4><p>The width of the main posts column is defined in the following section of code:
<blockquote>#main-wrapper {<br/>
<span style="font-weight:bold; color: red;">width: 410px;</span><br/>
float: $startSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote>
Simply change the line highlighted in red to this:
<blockquote><span style="font-weight:bold; color: red;">width: 650px;</span></blockquote></p><h4>Change the width of the sidebar</h4><p>The width of the sidebar id defined in the following section of code:
<blockquote>#sidebar-wrapper {<br/>
<span style="font-weight:bold; color: red;">width: 220px;</span><br/>
float: $endSide;<br/>
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br/>
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br/>
}</blockquote>
Again, you only need to edit the line in red to say the following instead:
<blockquote><span style="font-weight:bold; color: red;">width: 300px;</span></blockquote></p><p>Finally, save your template and take a look at your newly widened blog. If you have used the same values as I did, your new template should appear like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnsWgzcvoQR34g48xVEH7MYtNoB3lGGbSBsf3LlnpCRlU8rth0Vt-hfXeruaPPq4Vw9wILw3EtPl_IpIk4Ou9443Wze9TrqMrTxRHUY3aFxedfLiz1CUc_sFOUchK4F0oXBWzScrIbnY/s1600-h/ScreenHunter_06+Jan.+17+22.38.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnsWgzcvoQR34g48xVEH7MYtNoB3lGGbSBsf3LlnpCRlU8rth0Vt-hfXeruaPPq4Vw9wILw3EtPl_IpIk4Ou9443Wze9TrqMrTxRHUY3aFxedfLiz1CUc_sFOUchK4F0oXBWzScrIbnY/s320/ScreenHunter_06+Jan.+17+22.38.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5156578696158331122" /></a></p><p>As with the three column layout, you will notice there is no space between the sidebars and the main posts column. We will work on optimizing this canvas in the next installment of the Blogger Template Design series.</p><h3>Final words</h3><p>For your convenience, I have made each of the template layouts described above available for download as an XML template. To download any of these files, right click on the link and choose "Save As..."
<ul><li><a href="http://bloggerbuster.com/templates/btds/three_column_left_stage1.xml">Three column canvas, sidebars to the left and right</a></li>
<li><a href="http://bloggerbuster.com/templates/btds/three_column_right_stage1.xml">Three column canvas, both sidebars to the right</a></li>
<li><a href="http://bloggerbuster.com/templates/btds/two_column_wide_stage1.xml">Wide, two column canvas</a></li></ul></p><p><h4>Progress of the demonstration blog</h4><p>For the demonstration blog which will accompany this series, I have chosen the three column design where the two sidebars are aligned to the right. You can view the progress of the Blogger Template Design Series blog <a href="http://blogger-template-design-series.blogspot.com/">using this link</a>.</p><h4>Coming soon</h4>In the next installment of this series, I will explain how you can further modify this basic canvas to suit your requirements. This will include modifications to the margins, padding and the header section, plus a few other elements of the blog's style.</p><p>Please consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing to the feed for updates</a> to the Blogger Template Design series, plus Blogger related news and articles as they are posted.</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-11087554352558252542008-01-14T20:27:00.000+00:002009-07-26T01:49:57.760+01:00Essential tools for Blogger template design (Blogger Template Design Series)<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQymNiuC6HMX9sWPdz71v6wlpgj6hyphenhyphenqEbDELzCw6MLo8AOIB_l68L4sReraNM8SkUUtNeadSpqAnAPbxeqw1aKJMCzRkBt-eFaOcCDHF4ClVr8WjFCAb4BiiQzIhk_oATjfTYc6DddpJ0/s1600-h/design_tools.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQymNiuC6HMX9sWPdz71v6wlpgj6hyphenhyphenqEbDELzCw6MLo8AOIB_l68L4sReraNM8SkUUtNeadSpqAnAPbxeqw1aKJMCzRkBt-eFaOcCDHF4ClVr8WjFCAb4BiiQzIhk_oATjfTYc6DddpJ0/s320/design_tools.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5155268589399130130" /></a>When designing Blogger templates, it's useful to have a set of "tools" available before you begin. So in this installment of the Blogger Template Design series, I have compiled a list of tools I use often when designing themes, from imaging programs to relevant websites and resources you may like to use when designing your own templates.</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>A test blog</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNzQuARFLSjFXI_GVAV5GHLyb61WcA7GKYraVSWy_7sSGW4fmf9VAJG13ggLm0t7xGla79VgwPN_Zj9CqRoWX7zcjCawIkpqWOje3zJhAnfsjHqH-GydcywTvTQHfxeiJn_DQtLCI6xYk/s1600-h/create.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNzQuARFLSjFXI_GVAV5GHLyb61WcA7GKYraVSWy_7sSGW4fmf9VAJG13ggLm0t7xGla79VgwPN_Zj9CqRoWX7zcjCawIkpqWOje3zJhAnfsjHqH-GydcywTvTQHfxeiJn_DQtLCI6xYk/s320/create.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5155338541531480098" /></a>When building a completely customized template, <span style="font-weight:bold;">I would strongly advise you to do this using a test blog</span>. This way, you can always ensure your regular blog is available, features no mistakes and is always presentable!</p><p>I always create and test new templates on a test blog, filled with dummy posts and sidebar widgets so I can easily see what needs to be changed, redesigned or altered without affecting my main blogs in any way.</p><p>I have written <a href="http://www.bloggerbuster.com/2007/09/how-to-set-up-test-blog-and-why-you-may.html">a full article about creating and using a test blog</a> which I would advise you to read before you begin to create a custom template. Then once your design is complete, you can move this over to your main blog seamlessly; your readers will barely be affected by the changeover, and your blog will always be available to read!</p><h3>An image manipulation program</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHMvetOszKbfrkDtn3Mo_qhG_ruY0G1bZRxO1JF-VbX1rzNaYSCvrCWB5mGtR1PAh0NqRs0fVCWN9jj9QXCrSdkd48_iZGgvBv35kgIpjRWXYfVM5ZlTOSNJyEKUtvzj7uA6OxHGFBqGE/s1600-h/photoshop.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHMvetOszKbfrkDtn3Mo_qhG_ruY0G1bZRxO1JF-VbX1rzNaYSCvrCWB5mGtR1PAh0NqRs0fVCWN9jj9QXCrSdkd48_iZGgvBv35kgIpjRWXYfVM5ZlTOSNJyEKUtvzj7uA6OxHGFBqGE/s320/photoshop.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5155339228726247474" /></a>This is one of the key tools used when designing Blogger templates. In almost all of the themes I've created, I have needed to use an imaging program to create some aspect of the design.</p><h4>Why you need this</h4><p>To design a custom header image, backgrounds or perhaps headings for your sidebar. Also handy for editing images in posts.</p><h4>Resources</h4><p>If you already have Photoshop, CorelDraw or a similar program installed on your computer, this should be perfect for your needs. MS Paint may be a little too basic for your future needs, so if this is all you currently have available, you may want to try one of these free downloads instead:
<ul><li><a href="http://www.gimp.org/"><span style="font-weight:bold;">GiMP</span></a> (the GNU Image Manipulation Program): This is often considered the free version of Photoshop! I have used this open source program extensively, it's excellent and highly recommended.</li>
<li><a href="http://inkscape.org/"><span style="font-weight:bold;">Inkscape</span></a>: a free vector graphics editor similar to Illustrator and CorelDraw.</li>
<li><span style="font-weight:bold;"><a href="http://www.imagemagick.org/">ImageMagick</a></span>: a software suite to create, edit, and compose bitmap images. Can read and write in a variety of formats.</li></ul></p><p>All of the programs mentioned above have a good support system online for tutorials and usage, so if you need to learn a particular aspect of using these programs, you can be assured of answers to your questions!</p><h3>A basic text editor</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUnzyVuNtGQ-p_lH_SXunuOc2OQP0PwwZyAaULBQwxq9YEgQH0hiEYG2XyzaUS7gR0OrZK9nQMm-TpYSlBAOzisQ-3MYe0vDqW3vPKf-YMwFx2wSk7439k9kJTDlAFglrIUGL-9N1xGmY/s1600-h/text_editor.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUnzyVuNtGQ-p_lH_SXunuOc2OQP0PwwZyAaULBQwxq9YEgQH0hiEYG2XyzaUS7gR0OrZK9nQMm-TpYSlBAOzisQ-3MYe0vDqW3vPKf-YMwFx2wSk7439k9kJTDlAFglrIUGL-9N1xGmY/s320/text_editor.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5155339881561276482" /></a>Although you can edit your Blogger template from within your dashboard, it can be very useful to have a basic text editor to hand too.</p><h4>Why you may need this</h4><p>To copy and paste elements of your template code; to save templates in text format; to write and edit JavaScript; to experiment with CSS.</p><h4>Resources</h4><p>I imagine the majority of you will already have a basic text editor such as Notepad already installed on your computer. This is perfectly suitable for creating and editing Blogger templates.</p><p>If you're looking for a more fully featured program, you may want to consider downloading Notepad ++ (as recommended by <a href="http://www.bloggerbuster.com/2007/10/what-are-your-essential-blogging-tools.html#comment-4658757612918419304">Thomas</a>) which is a more advanced text editor useful for general programming needs.</p><h3>Online file hosting</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhepse1rOirltHR8gyVURjwtCWp9MdXSIPTu_DZR5h_QoOuHGBQK9ICzY5wwcwpIzFENChCSsmXobAXxDKtQ42i-GqWslO0WRrZAXRYvT3A7LwoovY7IpgNbYQC1KHmIeuEDwaq8jUGJ6Q/s1600-h/file.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhepse1rOirltHR8gyVURjwtCWp9MdXSIPTu_DZR5h_QoOuHGBQK9ICzY5wwcwpIzFENChCSsmXobAXxDKtQ42i-GqWslO0WRrZAXRYvT3A7LwoovY7IpgNbYQC1KHmIeuEDwaq8jUGJ6Q/s320/file.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5155340676130226258" /></a>Blogger does not allow us to host background images or scripts in our accounts. Therefore you'll find it very useful to have a hosting account online for the images (and possibly JavaScripts) which you'll use in your custom template designs.</p><h4>Why you may need this</h4><p>If you want to use background images, use scripts in your template, or link to any external files.</p><h4>Resources</h4><p>If you already have some hosting available through your domain provider or other paid service, this will be more than suitable for your needs. You may also be able to use your Google Pages account for some files.</p><p>Here are some <span style="font-weight:bold;">free hosting services</span> you can use to host your images and files:
<ul><li><span style="font-weight:bold;"><a href="http://photobucket.com/">Photobucket</a></span>: for images only, but highly recommended</li>
<li><a href="http://www.hotlinkfiles.com/"><span style="font-weight:bold;">HotlinkFiles</span></a>: this free service can host almost any type of file, and comes with 8000mb of bandwidth.</li>
<li><a href="http://www.fileden.com/"><span style="font-weight:bold;">Fileden:</span></a> comes with 1gb of storage space! More than enough for use with Blogger templates.</li></ul></p><h3>More than one internet browser</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67H576l-Jnm0e4revIxHDAPtoAo5QQutN-nH_lu_5lsGoPIiz_JeTywrg__3LcHSepNbtmWMfwoCOo_Mi5tcdudVvu-1vdIUDm8HXM1IBtHNO1abkDEkavycO8YNXCz_D7f6-IN9miJ0/s1600-h/browser.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67H576l-Jnm0e4revIxHDAPtoAo5QQutN-nH_lu_5lsGoPIiz_JeTywrg__3LcHSepNbtmWMfwoCOo_Mi5tcdudVvu-1vdIUDm8HXM1IBtHNO1abkDEkavycO8YNXCz_D7f6-IN9miJ0/s320/browser.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5155341139986694242" /></a><span style="font-weight:bold;">Or <span style="font-style:italic;">at least</span> the ability to check your designs in other browsers!</span></p><h4>Why you need this</h4><p>Websites can look different when viewed through different browsers. Some aspects of web design are incompatible between Internet Explorer (particularly IE6 and below) and Mozilla based browsers (such as Firefox).</p><p>If you can install more than one browser, this would be highly useful to check for incompatibility issues.</p><p>I use both Internet Explorer and Firefox to ensure compatibility between these major browsers, and also check for other possible issues using BrowserShots.org.</p><h4>Resources</h4><p>I imagine that most of you will already have Internet Explorer or Safari preinstalled on your computer, so here are a couple of Mozilla based browsers you may like to consider downloading:
<ul><li><a href="http://www.mozilla.com/firefox/"><span style="font-weight:bold;">Firefox:</span></a> one of the most popular browsers available.</li>
<li><a href="http://www.flock.com/"><span style="font-weight:bold;">Flock</span></a>: similar to Firefox with an emphasis for social network users</li></ul></p><p>Another way to check for incompatibility issues is to use <a href="http://browsershots.org/"><span style="font-weight:bold;">BrowserShots.org</span></a>: this is a free service which provides screenshots of your web pages in different browsers. You may have to wait some time for the screenshots to be available, but this is such a good service that it's worth the time and effort!</p><h3>Copyright-free images, backgrounds and icons</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgB-rYOK8lXMrEczQCDEGEJYievg4kTV-J-mWvmYghUzbP87YJO7JUgYxVnTORJtJKQFReGYP91Iwr03Ku2GQuoDl_z2Q9N2y_WoutZzgg4HBskDuxA0Fshmp1vnQVMP1pjxkwAAB3JU/s1600-h/folder_images.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgB-rYOK8lXMrEczQCDEGEJYievg4kTV-J-mWvmYghUzbP87YJO7JUgYxVnTORJtJKQFReGYP91Iwr03Ku2GQuoDl_z2Q9N2y_WoutZzgg4HBskDuxA0Fshmp1vnQVMP1pjxkwAAB3JU/s320/folder_images.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5155341711217344626" /></a>If you're a whiz with the camera and graphic design software, you wouldn;t need to worry about this at all. For may of us though, it's useful to have resources available for copyright-free images and backgrounds!</p><h4>Why you may need these</h4><p>For creating a custom header, template backgrounds, header icons, fancy lists and other decorative aspects of your template.</p><h4>Resources</h4><p>Here are some of the best resources I have found (and use often!)for resourcing images, backgrounds and icons:
<ul><li><a href="http://www.sxc.hu"><span style="font-weight:bold;">Stock Exchange</span></a>: features thousands of professional, copyright-free photographs. You will need to register for this site, but it is well worth it!</li>
<li><a href="http://www.flickr.com/creativecommons/"><span style="font-weight:bold;">Flickr Creative Commons search</span></a>: find photographs and other images you can use according to their license. For a great overview of using Flickr images, <a href="http://www.skelliewag.org/a-complete-guide-to-finding-and-using-incredible-flickr-images-162.htm">have a read of Skellie's excellent article</a>.</li>
<li><a href="http://www.squidfingers.com/patterns/"><span style="font-weight:bold;">Squidfingers patterns</span></a>: over a hundred high quality tileable web backgrounds (my favorite resource for backgrounds).</li>
<li><a href="http://repeatxy.com/colors.php"><span style="font-weight:bold;">RepeatXY</span></a>: literally hundreds of backgrounds available, which you can filter by color.</li>
<li><a href="http://www.iconlet.com/">Iconlet</a>: a search engine for icons to use in your designs. Many sizes available, from 16x16px right up to 256x256px. A wonderful resource and certainly worth a bookmark!</li>
<li><span style="font-weight:bold;"><a href="http://www.smashingmagazine.com/2007/05/24/freebies-round-up-icons-buttons-and-templates/">Icons, buttons and templates</a> (Smashing Magazine Round Up)</span>: I often find myself referring to this excellent round up of web design tools. On this page you'll find a plethora of links to other resources, and some of the best icon sets available at this time.</li></ul></p><h3>Free fonts</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGTIDWiseDo8k2dLOHa1PIofn5kp5zBsyJx850_q0kCfRXGi5V0L_3CgKI_rnWhY-A5mHL7yx6Pi6XUjttWex67PiniKTpRQ4ijYpJWuOCSuxnGMhzuHXf4HE2TeZJuhOm1Lr56kcHHQ/s1600-h/fonts.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGTIDWiseDo8k2dLOHa1PIofn5kp5zBsyJx850_q0kCfRXGi5V0L_3CgKI_rnWhY-A5mHL7yx6Pi6XUjttWex67PiniKTpRQ4ijYpJWuOCSuxnGMhzuHXf4HE2TeZJuhOm1Lr56kcHHQ/s320/fonts.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5155342123534205058" /></a>While fonts are not exactly <span style="font-style:italic;">essential</span>, I do find that having a variety of fonts available can help me design better headers and logos for my templates, and think you may find these resources useful too.</p><h4>Why you may need these</h4><p>Most particularly for creating your own header images, though also useful for logos and sidebar headings.</p><h4>Resources</h4><p>Here is a selection of the sites I visit when looking for free fonts:
<ul><li><a href="http://www.dafont.com/"><span style="font-weight:bold;">DaFont.com</span></a>: probably the best free font resource I've discovered to date. You can search by type or keywords, and can also find commercial fonts if these are better suited to your needs.</li>
<li><a href="http://simplythebest.net/fonts/"><span style="font-weight:bold;">SimplyTheBest Fonts</span></a>: Another great resource for free and shareware True Type fonts.</li>
<li><a href="http://www.smashingmagazine.com/category/fonts/"><span style="font-weight:bold;">Smashing Magazine fonts category</span></a>: lists articles from the blog regarding free fonts and usage. You'll find loads of quality downloads here!</li></ul></p><h3>Final thoughts</h3><p>I hope you find this a useful resource for when creating your own Blogger templates. If you would like to add any other resources to those listed here, please leave a comment below or send me an email.</p><p>In the next few days, I will make both this article and <a href="http://www.bloggerbuster.com/2008/01/cheats-guide-to-customising-blogger.html">the Cheats' Guide to Customizing Blogger Templates</a> available as PDF downloads for easy accessibility.</p><h4>Coming soon...</h4><p>In the next installment of this series, I'll (finally!) get into the nitty-gritty of template design. The next post will focus on <span style="font-weight:bold;">creating a three column canvas</span> on which to base your new design. This will be slightly longer and more detailed than my previous "creating a three column template" article, as I will fully explain how to adjust margins, padding and alignment to suit your individual requirements.</p><p>Be sure to <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribe to the news feed</a> for updates on the Blogger Template Design series and other blogging news. And as always, please feel free to leave your comments and suggestions 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-84167965354222276142008-01-09T20:01:00.000+00:002009-07-26T01:49:57.761+01:00A cheats' guide to customising Blogger templates<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5OzooPTIDDwQq9ytLEpZbUOxdYb_gjfxRX6Q7VTAXiHlB7lTzdq0i5AYmXhJVhPZ2KTvZ-VNowLnQYgUa6YLeXJM548X3BU5DV5JAtiG0JcX8KHs3ayu1lVQX-JRzt0S8ePSqxVudldk/s1600-h/template.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5OzooPTIDDwQq9ytLEpZbUOxdYb_gjfxRX6Q7VTAXiHlB7lTzdq0i5AYmXhJVhPZ2KTvZ-VNowLnQYgUa6YLeXJM548X3BU5DV5JAtiG0JcX8KHs3ayu1lVQX-JRzt0S8ePSqxVudldk/s320/template.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5153402000907255538" /></a>I'll be honest with you: designing a <span style="font-style:italic;">complete</span> blog template is not an easy task. It certainly isn't a quick one!</p><p>Throughout the whole Blogger Template Design series, I will take you step by step through the entire process I use when designing a Blogger template, from the initial plans and considerations right through to the final tweaks which will make the template your own.</p><p>Altogether, I imagine this series will become quite long, so as a taster of what is to come, I'm offering you <span style="font-weight:bold;">A Cheats' Guide to Customizing Blogger templates</span>: a few quick tips which can help you transform your blog from this:<br/><br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMFHsx7wFYqd48OfbafAHVxLZHCfwZrUV2eAttsbCc-l6vOjko65-DfYyTpY6UK16_DnBpalxrLbCnY95i1m52sXRxCnf6VqM_Ns97VUF6twTxgV7aLyqb7eDvFnztyDtlfIqFrXXmco/s1600-h/ScreenHunter_07+Jan.+09+11.17.gif"><img style="float:left; width: 200px; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMFHsx7wFYqd48OfbafAHVxLZHCfwZrUV2eAttsbCc-l6vOjko65-DfYyTpY6UK16_DnBpalxrLbCnY95i1m52sXRxCnf6VqM_Ns97VUF6twTxgV7aLyqb7eDvFnztyDtlfIqFrXXmco/s320/ScreenHunter_07+Jan.+09+11.17.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153489510865911762" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimGC000OuSKgvdFMyDhZCR2gxACjnFS-c2ApFMIf4eyAYKYyubwFrmcP5v4AawFTmu1o5BiGB8ihbH8BmMyyd50WUWppjUCPk6VrAUCoz1m9ya1Mw9GRiqYFvijala0n2b4BBgYkQM2zw/s1600-h/ScreenHunter_13+Jan.+09+14.19.gif"><img style="float:right; width: 200px; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimGC000OuSKgvdFMyDhZCR2gxACjnFS-c2ApFMIf4eyAYKYyubwFrmcP5v4AawFTmu1o5BiGB8ihbH8BmMyyd50WUWppjUCPk6VrAUCoz1m9ya1Mw9GRiqYFvijala0n2b4BBgYkQM2zw/s320/ScreenHunter_13+Jan.+09+14.19.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153489940362641378" /></a>to this...</p><div style="clear: both;"></div><p> in <span style="font-style:italic;">as little as an hour!</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>
<p>For this example, I'm going to use the default Minima template provided by Blogger. However, the examples used here could easily apply to any blog template.</p><p>In total, we are going to make three major changes to the overall appearance of the blog:
<ol><li>A new header image</li>
<li>A new background pattern</li>
<li>A plain colored background to the main content of the blog</li></ol>
I'm sure you'll agree from comparing the before and after screenshots that these changes make the template seem vastly different to the default one!</p><p>None of these changes are particularly technical (I'll cover such aspects in later installments of this series). Instead these techniques will be easy to learn and use, even for absolute beginners!</p><h3>Before you begin!</h3><p><span style="font-weight:bold;">Be sure to make a complete backup of your existing blog template</span>, just in case you make a mistake or would prefer to revert back to this at a later time.</p><p>To do this, go to Template>Edit HTML and click on the "Download Full Template" link near the top of the page. Save the XML file to your computer, and ensure you are able to access this later.</p><h3>Making a new header for your blog</h3><p>In my opinion, one of the simplest and best customizations you could make for your blog is to customize your header. In this part, I will offer you a quick and easy way to make your own clickable header image.</p><p><h4>Finding the width of the header</h4><p>Before creating a header image, we need to know the width of the header section in the existing Blogger template. This prevents the header image from being clipped or malformed when it appears in the completed design.</p><p>To find the width the header image should be, go to Layout>Edit HTML in your Blogger dashboard, and look for the following line:
<blockquote>#header-wrapper {</blockquote>
Just below this line, you should see the CSS statement for the overall width of the header. In the default Minima template, this appears as follows:
<blockquote>#header-wrapper {<br/>
<span style="font-weight:bold; color: red;">width:660px;</span><br/>
margin:0 auto 10px;<br/>
border:1px solid $bordercolor;<br/>
}</blockquote>
From this information, I know I need to make my header image 660 pixels wide. This may differ for your own template, so be sure to check the width of the header wrapper in your template code to be sure you have the correct width.</p><p>The height of your completed header image does not matter. You can make this as tall or as short as you like, though I would advise that header images taller than 300px prevent any blog content being seen beneath it in some internet browsers.</p><h4>Making your header image</h4><p>Those of you who are experienced with image creation and editing may now be racing off to create their very own unique header image using their header dimensions. For those of you who are not so familiar with CorelDraw or Photoshop, an alternative would be to use a free header banner and adapt this to your needs.</p><p>In the example above, I downloaded a <a href="http://www.bittbox.com/freebies/free-vector-glass-header-designs-fancy/">free vector header from BitBox</a> and resized this to 660px wide using <a href="http://www.gimp.org/">GiMP</a> (a free image program sililar to Photoshop, but without the price tag!). Here is the resulting image (click on the image for a full sized view).</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QG1wio7L-rSNkTO2HA5hdtBwECAAoZugoun2aJzXSxrmKg5x8gDO3pjixLUXQ9SP0k_cXpEXdjklFcpuGSmbwjrX0128NSXeETTTEI0z4qIguqHO5KYfeNgz-AtKLzhuSEWjDWqZloM/s1600-h/brown_floral_header.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QG1wio7L-rSNkTO2HA5hdtBwECAAoZugoun2aJzXSxrmKg5x8gDO3pjixLUXQ9SP0k_cXpEXdjklFcpuGSmbwjrX0128NSXeETTTEI0z4qIguqHO5KYfeNgz-AtKLzhuSEWjDWqZloM/s400/brown_floral_header.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153445311357468434" /></a></p><p>For this "cheats' guide", I would advise you to add your blog's title or logo into your header image. This is because there may be problems when using your image as a background behind the title and description (I will explain this fully in a later post).</p><p>Again using GiMP, I added some test to my header image, and here is the finished result, saved in GIF format:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KJ0sXvKszakcfg9XUHUxOJyt2N-BkTerFfACNpBuW84lXWYrD2WZaATzJJdbXSD0fpzGtsINuor-O4vnullHn2-cLarSH1f7GzvSqdvKX1IpFgyEa0kTa83Tci7X5dmZLv-oN5cpdLE/s1600-h/brown_floral_header_2.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KJ0sXvKszakcfg9XUHUxOJyt2N-BkTerFfACNpBuW84lXWYrD2WZaATzJJdbXSD0fpzGtsINuor-O4vnullHn2-cLarSH1f7GzvSqdvKX1IpFgyEa0kTa83Tci7X5dmZLv-oN5cpdLE/s400/brown_floral_header_2.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153448055841570594" /></a></p><h4>Adding your header image to your blog</h4><p>This quick method of creating a blog header is the simplest one of all. Just go to Template>Page Elements in your Blogger dashboard, and click on the Header widget near the top of the page:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGCcbld3gUXEMYMWubBjhh-UH1Vym1ybKdfg3W5nkjJgID4lhG2Ac8CRtYfjfUzKS-6ccm0Yje0XNeWil9RwO022fGOu8Oa_a4uJrTCtwXceXG0RqJP6xbYxhmDkf5P99b64UWt1h-6kY/s1600-h/ScreenHunter_08+Jan.+09+12.14.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGCcbld3gUXEMYMWubBjhh-UH1Vym1ybKdfg3W5nkjJgID4lhG2Ac8CRtYfjfUzKS-6ccm0Yje0XNeWil9RwO022fGOu8Oa_a4uJrTCtwXceXG0RqJP6xbYxhmDkf5P99b64UWt1h-6kY/s400/ScreenHunter_08+Jan.+09+12.14.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153449318561955634" /></a></p><p>On the popup screen, you will see options for using your own header image. Select the radio button to upload an image from your computer and locate this using the "browse" button. Then check the radio selection which says "Use instead of title and description. Finally save your settings.</p><p>Using this method, your image will be hosted by Blogger, and will appear instead of your regular title and description, like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRJscPdM9o5EHdB70Cif7uwcN0K9JyYlS9pX-FPhJJV3y3nm3HJAL_SCiLguvnjfMiLtroufiBM1BxwtrDB23iu2-VqvYeK21JujE28D6obRs0qKrPYCAHabbNRpZ0R1zXT9D-2FB94g/s1600-h/ScreenHunter_09+Jan.+09+12.47.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRJscPdM9o5EHdB70Cif7uwcN0K9JyYlS9pX-FPhJJV3y3nm3HJAL_SCiLguvnjfMiLtroufiBM1BxwtrDB23iu2-VqvYeK21JujE28D6obRs0qKrPYCAHabbNRpZ0R1zXT9D-2FB94g/s400/ScreenHunter_09+Jan.+09+12.47.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153457685158248290" /></a></p><p><span style="font-weight:bold;">Note:</span> in the Minima Template there is a glitch in the CSS which can make the header appear slightly misaligned. This is easily solved by changing the margin of the #header statement from this:
<blockquote>#header { <br/>
<span style="font-weight:bold; color: red;">margin: 5px;</span><br/>
border: 1px solid $bordercolor;<br/>
text-align: center;<br/>
color:$pagetitlecolor;<br/>
}</blockquote>
To this
<blockquote>#header { <br/>
<span style="font-weight:bold;color: red;">margin: 0;</span><br/>
border: 1px solid $bordercolor;<br/>
text-align: center;<br/>
color:$pagetitlecolor;<br/>
}</blockquote></p><p>By now, you should have your brand new header image in place of your default textual header. This was probably the trickiest part of "The Cheats' Guide", so now we'll get on with something a little easier to achieve.</p><h3>Using a background image</h3><p>For my demonstration template, I decided to use a tiled floral background image which blends well with the colors in the header. There is a wonderful selection of free tileable background images available for download at <a href="http://www.squidfingers.com/patterns/">SquidFingers</a> (in fact, this selection is among the best I've ever seen!), though a Google search for tileable background images will bring you some alternative downloads to try.</p><h4>Choose your background image</h4><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2QuKkA7Ao_hSzfYcZhSxJ2HGg7MfPh5TBTIVlLbd_PNFCbR30SJJsZW76KRyiCQtLCeJkfRcNk4TAe7kUHHEfQW-CQJiRkWbhQ95EStSRqRPxUIUr5TUPZE0W5DUBWXkK9trhvBsS5A/s1600-h/pattern_140.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2QuKkA7Ao_hSzfYcZhSxJ2HGg7MfPh5TBTIVlLbd_PNFCbR30SJJsZW76KRyiCQtLCeJkfRcNk4TAe7kUHHEfQW-CQJiRkWbhQ95EStSRqRPxUIUr5TUPZE0W5DUBWXkK9trhvBsS5A/s320/pattern_140.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153460730290061170" /></a>The first step to using a background image for your blog is to find one which you like. I chose this pattern from Squidfingers, though you could choose any image you prefer. You will need to save the background image to your computer as we will be using this very soon.</p><h4>Upload your image to the web</h4><p>In order to use a background image for your blog, you will need to upload this somewhere online. One method is to upload this to Photobucket, or a similar free image hosting service. But here is a trick to help you host your images with Blogger for free!</p><p>Simply create a new post and upload your image as normal. But don't publish the post, just save this as a draft which you can delete later.</p><p>Now preview your draft post. You should see your image displayed in the preview page. Right click this image and view the properties. From here, you should be able to extract the URL of where this image is hosted. Copy this URL to your clipboard or Notepad so you can use this to reference your background image in the template's HTML code.</p><p>Now you can safely delete this draft. Choose NOT to delete the image when prompted, otherwise you will be unable to use this URL for referencing your background image.</p><p>Alternatively if you choose to upload your background image to Photobucket (or similar hosting service), ensure you have copied the URL of your image.</p><h4>Adding the background to your template code</h4><p>We will now need to edit a small part of your template's HTML code to add this image to the background. So go to Template>Edit HTML in your blogger dashboard, and look for the following lines:
<blockquote>body {<br/>
background:$bgcolor;</blockquote>
We need to add the URL of your background image to the "background" statement using the following format:
<blockquote>url(the_url_of_your_image)</blockquote>
In my demonstration template, the additional code appears like this:
<blockquote>body {
background:$bgcolor <span style="font-weight:bold; color: red;">url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCLWH1Z7bb4ji8jhz-dkq4mekwEXmg-7VpkP9chOrKjJBppC9_VI8rgPJ0EyY37ASPRlx1peksfREPTo7XkIWL2ELQ5LTzyMupgzWRepHpMvTj-eDx8cOf8GVGiTNfnoZKj6M3BJGM70/s1600-h/pattern_140.gif)</span>;</blockquote>
Of course your own URL will be different. Just be sure to follow the same format, and ensure that the semi-colon (;) appears at the end of the statement.</p><p>Now preview your blog to see the changes. It may look something like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVd0YMCDneyKROlBBqT_If1QtinW6FhOizXxpHze7jv5KwYa_JtJE0uov1ktQuhCOcdxmPUT2NNFQ1CatF9YgWMn9f2GBl_NQnMjxJMJsjvZ4rnJwnbUTlk5YG0K47Lho7K-JmgsYBfGM/s1600-h/ScreenHunter_10+Jan.+09+13.21.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVd0YMCDneyKROlBBqT_If1QtinW6FhOizXxpHze7jv5KwYa_JtJE0uov1ktQuhCOcdxmPUT2NNFQ1CatF9YgWMn9f2GBl_NQnMjxJMJsjvZ4rnJwnbUTlk5YG0K47Lho7K-JmgsYBfGM/s400/ScreenHunter_10+Jan.+09+13.21.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153466794783883154" /></a></p><p>If you are happy with the background, you can then save your template for us to go on to the next step. However, if you prefer not to use this, you can simply click the "clear edits" button and start over again.</p><p>Now in my demonstration template, you will notice that the text is barely visible against the patterned background. This leads me to the final customization of this tutorial: changing the background color of the main blog content.</p><h3>Adding a background color to the main section of the blog</h3><p>One of the best ways to draw attention to the content of your blog is to place this against a flat, contrasting color. This draws the eyes to the 'meat and potatoes of your blog': your blog posts. So in addition to the background image, we need to place the main content of the blog against a complementary color which will make it easier to read.</p><p>We don't need to use any images at all for this, and compared to the previous two customizations this is a <span style="font-style:italic;">minor tweak</span>.</p><p>To add this colored backdrop for your blog content, simply locate this line in your template's HTML code:
<blockquote>#outer-wrapper {</blockquote>
In some templates, this may be "#outer-wrap" instead.
Directly below this line, add the following line of code:
<blockquote>background: #ffffff;</blockquote>
This line adds a white background to the main content of your blog (both the blog posts and the sidebar). You can easily use a different color if you prefer by changing the hex value for white (#ffffff) to a different hex value instead. An easy way to find the correct hex value for your chosen color is to use <a href="http://tools.bloggerbuster.com/colors">the web color calculator in the Tools section of this site</a>.</p><p>In my demonstration template, I opted to use a light blue background (#E3F2FB) to complement the background image. Here is how the whole section of code appears in my template code:
<blockquote>#outer-wrapper {<br/>
<span style="font-weight:bold; color: red;"> background: #E3F2FB;</span><br/>
width: 660px;<br/>
margin:0 auto;<br/>
padding:10px;<br/>
text-align:$startSide;<br/>
font: $bodyfont;<br/>
}</blockquote></p><p>To make the foreground stand out even more from the background image, I also added a border to the left and right hand sides of the outer wrapper, which can be achieved by adding the line in red to the outer-wrapper style statement:
<blockquote>#outer-wrapper {<br/>
background: #E3F2FB;<br/>
<span style="font-weight:bold; color: red;">border-left: 2px solid #cccccc;<br/>
border-right: 2px solid #cccccc; </span><br/>
width: 660px;<br/>
margin:0 auto;<br/>
padding:10px;<br/>
text-align:$startSide;<br/>
font: $bodyfont;<br/>
}</blockquote></p><p>And here is the finished result:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcEYFRc5fDJmf4FJj1QIFP8MADy1efvmFwSFWQELhLp6rdKQ65cbNysHOgkeuE65xHvFiEZ8Iqj8dFKjW2et4_0Fyjo8fAZbLkC2kxX0TTPcDMOROIBGT4jc0Xmo1tp69uME3ts8BHB8/s1600-h/ScreenHunter_12+Jan.+09+14.07.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcEYFRc5fDJmf4FJj1QIFP8MADy1efvmFwSFWQELhLp6rdKQ65cbNysHOgkeuE65xHvFiEZ8Iqj8dFKjW2et4_0Fyjo8fAZbLkC2kxX0TTPcDMOROIBGT4jc0Xmo1tp69uME3ts8BHB8/s400/ScreenHunter_12+Jan.+09+14.07.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153479409102831538" /></a></p><h3>Final adjustments...</h3><p>Once these main customizations are complete, you may wish to change some of your fonts and colors to better match your new design. I changed the post title colors, the link colors and the fonts to end up with my final design:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyBDIzSsZ88rsrpYvsZlSJaXZ6Qi3sUOE0Kp1N4CIUG9hg-x8wW_DFkgqp1LAPU0B-Q3amNO6Exf5IJapYz9crGkGmf_o1ROlbGsuCwqlga2L0Qyg-9RDfL-XbXusEgNamUhRuW0dAkaM/s1600-h/ScreenHunter_13+Jan.+09+14.19.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyBDIzSsZ88rsrpYvsZlSJaXZ6Qi3sUOE0Kp1N4CIUG9hg-x8wW_DFkgqp1LAPU0B-Q3amNO6Exf5IJapYz9crGkGmf_o1ROlbGsuCwqlga2L0Qyg-9RDfL-XbXusEgNamUhRuW0dAkaM/s320/ScreenHunter_13+Jan.+09+14.19.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5153481921658699714" /></a></p><p>These simple customizations can easily make a default template into something unique to you!</p><p>These three customizations are <span style="font-weight:bold;">the most noticeable and easily achieved customizations you can make</span>.</p><p>You may also be interested to read some of my earlier tutorials which can help you add to these basic customizations and begin to edit your template even more:
<ul><li><a href="http://www.bloggerbuster.com/2007/10/how-to-add-three-columns-to-your-footer.html">Add three columns to your footer section</a></li>
<li><a href="http://www.bloggerbuster.com/2007/10/create-navigation-buttons-for-your-blog.html">Create navigation buttons</a></li>
<li><a href="http://www.bloggerbuster.com/2007/06/how-to-create-custom-header-in-blogger.html">More ways to customize your header</a></li>
<li><a href="http://www.bloggerbuster.com/2007/10/how-to-use-background-image-for-your.html">More ways to use background images</a></li></ul></p><h3>Coming soon...</h3><p>In the forthcoming posts in the <a href="http://www.bloggerbuster.com/2008/01/why-your-blog-design-needs-to-be-unique.html">Blogger Template Design series</a>, I will expand on these <span style="font-style:italic;">basic</span> customizations and guide you through the more <span style="font-style:italic;">advanced</span> techniques of template design. Each post will fully explain one particular technique, building up to a complete step-by-step guide.</p><p>The next post of this series will explain the <span style="font-style:italic;">preparations and tools</span> required for creating your own <span style="font-weight:bold;">complete</span> and unique Blogger template.</p><p>To ensure you are updated about the new posts in this series (plus other Blogger news), <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">be sure to subscribe to the blog feed</a>.</p><p>As always, I appreciate your comments and opinions about my posts. And if you have used this Cheats' Guide to create a more personal template of your own, please do leave a link to your blog so we can take a look at the final results!</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-86721987038482664032008-01-04T14:14:00.000+00:002009-07-26T01:49:57.761+01:00Why your blog design needs to be unique! (Blogger Template Series)<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_PD3H_W3Uujic1UF7BA47n2o264V_q6xzhYsPToCvffXdFroSG947jRCKvk8AxOHVkz4_Yh8GUTGteeFndnooGAfraUCsiRL6g4kII2LetyU8zFqJYG4_yHKdACuch5j80Iy8zsUuJpI/s1600-h/standing_out.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_PD3H_W3Uujic1UF7BA47n2o264V_q6xzhYsPToCvffXdFroSG947jRCKvk8AxOHVkz4_Yh8GUTGteeFndnooGAfraUCsiRL6g4kII2LetyU8zFqJYG4_yHKdACuch5j80Iy8zsUuJpI/s320/standing_out.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5151632461496401506" /></a>As many of you will know, I've decided to post a complete series about Blogger Template Design, taking you through the process step by step in order to create a reference for the creation of your own Blogger templates. To kick start this series, I wanted to discuss some of the reasons why you may want to create your <span style="font-style:italic;">own</span> blog design, in essence to make it <span style="font-style:italic;"><span style="font-weight:bold;">unique</span></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>Blogger's Generic Templates</h3><p>Currently Blogger offers it's users 16 generic templates, many of which have different color schemes or options. These default templates do have their advantages:
<ul><li><span style="font-weight:bold;">They are very easy to use</span>. When choosing a new template, you simply check the radio button below your chosen design and click "Save Template". No need to upload a new template, or copy and paste the code!</li>
<li><span style="font-weight:bold;">Your widgets will all be saved if you decide to change templates</span>. One of the disadvantages of using customized templates, such as those I offer in the Templates section is that non-standard templates cannot be configured to host existing widgets unless the respective code is already present in the new template (though there are ways of getting around this problem).</li>
<li><span style="font-weight:bold;">All images contained in Blogger's generic templates are hosted for you</span>, so you don;t have to worry about hosting them yourself.</li></ul></p><p>Unfortunately, these default templates have one big disadvantage: there are thousands of bloggers using exactly the same templates all over the world.</p><h4>Default templates are not really unique.</h4><p>For example, a blogger in Utah may write about her experiences as a dental nurse while using the default Snapshot template; a gentleman in Baghdad may write his memoirs, again using Snapshot for a base; an up and coming finance company in Berlin may be blogging company news for potential customers and shareholders... But if, on first impressions, their templates are the same, what is there to easily distinguish between them?</p><p>Of course, their sidebar widgets, blog title and post content would be vastly different, but from experience I understand that web-surfers are impatient. First impressions really do count, and if a visitor has seem dozens of other blogs with the same design, they are unlikely to take much notice of yet another of the same theme, regardless of the value of its content.</p><h3>First impressions count!</h3><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs866bal7sSyYeIEy1F2c5nMDaub88iuLNGmi1gIDkBJN55bEpbspL2VxCjRPrrevCT-8uzx4ZyQwV24Mi7M6MuCKAUPIq_zSgmVa_MQWl5UUYU5M6YxF9ZM8nyTuRsZnCaBrPeSHdZug/s1600-h/first_impressions.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs866bal7sSyYeIEy1F2c5nMDaub88iuLNGmi1gIDkBJN55bEpbspL2VxCjRPrrevCT-8uzx4ZyQwV24Mi7M6MuCKAUPIq_zSgmVa_MQWl5UUYU5M6YxF9ZM8nyTuRsZnCaBrPeSHdZug/s320/first_impressions.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5151647962033372786" /></a>It's an old saying, but this is very true of blogs and web content in general. As I mentioned earlier, visitors can be very impatient, and the first few seconds they experience when landing on your page are crucial in determining whether or not they will stay to read it.</p><p>For many blogs, new visitors will find you through a search engine. In such an environment, there are many other links they could choose from, and perhaps they have already visited many other sites while searching for the piece of information they need. <span style="font-weight:bold;">Your blog needs to stand out from the rest</span> if you want this visitor to stay and read what you have to offer. Even if your page doesn't contain the information they are looking for, a unique and interesting design provides just as good an invitation to stay!</p><h3>Brand your blog!</h3><p>Don't be fooled into thinking only products and companies have a brand to offer the world! Just as you are an individual, so is your blog. The clothes you wear are those you have chosen, and probably make a statement about the kind of person you are. The same principal can also apply to your blog.</p><p>To illustrate this, I want to offer you two examples of Blogger blogs. One of these uses no branding at all, while the other provides an excellent example:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://belledejour-uk.blogspot.com/"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_SGq-k15nD4f9tHhTmTMeWo1xJYFh9GX30Ns2cP1dRk4hYt77Ig3Y4jeodb-FY9FF_FX35Oj0jL8ycs8GJ9G_96oDfZISuAUJXBL9n4pjKuOWZOVdodkeU5HoSC_t0dn-FEGHWwwXfI/s320/belledejour.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5151670540676447874" /></a>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://flairinthecity.blogspot.com/"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWPGDFUSBlm1ZRDj7uafd3hcyadaum4F81NLV-a3xHgDcx_OF7ChqpauvoAkpzIpjX9y_e50xyAyTZ-ir-uVzqSbqs8D8eblR9MgeQLcbhjQmwsp4FTbXwm7ps5MjscBM4Dp2CZG6yKI/s320/flairinthecity.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5151670678115401362" /></a></p><p>Let's look at the first example. Without knowing anything in advance about this blog (which I understand many of you already will), would you have much of an impression of what this blog talks about? Can you tell at first glance that this is one of the most popular Blogger powered blogs in history, that it spawned a series of popular books and even inspired a TV series here in the UK?</p><p>While <a href="http://belledejour-uk.blogspot.com/">Belle De Jour</a> does serve as an example of how popular a blog can become, it doesn't so much in terms of branding to offer the casual onlooker a taste of what it has to offer. In fact, when I first visited this blog, I thought I had got the wring URL!<M/p><p>Now let's take a look at our second example: <a href="http://flairinthecity.blogspot.com">Flair in the City</a>. You would be forgiven for believing this is not a Blogger powered blog at all. By providing a striking header related to the theme of fashion and shopping, Flair instantly tells us what her blog is all about. The consistent color scheme and style of logos throughout the blog reinforce Flair's "brand": a playful and feminine theme used both to reflect her personality and attract her target audience. Flair in the City is not a commercial blog, though the effort put into the theme would certainly convince us of it's authority in its niche!</p><p>Taking both of these examples into consideration, which method do you think better serves the purpose of ensuring readers want to read your blog, subscribe to your feed and return regularly to see what new posts you have to offer? To <span style="font-weight:bold;">brand your blog effectively</span>, you wouldn't need to customize to the same extent as Flair's complete design, but you can take some inspiration from it.</p><h3>Customize your template <span style="font-style:italic;">because you want to!</span></h3><p>The most important reason you should make your template unique is <span style="font-weight:bold;">because you want to!</span> It may surprise you to know that for a few years, I blogged using generic templates which I barely customized at all. When I finally began to look into the possibilities of template design, it was because I wanted to learn more about it, not because of any criticism of my original blog design.</p><p>Most of what I know about blog and web design was learned through my experiments with blog templates. For me, this has been a great learning process, and I would certainly recommend this route for anyone who wants to learn the basics of web design. <span style="font-weight:bold;">One of the most rewarding things you could do with your blog is to learn how to customize your design.</span></p><h3>In the next installment...</h3><p>Creating a completely customized Blogger template is no mean feat. In fact, it took several weeks of hard work and experimentation to create the design you see in place on Blogger Buster today!</p><p>So rather than throw you all in at the deep end, the next installment in this series will be <span style="font-weight:bold;">A Cheats' Guide to Blogger Template Design</span>. In this post, I will tell you offer you some quick tips and tricks to make your existing template more unique in less than an hour of your time.</p><p>Once you've seen what can be achieved with a few quick tweaks, I'm sure you'll feel more confident in creating a whole new template for your blog! In the meantime, why not take a look at some of my earlier <a href="http://www.bloggerbuster.com/search/label/Template%20Mods">posts about template design</a> as I will be drawing on many of these in the forthcoming step-by-step guide.</p><p>Be sure to <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribe to the feed</a> to keep up to date with the latest posts in this series. And as always, I love to read your thoughts and opinions, so please feel free to leave your comments 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-50380506631098329962007-12-11T16:58:00.001+00:002008-02-26T13:11:29.939+00:00Using OpenId to leave comments on Blogger blogs<p>As you may have read in my previous post, Blogger's new commenting system makes it very difficult for readers to leave a link to their blog's URL in their comments. But <a href="http://www.instabloke.com/2007/12/openid-blogger-and-me.html">thanks to Blog Bloke</a>, I have been discovered how to use OpenId to leave comments with a link to my blog URL on Blogger Blogs. This also means that the <a href="http://www.bloggerbuster.com/2007/11/how-to-add-comment-avatars-to-see-your.html">MyBlogLog comment avatars</a> will still work if you leave a comment in a blog which has enabled these avatars to display (here at Blogger Buster for example). The process is relatively simple, though I admit we do have to take more steps to achieve something which previously took only seconds! Read on for instructions to install and use this new system on your own Blogger blogs.</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>The new commenting system (or should I say, "systems"..?)</h3><p>Most Blogger blogs now will only allow you to leave a comment using three persona's:
<ul><li>Using your Google/Blogger account (thus creating a link to your Blogger profile page)</li>
<li>Anonymously (therefore your comment will be posted by "Anonymous")</li>
<li>Using a nickname (no link here either!)</li></ul>
Yesterday I mentioned that some Blogger blogs allow you to sign in using an Open ID/Wordpress/Typepad account. This is only enabled when you publish using Blogger in draft. So, if you would like your readers to be able to leave a backlink on your blog, you must publish your blog using Blogger in Draft, by visiting http://draft.blogger.com in your browser instead of the regular www.blogger.com page. The you will need to change the comment settings in your dashboard, allowing "anyone" to make a comment (go to Settings>Comments in your Blogger in Draft dashboard to do this).</p><p>This will allow anyone to leave a comment in your blog so that their name will become a hyperlink to their OpenId/profile page, wether or not they have a Google/Blogger account. So long as they choose the correct option to log in.</p>
<h3>How to use the OpenID system</h3><p>If you would prefer to login with an OpenId instead of your Google/Blogger account, you will need to create an OpenID account. There are a few different methods you could choose for this, including <a href="http://claimid.com/">ClaimID</a> which Angel kindly pointed out in her comment. I have chosen to use MyOpenID as (at present) this is the only system I know of which will allow you to create a link back to your own blog when leaving a comment using Blogger's <strike>awful</strike> new system. You can create your free MyOpenId account here. This is the first step to enable backlinks in your comments...</p><h3>Make your Blogger comments link back to your blog</h3><p>Assuming you have set-up and verified your MyOpenId account, you may now prefer to leave comments where your name will link back to your blog instead of your MyOpenId profile page. For this you will need to verify that you are the owner of your blog by adding some code to the head section of your blog's template.</p><p>To do this, go to Template>Edit HTML in your blogger dashboard (this doesn't need to be the Blogger in Draft version though), and locate the closing </head> tag in your template code. Just before this line, add the following section of code, ensuring that you substitute all instances of "http://youraccount.myopenid.com" with the correct URL for your own MyOpenId account (eg: http://JoeBloggs.myopenid.com):
<blockquote><link rel="openid.server"
href="http://www.myopenid.com/server" /><br/>
<link rel="openid.delegate"
href="http://youraccount.myopenid.com/" /><br/>
<link rel="openid2.local_id"
href="http://youraccount.myopenid.com" /><br/>
<link rel="openid2.provider"
href="http://www.myopenid.com/server" /><br/>
<meta http-equiv="X-XRDS-Location"
content="http://www.myopenid.com/xrds?username=youraccount.myopenid.com" /><br/></blockquote>
(This method was taken from the <a href="https://www.myopenid.com/help#own_domain">help section of the MyOpenId site</a>)</p><p>Then whenever you have the option to use your OpenID to leave comments, you should enter the URL of your blog instead of your OpenID URL. This will then substitute your OpenId profile link with that of your blog's URL instead. Also, if you are a MyBlogLog member, your avatar will display in commenting systems where MyBlogLog comment avatars have been enabled. Take a look at my test comments below to see how this works.</p><h3>So many steps for such a simple task...</h3><p>Although I am glad that I can still create a link back to my blog when leaving comments, and also make use of the MyBlogLog commenting system, I am still rather frustrated that Blogger have made it so difficult for readers to allow links back to their blogs. In order to make this happen, we have to go through far too many steps, whereas the previous commenting system was simpler, easier and far more user friendly. At this rate, Blogger will become a closed system, in which users of other blogging platforms will feel unwilling to comment, perhaps even to visit Blogger blogs. I can understand concerns over comment spam and such, but for me, the cons far outweigh the pros of this new system. Please bring it back Blogger!!</p><p>I hope this tutorial has been useful in helping you to understand how the new commenting systems work, and also how it <i>is</i> still possible to create links back to your blogs, while allowing others to do the same. Comments are always welcome here, and backlinks should still be followed, so please feel free to leave your opinions 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-8487727414659245612007-11-26T11:03:00.000+00:002009-07-26T02:01:38.769+01:00A tabbed navigation widget for your blog (version 1)<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oy5nS2GGe3tq9673fFb1EmJ3q9bDfd41tGC-RaahWPkU3SJX0p4Paile6PyPcizilNOFzwEDvB9gTrqz2JHnA-U5wtebDHfw_jA5AXJDzomcT1F_FxAa5pZPkIBMJqGpWgd6UCKjWRw/s1600-h/ScreenHunter_01+Nov.+26+11.30.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oy5nS2GGe3tq9673fFb1EmJ3q9bDfd41tGC-RaahWPkU3SJX0p4Paile6PyPcizilNOFzwEDvB9gTrqz2JHnA-U5wtebDHfw_jA5AXJDzomcT1F_FxAa5pZPkIBMJqGpWgd6UCKjWRw/s400/ScreenHunter_01+Nov.+26+11.30.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5137110224100182194" /></a>To help you streamline the content of your blogs sidebar, I have developed a "tabbed navigation widget" which can include any content you would like to appear in your blog, such as recent posts, recent comments and much more besides.</p><p>This is based on <a href="http://www.bloggerbuster.com/2007/11/using-tab-view-widget-to-streamline.html">Hoctro's original Tab View widget</a>, though this version is much easier to install and allows you to completely customize the widget with your own content. This works by displaying different content within the widget depending on which tab is highlighted, so rather than have a long sidebar full of widgets, you can have them all in one smaller widget so readers will be able to find the information they need more easily.</p><p>You can see an example of this widget in action on the <a href="http://red-20-template.blogspot.com/">Red Web 2.0 demonstration blog</a>. Read on for full instructions and an explanation of how this widget can be customized to suit your needs.</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>The tabbed navigation widget features tabs and a content window; when clicking on the tabs, different content is visible in the window beneath. My version is a much simplified version of <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html">Hoctro's original Tab View widget</a>, and requires that you manually insert the content relative for each tab. This will then allow you to feature any content you wish to appear inside the content window, such as popular posts, an "about this blog" text or a feed of your recent posts/comments.</p><p>The basic installation of this widget is quite simple, so you can get this up and running within minutes. However, you must add your own content to this widget, as this version does not support recent posts, recent comments and labels by default. I will explain how to add this content later.</p><h3>Basic instructions for installing the Tabbed Navigation widget</h3><p>Here are the basic installation instructions for installing a tabbed navigation widget in your blog. This will get the widget up and running, so you will be able to customize the content afterwards:</p>
<ol><li>First you should make a full backup of your blog template, just in case something goes wrong during the installation and you need to revert back to your original template. To make your template backup, go to Template>Edit HTML in your Blogger dashboard and click on the "Download full template" link near the top of the page.</li>
<li>Next, go to the Edit HTML section of your template and find the closing <span style="font-weight:bold;"></head></span> tag. Just <span style="font-style:italic;">before</span> this tag, paste the following lines of code:
<blockquote>
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/><br/>
<br/>
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/><br/>
<br/>
<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/><br/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/><br/>
<br/>
<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/><br/>
<br/>
<br/><style type='text/css'>
<br/>.yui-content {
padding:1em; /* pad content container */<br/>
}<br/>
.yui-navset .yui-content {<br/>
border:1px solid #ccc;<br/>
}<br/>
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {<br/>
background-color:#fff;<br/>
}<br/>
.yui-navset .yui-nav li a {<br/>
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;<br/>
}<br/>
.yui-navset .yui-nav li a em {<br/>
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;<br/>
padding:0.5em;<br/>
}<br/>
/* top oriented */<br/>
.yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */<br/>
.yui-navset-top .yui-nav li a {<br/>
border-bottom:1px solid #ccc;<br/>
}<br/>
.yui-navset-top .yui-nav .selected a { border-bottom:0; }<br/>
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */<br/>
</style><br/></blockquote>
This code features the CSS styling and javascript calls required to operate this widget correctly in your template. Once you have added this code, simply save your template.</li>
<li>Next, go to the Page Elements section of your dashboard (Template>Page Elements). Choose to add a new HTML/Javascript widget in your blog sidebar, and in this widget, paste the following section of code:
<blockquote><div id="demo" class="yui-navset"><br/>
<ul class="yui-nav"><br/>
<li><a href="#tab1"><em><font color="blue">Tab1</font></em></a></li><br/>
<li class="selected"><a href="#tab2"><em><font color="blue">Tab2</font></em></a></li><br/>
<li><a href="#tab3"><em><font color="blue">Tab3</font></em></a></li><br/>
</ul><br/> <br/>
<div class="yui-content"><br/>
<br/>
<div id="tab1"><p><font color="red">Tab One Content</font></p></div><br/>
<div id="tab2"><p><font color="red">Tab Two Content</font></p></div><br/>
<div id="tab3"><p><font color="red">Tab Three Content</font></p></div><br/>
</div><br/>
</div><br/>
<script><br/>
(function() {<br/>
var tabView = new YAHOO.widget.TabView('demo');<br/>
<br/>
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");<br/>
})();<br/>
</script></blockquote>
Save your widget and take a look at your blog. The resulting widget should something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAsaAiZfB9jY_bu94uryrmfpozzPutTNaV5JTaGnhJfjr-nxDG9oFB6u1jCVX0mk2ktKMnYEqLZNsTWgMMt-15ZxgHgtsE7sjljiP4gBaC73dsiVHZpkONqtv0MLuUgs7ZONerUZopspw/s1600-h/ScreenHunter_02+Nov.+26+12.28.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAsaAiZfB9jY_bu94uryrmfpozzPutTNaV5JTaGnhJfjr-nxDG9oFB6u1jCVX0mk2ktKMnYEqLZNsTWgMMt-15ZxgHgtsE7sjljiP4gBaC73dsiVHZpkONqtv0MLuUgs7ZONerUZopspw/s400/ScreenHunter_02+Nov.+26+12.28.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5137125136226633922" /></a>
Now you will be able to customize the widget to suit your needs.</li></ol>
<h3>Adding content to the Tabbed Navigation widget</h3><p>If you take a look at the code for the widget content above, you will notice that I have highlighted the text of the tabs in <font color="blue">blue</font> and the content which appears in the box below the tabs in <font color="red">red</font>. This is help you understand how to customize this widget with your own titles and content.</p><p>Notice the relationship between the tab titles and their content, so when you click on "tab 1" for example, the related content for this tab will appear in the window below the tabs.</p><p>You can change the titles of the tabs and add whatever content you like to the widget, including Javascript code. Here are a few examples of content you could use in the widget, with examples for implementation:
<ul><li><span style="font-weight:bold;">An About This Blog text:</span><br/>This is the easiest type of content to add. Simply replace the blue title (eg: Tab1) with an appropriate title, like this:
<blockquote><li><a href="#tab1"><em><font color="blue">Tab1</font></em></a></li> <span style="font-weight:bold;"> <span style="font-style:italic;">becomes </span></span> <li><a href="#tab1"><em><font color="blue">About this blog</font></em></a></li></blockquote>
<br/>
Then add your content in place of the "tab content" text, for example:
<blockquote><div id="tab1"><p><font color="red">Tab One Content</font></p></div>
<br/><br/>
becomes
<br/><br/>
<div id="tab1"><p><font color="red">This is a piece of text about your blog. You can write whatever you want here</font></p></div></blockquote></li>
<li><span style="font-weight:bold;">Add a feed of your recent posts or comments</span><br/>
This is a little more complicated as you cannot simply add a feed widget into the existing Tabbed navigation widget. Instead you could use the Blog Headlines widget from the tools section to create an independent blog feed widget which uses only javascript code to display recent posts or comments. In this case you would paste the javascript code in place of the content as demonstrated below:
<blockquote><div id="tab1"><p><font color="red">Tab Two Content</font></p></div>
<br/><br/><span style="font-weight:bold;"><span style="font-style:italic;">becomes</span></span>
<div id="tab1"><p><font color="red"><script language="JavaScript" src="http://tools.bloggerbuster.com/headlines/feed2js.php?src=http%3A%2F%2Fwww.bloggerbuster.com%2Ffeeds%2Fposts%2Fdefault&num=3" type="text/javascript"></script>
<noscript>
<a href="http://tools.bloggerbuster.com/headlines/feed2js.php?src=http%3A%2F%2Fwww.bloggerbuster.com%2Ffeeds%2Fposts%2Fdefault&num=3&html=y">View RSS feed</a>
</noscript>
</font></p></div></blockquote>
If you like, you can even use the code above as long as you change the url to match that of your blog.</li>
<li><span style="font-weight:bold;">Add a list of your labels/blogroll/favorite posts:<br/>
</span>
You can manually add a list or links to your labels/blogroll/favorite posts by pasting the HTML code into the content section too. Simply paste the HTML code to display these links in the following format:
<blockquote><ul><li><a href="http://yourblog.blogspot.com/search/label/yourlabel/">Your Label/Link text</a></li></ul></blockquote>
Here is an example of what this code would look like when pasted into the content section for your tabbed navigation widget:
<blockquote><div id="tab3"><p>
<ul>
<li><a href="http://linkone.com">link one</a></li>
<li><a href="http://linktwo.com">link two</a></li>
<li><a href="http://linkthree.com">link three</a></li>
</ul>
</p></div></blockquote></li></ul></p><h3>Limitations of the Tabbed Navigation widget</h3><p>It is very difficult to automatically display links to the archives or labels of your blog within this Tabbed Navigation widget. This is because the code used to display these items in regular Blogger widgets will only work if the widget type matches the content to be displayed (for example, Archives can only be displayed when the widget type is "archives"). So when using this widget, you would need to create manual links to your archives or labels in order to make them display inside your widget's content section.</p><p>However, I have been experimenting with this widget, and have discovered a way of displaying either the archives or labels within the widget. Unfortunately though, this means that the widget becomes more complicated to install, and is not so easily adjusted after the initial installation. If anyone does know of a method for displaying archives and labels which does not rely on the widget type, I would love to hear how this could be achieved!</p><p>In the next few days, I will post version two of the Tabbed Navigation widget which by default will feature a tab for the archives of your blog. As I mentioned, this will be a little more complicated to install, and any post-installation customizations would need to be made from within the Edit HTML section of your blog rather than within the layouts section.</p><p>I hope you have found this (rather long) tutorial useful and easy to understand. If you have any comments or questions, please feel free to leave these below.</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/tabbed?from=http://www.bloggerbuster.com" rel="tag">tabbed</a> | <a href="http://www.technorati.com/posts/tag/navigation?from=http://www.bloggerbuster.com" rel="tag">navigation</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/sidebar?from=http://www.bloggerbuster.com" rel="tag">sidebar</a> | <a href="http://www.technorati.com/posts/tag/content?from=http://www.bloggerbuster.com" rel="tag">content</a> | <a href="http://www.technorati.com/posts/tag/html?from=http://www.bloggerbuster.com" rel="tag">html</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-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-14872187252538387822007-11-14T21:48:00.000+00:002009-07-26T02:01:38.770+01:00Using a "Tab View" widget to streamline content<p>Highlighting your recent posts, comments and label feeds is a great way of ensuring readers will stay on your blog for a longer period of time. However, featuring too much content in your sidebar or above the main posts column can often make your blog appear cluttered.</p><p>A more streamlined method for presenting such content is to use a tabbed navigation widget, like this:</p>
<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oZfBYil7H-N540aWsOZV8SY-jbDfS4Yo33bJH3i47OX8RcO1DdblLiFMovEuIGPgw1raEs_srbMgccDdN0rl7cloaqMgEMOdYLhIciNLraSodmpZb4tDGCqrYbWwOIHOaoX04yTq76Y/s1600-h/ScreenHunter_01+Nov.+14+18.17.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oZfBYil7H-N540aWsOZV8SY-jbDfS4Yo33bJH3i47OX8RcO1DdblLiFMovEuIGPgw1raEs_srbMgccDdN0rl7cloaqMgEMOdYLhIciNLraSodmpZb4tDGCqrYbWwOIHOaoX04yTq76Y/s320/ScreenHunter_01+Nov.+14+18.17.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5132762028810242434" /></a></p>
<p>This widget was designed by <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html">Hoctro</a>, and uses JSON calls to gather recent posts, recent comments and labels feeds from your blog. Once installed, readers can click on a tab and the relevant content will appear in the section beneath.</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>Hoctro's Tab View widget ensures that your readers can easily access other areas of interest in your blog: when the tab labels are clicked, the section beneath is updated with relevant lists of posts or comments so your readers can easily navigate to other areas of your blog. This widget is based on the <a href="http://developer.yahoo.com/yui/tabview/">Yahoo! TabView application</a>, and uses Javascript to call the clickable titles of recent posts, comments and label feeds which are quickly loaded into the space beneath the tabs.</p> <p>To install this widget in your own blog, <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html">head on over to Hoctro's Place</a> where you will find full instructions and all the code required for the Tab View widget to work. There are no externally hosted files for this widget, as all of the code is provided for you to paste into your template.</p><p>At first glance, the array of code may seem confusing, so to make this easier to understand, I will outline the five steps for installation here:</p><h3>How to install Hoctro's Tab View Widget</h3>
<ol><li><span style="font-weight:bold;">Back up your blog template</span> by going to Template>Edit HTML and clicking on the "Download full template" link.</li>
<li><span style="font-weight:bold;">Install the latest version of <a href="http://hoctro.blogspot.com/2006/11/hacking-technique-how-to-modify-beta.html#install_core">Hoctro's Javascript core library</a>:</span> This is a large portion of code which you need to copy and paste just before the closing <span style="font-weight:bold;"></head></span> tag in your blog's template.</li>
<li><span style="font-weight:bold;">Install the Yahoo! Tab View requirements:</span> This portion of code can be found on the Tab View widget page, and should be pasted immediately <span style="font-style:italic;">after</span> the Javascript core library, but before the closing <span style="font-weight:bold;"></head></span> tag.</li>
<li><span style="font-weight:bold;">Install the Tab View widget code</span>: Again, this portion of code can be found on the <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html">Tab View Widget page</a> in Hoctro's blog. Paste this whole section of code between any two <b:section> and </b:section> tags in your template (for example, in the sidebar section). It is easiest to do this while the widget templates are not expanded, to make it easier for you to locate the correct area in which to paste the code.</li>
<li>Finally, you will need to <span style="font-weight:bold;">change the title of the widget, the labels and the URL of your blog</span>:
<ul><li>For the labels, ensure the labels match the exact label names of your own blog's labels. These are case sensitive, so ensure you use the same uppercase or lowercase labels as appear in your own blog.</li>
<li>For your blog's url, simply enter your blog URL <span style="font-style:italic;">without</span> the "http://" part. For example: <span style="font-style:italic;">yourblog.blogspot.com</span> or <span style="font-style:italic;">www.yourblog.com</span></li></ul>Then save your template and take a look at your new Tabs View widget!</li></ol><p>You can easily move the position of the widget simply by moving it in the Layout section of your Blogger dashboard. I feel the optimum place for this widget is above the main posts section, or as an extra element in the header. I did experiment with this in a widened sidebar, but the space was simply not wide enough for the five tabs to be presented well (although this did still work as it was intended!).</p><p>While I have found Hoctro's Tab View to be a very useful widget, I would prefer to be able to customize such a widget with different content, such as "Popular Posts", Archives and "Featured Posts". Currently I am working on a modification of the <a href="http://developer.yahoo.com/yui/tabview/">original Yahoo! TabView application</a>, which can be installed directly into an HTML/Javascript widget. Although this widget will require more customization to suit your individual blog and preferences, it will be much easier to modify after the initial installation. I hope to be able to post a full tutorial and installation guide for this by the weekend once I've perfected the style of the tabs.</p><p>I hope this post has been useful in explaining the use and benefits of the Tab View widget. Please feel free to leave your comments and suggestions below.</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-22200921893649241962007-11-08T14:52:00.000+00:002009-07-26T02:01:38.770+01:00How to add MyBlogLog comment avatars (author images) to your comments section<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_xn2gmPb9TfM/RzSWwcXtcsI/AAAAAAAAAdg/7b2qGbf-VCo/s1600-h/comment_avatars.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_xn2gmPb9TfM/RzSWwcXtcsI/AAAAAAAAAdg/7b2qGbf-VCo/s320/comment_avatars.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5130891634475365058" /></a>A great way to add a sense of community to your blog is by using comment avatars: an image (or icon) which is unique to the person who is making the comment. When using comment avatars in your blog, you will easily be able to recognize comment authors, especially those who regularly visit your blog. Also I feel this adds a greater sense of interaction between blog authors and their readers.</p><p>By default, Blogger only shows comment avatars on comment pages (either pop-up or full screen, depending on your comment settings). However, no comment avatars appear in the most visually important place: in your item pages where comments are displayed beneath your posts. Additionally, only the comment avatars of registered Blogger users may appear on these pages, so if your readers blog on a different blogging platform, their avatar cannot appear at all.</p><p>But there is a solution: add <a href="http://www.mybloglog.com">MyBlogLog</a> comment avatars to 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>When you register your membership with <a href="http://www.mybloglog.com">MyBlogLog</a> (a community website for bloggers) you will be able to upload a photo or avatar which will then be used to identify yourself in MyBlogLog's many services.</p><p>Thanks to Blog Bloke's post about <a href="http://www.instabloke.com/2007/01/comment-avatars-for-your-blog.html">MyBlogLog comment avatars</a>, I am now using Merlinox's <a href="http://blog.merlinox.com/MrX/Blog/_mod/index/t/MyBlogLog-Blogger-Plugin/news/803">MyBlogLog Blogger Plugin</a> to feature MyBlogLog comment avatars in this blog. This is based on <a href="http://www.napolux.com/2006/12/14/myavatars-a-wordpress-plugin-for-mybloglog/">MyAvatars</a>, a Wordpress plugin designed by Napolux. This technique displays the comment authors MyBlogLog avatar beside their name and comment, and where no avatar is found (usually when the commenter has not registered with MyBlogLog), you will instead see a default image.</p><p>You can find <a href="http://blog.merlinox.com/MrX/Blog/_mod/index/t/MyBlogLog-Blogger-Plugin/news/803">Merlinox's original instructions for installing MyBlogLog avatars here</a> (which also includes a tutorial for those using Classic Blogger templates). Here I have also provided full instructions for installation, which I hope will help clarify any issues which may be unclear in Merlinox's post.</p><h3>How to install MyBlogLog comment avatars in your Blogger Layouts blog</h3>
<ol><li>First, make a full backup of your blog template by going to Template>Edit HTML in your Blogger dashboard, then clicking on the "Download full template" link near the top of the page. It is always good practice to do this before making any adjustments to your blog's template in case you make a mistake and need to revert back to a working template afterwards!</li>
<li>Next, go back to the Edit HTML section of your dashboard, and check the "expand widget templates" box. Then, just before the closing </head> tag in your template, insert the following lines of code:
<blockquote><script src='http://blog.merlinox.com/MrX/Blog/test/myBlogAvatar2.js' type='text/javascript'/></blockquote>
This will link to the javascript used to power the comment avatars which is hosted by Merlinox.</li>
<li>Next, you will need to find the following line of code:
<blockquote><b:loop values='data:post.comments' var='comment'></blockquote>
This will be in the comments section of your template, and is easily found using the search function of your browser (CTRL+F). If you cannot find this line, this is probably because you have forgotten to expand the widget templates!</li>
<li>Right after this phrase, add the following section of code:
<blockquote><div style='border:0;float:left;margin: 0 5px 0 0;'><br/>
<script><br/>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');<br/>
</script><br/>
</div><br/></blockquote></li>
<li>Now, save your template and take a look at one of your blog posts which has a few comments. You will see that any commenter who has a MyBlogLog account and avatar will now have their image featured beside their name. Those who do not have a MyBlogLog account will feature the default question mark avatar instead.</li></ol></p><p>As you have read, this is quite an easy hack to implement in your blog. This will enable MyBlogLog comment avatars for your comments, even if you are not a member of MyBlogLog yourself!</p><h3>What you should know about using MyBlogLog comment avatars</h3><p>There are a few things you should be aware of if you decide to use MyBlogLog avatars in your blog template:
<ul><li>MyBlogLog avatars are linked to the URL of your blog, rather than your Blogger profile. So in order for your avatar to display, you'll need to comment as "Other" rather than using your Blogger display name (your Blogger account).<br/><br/>For blog authors, this also means you would need to change your settings for comments, and enable "anyone" to comment, rather than only registered users.</li>
<li>In the same sense, those who log in as "other" and provide their URL when commenting will not see their Blogger profile on Bloggers comments pages (the pages which appear when you post a comment). One solution to provide consistency for the comments is to disable "profile images on comments" in Settings>Comments of your Blogger dashboard.</li>
<li>The "default" image used for those who don't have a MyBlogLog avatar is much smaller than the 48x48px image used for those who do have an avatar. (As yet, I haven't been able to find a solution to use a different default avatar, though if I do discover a solution I will be sure to update this post!)</li>
<li>If you have recently become a member of MyBlogLog, your avatar will not display straight away. It may take up to three days for your avatar to display on blogs which have enabled this feature, so don't worry that it's not working, just wait a few days and your avatar will soon appear!</li></ul></p><p>The instructions I provided above will link to the required script which is hosted on Merlinox's server (as he encourages readers to do this in his tutorial). If you would prefer to host the Javascript yourself, you should <a href="http://blog.merlinox.com/MrX/Blog/_mod/index/t/MyBlogLog-Blogger-Plugin/news/803">download this from Merlinox's post</a>, upload to your own hosting account, and change the link to the script in the head of your template to refer to the location of your hosted script like this:
<blockquote><script src='http://your-hosting-provider.com/your-folder/myBlogAvatar2.js' type='text/javascript'/></blockquote>
Of course, you should substitute the URL in this example for the exact URL where your script is hosted.</p><p>I hope this tutorial has helped you to easily install Merlinox's Blogger plugin for MyBlogLog comment avatars in your own blog templates. If you enjoyed this post and would like to hear of future updates, please consider subscribing to the <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">Blogger Buster feed</a>.</p><p>As always, your comments and opinions are much appreciated. And if you have an account with MyBlogLog, don't forget to choose "other" when you leave your comments and use your URL so that your avatar will appear beside your message!</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/mybloglog?from=http://www.bloggerbuster.com" rel="tag">mybloglog</a> | <a href="http://www.technorati.com/posts/tag/comment?from=http://www.bloggerbuster.com" rel="tag">comment</a> | <a href="http://www.technorati.com/posts/tag/avatars?from=http://www.bloggerbuster.com" rel="tag">avatars</a> | <a href="http://www.technorati.com/posts/tag/author?from=http://www.bloggerbuster.com" rel="tag">author</a> | <a href="http://www.technorati.com/posts/tag/images?from=http://www.bloggerbuster.com" rel="tag">images</a> | <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/template?from=http://www.bloggerbuster.com" rel="tag">template</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-50767909096878551312007-11-03T18:55:00.001+00:002008-02-26T13:11:29.946+00:00How to customize "block quotes" in your posts<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_xn2gmPb9TfM/Ry0W4bKZdYI/AAAAAAAAAcw/n4lQF4DamUY/s1600-h/block.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_xn2gmPb9TfM/Ry0W4bKZdYI/AAAAAAAAAcw/n4lQF4DamUY/s320/block.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5128780709264717186" /></a>
"Block quotes" are sections of text which are generally used to highlight quotes from other sources; they are usually indented from the main body of a blog posts and may also have a slightly different background color.</p><p>Most Blogger templates define how block quotes should appear in the style section of your template, between the <b:skin> tags. In this blog I have customized the appearance of block quotes by adding a background image and stronger color so these sections are defined more clearly. In this post, I'll give you some examples of how you can customize your own block quotes to achieve a more personalized look.</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 do I use Block Quotes?</h3><p>If you are unfamiliar with block quotes, you may be wondering how to use them in your posts. But don't worry, they are very easy to use!</p></p>If you write your posts with the "rich text editor", you simply need to highlight the section of text you'd like to block-quote, and click on the "blockquote" button which is highlighted in the image below:</p>
<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_xn2gmPb9TfM/RyzWK7KZdXI/AAAAAAAAAco/MBZLw0vQGfc/s1600-h/blockquote.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_xn2gmPb9TfM/RyzWK7KZdXI/AAAAAAAAAco/MBZLw0vQGfc/s320/blockquote.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5128709558836491634" /></a></p>
<p>This button also features in the HTML editor, and is easier to spot as there are fewer buttons to choose from!</p><p>Alternatively, you can choose to wrap your quotations in blockquote tags, like this:
<blockquote><blockquote>Write your quotations here</blockquote></blockquote></p><h3>How the style of block quotes is defined</h3><p>In the style section of your template (between the <b:skin> and </b:skin> tags), it is most likely that you'll find a section which looks something like this:
<blockquote>blockquote {<br/>
margin:1em 20px;<br/>
}</blockquote>
These few lines of code define how block quotes will appear when published in your posts. By default, any text enclosed in <blockquote> tags will be slightly indented on the left hand side. Most block quote definitions will also add a margin above the block quote to separate it from the main body of the text, as in the example above.</p><p>In your own template, you may notice that ".post" is added before the "blockquote". This statement would then define how the block quote would look inside a blog post, which is where most people would need to add a quotation. However, if you plan on using styled block quotations in your sidebar/footer/header section, it may be a good idea to remove the ".post" phrase so that all block quotes which appear in your template will display in the same way.</p><h3>Adding some style to your block quotes</h3><p>Here I will illustrate three common methods you may like to use to style your block quotes: <span style="font-weight:bold;">borders</span>, <span style="font-weight:bold;">backgrounds</span> and <span style="font-weight:bold;">font styles</span>.</p><h5>Borders</h5><p>Adding borders to your block quotes can really make a visual impact that the content is separate from the main body of text. The simplest way to add a border is to add these lines in red to the styling definitions for "blockquote" in your style section:
<blockquote>blockquote {<br/>
margin:1em 20px;<br/>
<font color="red"><span style="font-weight:bold;">border: 1px solid #000000;<br/>
padding: 5px;</span></font><br/>
}</blockquote>
Which would produce the following effect:</p><p style="margin: 1em 20px; border: 1px solid #000; padding: 5px;">A <span style="font-weight:bold;">solid black border</span> around the whole block quote which is <span style="font-weight:bold;">one pixel thick</span>. The "padding" in this example ensures that there is five pixels of blank space between the border and the text it contains, which helps make it easier to read.</p><p>Here is an example of a different style of border:
<blockquote>blockquote {<br/>
margin:1em 20px;<br/>
<font color="red"><span style="font-weight:bold;">border: 3px dotted #ff0000;<br/>
padding: 10px;</span></font><br/>
}</blockquote>
And here is the effect:</p><p style="margin: 1em 20px; border: 3px dotted #ff0000; padding: 10px;">A dotted red border which is 3 pixels wide, with 10 pixels of padding between the border and the text it contains.</p><p>You can experiment with different settings for the border property, such as the thickness, the color and the style using these two examples as a guide. For a full description of the CSS Border property, take a look at <a href="http://www.tizag.com/cssT/border.php">Tizag's excellent tutorial</a> which includes a section for you to try out different properties for yourself.</p><h5>Using background colors and images</h5><p>In this blog I used a combination of background image and color to highlight block quotes from the main body of text. The method for this is very similar to how we can define the main background of a blog. Here is a simple example to define the background color as a pale grey:
<blockquote>blockquote {<br/>
margin:1em 20px;
background: #cccccc;<br/>
}</blockquote>
This would produce the following effect:
<p style="margin:1em 20px; background: #cccccc">Here is an example of the block quote background property to define only the background color</p><p>You could of course change the hex value of the background color to better suit the theme of your blog template. You may also prefer to add some padding, so that the text doesn't run to the borders of the background.</p><p style="background: #dfdfdf url(http://bloggerbuster.com/images/blockquote_top.gif) top left no-repeat; margin: 1em 20px; padding: 30px 10px 10px 10px;">Let's suppose you want to add some pizazz to the block quotes by using a background image, as in this example...</p><p>This uses a background image which is aligned to the top of the block quote section, and also a background color which blends with the image so that it appears to be a complete background image. You could recreate this in your own blog template by using the following code within your b:skin section:
<blockquote>blockquote {<br/>
margin:1em 20px;<br/>
background: #dfdfdf url(http://bloggerbuster.com/images/blockquote-top.gif) top left no-repeat; <br/>
padding: 30px 10px 10px 10px;<br/>
}</blockquote>
Alternatively, if you would like to use the "quote marks" image and blended background which I use here, you could use this definition instead:
<blockquote>blockquote {<br/>
margin:1em 20px;<br/>
background: #e0e0e0 url(http://bloggerbuster.com/images/bg_blockquote.gif) top left no-repeat; <br/>
padding: 8px 8px 8px 65px;<br/>
}</blockquote>You could also create your own background images to signify the blockquote and define them in a similar way.</p><h5>Using different font styles</h5><p>A subtler method of styling block quotes is to define a different font style to the main body of the text, such as making the font <span style="font-weight:bold;">bold</span>, <span style="font-style:italic;">italic</span> or a <font color="red">different color</font>.</p><p style="margin: 1em 20px; font-style: italic; font-weight: bold; color: red;">Here is an example of a block quote which defines all three of these elements at once, though you could of course choose only one or two of these properties...</p><p>All three of these properties may be defined in the following statement:
<blockquote>blockquote {<br/>
margin:1em 20px;<br/>
font-weight; bold; <br/>
font-style: italic;
color: #ff0000;<br/>
}</blockquote>
Experimenting with these different font styles can easily help you create a style which is perfect for highlighting your quotations.</p><h3>The overall effect</h3><p>Using styles for your block quotes can greatly complement your theme, and ensures that the quotations are easily recognizable from the main body of your posts.</p><p>Please let me know if this tutorial was useful to you by leaving your comments and opinions below. If you found this post useful, please consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing to the Blogger Buster feed</a>.</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/blockquotes?from=http://www.bloggerbuster.com" rel="tag">blockquotes</a> | <a href="http://www.technorati.com/posts/tag/style?from=http://www.bloggerbuster.com" rel="tag">style</a> | <a href="http://www.technorati.com/posts/tag/posts?from=http://www.bloggerbuster.com" rel="tag">posts</a> | <a href="http://www.technorati.com/posts/tag/template?from=http://www.bloggerbuster.com" rel="tag">template</a> | <a href="http://www.technorati.com/posts/tag/css?from=http://www.bloggerbuster.com" rel="tag">css</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-77063852513271836872007-11-01T19:51:00.001+00:002008-02-26T13:11:29.947+00:00How to display code properly in your blog posts<p>HTML and Javascript codes perform different functions for our blog posts, such as changing the appearance of text <font color="red"><span style="font-weight:bold;">like</span></font> <span style="background: blue; color: white;"><span style="font-style:italic;">this</span></span>. But when we need to display the actual code used to perform these functions, we can't simply paste this code into a post as it will <span style="font-style:italic;">perform the function</span>, and not display as <span style="font-weight:bold;">regular text</span>.</p><p>As you may have seen in my other posts, I use two different methods to display code as text which can be read, copied and pasted for your own use. These are <span style="font-weight:bold;">blockquotes</span> and <span style="font-weight:bold;">iframes</span>. In this post I'll explain how you can use these methods to display readable code in your own blog posts.</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>The problem when trying to paste code into your posts is that it will perform the intended function, rather than display as regular text. For example, if I wanted to explain how to make text italic, I could try adding this into my post:
<blockquote><i>This is italic text</i></blockquote></p><p>But if I simply paste this code into a post, the effect will be this:
<blockquote><i>This is italic text</i></blockquote></p><p>This is because the code is performing the <span style="font-weight:bold;">function of the code</span> I pasted, rather than displaying as readable text.</p><p>To display this code as text, we need to use "<span style="font-weight:bold;">character entities</span> instead.</p><h3>What are "character entities"?</h3><p>You could say that HTML uses a special language, and that we need to say things in a different way for a web browser to understand it. Character entities make the browser understand that we want to <span style="font-weight:bold;">display</span> a certain character, rather than use the <span style="font-style:italic;">function</span> of this character.</p><p>Character entities are made up of three parts:
<ol><li>An "ampersand" (the <span style="font-weight:bold;">&</span> symbol)</li>
<li><span style="font-style:italic;">Either</span> a descriptive phrase, <span style="font-style:italic;">or a</span> # followed by a number</li>
<li>A semicolon (the <span style="font-weight:bold;">;</span> symbol)</li></ol></p><p>Here is an example of the character entity for the © (copyright) symbol:
<blockquote>&copy;</blockquote>
This example uses the descriptive phrase "copy", though it could also be used with the # and it's number instead:
<blockquote>&#169;</blockquote>
Either of these methods will have the effect of reproducing the © symbol in your blog post (or in any web page for that matter!).</p><h3>The most common character entities you will need to use</h3><p>Here are the most common characters and their equivilent character entities you would need to use to display code in your posts:</p><p>
<table class="ex" cellspacing="0" border="1" width="100%">
<tr>
<th align="left">Result</th>
<th align="left">Description</th>
<th align="left">Entity Name</th>
<th align="left">Entity Number</th>
</tr>
<tr>
<td><</td>
<td>less than</td>
<td>&lt;</td>
<td>&#60;</td>
</tr>
<tr>
<td>></td>
<td>greater than</td>
<td>&gt;</td>
<td>&#62;</td>
</tr>
<tr>
<td>&</td>
<td>ampersand</td>
<td>&amp;</td>
<td>&#38;</td>
</tr>
<tr>
<td>"</td>
<td>quotation mark</td>
<td>&quot;</td>
<td>&#34;</td>
</tr>
</table></p><p>For a complete list of character entities, take a look at <a href="http://www.w3schools.com/tags/ref_entities.asp">the reference page provided by W3 Schools</a>.</p><h3>Using the character entities</h3><p>In the code you would like to display, you will need to substitute each of the HTML characters above with the equivalent character entity. For example:
<blockquote><i>This is how to display italic text</i></blockquote>
Should be written instead as
<blockquote>&lt;i&gt;This is how to display italic text&lt;/i&gt;</blockquote></p><p>This is more commonly known as "escaping" the HTML code.</p><p>You could write these character entities by hand each time you need to display code in your blog posts. However, I find it easier to use the "replace" function in Notepad to replace each instance of a certain character with the equivalent character entity. Alternatively, you could use the free <a href="http://www.blogcrowds.com/resources/parse_html.php">HTML code parser tool provided by BlogCrowds</a> which can substitute all necessary characters for you in one click!</p><h3>Displaying the "escaped" code in your blog posts</h3><p>As I mentioned right at the beginning of this post, I use two different methods to display code in my posts: blockquotes and Iframes (inline frames).</p><h4>Blockquotes</h4><p>Blockquotes are useful if you only need to display a small section of code. Usually, your blog template will indent any content which is enclosed in <blockquote> tags; sometimes styling will also be used, such as a different colored background or border.</p><p>To display your code as a blockquote, you will need to use the following format:
<blockquote><blockquote> Your content/"escaped" HTML code goes here </blockquote></blockquote></p><h4>Iframes</h4><p>Iframes (inline frames) are more useful to display long sections of code, such as the template codes displayed in the Templates section of this blog. They are used to display the content of an external file in the body of a page, and can be used to display a large amount of content in a small amount of space. If the dimensions of the iframe are smaller than those of the content it contains, the iframe will have scrollbars so your readers can access the whole content.</p><p>Unfortunately iframes are slightly more difficult to create than blockquotes as the <span style="font-style:italic;">content</span> of the iframe must be externally hosted; it is not a part of the page itself.</p><p>To create the content of an iframe, you will need to create an HTML file containing your "escaped" code. Don't worry about adding all the elements of a regular web-page, such as the head and body tags: the easiest way to create the HTML file is to paste your escaped HTML code into your favorite text editor (such as Notepad) and save this with an ".html" extension.</p><p>You will then need to upload this to your hosting account, and note down the URL of this HTML file. If you don't already have an external hosting account, <a href="http://www.bloggerbuster.com/2007/09/5-best-free-file-hosting-for-your.html">check out this post to read about some of the best free hosting providers</a>.</p><p>Once you have uploaded your HTML file to an external host, you will need to call the iframe in the body of your blog post. To do this, you can use the following format, substituting the example URL for that of your HTML file:
<blockquote><iframe src="http://hosting-provider.com/your-file.html"><iframe></blockquote>
You can then preview your blog post to ensure the code displays correctly within the iframe.</p><p>If you prefer, you can also specify the dimensions of the iframe to ensure it doesn't stretch too far down or across the page in your post like this:
<blockquote><iframe src="http://hosting-provider.com/your-file.html" width="400px" height="200px"><iframe></blockquote></p><p>I hope this explanation helps you to display code correctly in your own blog posts. If you found this tutorial useful and would like to know about future updates, why not consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing to the Blogger Buster feed</a>?</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/code?from=http://www.bloggerbuster.com" rel="tag">code</a> | <a href="http://www.technorati.com/posts/tag/iframes?from=http://www.bloggerbuster.com" rel="tag">iframes</a> | <a href="http://www.technorati.com/posts/tag/blockquotes?from=http://www.bloggerbuster.com" rel="tag">blockquotes</a> | <a href="http://www.technorati.com/posts/tag/display?from=http://www.bloggerbuster.com" rel="tag">display</a> | <a href="http://www.technorati.com/posts/tag/blog+posts?from=http://www.bloggerbuster.com" rel="tag">blog+posts</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-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-39145342915806722732007-10-26T11:58:00.000+01:002008-02-26T13:11:29.951+00:00Create navigation buttons to enhance your blog<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrrMB8s8qxsuAsknDCaVTP2i-YT8P0cZQTa6yqhNBIRVTAulM-1gAWJ7qoZGeYuRaL6gUJGQFGOUpp_ugsRU2oEkQUbHVP4RfIfEEr2i8WVzMEzdnEXb8I4luXU2HvtWsyfrvnKN34QKk/s1600-h/navbar.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrrMB8s8qxsuAsknDCaVTP2i-YT8P0cZQTa6yqhNBIRVTAulM-1gAWJ7qoZGeYuRaL6gUJGQFGOUpp_ugsRU2oEkQUbHVP4RfIfEEr2i8WVzMEzdnEXb8I4luXU2HvtWsyfrvnKN34QKk/s320/navbar.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5125674695227702466" /></a>Many blogs and websites feature "navigation button" links like a menu at the top of the page or beneath the header. This can be really helpful for readers to navigate to areas of interest in your blog, such as the home page, about page and contact links.</p><p>In this tutorial, I'll explain a very simple (but effective) method of creating such a "navigation buttons" for your own blog, which you can use to add easily accessible links to your post pages.</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>Here is an example of the buttons you can create using this tutorial (though the links in these buttons all point back to this page!):</p><p><a class="test-navigation" href="#">Home</a><a class="test-navigation" href="#">About</a><a class="test-navigation" href="#">Contact</a></p>
<p>To create these buttons for your blog, we don't need to use any external images! With a little CSS styling, you can easily create navigation buttons which change color when your mouse hovers over them, making it easier to see that these are indeed clickable links. This style of button is helpful to your visitors and invites them to view the important pages you link to using these links.</p><p>There are two main steps to creating these buttons for your blog:
<ol><li>Add some styling code to your blog's template</li>
<li>Create a new HTML/Javascript widget, and create your links</li></ol></p><p>You can use these links anywhere in your blog that you are able to place an HTML/Javascript widget, such as your sidebar, the header section, or above your blog posts.</p><p>Here are the steps in detail:</p><h3>Add some code to the style section of your blog template</h3><p>The "style" section of "layouts" blogs is contained <span style="font-weight:bold;">between</span> the <b:skin> and </b:skin> tags in your template. The simplest way to add extra styling code is to place this just after the closing </b:skin> tag (key CTRL+F to easily find this in your template).</p><p>The styling code used for the buttons featured above is as follows:
<blockquote>a.navigation { <br/>
background: #000000;<br/>
color: #ffffff;<br/>
margin: 1px;<br/>
padding: 5px 35px 5px 5px;<br/>
border-width: 0;<br/>
text-transform: uppercase;<br/>
text-decoration: none;<br/>
font-weight: bold;<br/>
}<br/>
a.navigation:hover {<br/>
background: #5d5d54;<br/>
text-decoration: none;<br/>
}<br/></blockquote></p><p>If you copy and paste this code just before the closing </b:skin> tag in your blog template, you will easily be able to create your navigation buttons. If you prefer, you can change the color of the backgrounds (highlighted in red) to colors which better suit your blog. You can easily find the hex values for the colors you need by using the <a href="http://tools.bloggerbuster.com/colors/">Color Calculator</a> in the tools section of this site.</p><p>You will notice that there are two statements in this styling: the first defines what the buttons will look like as they appear in your blog, while the second (hover) statement defines the background color of the button when you place your cursor over the button (the "mouseover" effect).</p><h3>Create your links in an HTML/Javascript widget</h3><p>Once you have added this style code to your template, you should save your template and go to the layouts section of your blog (Template>Layout). Here you should create a new HTML/Javascript widget where you would like your buttons to appear.</p><p>In this new widget, you should add your links in the following format:
<blockquote><a class="navigation" href="http://your-link-url.blogspot.com">Your link</a><br/><a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a><br/><a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a></blockquote></p><p>Be sure to replace "http://your-link-url.blogspot.com" with the URL of the post page (or link) you would like the button to link to, and replace the link text (eg: Your Link) with the text you would like to display.</p><p>Once you have created your links (you can add as few or as many as you like), save your HTML/Javascript widget, and take a look at the effect in your blog.</p><h3>How this works</h3><p>The styling code we add to the template creates styling rules for "anchor links" which are given the <span style="font-weight:bold;">class</span> of "navigation". We can use different "classes" to create different effects for elements which appear in your blog layout; the class we give for the navigation links does not affect other links in your template, only those which have the class of "navigation".</p><p>With a few tweaks, you can change the style of these buttons to completely blend with the overall appearance of your blog template, and create attractive clickable buttons to your important pages which your visitors will love.</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/buttons?from=http://www.bloggerbuster.com" rel="tag">buttons</a> | <a href="http://www.technorati.com/posts/tag/navigation?from=http://www.bloggerbuster.com" rel="tag">navigation</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/links?from=http://www.bloggerbuster.com" rel="tag">links</a> | <a href="http://www.technorati.com/posts/tag/css?from=http://www.bloggerbuster.com" rel="tag">css</a> | <a href="http://www.technorati.com/posts/tag/template?from=http://www.bloggerbuster.com" rel="tag">template</a> | <a href="http://www.technorati.com/posts/tag/layout?from=http://www.bloggerbuster.com" rel="tag">layout</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-15872967634447614372007-10-23T17:05:00.001+01:002009-07-26T02:05:50.598+01:00How to install a new template using the HTML code<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_xn2gmPb9TfM/Rx4dGZF1XeI/AAAAAAAAAa8/Em2r2S6Ftsg/s1600-h/html.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_xn2gmPb9TfM/Rx4dGZF1XeI/AAAAAAAAAa8/Em2r2S6Ftsg/s320/html.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5124565421645979106" /></a>The Blogger templates offered here are now available in either XML or "template code" format in the Templates section of this site. To learn how to install the XML templates, take a look at this tutorial which explains the process in detail. For those who prefer to copy and paste the code for new templates, here are some tips to help make the process easier.</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>The template code for each template can be found on the download page in the "templates" section of this site inside a scrolling "iframe" section. To use this, you will need to paste the entire section of code into the Edit HTML section in your Blogger dashboard, <span style="font-weight:bold;">instead</span> of the code which is currently there.</p><p>Often readers contact me because they have experienced errors when installing new templates in this way. Usually such errors are caused because a part of the template code has been left out when copying, or because a part of the old template still remains.</p><p>The method I use to install the HTML code for new templates prevents the dreaded "your template could not be parsed" error code from appearing by ensuring all of the new template code is copied, and none of the old template remains in the Edit HTML window when the new template is installed. This method uses keyboard shortcuts, which simplifies the process, and is also much faster than other methods too!</p><p><h3>How I install template code</h3>
<ol><li>Fisrt, make a backup of your existing template in case you decide to revert back to this later on.</li>
<li>When you have decided on the template you would like to install, put your cursor inside the scrolling iframe box which contains the template code (it doesn't matter where, as long as it's inside this box!). Then hold CTRL (or CMD for Mac users) and press A. This should highlight all of the text within the scrolling box. Then while this text is highlighted, key CTRL/CMD + C, which will copy all of the highlighted text to your cliploard</li>
<li>Next, go to Template>Edit HTML in your blogger dashboard. Check the "expand widget templates box" and again, place your cursor inside the box containing your template code.</li>
<li>Once again, key CTRL/CMD + A to highlight all of the text within this box. Then key CTRL/CMD + V. This function will paste the new template from your clipboard over the existing template, which ensures the old template is completely removed.</li>
<li>You can now preview your new template to ensure you like the new appearance before saving it. Using this method, if you decide you don't like the new template, you can simply click the "clear edits" button, and your old template will still be in place.</li></ol></p><p>I hope this method works well for you too. It certainly is worth giving this a try if you have experienced error messages when trying to paste the html code for a new template.</p><p>Please feel free to leave your comments and opinions below.</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/blogger+templates?from=http://www.bloggerbuster.com" rel="tag">blogger+templates</a> | <a href="http://www.technorati.com/posts/tag/html?from=http://www.bloggerbuster.com" rel="tag">html</a> | <a href="http://www.technorati.com/posts/tag/cannot+be+parsed?from=http://www.bloggerbuster.com" rel="tag">cannot+be+parsed</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-83793166944826608452007-10-19T10:34:00.000+01:002008-02-26T13:11:29.953+00:00Creating a "post-options" box beneath each of your posts<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2Sxh6QLYG79oxJEdIVtMkMIC5Z5UMI2EXWLCrNZ2h1thnGCXEqm44bt_1aCWRNxvDahCTlnFPLibp4ayFFIzAJEUrWd4sVAtk2tLUBe5YfvvYLvz5IIfyS0KdMKgtqdP74UzI_dYbeI/s1600-h/ScreenHunter_07+Oct.+19+10.42.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2Sxh6QLYG79oxJEdIVtMkMIC5Z5UMI2EXWLCrNZ2h1thnGCXEqm44bt_1aCWRNxvDahCTlnFPLibp4ayFFIzAJEUrWd4sVAtk2tLUBe5YfvvYLvz5IIfyS0KdMKgtqdP74UzI_dYbeI/s320/ScreenHunter_07+Oct.+19+10.42.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5122981695405251986" /></a>When a visitor to your blog has finished reading a post, it can be helpful to see options of what they could do next. In this blog, I have added a "post options" box after the body of my posts (like the image on the right), which offer links to post a comment, email the post and AddThis buttons for readers to add the post to their favorite social bookmarking sites. In this tutorial, I'll explain how you can feature s similar "post options" menu beneath your own blog posts.</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>First I will explain how to add a post options menu which you can add simply by copying and pasting the relevant code. After installation, this will need no further customization to work correctly in your blog. Afterwards, I will demonstrate some customization options which you may like to add to this, such as "email the author" and the drop-down AddThis button. These extra options will require some customization on your behalf, which is why I'll discuss them separately from the main hack.</p><p>There are three main steps to installing this hack in your blog template. It is slightly more complicated than other hacks I have posted, but once installed this can add great value to the interactivity of your posts, and can also help keep visitors on your site for longer.</p><p>Here is the step by step installation for the "post-options" box:
<ol><li><span style="font-weight:bold;">Make a back up of your existing template</span><br/><br/>Before making any changes to your template, you should always make a back up of your existing template, in case you make a mistake and need to revert back to this later.<br/><br/>You can do this by going to Template>Edit HTML in your Blogger dashboard and clicking on the "Download full template" link near the top of the page.</li>
<li><span style="font-weight:bold;">Add some code to the posts section of your template</span><br/><br/>This part of the installation cab be quite awkward as the method differs depending on where you want the post-options box to be displayed.<br/><br/>The easiest place to place the code directly beneath the post body section. In this case, you should find the following line of code in your template:
<blockquote><span style="font-weight:bold;"><p><data:post.body/></p></span></blockquote>
Immediately after this line, you should add the following block of code:
<iframe src="http://bloggerbuster.com/iframe_codes/post-options-box.txt" width="500px" height="200px"></iframe><br/>If you are confident in editing your template, you may prefer to insert the code above into your post-footer section, or after the backlinks section instead.<br/><br/>You may wish to save your template at this point.</li>
<li>Add some style to the "post-options" box"<br/><br/>The section you have added to your template should now display the "post-options" box beneath your posts on post pages. However, you may prefer to style this box to have a border and some padding, as this makes it more distinctive from the main body of the post.<br/><br/>In the post-options box used in this blog, I added the following lines to the b:skin section of my template:
<blockquote>
.what-next {<br/>
width: 250px;<br/>
border: 1px solid $bordercolor;<br/>
padding: 0 10px 10px 10px;<br/>
margin: 10px 10px 0 0;<br/>
float: left;<br/>
}</blockquote><br/>
The easiest place to add this code is immediately before the closing </b:skin> tag.<br/><br/>If you prefer, you can modify this style to better suit your own blog template.</li></ol></p>Once you have saved the modifications to your template, take a look at a post-page and see the new post-options box featured beneath your blog posts.</p><h3>The "email this post" link</h3><p>If you have chosen to display "email post links" beneath your blog posts, these should already be displayed in the post-options box. If you haven't yet enabled this option, simply go to Template>Page elements in your Blogger dashboard and click on the "Edit" link in the Blog Posts section. You can then tick the "Show email post links" box, and the email post links will be displayed in your post options box.</p><h3>Customizing the post-options box</h3><p>The default installation for the post options box will work for all templates, and need not be configured further to display everything correctly. However, you may want to add further links or options to this box, which may need to be configured for your particular blog.</p><p>To add more options, you will need to add your links/options in list-item tags, like this:
<blockquote> <ul><br/>
<li><a class='snap_no_shots' href='#comments'>Post a comment<span class='post-comment-link'> </span></a></li><br/>
<li> <!-- email post links --><br/>
<b:if cond='data:post.emailPostUrl'><br/>
<span class='item-action'><br/>
<a class='snap_noshots' expr:href='data:post.emailPostUrl' title='Email Post'><br/>
Email this post <span class='email-post-icon'> </span><br/>
</a><br/>
</span><br/>
</b:if></li><br/>
<br/>
<span style="font-weight:bold; color: red;"><li>Add your links or options here</li></span><br/>
</ul><br/></blockquote></p><p>Here are some examples of options you may like to add:
<ul><li>Contact the author<br/><br/>For this you would need to add a link to your contact page, or perhaps your profile page, like this:
<blockquote><li><a href="http://your-contact-page-url.blogspot.com">Contact the author</a></li></blockquote></li>
<li>AddThis social bookmark buttons<br/><br/>I was hoping to add these to the default installation, but AddThis now require that you register to use their free service.<br/><br/>If you would like to use AddThis social bookmark buttons, please register for your free account, then create your button and use the code provided. You can then add your button code like this to the post-options box:
<blockquote><li><--AddThis code here --></li></blockquote></li>
<li>Any other options?<br/><br/>Any options you would like to display can be inserted in a similar way, by adding the code or content between <li> and </li> tags, as described above.</li></ul></p><p>I hope you have found this tutorial useful, and that it has helped you to insert a "post-options" box beneath your own blog posts. Please feel free to leave your comments and opinions below.</p><p>If you enjoyed this tutorial and wish to receive updates of future content, please consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing to the Blogger Buster feed</a>.</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/post?from=http://www.bloggerbuster.com" rel="tag">post</a> | <a href="http://www.technorati.com/posts/tag/options?from=http://www.bloggerbuster.com" rel="tag">options</a> | <a href="http://www.technorati.com/posts/tag/blog+readers?from=http://www.bloggerbuster.com" rel="tag">blog+readers</a> | <a href="http://www.technorati.com/posts/tag/social+bookmarks?from=http://www.bloggerbuster.com" rel="tag">social+bookmarks</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-43829740097921864172007-10-18T11:34:00.000+01:002008-02-26T13:11:29.955+00:00How to add three columns to your footer section<p><a class="snap_noshots" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXI-mNBbD9ItHwLpLjxBNpqJCXcTz1JmIUedS9I82CV4isiCwFKfa8Txbrgu4RByCSZJuKBl_zfCfI3cfuXtZKFccQ2PuBt1DeI0xxcaC_uD3iV8qpacerH734Tz2FNVjOsMx6o-Sx5g4/s1600-h/configure_toolbars.png"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXI-mNBbD9ItHwLpLjxBNpqJCXcTz1JmIUedS9I82CV4isiCwFKfa8Txbrgu4RByCSZJuKBl_zfCfI3cfuXtZKFccQ2PuBt1DeI0xxcaC_uD3iV8qpacerH734Tz2FNVjOsMx6o-Sx5g4/s320/configure_toolbars.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5122625101450534274" /></a>As you can see at the bottom of this blog, I have three columns in the footer section, followed by a wide section which I use to feature the main blog links. This style is fast becoming common in Web 2.0 style websites and blogs, and is quite easy to duplicate in Blogger templates. In this tutorial, I will explain how you can add these extra columns to your own Blogger blogs.</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>Adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design.</p>There are only four main steps to this tutorial, and I'm sure you'll agree that the overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.</p><h3>Creating the new columns</h3><p>Here are the four steps needed to transform the footer section of your blog template:
<ol><li><span style="font-weight:bold;">Back up your existing blog template!</span><br/><br/>Before making any modifications to your blog template, it is <span style="font-style:italic;">essential</span> that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.<br/><br/>To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.</li>
<li><span style="font-weight:bold;">Move all existing widgets from the existing footer section</span><br/><br/>In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.</li>
<li><span style="font-weight:bold;">Add extra code to your footer section.</span><br/><br/>Go to Template>Edit HTML in your Blogger dashboard, and <span style="font-weight:bold;">do not</span> check the "expand widget templates" box (this simplifies the process).<br/><br/>Now you need to find this section in your template:
<blockquote> <div id='footer-wrapper'><br/>
<font color="red"><span style="font-weight:bold;"><b:section class='footer' id='footer'/></span></font><br/>
</div></blockquote>
Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in <span style="font-weight:bold;"><font color="red">red</font></span>.<br/><br/>Replace the entire line highlighted in red with the code below:
<iframe src="http://bloggerbuster.com/iframe_codes/footer-cols.txt" width="500px" height="300px"></iframe>
It is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.</li>
<li><span style="font-weight:bold;">Adding style for the new footer section</span><br/><br/>Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "</b:skin>" tag, which is where the style section of your template ends.<br/><br/>Immediately before this line, add the following lines of code:
<blockquote>#footer-column-container {<br/>
clear:both;<br/>
}<br/>
<br/>
.footer-column {<br/>
padding: 10px;<br/>
}</blockquote>
And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.</li></ol></p><p>Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!</p><p>I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:
<blockquote><hr align='center' color='<font color="red">#5d5d54</font>' width='90%'/></blockquote>
If you are unsure of the hex value for the color you prefer, you can refer to the <a href="http://tools.bloggerbuster.com/colors/">Color Calculator</a> in the tools section of this site.</p><p>If you would prefer to remove the line altogether, simply delete the whole line.</p><p>I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.</p><p>If you enjoyed this tutorial, please consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing for future updates.</a></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/template?from=http://www.bloggerbuster.com" rel="tag">template</a> | <a href="http://www.technorati.com/posts/tag/hack?from=http://www.bloggerbuster.com" rel="tag">hack</a> | <a href="http://www.technorati.com/posts/tag/footer-section?from=http://www.bloggerbuster.com" rel="tag">footer-section</a> | <a href="http://www.technorati.com/posts/tag/web+2.0?from=http://www.bloggerbuster.com" rel="tag">web+2.0</a> | <a href="http://www.technorati.com/posts/tag/blog+design?from=http://www.bloggerbuster.com" rel="tag">blog+design</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-69752265233245181392007-10-15T11:39:00.001+01:002008-02-26T13:11:29.956+00:00How to use a background image for your blog<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJtBZXr0Up61xnIVSBpt6JoTqUUvTI87k2WeNvTu5yNFd-GvoHhhgZxTHdNA6aclM-rxZkbU9gQHIwHfXs_7kX5rAQiDkN0KjR-OV_1EtcyL9lTaj57o6IhGfHQXw_fJ8-vpaKyCroirE/s1600-h/wallpaper.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJtBZXr0Up61xnIVSBpt6JoTqUUvTI87k2WeNvTu5yNFd-GvoHhhgZxTHdNA6aclM-rxZkbU9gQHIwHfXs_7kX5rAQiDkN0KjR-OV_1EtcyL9lTaj57o6IhGfHQXw_fJ8-vpaKyCroirE/s320/wallpaper.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5121514182389619986" /></a>Instead of a simple background color, you could use a background image for your blog. This could be styled to look like wallpaper, it could repeat only vertically or horizontally, and can even be in a fixed position where it stays in place while the rest of the page scrolls down!<br/><br/>In this post, I will explain the how you can use background images for your blog using these different methods, with examples to demonstrate how the various effects can be achieved.</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>You can use virtually any image as a background for your blog. Usually background images are in JPEG format, though you could also use GIF's or BMP's. However, you must be able to host the image on an external server, as Blogger only hosts images which are contained in widgets or posts. <a href="http://www.bloggerbuster.com/2007/09/5-best-free-file-hosting-for-your.html">If you're looking for free image hosting, take a look at this post.</a></p><p>Before you begin to add the image to your background, find the image you would like to use, and make a note of the url where it is hosted.</p><p>As I mentioned in the introduction, there are different ways you can use background images. Here I will explain:
<ul><li>How to make an image repeat across the whole page (like wallpaper)</li>
<li>How to make a background repeat vertically down the page</li>
<li>How to make the background repeat horizontally across the page</li>
<li>How to create a fixed image background (which does not scroll with the rest of the page</li></ul>All of these methods are possible in Blogger Blogs, and are quite simple to achieve.</p><h3>How to make make an image repeat across the whole page (like wallpaper)</h3><p>This is the simplest of all background effects to achieve. Most people prefer to use a small image which tiles seamlessly. This ensures that the page loads faster, since the image has a small file size.</p><p>You can easily find such images for your background by doing a <a href="http://www.google.co.uk/search?q=tileable+backgrounds&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_enGB234GB234&aq=t">Google search for tileable backgrounds</a>, or could even create your own.</p><p>I created this simple image to use as an example, though you could just as easily use any other image:</p>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGwh-mHK0BvH5SuTbeezsl92bNKpmdSTIYNkihB02HaBET8LsgbXljYlryNJAXjGoSRPq7HjaT0u8gYLWESE16y4tWyEw3N58FTXgcmjIx3at5Dtn04R3ZPv2xhP-e-Zw2H0L7a5Ykow/s1600-h/fleur_bg.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGwh-mHK0BvH5SuTbeezsl92bNKpmdSTIYNkihB02HaBET8LsgbXljYlryNJAXjGoSRPq7HjaT0u8gYLWESE16y4tWyEw3N58FTXgcmjIx3at5Dtn04R3ZPv2xhP-e-Zw2H0L7a5Ykow/s400/fleur_bg.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5121534050908331298" /></a><p>To make this image a tiled background for your blog, go to Template>edit html and look for the styling properties for the body of your blog, which should look something like the example below:
<blockquote>body {<br/>
<span style="font-weight:bold;">background: $bgcolor;</span><br/>
margin:0;<br/>
color:$textcolor;<br/>
font:x-small Arial sans-serif;<br/>
font-size/* */:/**/small;<br/>
font-size: /**/small;<br/>
text-align: center;<br/>
}</blockquote>
We need to edit the line highlighted in bold, which is where we declare the background properties of the blog. To add a repeating image to the background, we simply add the following (highlighted in red) to the body properties:
<blockquote>body {<br/>
<span style="font-weight:bold;">background:<font color="red">url(http://www.imagehost.com/yourimage.jpg)</font>;</span><br/>
margin:0;<br/>
color:$textcolor;<br/>
font:x-small Arial sans-serif;<br/>
font-size/* */:/**/small;<br/>
font-size: /**/small;<br/>
text-align: center;<br/>
}</blockquote>
Where the URL of the image matches the URL of your background image location.</p><p>This will make the background image repeat across the whole page, like the example below:</p><p><iframe src="http://bloggerbuster.com/iframe_codes/bg_1.html" width="500px" height="200px"></iframe></p><p>If you prefer, you can also view <a href="http://bloggerbuster.com/iframe_codes/bg_01.html">the whole demonstration page here</a> which offers a better view of the overall effect then the iframe above.</p><h3>How to make a background image repeat vertically down the page</h3><p>This involves a slightly different addition of code to your template, but is essentially the same principle. Again you should find the "body" style declaration in your template and add the url for your background image. Also, you need to declare that the background will repeat on the "y" (vertical) axis, as in the example below:
<blockquote>body {<br/>
background:url(http://www.imagehost.com/yourimage.jpg) <font color="red"><span style="font-weight:bold;">repeat-y</span></font>;<br/>
margin:0;<br/>
color:$textcolor;<br/>
font:x-small Arial sans-serif;<br/>
font-size/* */:/**/small;<br/>
font-size: /**/small;<br/>
text-align: center;<br/>
}</blockquote>
Using the same example image as before, this will create the following effect (or <a href="http://bloggerbuster.com/iframe_codes/bg_2.html">look here</a> for a full page preview): </p><p><iframe src="http://bloggerbuster.com/iframe_codes/bg_2.html" width="500px" height="200px"></iframe></p><h3>How to make a background image repeat horizontally across the page</h3><p>This is very similar to the method we used to tile the image vertically. However, this time we tell the browser to repeat the image on the "X" (horizontal) axis, like this:
<blockquote>body {<br/>
background:url(http://www.imagehost.com/yourimage.jpg) <font color="red"><span style="font-weight:bold;">repeat-x</span></font>;<br/>
margin:0;<br/>
color:$textcolor;<br/>
font:x-small Arial sans-serif;<br/>
font-size/* */:/**/small;<br/>
font-size: /**/small;<br/>
text-align: center;<br/>
}</blockquote></p><p>This will produce an effect like the example below (use <a href="http://bloggerbuster.com/iframe_codes/bg_3.html">this link</a> for a full page preview):
<iframe src="http://bloggerbuster.com/iframe_codes/bg_3.html" width="500px" height="200px"></iframe></p><h3>How to create a fixed image background</h3><p>Usually a larger image is used for this method, so for this example we will use the following image from <a href="http://www.pyzam.com">Pyzam.com</a>):</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaxUTsL9rGBOYI-4ec1Z3USSTRX7mtEFXRq9HtnfCCW4mlPMlOJNaecOdfWVINGT-OpYNVyw6B0Y6nhR5WEN1zYwZLwrGWf04fF9MmwzTD-ekVbcPkKS521dZkjd0FT0vntXtZ3Lsn6K8/s1600-h/bg4.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaxUTsL9rGBOYI-4ec1Z3USSTRX7mtEFXRq9HtnfCCW4mlPMlOJNaecOdfWVINGT-OpYNVyw6B0Y6nhR5WEN1zYwZLwrGWf04fF9MmwzTD-ekVbcPkKS521dZkjd0FT0vntXtZ3Lsn6K8/s320/bg4.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5121591526160686386" /></a></p><p>To ensure this background image does not repeat, we need to add the "no-repeat" declaration to the background properties. Also, we need to add the statement that the background attachment is fixed, so that the background does not move with the page. Here again is an example of what your code should look like, with the changes highlighted in red:
<blockquote>body {<br/>
background:url(http://www.imagehost.com/yourimage.jpg) <font color="red"><span style="font-weight:bold;">no-repeat</span></font>;<br/>
margin:0;<br/>
color:$textcolor;<br/>
font:x-small Arial sans-serif;<br/>
font-size/* */:/**/small;<br/>
font-size: /**/small;<br/>
text-align: center;<br/>
<font color="red">background-attachment: fixed</font>
}</blockquote>
And here is the example of what this property achieves (<a href="http://bloggerbuster.com/iframe_codes/bg_4.html">use this link for a full page preview</a>):</p><p><iframe src="http://bloggerbuster.com/iframe_codes/bg_4.html" width="500px" height="400px"></iframe></p><h3>You can add color too!</h3><p>Unless you tile your background image across the whole page, you will be left with blank white areas. To fill these areas with the color of your choice, you should also add color to the background property.</p><p>If you already have a "$bgcolor" variable in your blog template, you can simply add this variable to the background properties, like this:
<blockquote>background: <font color="red"><span style="font-weight:bold;">$bgcolor</span></font> url(http://imagehost.com/yourimage.jpg) repeat-x;</blockquote>
However, if you do not have this variable in your template, or instead would prefer to declare the color yourself, you can do so using Hex values for the color you wish to display. There is a useful color calculator in the tools section which can generate the hex values require. Here is an example of how you can declare the hex values for the color in your background:
<blockquote>background: <font color="red"><span style="font-weight:bold;">#ff0000</span></font> url(http://imagehost.com/yourimage.jpg) repeat-x;</blockquote>
Using the first image as an example, this would generate a background like this:</p><p><iframe src="http://bloggerbuster.com/iframe_codes/bg_5.html" width="500px" height="200px"></iframe></p><h3>Positioning the background image</h3><p>By default, the background image will begin in the top-left corner of the page, regardless of how you want the background image to repeat (or not) across the page. However, you can specify where you would like the image to be placed by adding some extra variables to the background specifications.</p><p>Here is an example of the bldy's background property to show where you can place the positioning variables:
<blockquote>background: #ffff00 url(http://imagehost.com/yourimage.jpg) <font color="red"><span style="font-weight:bold;">positioning-variables-here</span></font> no-repeat;</blockquote>
And here is a list of the positioning variables you can use:
<ul><li>top left</li>
<li>top center</li>
<li>top right</li>
<li>center left</li>
<li>center center</li>
<li>center right</li>
<li>bottom left</li>
<li>bottom center</li>
<li>bottom right</li></ul></p><p>If you wanted to position a fixed image at the top center of a page for example, you could use the following code:
<blockquote>background; url(http://imagehost.com/yourimage.jpg) no-repeat top center;</blockquote></p><p>It is also possible to set the starting position of the background image using percentages on the X or Y axes, or by specifying the distance in pixels from the top or left of the page. However, this can be rather complicated, and since people use many different browsers and screen resolutions when browsing the internet, this can cause serious problems for blog design! If you would still like to know more about this, I would recommend reading the information on the <a href="http://www.w3schools.com/css/css_background.asp">CSS background page at W3 schools</a>.</p><p>I hope this tutorial has helped you understand how to use background images in your blog, and covered all aspects of how these different effects may be achieved. As always, your comments and opinions are much appreciated!</p><p>If you would like to receive updates of new tutorials and posts from Blogger Buster, please consider <a href="http://www.bloggerbuster.com/2007/05/blogger-buster.html">subscribing to our feed</a>.</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/background+image?from=http://www.bloggerbuster.com" rel="tag">background+image</a> | <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/template?from=http://www.bloggerbuster.com" rel="tag">template</a> | <a href="http://www.technorati.com/posts/tag/backgrounds?from=http://www.bloggerbuster.com" rel="tag">backgrounds</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-28792017740762017542007-10-09T09:44:00.000+01:002008-02-26T13:11:29.957+00:00How to create a table of contents page for your blog<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkINizeh2PuvKK_Xp09WeLO3xDMRX4Wb-Mr9ZK3VUvDtYsKbx59gUC9_xzcFTyhDDXHYSXjobppchuntekiJQpdks8CZLuRrtcT5NcWW1ZC9pXWXwye3vEP7FZV84p9FXZRVA8Pw6j0Q/s1600-h/toc.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkINizeh2PuvKK_Xp09WeLO3xDMRX4Wb-Mr9ZK3VUvDtYsKbx59gUC9_xzcFTyhDDXHYSXjobppchuntekiJQpdks8CZLuRrtcT5NcWW1ZC9pXWXwye3vEP7FZV84p9FXZRVA8Pw6j0Q/s320/toc.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5119256406922513570" /></a>Until recently, I used <a href="http://beautifulbeta.blogspot.com/2007/04/blogtoc-widget-released.html">Beautiful Beta's</a> excellent "Table of contents" hack for this blog. This technique loaded the table of contents above other posts, and was accessible from a link in the sidebar. The only downside of this hack is that it significantly slows blog loading time, especially when your blog has more than 100 posts.</p><p>For the new template, I have modified this hack to show the <a href="http://www.bloggerbuster.com/2007/05/toc.html">table of contents for Blogger Buster</a> on a post page instead. In this post I will explain how I did this.</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>Beautiful Beta's TOC hack requires two components. There is the code which calls the contents of your blog, and provides a link in the sidebar:
<blockquote><div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
</blockquote>
And the div element which features in a widget above your blog posts:<br/><br/>
<span style="font-weight:bold;"><div id="toc"></div></span></p><p>We need to combine both of these elements inside a post page, which will then create the link to show the contents of your blog, and open this in the actual post page.</p><p>First, create a new blog post and edit this in HTML mode, instead of rich text compose mode. Then, copy both elements of code from Beautiful Beta's hack into this page, like this:</p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPeez11sy1V8NzrPWlnzL3Q5rcF2YaTT2DwgIg7qZb8uyNOo1sgKHuTsznNu4x1KtV655BKcO0hhEYs8bF-qCY3QmIYaIq3JBzmifKYJ9QZJEXxaeB30kSHEyo41nNA-pc_w7f2pRHvVM/s1600-h/ScreenHunter_15+Oct.+09+09.58.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPeez11sy1V8NzrPWlnzL3Q5rcF2YaTT2DwgIg7qZb8uyNOo1sgKHuTsznNu4x1KtV655BKcO0hhEYs8bF-qCY3QmIYaIq3JBzmifKYJ9QZJEXxaeB30kSHEyo41nNA-pc_w7f2pRHvVM/s400/ScreenHunter_15+Oct.+09+09.58.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5119259185766354098" /></a></p><p>Don't forget to change "YOURBLOG.blogspot.com" to the actual URL of your blog!</p><p>Then simply save the page, and you are done!</p><p>If you have more than 100 posts in your blog, you will need to repeat the line which calls the posts feed from your blog, modifying this so that it begins from the 101st post, like this:
<blockquote><script src="script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"></script></blockquote>
If you have more than 200 posts, you will need to add extra lines where the start-index is 201, and so on.</p><p>This ensures all of your posts are included in the original table of contents.</p><P><span style="font-weight:bold;">IMPORTANT:</span> if you have already installed the TOC hack in your sidebar and above the main posts column, you will need to delete these two widgets to ensure they don't interfere with the loading of the table of contents on your post page, and also slow down blog loading time!</p><h3>How it works</h3><p>The TOC hack uses javascript to call the post titles from your blog's feed, and then displays them in a tabular format, arranged by post title, date or label.</p><p>This version of the TOC hack works almost exactly the same as Beautiful Beta's: the reader must click on the link to display the whole table of contents in the page, and is shown a message to explain that the page is loading. The main advantage of using a post page to display the TOC is that page loading time is significantly reduced for the whole blog, and only the TOC post page had a longer loading time.</p><p>I would have preferred to have the TOC load instantly with the page, but after some experimentation, I believe that I would need to add an "onload" function to the head of my template, which would load the TOC along with the rest of the blog even though it is only displayed on one page. However, I have tried to contact Beautiful Beta to verify this, and will of course post more on this subject here if this is possible.</p><h3>Further modifications</h3><p>If you take a look at my own Table of contents page, you will notice that I have also slightly modified some other elements of the hack:
<ul><li>Changed part of the javascript to include a message above the table which explains how the contents can be used.</li>
<li>Added styling to the table to ensure it matches the styling of my blog</li>
<li>A slight change to the text above the "Show TOC" link</li></ul></p><p>To add the styling for the template, I added some lines of extra CSS to the <b:skin> area of my template. Here is the CSS styling I added for your reference if you would prefer to also style your own TOC post pages:
<iframe src="http://bloggerbuster.com/iframe_codes/toc_css.txt" width="500px" height="200px" scrolling="yes"></iframe></p><h3>The code I used</h3><p>If you would like to use the modified javascript used here at Blogger Buster to display the TOC hack in a post page, feel free to copy the code below and paste this into your post page:
<blockquote><div id="toclink"><p>On this page you can see the whole list of posts published.</p>
<p>To show the full table of contents, please click on the link below (this may take a few moments to load)</p>
<p><a href="javascript:showToc();"><b>Show table of contents</b></a></p>
<br/><br/><br/><br/></div>
<script style="text/javascript" src="http://bloggerbuster.com/scripts/blogtoc.js"></script>
<script src="http://YOURBLOGURL.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<div id="toc"></div></blockquote></p><p>Don't forget to change "YOURBLOGURL" to the proper url for your blog!</p><h3>Adding a link to your Table of Contents page</h3><p>You will probably want to make a link in your sidebar to the table of contents page. Just visit the page you have created and copy the url from the address bar. Then create a new text widget (or HTML/Javascript if you prefer), create your link text, and then make this text into a hyperlink using the url you have copied. Then your blog readers will easily be able to find your table of contents page and will not be troubled by long page loading times!</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/toc?from=http://www.bloggerbuster.com" rel="tag">toc</a> | <a href="http://www.technorati.com/posts/tag/table+of+contents?from=http://www.bloggerbuster.com" rel="tag">table+of+contents</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/hack?from=http://www.bloggerbuster.com" rel="tag">hack</a> | <a href="http://www.technorati.com/posts/tag/beautiful+beta?from=http://www.bloggerbuster.com" rel="tag">beautiful+beta</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-44462230741477586232007-10-08T14:43:00.000+01:002009-07-26T02:01:38.771+01:00How to create a calendar widget for your blog<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs5x4spNDHhPc-ekOsC8lBmwpGu_0LYrBctDGR45HZiWeerfYyv9TejLtgueOkMyRCTwaDzRwLhau81mdeL8UBHeE5URDJw4i0V_Zp4pIir1pv70uMQdm3LruSkawUZ31zD1wv4M_lFUg/s1600-h/vcalendar_alt.JPG"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs5x4spNDHhPc-ekOsC8lBmwpGu_0LYrBctDGR45HZiWeerfYyv9TejLtgueOkMyRCTwaDzRwLhau81mdeL8UBHeE5URDJw4i0V_Zp4pIir1pv70uMQdm3LruSkawUZ31zD1wv4M_lFUg/s320/vcalendar_alt.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5119072556552440978" /></a>In this template, I use a calendar style widget to display the posting date of my posts. This style has recently cropped up in many Web 2.0 style Wordpress blogs, and is easily reproduced in Blogger layouts blogs too. Here I will show you how to create your own calendar widgets to feature at the top of each post.</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 Blogger hack uses a combination of javascript, CSS and some slight modification to your template to display the date a post was published over a calendar-style background. There are only three main steps to change your date header to a calendar widget, so don't worry if my explanation seems rather complicated! Here is what you should do:
<ol><li>First, go to Settings>Formatting, and change the date header format to YYYY-MM-DD like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHHK1Ho1j9yHW_SBW4NdM92PrGk2oogwHu6-JUqfGLvq-rMAlzsx0Cv1wlHyyqrckHGTjqzj7c9p022BTs6k1mOZwqfp3KTZeSq3Pwgy3V8N8CFe3_GnQZvSI9lCf3P4i8ZbCt1IalRI/s1600-h/ScreenHunter_14+Oct.+08+15.00.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHHK1Ho1j9yHW_SBW4NdM92PrGk2oogwHu6-JUqfGLvq-rMAlzsx0Cv1wlHyyqrckHGTjqzj7c9p022BTs6k1mOZwqfp3KTZeSq3Pwgy3V8N8CFe3_GnQZvSI9lCf3P4i8ZbCt1IalRI/s320/ScreenHunter_14+Oct.+08+15.00.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5118965710651018370" /></a>
This enables the script we will be using to correctly parse the date header format.</li>
<li>Next, go to Template>Edit HTML and ensure you have checked the "expand widget templates" box. Now, find the <data:post.dateHeader> section in the posts widget (if you search for "dateHeader" you should be able to find this quickly).
<br/>
The "data:post.dateHeader" line may also be wrapped in headings tags (eg: <h2> or <h3> etc.). Instead, we need to wrap this in <div> tags with a class of "date-header", so the line will look like this:
<blockquote><div class="date-header"><data:post.dateHeader/></div></blockquote>.
Once you have changed this line, save your template.</li>
<li>Finally, open up the Edit HTML section again (no need to expand widget templates this time). Just before the closing </head> tag, add this section of code:
<blockquote><!-- calendar widget --><br/>
<script src='http://bloggerbuster.com/scripts/fastinit.js'/><br/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/><br/>
<script src='http://bloggerbuster.com/calendar.js'/><br/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/><br/>
<!-- end calendar widget --></blockquote>
Save your template and view your blog to see the new calendar widget in place!</li></ol></p>
<p>I originally found a tutorial for this Blogger hack over at Orangevolt which uses a script to parse date headers wrapped in <H2> tags. However, I decided to modify both the code and the image used which ensures greater flexibility over where the widget can be placed.</p><h3>Customizing the calendar widget</h3><p>If you would prefer to customize the calendar widget to suit your own taste and style, you can do this by modifying the CSS styling used for this hack.</p>There are two ways of doing this: you can either <a href="http://bloggerbuster.com/calendar.css">download the CSS file</a>, modify and upload to your own server, or copy the styling below into the b:skin section of your template to change the style from within the template itself.<p><p>This is the styling I used for the calendar widget:
<blockquote>span.cal {<br/>
background:transparent url('images/calendar.jpg') no-repeat scroll 0%;<br/>
float:left;<br/>
margin-right: 10px;<br/>
height:36px;<br/>
width:35px;<br/>
font-family:"Helvetica",Tahoma,Arial;<br/>
font-size-adjust:none;<br/>
font-style:normal;<br/>
font-variant:normal;<br/>
font-weight:normal;<br/>
}<br/>
span.cal_month {<br/>
color:#FFFFFF;<br/>
display:block;<br/>
font-size:10px;<br/>
line-height:11px;<br/>
margin-left:1px;<br/>
padding-top:1px;<br/>
text-align:center;<br/>
text-transform:uppercase;<br/>
}<br/>
span.cal_day {<br/>
color:#999999;<br/>
display:block;<br/>
font-size:18px;<br/>
line-height:18px;<br/>
margin-left:1px;<br/>
padding-top:4px;<br/>
text-align:center;<br/>
text-transform:uppercase;<br/>
}<br/>
.sidebar {<br/>
margin-bottom: 20px;<br/>
}</blockquote>
As you can see, there are many ways the calendar widget may be styled, including:
<ul><li>The image background (use the full url if you decide to change this image!)
<li>The height and width of the calendar icon</li>
<li>The alignment of the calendar (change "float: left" to "float: right" if you would prefer the widget to appear on the right of the page, for example).</li>
<li>The font and text sizes</li></ul>
plus many more examples than I can list here.</p><p>I would suggest that it is better to link to a css file on an external server than to use this styling inside the template. This is because I often noticed problems with the styling in Internet Explorer when I experimented with the styling in the b:skin area. There seem to be no problems at all when linking to the external style sheet.</p><p>You may also like to experiment with the positioning of the date header in your template. In this blog for example, I placed the date header code directly before the post title section, which ensures it appears to the left of the post title. </p><h3>Why doesn't the calendar appear on some of my posts on the main/archive pages?</h3><p>The date header will only appear on the top most item which is posted on a given day. So if you post say, three times in a single day, only the newest post will feature the calendar widget. So far, I haven't figured out a way to make this appear for each and every post!</p><p><span style="font-weight:bold;">Note: This post has now been edited to correct an error in the code which may have prevented this hack from working in your blogs. I do apologize for this problem guys! Everything should work fine for you now!</span></p><p>Please let me know what you think of the calendar widget by leaving your comments and opinions below.</p><p class="snap_noshots"><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/calendar?from=http://www.bloggerbuster.com" rel="tag">calendar</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/web+2.0?from=http://www.bloggerbuster.com" rel="tag">web+2.0</a> | <a href="http://www.technorati.com/posts/tag/style?from=http://www.bloggerbuster.com" rel="tag">style</a> | <a href="http://www.technorati.com/posts/tag/blog?from=http://www.bloggerbuster.com" rel="tag">blog</a> | <a href="http://www.technorati.com/posts/tag/date+header?from=http://www.bloggerbuster.com" rel="tag">date+header</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-40431576338267476792007-10-08T13:33:00.000+01:002008-02-26T13:11:29.960+00:00Inline comments for classic Blogger templates<p>After posting the hack for inline comments in Blogger layouts templates, I was asked if the same is also possible for classic html based templates. The answer is "yes" it is certainly possible! So for the benefit of those using classic Blogger templates (non-layouts) I will explain how to edit your template to feature inline comments on post pages.</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>The hack for inline comments in classic templates is perhaps a little simpler than for layouts templates, and is very easy to do. Also it is possible to preview the changes with classic templates (including seeing your post pages) so that you can be sure the inline comments act correctly before saving your template.</p><p>Here is my step by step guide:
<ul><li>First of all, make a back-up of your template by copying the whole of your existing template into a text editor. This is just a precaution in case you make a mistake and need to restore your template at a later point.</li>
<li>Next, go to the settings section of your Blogger dashboard and click on "Comments". You need to choose "Show comments in a pop-up window" for this hack to work effectively. Save this setting, then go to "Formatting". Choose "Enable post pages" if you have not already done so, then save this setting too.</li>
<li>Next open the "Edit template" section and search for this section in the template code:
<blockquote> <p class="post-footer"><br/>
<em><$I18NPostedByAuthorNickname$> <$I18NAtTimeWithPermalink$></em><br/>
<MainOrArchivePage><BlogItemCommentsEnabled><br/>
<br/>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a><br/>
<br/>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled><br/>
<font color="red"><span style="font-weight:bold;"><a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a></span></font><br/>
</BlogItemBacklinksEnabled><br/>
</MainOrArchivePage> <$BlogItemControl$><br/>
</p></blockquote>
Change the line highlighted in red to this instead:
<blockquote><a class="comment-link" href="<$BlogItemPermalinkUrl$>#comments"><span style="text-transform:lowercase"><$I18NNumComments$></span></a></blockquote></li>
<li>Next, find the comments section of your template. This may be highlighted by comments to explain what the section is for, and should look something like this:<br/><br/>
<iframe src="http://bloggerbuster.com/iframe_codes/old_blogger_comments.txt" width="500px" height="200px" scrolling="yes"></iframe><br/>
This section of code displays comments on post pages, and also provides the link to the comments pop-up page. We need to hide this section, rather than delete it, and also add code to display the iframe which will contain both existing comments and the "create comment" box.<br/><br>Take a look at the modified comments section below, and add all of the code which is highlighted in <font color="red"><span style="font-weight:bold;">RED</span></font>:<br/>
<iframe src="http://bloggerbuster.com/iframe_codes/old_blogger_comments.html" width="500px" height="200px" scrolling="yes"></iframe></li>
<li>At this point, you may want to preview your template to ensure everything looks okay. You can click on the item titles to get to the post pages and preview the inline comments too! (this is something we "layouts" users are unable to do).</li>
<li>If all looks okay and the inline comments appear as they should, then save your template and enjoy your new inline comments feature!</li></ul></p><p>I have tested this extensively on one of my test blogs and have found this seems to work fine in both Firefox and Internet Explorer browsers. When you view post pages in IE, you may receive a notice that you are viewing pages over a secure connection; this is because Blogger's commenting system uses a secure connection, and since you are viewing comments inside the post page, the secure connection is activated.</p><p>I hope this enables classic template users to feature inline comments in their blogs too! 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/classic+blogger?from=http://www.bloggerbuster.com" rel="tag">classic+blogger</a> | <a href="http://www.technorati.com/posts/tag/old+blogger?from=http://www.bloggerbuster.com" rel="tag">old+blogger</a> | <a href="http://www.technorati.com/posts/tag/inline+comments?from=http://www.bloggerbuster.com" rel="tag">inline+comments</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-336017727514207712007-10-04T15:52:00.000+01:002008-02-26T13:11:29.964+00:00Create "Wordpress" style pages for your Blogger blog<p>A few people have asked how I created "Wordpress style" pages which are accessible from the header section. Since I will be making much use of these pages in the near future, I thought it best to explain how Blogger users can create their own blog pages.</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>Wordpress blogs can include blog pages; these are often used to provide an "about" page or contact information. Such "pages" are separate from the main blog: they do not appear on the main page or archives, and links to these pages from within the template are usually created dynamically. However, updates to Wordpress pages are still included in the blog's feed.</p><p>Although Blogger does not currently use blog pages in the same manner as Wordpress, we are still able to mimic this in our blogs with a little effort.</p><p>The blog pages you see in my blog are actually regular blog posts which I have make links to from within the template itself. This is how you can create your own:
<ol><li>If you haven't already done so, change your "Enable post pages" setting to "on" in your Blogger dashboard. This is done in the Settings>Publishing section, and enables each blog post to appear on it's own page.</li>
<li>Next, you will need to create your "blog pages". To do this, just create a regular post with the title and content you wish to offer as a blog page. For example, an "About" page could be titled "About this blog" with the content being a description of your blog.</li>
<li>Since we cannot omit this post from the archives pages, you will want to consider how easily a reader could find this post within the archives! Usually I change the publishing date when I create post pages to a much earlier date: this ensures that the page does not get mixed in with regular posts so easily, and since such pages are usually "timeless" (they are not news items or contrained by current events) I doubt many readers will care about the date featured on this particular page.<br/><br/>To change the posting date of a post, so it appears much further back in the archives (and not on your main page), click on "Post Options" near the bottom of the post editing box, and alter the date manually in the right hand section.</li>
<li>Once you have created your post and changed the date (if you prefer to, that is), you can publish your post. You will need to publish this post in order to discover the permalink to this post so that you can then link back to it from your header or sidebar. A "permalink" is the URL of a particular post page. You can find the permalink url for this page in your browsers' address bar.</li>
<li>To find the permalink for the blog page you have just created, you can either locate this page in your archives, or go to "Edit Posts" in your dashboard click on the "View post" link for this post. Once you have the permalink, paste this into your favorite text editor for later use.</li>
<li>Now you will probably want to create the link to your post page somewhere in your template. The easiest place to place this link is in a widget in your sidebar or footer (though if you are confident in HTML you can also place this elsewhere). <br/><br/>To create a regular text link to your blog page, you could use a simple text widget. Write the link text you would like your readers to see, then highlight this text. Click on the hyperlink icon in the editing page, and paste your blog permalink into the box which pops up. Save the widget, and then look at your blog to see the new link to your blog page.</li>
<li>If you would prefer to use an image to link to your post page, you will need to create an image to use as a link, and host this on an external image host. Then create an HTML/Javascript widget, and insert your image using the <img> function, like this:
<blockquote><img src="http://the-url-of-your-image.com/yourimagename.jpg" /></blockquote>
Then to make this image become a link, you will also need to add anchor links around the image, like this:
<blockquote><font color="red"><span style="font-weight:bold;"><a href="yourpermalinkurl"></span></font><img src="http://the-url-of-your-image.com/yourimagename.jpg" /><font color="red"><span style="font-weight:bold;"></a></span></font></blockquote></li>
<li>Save your widget and then view your blog to see the image link to your blog page.</li></ol></p><p>You can repeat this for any number of blog pages you would like to create for your blog. As I mentioned before, the only disadvantage is that these pages will appear in your archives, and they will also be published in your blog feed. However, I'm sure the benefits far outweigh the drawbacks of this method, since these blog pages can provide an useful information about your site for your readers.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/blog+pages?from=http://www.bloggerbuster.com" rel="tag">blog+pages</a> | <a href="http://www.technorati.com/posts/tag/wordpress+style?from=http://www.bloggerbuster.com" rel="tag">wordpress+style</a> | <a href="http://www.technorati.com/posts/tag/about+page?from=http://www.bloggerbuster.com" rel="tag">about+page</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-64193778479448192962007-09-28T16:38:00.000+01:002009-07-26T02:01:57.286+01:00A new style of AddThis widget now available<p>I'm sure you all know how useful I find the AddThis social bookmarking widget by now. Well, the makers have created a new version which features a drop-down menu when your mouse hovers over it. Try it here is you like:</p><p>
<!-- AddThis Bookmark Button BEGIN -->
<script type="text/javascript">
addthis_url = location.href;
addthis_title = document.title;
addthis_pub = 'amandaf';
</script><script type="text/javascript" src="http://s7.addthis.com/js/addthis_widget.php?v=12" ></script>
<!-- AddThis Bookmark Button END -->
</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 install this new version of the AddThis button, you will need to have an account with AddThis as the Javascript includes your unique username in order to function properly. Of course, the service is still free to use though!</p><p>This new style of AddThis button can be installed by visiting this page in the AddThis blog. Simply log in using your username and password (or create a free account if you don't already have one set up). On the next page you can choose your button style: this new version is lower down the page. Don't worry that it currently says "TypePad and Blogger widgets coming soon" as you inly need to copy the Javascript widget into your blog template, which should be present in the iframe below.</p><p>If you already have an AddThis button in your template, simply paste the new code over the top and save your template. If you do not already feature an AddThis button, you should take the following steps:
<ol><li>Go to Template>Edit HTML and ensure the "expand widget templates" box is ticked.</li>
<li>Find this section in your blog template:
<blockquote><p><data:post.body/></p></blockquote>
<li>Paste the AddThis code right after this line, save your template and view your new social bookmarking feature!</li></ol></p><p>As Polyname suggests, it may be nescessary to wrap your AddThis code in <div> tags in order for it to properly display in your template, though for most templates I've found it works fine without these extra tags.</p><p>I find this new style to be more user friendly as you are shown the sites which could be used to bookmark the page rather than being taken to a seperate page to do your choosing. The only downside is that I can't include this widget in new templates due to the necessity of user ID in the code.</p><p>Thanks to <a href="http://polyname.blogspot.com/">Polyname</a> for the email telling me about this great new style! I do appreciate the hint.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/addthis?from=http://www.bloggerbuster.com" rel="tag">addthis</a> | <a href="http://www.technorati.com/posts/tag/social+bookmarks?from=http://www.bloggerbuster.com" rel="tag">social+bookmarks</a> | <a href="http://www.technorati.com/posts/tag/button?from=http://www.bloggerbuster.com" rel="tag">button</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/add+on?from=http://www.bloggerbuster.com" rel="tag">add+on</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-66747303886480169382007-09-27T22:45:00.000+01:002009-07-26T02:01:57.287+01:00Making your links more interactive with Snap-Shots<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5GNVkjvWdCnvXsRLK6KGPU6OHbK0Mv2rZi4o7wAmWCgFxyIqjDDD4xxvF7aebmF3V5T5ck3N7cf5kFLYQg6C_8ZN16fbk4_12_CwyxuA1nrUQdjcMNx4FcLTWtUlmfQyyJo4sCTfJGUs/s1600-h/Untitled-1.jpg"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5GNVkjvWdCnvXsRLK6KGPU6OHbK0Mv2rZi4o7wAmWCgFxyIqjDDD4xxvF7aebmF3V5T5ck3N7cf5kFLYQg6C_8ZN16fbk4_12_CwyxuA1nrUQdjcMNx4FcLTWtUlmfQyyJo4sCTfJGUs/s320/Untitled-1.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5115007017819458226" /></a>
<p>While researching design techniques for new templates, I discovered <a href="http://www.snap.com/">Snap-Shots</a>: a way of making your links interactive by displaying previews of websites, video, RSS feeds and audio as the readers mouse hovers over them. Although I've seen this on other sites before, I never realised this service was free to use, and also that it barely impacts page loading time at all.</p><p>Here is a preview of what Snap-Shots can do for your blog. Read on if you'd like to know more!</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><a href="http://www.snap.com/">Snap-Shots </a>creates a pop-up preview of whatever content your link points to. You can use this to display previews of websites, videos, recent RSS entries and even audio if that is what your link points to.</p><p>Installation is really easy, especially for Blogger blogs. The process can be summarized in four steps:
<ol><li>Head on over to Snap-Shots and click on the "get started" link.</li>
<li>Choose your color scheme, pop-up size and upload your logo if you would like this to be displayed too. You can also set advanced options, such as wether to only show a preview, show internal links, etc.</li>
<li>Register your details (website URL and email address).</li>
<li>Choose to install Snap-Shots as a widget in your blog using the widget installer.</li></ol>
And that's basically it! From this point forward, all external links in your blog can feature previews when your readers hover their mouse over the links!.</p><p>Snap-Shots is one of the features I am working into the new look Blogger Buster template. However, with the default installation I discovered a few things I wanted to tweak, which I anticipate other Bloggerrs may find slightly annoying too.</p><p>Most notably, I didn't want all external links to feature previews, especially links to my feeds, trackbacks and comments. By default, Snap-Shots will be linked to all links in your blog after installation. To prevent previews for certain links or blocks of content, you will need to add the class "snap_noshots" to these areas.</p><blockquote>For individual links, you can add the class like this: <a href="yoururl" class="snap_noshots">Link text here</a></blockquote><blockquote>To prevent links for a whole div (eg: your sidebar), you can add it like this: <div id='your_element_id' class='snap_noshots'></blockquote>
<p>If your link or element already contains a class, you can simply add this as another class by enclosing the "snap_noshots" within the same quotation marks, like this:
<blockquote><a href="your_url" class="link_class snap_noshots">link text here</a></blockquote>
<blockquote><div id='sidebar-wrapper' class='sidebar snap_noshots'></blockquote></p><p>Another of my preferences was to display the previews only when the reader hovers over the snapshot icon (the speech-bubble), rather than the whole of the link text. I feel this gives more preference as to wether previews are displayed, and also prevents frustration at continuous image pop-ups when they are not required. This can be enabled in the settings for Snap-Shot itself: simply edit your preferences and choose "Snap-Shots triggered by the icon only". Simple as that!</p><p>With these tweaks in place, I'm quite happy with the result in my test blog and will be implementing Snap-Shots into the all-new Blogger Buster site as I feel this will enhance your reading experience since you'll be able to preview sites and templates linked to in my posts without having to leave the page you're reading to do so!.</p><p>Snap-Shots is also very easy to uninstall if you decide you'd orefer not to use it any more: just delete the widget from your blog (which contains the script call to display the previews) and the pop-ups will completely disappear.</p>Please let me know what you think of this free service by leaving your comments and opinions below.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/links?from=http://www.bloggerbuster.com" rel="tag">links</a> | <a href="http://www.technorati.com/posts/tag/interactive?from=http://www.bloggerbuster.com" rel="tag">interactive</a> | <a href="http://www.technorati.com/posts/tag/snap+shots?from=http://www.bloggerbuster.com" rel="tag">snap+shots</a> | <a href="http://www.technorati.com/posts/tag/template?from=http://www.bloggerbuster.com" rel="tag">template</a> | <a href="http://www.technorati.com/posts/tag/modifications?from=http://www.bloggerbuster.com" rel="tag">modifications</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-24106549023832402732007-09-26T09:53:00.000+01:002008-02-26T13:11:29.968+00:00Create rounded corners without using external images<p>Rounded corners are one of the biggest web design trends. Usually rounded corners are created using images as backgrounds for the section we want to appear rounded (such as those used in the Rounders template or created using Cornershop). However, it is also possible to create rounded corners using only CSS styling!</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><a href="http://www.spiffycorners.com/">Spiffy corners</a> is a site which can generate the code for you, based on the foreground and background colors you specify. Then all you need to do is add the code to your blog template, and your rounded corners will appear in your sidebar, your main posts section, or indeed anywhere you wish in your blog!</p><p>The rounded corners wizard is really simple to use: all you need to do is specify the colors you wish to use and a preview image is generated for you. You can then choose the amount of "roundness" you require and the wizaed will generate two sets of code for you to use: the CSS style code, and the html code to wrap around your blog elements. Then all you need to do is copy and paste these codes into your blog template.</p><p>For Bloggers, this is very advantageous, since this dismisses the need for externally hosted images to create the rounded corner effect. Also, this helps speed up page loading time as the corners are created in the style rather than by calling images from the server.</p><p>I will certainly be using this technique in my new design for the site, and heartily recommend this as an alternative for those who wish to design Web 2.0 style corners for their blog templates. Take a look at the <a href="http://www.spiffycorners.com/">Spiffy Corners</a> site and let me know what you think too.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/rounded+corners?from=http://www.bloggerbuster.com" rel="tag">rounded+corners</a> | <a href="http://www.technorati.com/posts/tag/web+design?from=http://www.bloggerbuster.com" rel="tag">web+design</a> | <a href="http://www.technorati.com/posts/tag/blog+templates?from=http://www.bloggerbuster.com" rel="tag">blog+templates</a> | <a href="http://www.technorati.com/posts/tag/web+2.0?from=http://www.bloggerbuster.com" rel="tag">web+2.0</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-45709622065204056822007-09-21T17:31:00.000+01:002009-07-26T02:05:50.600+01:00How I copy widgets from one template to another<p>When you choose a new default Blogger template, all of your widgets are copied over to the new template. However, if you try to upload a customized template (such as the ones featured here), you will probably get a message asking if you want to delete most of your existing widgets. I am often asked "how can I copy my widgets over to a new template?", so in this tutorial I will share the method I use to do this quickly and painlessly.</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>Your blog widgets are saved in your Blogger account, rather than in the actual template of the blog. The widgets are called to your blog by anchors within the template which look like this:
<blockquote><b:widget id='<span style="font-weight:bold;">HTML1</span>' locked='false' title='<span style="font-weight:bold;">My Widget Title</span>' type='HTML'/></blockquote>
As you can see in this example, each widget in your blog is given a unique identity (in this case, "HTML1") and a title, which is the same as the title you provide when you create the widget.</p><p>If you upload a template to your blog which contains the same widget identifiers, then the widgets will be called from your account by the template, and will display in your blog as normal. On the other hand, if you upload a template which does not contain the same widget identifiers, you will be prompted to delete widgets from your account.</p><p>So to ensure you can maintain your widgets from your existing blog template in your new blog template, we must copy these widgets over to the new template before uploading this to your blog.</p><p>The method I use to accomplish this is by using a second "test blog". I have explained all about creating and using a test blog in <a href="http://www.bloggerbuster.com/2007/09/how-to-set-up-test-blog-and-why-you-may.html">this post</a>. If you don't already have a test blog available to use, you will need to create one temporarily to help you copy your widget identifiers over to your new template. Once you have created your test blog, here is the method for copying over your widgets from your old template to your new one:</p>
<ol><li>Log in to your Blogger dashboard.</li>
<li>You will need to be able to edit both your existing blog template and your test blog template, so it's advisable to have two browser windows (or tabs) open at the same time. You can easily do this by keying CTRL+N to bring up a new page. So for the moment your Blogger dashboard will be available in both browser windows.</li>
<li>Now, in the first browser window, select your test blog and go to Template>Edit HTML. Click on the "Upload New Template" link near the top of the page and upload the new XML template you wish to adapt for your main blog. Once this template has uploaded, deselect the "expand widget templates" box.</li>
<li>In the second browser window, select your existing blog template and again go to Template>Edit HTML. Do NOT check the "expand widget templates box", as this will make things much easier for you. Now, locate the widget content identifiers in your template sidebar. Most likely, the section will look something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBi79yLcpjHS5E0acg1VitCfFkYr3X5V3MF9SVI_gFFiit6HWllhuTCEu9JIvoOvHTb1jKD1PllNtde0v8aFHsMsLXEKOm9HJLQu6PwkcYUbvk6hLKXSvO6R8goSqoXz1dqpbhnKP8Fk/s1600-h/Publication1.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBi79yLcpjHS5E0acg1VitCfFkYr3X5V3MF9SVI_gFFiit6HWllhuTCEu9JIvoOvHTb1jKD1PllNtde0v8aFHsMsLXEKOm9HJLQu6PwkcYUbvk6hLKXSvO6R8goSqoXz1dqpbhnKP8Fk/s320/Publication1.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5112696398428654114" /></a>
The code featured inside the red box displays the identifying code for your widgets, which calls the widgets to appear in your blog. You need to copy all of these <b:widget...> sections to yout clipboard, or paste into Notepad for easy editing in a few moments.</li>
<li>Once you have copied the widget identifiers from your old template, go back to the browser window in which you can edit your new template.</li>
<li>Find this section in your blog template:
<blockquote><div id='sidebar-wrapper'><br/>
<b:section class='sidebar' id='sidebar' preferred='yes'><br/>
There may or may not be content here...
</b:section><br/>
</div></blockquote>
If there are any widgets defined here, it is advisable to delete them. Otherwise you may end up with duplicated widgets. Then in their place, paste the widget codes from your old template:
<blockquote><div id='sidebar-wrapper'><br/>
<b:section class='sidebar' id='sidebar' preferred='yes'><br/>
<font color="red">Paste the widget identifiers here</font>
</b:section><br/>
</div></blockquote><br/><br/>
If there are no widgets present in the sidebar of your new template, the code may look like this instead:
<blockquote><div id='sidebar-wrapper'><br/>
<b:section class='sidebar' id='sidebar' preferred='yes'/><br/>
</div></blockquote>
In this case, you should delete the trailing slash from the end of the line (highlighted in red). Make a line break then paste your widget content as before. Then finally create another line break and add the following line:
<blockquote></b:section></blockquote>The finished result should look something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5x9WVAGiw8FmazwOZMClnrCN-TACM0YRN8oNseHmSMhm47uAD2AkfhhJ55y3-ijo_EdTDs5j_LjBuqkZkLuOI-bwiTG5vkrQi7mIBlcB6gZIRwod88UZ3sWHiBlkGoTzlJK5dlEEU8E/s1600-h/ScreenHunter_02+Sep.+21+17.27.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5x9WVAGiw8FmazwOZMClnrCN-TACM0YRN8oNseHmSMhm47uAD2AkfhhJ55y3-ijo_EdTDs5j_LjBuqkZkLuOI-bwiTG5vkrQi7mIBlcB6gZIRwod88UZ3sWHiBlkGoTzlJK5dlEEU8E/s320/ScreenHunter_02+Sep.+21+17.27.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5112699735618243122" /></a>
</li>
<li>IMPORTANT! Do not preview your template at all during this process! If you do, you run the risk of duplicating the widgets which will cause you many problems. This seems to be a glitch on Blogger's behalf rather than an error of this method. In any case, do not preview the template.</li>
<li>At this point, you should save the test blog template, after which you can view your blog in the normal manner. You will notice that no widget content is actually showing, only the widget titles. This is perfectly normal: as I mentioned earlier, the widget content is stored in the settings for your original blog.</li>
<li>Okay, now we have copied over the widgets, we can download the XML template ready to transfer over to the original blog. To do this, go to Template>Edit HTML and select "Download full template" near the top of the page. Save the template to your computer with a name you can easily identify.</li>
<li>Now back to the other browser window where you should have the Edit HTML page for your original blog still on the page. Here you should look for the "upload new template" section near the top of the page. Browse for the template you just downloaded from your test blog and upload it. You should NOT receive any error messages, like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEginbZZ77LIN0sHeTKmdcSfpRwKAnD6ziH62lLZdEsA_-MY1BqTUSiDBjdTFdYcmYuGVJPVh6gN5n16Wj2v8EmmA0X39Z0YV7_FGsvn6jbgbgj5_VhZL8LwEjzlReueCKV4o27fE1pW7Fw/s1600-h/ScreenHunter_03+Sep.+21+17.54.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEginbZZ77LIN0sHeTKmdcSfpRwKAnD6ziH62lLZdEsA_-MY1BqTUSiDBjdTFdYcmYuGVJPVh6gN5n16Wj2v8EmmA0X39Z0YV7_FGsvn6jbgbgj5_VhZL8LwEjzlReueCKV4o27fE1pW7Fw/s320/ScreenHunter_03+Sep.+21+17.54.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5112701848742152770" /></a>
If you do see such error messages, take note of the widgets the template wants to delete, then choose to cancel the process. You should then copy the appropriate widgets from the old template into the new template in your test blog (as before), save the template and attempt to upload it again.</li>
<li>If you receive no error messages, your template will be saved, and you can now view your new blog template with all your old widgets still in place. You can then move the widgets around however you wish in the Layouts section of your dashboard.</li></ol>
<p>I hope this tutorial helps you easily copy your widgets from your old template to your new one. Please leave your comments and opinions below, and feel free to contact me if you have any problems doing this in your own blogs.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/widgets?from=http://www.bloggerbuster.com" rel="tag">widgets</a> | <a href="http://www.technorati.com/posts/tag/templates?from=http://www.bloggerbuster.com" rel="tag">templates</a> | <a href="http://www.technorati.com/posts/tag/copy+over?from=http://www.bloggerbuster.com" rel="tag">copy+over</a> | <a href="http://www.technorati.com/posts/tag/test+blog?from=http://www.bloggerbuster.com" rel="tag">test+blog</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-20671941296713442532007-09-20T21:50:00.000+01:002008-02-26T13:11:29.971+00:00How to set up a test blog (and why you may want to use one)<p>A test blog can be very useful for testing template changes and other hacks before implementing the changes into your own. I always use test blogs when designing new templates, testing scripts and other such experiments. In this post I'll explain how you can set up your own test blog, and the reasons you will find it useful to use one.</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>What is a test blog?</h3><p>For me, a test blog is a temporary blog I use for experimenting with template design, javascripts and to copy widgets from one blog to another. Since these blogs are usually temporary (or used only for experimental reasons) I set them up differently from my main blogs, so that they do not attract visitors or interfere with the preferences of other bloggers.</p><h3>How do I set up a test blog?</h3><p>Luckily, Blogger allows us to set up any number of blogs in our free account. You will probably want to set up your test blog differently to your regular blogs, so follow the steps below to learn how to do this:
<ol><li>Go to your Blogger Dashboard and look for the "Create new blog" link near the top of the page. Click this link and you will be taken to the blog set-up page.</li>
<li>Cjoose a name for your blog (eg: My Test Blog).</li>
<li>Next you will need to choose your blog address (something.blogspot.com). I try to use addresses which are unlikely to be used by other Bloggers, and which also do not attract attention from search engines. This is also to ensure I don't interfere with the preferences of new bloggers (we all know the awkwardness of finding a suitable address for our blogs!).</li>
<li>After you have chosen your preferences, enter the verification code and choose a simple template to begin with. You will be able to change this template shortly!</li>
<li>The nest screen invites you to make your first post. This is actually quite important as having a few posts in your test blog will be of great benefit in seeing how your experiments will work when you try them out. For posts in my test blogs, I tend to use "Lorem Ipsum" dummy text, which is nonsensical Latin designed to fill in blank spaces for designers. Lorem Ipsum text is evenly spaced, and does not attract much visual attention. You can easily generate a paragraph or two of dummy text using the <a href="http://tools.bloggerbuster.com/lorem_ipsum">Lorem Ipsum generator</a> in the tools section of this site.</li>
<li>(Optional) You may also like to put a few "dummy" comments in your template if you plan on making changes to way comments appear in your blog.</li>
<li>Once you have a couple of posts (and perhaps comments) present in your test blog, you should change a few of the settings:
<ul>Go to Settings>Basic and look for "Add your blog to our listings". Choose "No" (unless you want your experiments to be seen by anyone who cares to look!).</li>
<li>Next go to Settings>Publishing and look for "send pings" near the bottom of the page. Set this to "No" too.</li>
<li>Finally, go to Settings>Permissions and choose who you would like to view this test blog. If you choose "Anybody" then anyone who stumbles upon your test blog will be able to see your experimental work. You may prefer to set this to "Only people i choose" instead which will make this blog private.</li></ul>
You may also like to hide your test blog from your profile page. If this is the case, then go to your dashboard again, click on Edit Profile and look for the link which says "Choose which blogs to display". You will then see a list of your blogs and can check only the ones you wish to display from your profile page.</li>
<li>Now you can use your test blog for whatever experiments you choose! You can upload your existing template to test new modifications, try out your scripts, or even try creating a new template all of your own!</li></ol></p><p><h3>Why you may want to use a test blog</h3><p>If you are making major changes to your template, you probably won't want your readers to feel disrupted by seeing things alter as they are reading through your pages! Using a test blog enables you to make modifications without interference to your main blog, then when all is complete you can upload your modified template in one go, which will minimize any disruptions and also ensure you don't make mistakes on your main blog.</p>You can hack your template (for example, to use peekaboo posts, inline comments or other useful modifications) without worry that your template will break. If you make a mistake on your test blog, you can simply delete it and create another.</p><p>Another really good reason to set up a test blog is when you want to change your template and copy over the widgets from your existing blog. I will shortly be creating a full tutorial on this subject which will take you through the whole process step by step.</p><p>When you have finished using your test blog, you can easily delete it by going to Settings>Basic and choosing the "Delete this blog" option which is right at the bottom of the page. Once you do this, the blog will be deleted forever and cannot be recovered, so be sure to have backed up anything you need from this blog before you do so. Also the blog url will be released and available for others to use instead.</p><p>I hope you have found this post useful. In the near future I will also be creating tutorials about template design, for which you may well fins it useful to have a test blog at your disposal!</p><p>Please feel free to leave your comments and suggestions below.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/test+blog?from=http://www.bloggerbuster.com" rel="tag">test+blog</a> | <a href="http://www.technorati.com/posts/tag/temporary?from=http://www.bloggerbuster.com" rel="tag">temporary</a> | <a href="http://www.technorati.com/posts/tag/create+blog?from=http://www.bloggerbuster.com" rel="tag">create+blog</a> | <a href="http://www.technorati.com/posts/tag/blogger?from=http://www.bloggerbuster.com" rel="tag">blogger</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-28097290299025063412007-09-17T13:04:00.000+01:002008-02-26T13:11:29.972+00:00Inline comments hack<p>Would you like to be able to feature comments and the comments box beneath your blog posts, Wordpress-style? In this tutorial I will explain how this can be achieved in your Blogger "layouts" template. After you implement this hack, your readers will never have to leave the page to post a comment 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 is an example of what the inline comments looks like in one of my test blogs (click on the image for a larger version):</p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYG1151xGnSFWmj-2ST_f-i2jWhTvqmRIJrkrFx9BK7TgncAqy0Ypo4UjOYyGrxxEQpAHjh-Hq0Oz3AIxJcPOT3IpQ_PgTWLzpC4Fts7ytx9pv59zcPqDJvNkLAjEtvDAhJpTVRGEez0/s1600-h/ScreenHunter_01+Sep.+17+16.33.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYG1151xGnSFWmj-2ST_f-i2jWhTvqmRIJrkrFx9BK7TgncAqy0Ypo4UjOYyGrxxEQpAHjh-Hq0Oz3AIxJcPOT3IpQ_PgTWLzpC4Fts7ytx9pv59zcPqDJvNkLAjEtvDAhJpTVRGEez0/s320/ScreenHunter_01+Sep.+17+16.33.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5111197018608762194" /></a><p>You can also see an example of this hack in action on <a href="http://strawberry-template-demo.blogspot.com/">this demonstration blog</a>.</p><p>You will be able to change some elements of the inline comments' appearance as I will explain later in this post. For now, let's see how this hack can be done.</p>
<h3>How to implement the inline comments hack</h3><p>Before you do anything to your template, be sure to make a back-up of your existing template. This can be done by going to the Edit HTML page and selecting the "Download Full Template" link near the top of the page. It is always good practise to back-up your template before making ANY changes to it. Then if you make a mistake, you can always revert back to this later.</p><p>The following steps will take you through the installation process for the inline comments hack. Be sure to read the instructions carefully and copy the code exactly as it is written.</p>
<ol><li>For this hack to work, we will need to change a few settings for your blog. Firstly, go to Settings>Archiving in your Blogger dashboard and ensure that "Enable Post Pages" is set to "yes". This ensures that all of your blog posts are visible on their own page, and ensures that the inline comments will appear, since the iframe containing the comments can only call this once per blog page.<br/><br/>Next go to Settings>Comments and ensure that you have set comments to appear in a pop-up window. This may seem odd considering that we will be displaying comments within the page, but this setting ensures we have a better format for the iframe, as you will see later on.</li>
<li>Now that you have the correct settings, let's hack your template to make the inline comments appear. Go to Edit HTML and ensure that "exoand widget templates" is ticked. This means that we can get to the code within the blog posts widget, which is where the settings for your comments are contained.</li>
<li>Find this entire section in your blog template:
<iframe src="http://bloggerbuster.com/iframe_codes/inline_comments1.txt" width="400" height="400" frameborder="0"></iframe><br/><br/>And replace it with this section of code instead:
<iframe src="http://bloggerbuster.com/iframe_codes/inline_comments2.txt" width="400" height="400" frameborder="0"></iframe><br/><br/>Very little has been done to this section of code, except to add comment code (<!-- like this -->) around the section of comment code we want to hide. This ensures that the correct comment code is generated, but not displayed. Without this present in the template, we can not show the comments at all!<br/><br/>Also, I have added the small iframe section which includes the code to call the comments page and display it beneath the blog post.</li>
<li>Now the iframe to display comments is in place, but we just need to make one more adjustment to ensure that the comment link from non-item pages (ie: your front page or search results) directs your readers to the comments on individual item pages.</li>
<li>Find this section in your blog template:
<iframe src="http://bloggerbuster.com/iframe_codes/inline_comments3.txt" width="400" height="200" frameborder="0"></iframe><br/><br/>And replace with this section of code instead:
<iframe src="http://bloggerbuster.com/iframe_codes/inline_comments4.txt" width="400" height="200" frameborder="0"></iframe><br/><br/>Note that this section of your template may not nescessarily be contained in <span> tags. If this is the case, simply copy the <a class=... section instead.</li>
<li>Now save your template and take a look at your new inline comments! When you click the comment link from your home/label/archives/search page, you will be taken straight to the comments section on the individual post page. When you view the post pages themselves, you will easily see the inline comments beneath your blog posts.</li></ol>
<p>You can change some elements of this hack to better suit your blog's style if you prefer. For example, in this default installation, the background color for the iframe is set to #dddddd. You can change this to a different color if you prefer to better complement your template. You can also change the height of the iframe (to display more comments), or could centralize the iframe by wrapping it in div tags with align set to center.</p><h3>Why this version of inline comments works</h3><p>Blogger's commenting system is now more secure, and comments can only be made from the actual comments page, rather than inside the post page itself. This decision to make the commenting system more secure was probably to thwart spammers and other malicious attention, though unfortunately this means we cannot implement inline comments very easily, nor can we change the comments page in any way.</p><p>The way around this is to feature the comments page in an iframe beneath the post. This means we can display the comments box within the post page, and that readers can leave comments without leaving the page.</p><h3>Why you may want to install this hack</h3><p>Your blog's readers are much more likely to make a comment if they do not have to leave the page to do so. It can be quite off-putting to be sent to a new page when you want to leave a comment, so by installing the inline comments you will probably discover that the number of comments increases.</p><p>Please let me know if you like this hack, or if you are experiencing any problems installing this in your template. In the near future I will also be posting a peek-a-boo version of this hack which can be used to show or hide comments instead of just displaying by default.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/inline+comments?from=http://www.bloggerbuster.com" rel="tag">inline+comments</a> | <a href="http://www.technorati.com/posts/tag/comments?from=http://www.bloggerbuster.com" rel="tag">comments</a> | <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/wordpress?from=http://www.bloggerbuster.com" rel="tag">wordpress</a> | <a href="http://www.technorati.com/posts/tag/template?from=http://www.bloggerbuster.com" rel="tag">template</a> | <a href="http://www.technorati.com/posts/tag/style?from=http://www.bloggerbuster.com" rel="tag">style</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-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-28979264199642789632007-09-06T23:40:00.000+01:002009-07-26T01:52:02.610+01:00Enable per-post comments feeds<p>For a while now, I've been wondering how to enable the feed link for per-post comments in order to allow readers to subscribe to the comments for a particular post they are interested in. From what I'd read in the Blogger help groups, the only method was to create a link for each individual post including that particular post's ID number. Which would have been very tedious! However, today I finally figured out a much simpler methos, so you can simply add a bit of code to your post footer which will easily enable your readers to subscribe to the comments of a particular post of interest! </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 create the link which will enable readers to subscribe to the comments of a particular post, you will need to ensure you have enabled post pages in your blog settings. If you haven't already done this, go to Settings>Archiving in your Blogger dashboard and set "Enable post pages" to "yes".</p><p>Next, find this section in your Blogger template:
<blockquote><p><data:post.body/></p></blockquote>
Just after this line, paste the following section of code, replacing "yourblogurl" with the url of your blog:
<blockquote><p><a expr:href='"http://yourblogurl/feeds/" + data:post.id + "/comments/default"'>Post Comments Feed</a></p> </blockquote></p><p>This will enable the default Atom feed for the per-post comments. If you prefer to link to the RSS comments, you should paste this section of code instead:
<blockquote><p><a expr:href='"http://yourblogurl.com/feeds/" + data:post.id + "/comments/default?alt=rss"'>Post Comment Feed</a></p></blockquote>
You can change the link text ("Post Comment Feed")to anything you like, such as "Subscribe to comments for this post". </p><p>Preview your template to ensure that you haven't upset the layout of your posts, then save your template and view your blog. You should now see this new link appear just beneath each of your blog posts. When you click on this link, you will be taken to a page which features the comments feed for only this particular post with the option to subscribe to this particular feed.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/comments?from=http://www.bloggerbuster.com" rel="tag">comments</a> | <a href="http://www.technorati.com/posts/tag/feeds?from=http://www.bloggerbuster.com" rel="tag">feeds</a> | <a href="http://www.technorati.com/posts/tag/rss?from=http://www.bloggerbuster.com" rel="tag">rss</a> | <a href="http://www.technorati.com/posts/tag/atom?from=http://www.bloggerbuster.com" rel="tag">atom</a> | <a href="http://www.technorati.com/posts/tag/per-post?from=http://www.bloggerbuster.com" rel="tag">per-post</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-59875640734499980572007-09-05T12:51:00.000+01:002008-02-26T13:11:50.125+00:00How to manually install Haloscan comments and trackbacks (for customized templates)<p>Haloscan provide an excellent commenting and trackback service for bloggers. While Blogger blogs are supported by this system, the installation wizard will not work for customized templates, even those which have a few lines of Javascript included! </p><p>Haloscan commenting and trackbacks do work in customized templates, but you will need to install the nescessary code manually. Unfortunately, Haloscan do not provide any support (yet) for manual installation of commenting and trackbacks in Blogger templates. So here is a tutorial of how you can manually install Haloscan's commenting and trackback features in your own Blogger templates.</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><span style="font-weight:bold;">Please note</span>: this is a tutorial for installing both Haloscan commenting and trackback functions in your Blogger template. If you wish to only install Haloscan <span style="font-style:italic;">trackbacks</span> (as I have done in this blog), please <a href="http://www.bloggerbuster.com/2007/06/how-to-install-haloscan-trackbacks-in.html">take a look at this post instead</a>.</p><p>Here is a tried and tested method for installing Haloscan commenting and trackback features in your blog. Be sure to read each step thoroughly, and copy the lines of code exactly as they appear here in order to ensure this method will work for you! </p><p>This tutorial assumes you already have a Haloscan account. Ensure you have your Haloscan username to hand as you will need this during the manual installation process. Each section of Haloscan code you need to insert into your template should contain instances of your Haloscan username. In the codes provided, I have replaced this with "yourhaloscanusername" so be sure to edit this to include your actial username instead!</p>
<ol>
<li>Firstly, you should make a backup of your existing template by going to Template>Edit HTML in your Blogger dashboard and clicking on the "Download full template" link near the top of the page. It is essential that you do this before making any modifications to your template, in case you make a mistake or decide to revert back to your original template at a later time.</li>
<li>Now, ensure you have checked the "expand widget templates" box, and search for the following lines of code:
<blockquote>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<font color="red">| <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></font>
</b:if>
</b:if></blockquote>
<p>Replace the lines highlighted in red with the following lines of code (highlight all of the code and paste into your blog template):</p>
<iframe src="http://bloggerbuster.com/iframe_codes/haloscan_part_1.txt" width="400px" height="100px"></iframe>
<p>Be sure to replace all instances of "yourhaloscanusername" in this code with your own Haloscan user name!</p></li>
<li>Next, search for this section of code in your template:
<blockquote><b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<font color="red"><h3 id='comments'><strong>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</strong>
to “<span style='color: rgb(128, 128, 0); letter-spacing: 0px;'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</span>”
</h3>
<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<li class='commentlist-author'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='clear'/>
</li>
<b:else/>
<li class='commentlist-general'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='clear'/>
</li>
</b:if>
</b:loop>
</ul>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p></font>
</b:if>
<div id='backlinks-container'></blockquote></p>
<p>Replace this whole section of code with the lines in the frame below (highlight this whole section, copy and paste into your template):</p>
<iframe src="http://bloggerbuster.com/iframe_codes/haloscan_part_2.txt" width="400px" height="100px"></iframe>
</span>
<p>I know this can be a rather large section to fins in your Blogger template, so if you're having trouble, highlight all of the code <span style="font-weight:bold;"><span style="font-style:italic;">between</span></span> these lines, and paste the Haloscan code over the top of it:
<blockquote><b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
..... paste Haloscan code over the content here ...
</b:if>
<div id='backlinks-container'></blockquote></p>
<p>Be sure to replace all instances of "yourhaloscanusername" in this code with your own Haloscan user name!</p></li>
<li>Finally, find this section of code in your Blogger template:
<blockquote> <b:loop values='data:links' var='f'>
<font color="red"><a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a></font>
</b:loop>
</div>
</b:includable></blockquote>
<p>Now replace this red section with the following Haloscan code:</p>
<iframe src="http://bloggerbuster.com/iframe_codes/haloscan_part_3.txt" width="400" height="100"></iframe>
<p>Again, don't forget to replace all instances of "yourhaloscanusername" with your actual Haloscan username!</p></li>
<li>Preview your template now to ensure the commenting and trackback links are showing in your blog. You can check these link to Haloscan by hovering your cursor over the links, and should notice the link to Haloscan appearing in the bottom left of your browser.</li>
<li>If your template looks okay and the links point to Haloscan, you can save your template and enjoy your new Haloscan trackback and comments features! If the edits have not worked properly, you can clear all edits and begin the process again, taking extra care to copy and paste each section of code exactly as stated!</li>
</ol>
<p>This is a rather difficult and tedious hack to implement, but unfortunately it is the only way I have found to successfully install Haloscan commenting and trackbacks into customized Blogger templates.</p><p>I have tried and tested this method on several different blog templates, and can assure you that this works, so if you're having difficulties, just clear your edits and try again, taking much care over the code you are pasting in. </p><p>I hope this tutorial helps you install Haloscan in your customized Blogger templates. Please leave any comments below.</p><p><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/posts/tag/haloscan?from=http://www.bloggerbuster.com" rel="tag">haloscan</a> | <a href="http://www.technorati.com/posts/tag/comments?from=http://www.bloggerbuster.com" rel="tag">comments</a> | <a href="http://www.technorati.com/posts/tag/trackbacks?from=http://www.bloggerbuster.com" rel="tag">trackbacks</a> | <a href="http://www.technorati.com/posts/tag/install?from=http://www.bloggerbuster.com" rel="tag">install</a> | <a href="http://www.technorati.com/posts/tag/customized+templates?from=http://www.bloggerbuster.com" rel="tag">customized+templates</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.com