Add a Facebook Invite Friends Link to your Blogger Site

Over at 9Lessons 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).

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.



In this simple tutorial I'll explain how you can add this functionality to your own Blogger powered blog.

Read more »

Even more fonts for Blogger with Google Web Fonts

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.



However, if none of these fonts are suitable for your design, take a look at the huge selection (currently over 500) of freely available web fonts available from Google.



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.



Read more »

Smooth Scrolling to Anchor Links on Page with Blogger (Quick Tip)

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.



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.



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.



Here's a quick tip to scroll smoothly to a section link further down (or up!) a page in Blogger.



Read more »

How to control the Attribution gadget when using the Template Designer

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.



We can add copyright information to this gadget by editing through the Layout page in our dashboard, but by default are unable to change it's position or remove it.



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.



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.



Read more »

Create a contact form with Google Docs?

While creating a client's website (using Blogger, of course), I decided to try using Google Docs to create a comprehensive contact form.



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!



Feeling rather happy with the results, I created a similar contact form for the Blogger Buster contact page 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.



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 reverted back to my previous contact form.



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.





Read more »

How to Back-up, Restore and Upload New Templates to Blogger

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.



The method and application for backing up and uploading templates has changed significantly since the last time I wrote on this subject, so in this updated post I'll explain how to back-up, restore and upload new templates using the new Blogger interface.





Read more »

Adding a Google+ Badge to Blogger (Updating my Blogger Template)

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.



As part of updating my Blogger template, I added a badge to the sidebar which enables readers to directly connect to the official Blogger Buster page on Google+. I've documented my methods here for other Blogger users who may find this tutorial useful.





Read more »

Adding threaded comments to a customized blog (Updating my Blogger Template)

Since deciding to update my Blogger template, 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.



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.



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!





Read more »

Uploading a custom favicon to Blogger (Updating my Blogger Template)

Blogger Buster Favicon

Back in June last year, the Blogger team enabled Blogger users to upload their own favicon to replace the default Blogger icon.



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.



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).



Since I have updated my icon as part of updating my Blogger template, I've documented my method (and troubleshooting) for others who are updating their Blogger templates.





Read more »