Blogger Launches a new Template Designer

Blogger Launches a new Template Designer

Blogger has now launched a new Template Designer along with 15 new default templates. All of these templates are highly customizable Each of them comes with different layouts and you can modify and redesign your template without much knowledge of CSS and HTML


How To switch to a new Template and use the Template Designer

1.Login to Http://Draft.Blogger.Com

2. Click on the Layout Tab and you will find a new Template Designer Tab there


3. Click that and you will be taken to the new Template Designer.

4. There you will find 15 new templates to choose from . You can see the Live Preview there.

5. The Template designer comes with a cool set of customizers.There are plenty of images to choose from. You can change the layout(1 column, 2 column etc) and you can change almost everything on the template.

You can adjust the Width of the Columns by using simple Sliders and adjust the colours fonts etc.


So just try it out. you are gonna love it..

Hope to see more and more templates being coded in such a way that they can be edited using the designer..

How to Setup a Sub Domain on a Blogger Custom Domain Blog

Add Sub domain on a Blogger Custom Domain

This tutorial is for all those who are already using Custom Domains with Blogger. If you already have a blogger blog at some Custom domain like , then you might want to add a sub domains to this custom domain like etc. An example of such a sub-domain is It is a blogger powered blog, which i created on the sub-domain. In order to create blogs at sub-domains, you need to create CNAME records for the same.

Create Sub Domain on a Blogger Custom Domain

Here we will learn how we can add a new sub domain to your blogger custom domain blog. As an example we will learn how to create a sub domain to your custom domain blog. (If you have need some other sub-domain change blog with what you want). To do that we need to create a CNAME record.

1. pointing to

If you are having a self hosted website, then you will have to create this CNAME Record with your Web Host.You might be able to do it from the “Simple DNS Zone Editor” in most cPanels. If you don’t have such an option, contact your Web Host and ask them to create these two CNAME records for you.After creating this record with your webhost(and after it has propagated), publish your BlogSpot blog to that sub domain(Skip the tutorials for CNAME Creation on Different domain Registrars. They are not applicable for Self hosted Websites)

If you don’t have a self hosted  website,then to create the CNAME you need to login to your domain control panel. Different Registrars have different interfaces(we have listed 4 of them here) but the basic thing is that you need to create the CNAME Record. If you bought the domain via blogger, then you have to first login to Google APPS to get into your Domain Control panel

If you bought the domain from Blogger

If you bought the domain from within Blogger, then you have to get into your domain control panel. To do that go to

you will have to replace with your domain name. From the Google APPS dashboard, Go to Domain Settings > Domain Names and click on Advanced DNS Settings. From the new page, Sign in to DNS Console(of Enom or Godaddy with the username and password that you get from here.)

CNAME Creation on Different Registrars

1. Creating  CNAME on Enom

1.Login to your Enom account(If you signed in from Google APPS, you can directly proceed to sep 4)

2.From the drop-down menu at the Domains tab, select My Domain and you will be directed to the Manage Domains  page.

3.Click on your domain name

4.To add a CNAME record, click NEW ROW.

5.Enter blog as Host Name ,  as Address  and CNAME as Record Type

Creating  CNAME on Enom

2. Creating  CNAME on Godaddy

Godaddy has come up with a simple  Tool which will automatically create the CNAME records for you. So if you are on Godaddy just Go to this Go Daddy tool


Enter your Subdomain name there e.g. :

(Use the correct sub-domain where you want your blog to appear) and click on the Confirm Button. The CNAME Records have been created for you automatically.

3. Creating  CNAME on

1. Login to your Name Account

2.Click on  Account and then on your Domain name

3.Click on DNS Management form the Right Sidebar and add the details as shown in the screenshot and Submit

Creating  CNAME on


4. Creating  CNAME on

1. Login to your Namecheap account and click on your domain name.

2.From the Left Sidebar, Click on All Host Records

3.Add the Records as shown in the Screen shot

Creating  CNAME on

Switching your BlogSpot blog to the Custom Sub-Domain

I assume that you have already have a blog which you want to switch to the custom-sub domain. Get into its Dashboard and navigate to Settings > Add Custom Domain and click on the link saying “Already own a domain? Switch to advanced settings” Now provide the URL . Type the captcha and save the Settings.


If you are still unable to figure it out, contact me via comments or on the Forum


How To Setup Google Apps on Your Website

How To Setup Google Apps on Your Website

Google Apps is a service from Google for using Google products like mail, docs, calendar etc on your domain name.Google Apps has a free version and you can signup for that and get the Google products at your domain name. You will get a GMail interface for email handling on your domain. You will be able to use this custom email addresse( on Google Talk or any other Jabber Client.If you bought a Custom Domain from Blogger,then you have already created the Google Apps account and so you can ignore this tutorial.

Signing up for the Free Version Of Google Apps

1. Go to this link and signup for Google Apps


2.When you finish the Signup Process, you will be taken to the Google Apps Dashboard and you will be asked to verify your Domain Ownership.


Choose the method which is appropriate for you. If you are using a Self hosted website, then the HTML File upload method may be easier for you. If you are using a Blogger Custom domain, then you will have to do the CNAME based verification

If you are on a Blogger Custom Domain, you will have to create the verification CNAME from your Domain Control Panel. If you have a self hosted website and you opted for the CNAME based Verification, then make a support ticket with your webhost asking them to create the CNAME for you(that is why the file upload method might be easier for you). Once they have created the CNAME(or you uploaded the file as per the instructions), you can verify your domain ownership.

3.If you already using mail accounts on your host, then make the same accounts again on Google APPs. eg: If you are already using an email account (, then make the same user account(Create new Users link) on Google Apps

. create-accounts


Create Accounts for each of your existing @domain email addresses.

4.Now Activate email from your Google APPs Dashboard. Make sure that you have completed Step 3 before doing this.


5.You will see some instructions to Create MX Records. If you are using a CPanel Hosting, then login to your CPanel and Click on MX Entry under Email


Select the Domain of your choice from the Dropdown and delete all existing MX Records for that domain. Add these 5 MX records

Priority Destination

The Final CPanel MX records will look like


If you are using a Blogger Custom Domain, then you will have to Create these MX entries from your Domain Control Panel. Godaddy provides an automatic configuration tool to create these 5 MX Records.For other Domain Registrars follow the instructions provided in the Activate Email page of Google APPs. Once you are done with creating the MX records Click “I have completed these Steps


6.Now you have configured your email. You can now access your email at . If you want to use a custom url, then you will have to create a corresponding CNAME record. For example if you wish to access your mail at , then you will have to create a CNAME for mail pointing to . You can Change to a custom url from the Email Settings in Google Apps Dashboard .Similarly you can assign custom urls to the other Google Apps like Sites and Docs after activating them.


Create Newsletter for your Blogger Blog

Add Sub domain on a Blogger Custom Domain

Newsletter is a good option when you want to send custom mails to your blog readers. It lets you send content rich HTML emails to your readers.Its not like the Feedburner Email Subscription(which just sends post updates via email at regular intervals) .You will be able to compose and send the newsletter at any time. Here are the steps to enable and send Newsletters.

1. Go to and login there

2.Click on your Blog Name from the Left Pane.(If your blog is not already there, then add it)


3.Click on the Send a newsletter Option


4. Click the check box which says “Ask visitors to subscribe immediately after their first sign-in". After that Click on the Newsletter Gadget Tab.


5.Customize the Colors and other Options and Click on the Generate Code Button and Copy the Code from there.

6.You need to add this Code to your website. If you are using blogger, then Go to the Layout > Page Elements and Click on the Add a Gadget Link


Opt for HTML/JavaScript Gadget


and paste the copied Code into the Box Which appears and Save the Gadget

7.Now your blog readers will be able to subscribe to your Newsletters.

When you have enough subscribers, you can Compose the Newsletter from the Compose newsletters tab ,When you are done with creating the newsletter, Click on the Preview and send newsletter button and Click on the Send newsletter button from the popup preview window. you can see how many recipients will receive the newsletter.(In my case it is Total recipients : 539 as shown in the screenshot)


Newsletter subscription is just one of the different Friend Connect Gadgets. There are many more on the Friend Connect Website.You can read about them  at Some friend Connect Gadgets that you might not know about


Stumble Upon Count Buttons for Blogger

stumbleupon-counter-for-blogger Like all other Social networks, StumbleUpon has also got some really elegant sharing buttons. StumbleUpon has got 6 different  sharing buttons.  You can choose any of these six. Integrating this into your blogger blog will require some template Edits.


How to add the Stumble Upon Counter Button  to Blogger?

1. First of all pick one of these 6 Button Styles.

2.Now Login to your Blogger Template and navigate to Design   >  Edit HTML and click on the check box which says “Expand Widget Templates”

3. Look for <data:post.body/> and immediately above it paste the following code.

<b:if cond='data:blog.pageType == "item"'>
<div style="float:right;padding:4px;">
<script expr:src='";r=" + data:post.canonicalUrl'/>

4.Save the Template and you will see a vertical Stumbleupon counter(style 5) on your post. In the code above, you can change s=5 to s=1 or s=2 or s=3 or s=4 or s=6 to get the other button styles.

5. If you need the counter on every page, then remove the two lines of code in Green Color.

6. If you want the button to appear on the left side, then change float:right to float:left


How to remove quick edit and wrench icons on Blogger

You might have seen the Pencil , Screwdriver and Spanner links on blogger. It seems like these icons appear only when you are logged in to your blog. But if you take a look at your Blog's Source From your Browser's View source option, then you will find that there are plenty of quick edit links on your blog even if you are not logged in(Do a Find for ). These are the quick edit  links and these will  be hidden using CSS if you are not logged into your blogger account(but still be present in your blog as hidden links).

What is the use in Removing these Links?

You will be able to reduce the number of external links on your Blog and make it more Search Engine Friendly

Do i loose anything if i  remove these Links ?

You will no longer see the Quick Edit pencil image  or wrench links quick-edit-wrench-blogger  on your blog   . If you want to Edit a Gadget, you will have to go to the Layout > Page Elements Page .

How Do i remove the Wrench and Quick Edit?

1. Go to Layout > Page Elements and Click on the Edit Button on the Blog Posts Gadget. Uncheck the Show Quick Editing Option and Save the Settings


2. Go to Layout > Edit HTML and Click the Check box to Expand your Widget Templates

Replace all Occurrences of

<b:include name='quickedit'/>


<!--b:include name='quickedit'/-->

3. Save The Template and look at your Page Source Once again. You will find that those links are no longer there.

4 The Wrench Link of the Followers Gadget Cannot be removed. If you really want to remove that, then remove the Followers Gadget and Add it as a HTML/ JavaScript Gadget with the Code from Google Friend Connect.

How do i get the Quick Edit and Wrenches back  on my blog?

If you ever feel the need to get back these buttons, then just follow the reverse process.

1. Go to Layout > Page Elements and Click on the Edit Button on the Blog Posts Gadget. Check the Show Quick Editing Option and Save the Settings

show quick editing

2. Go to Layout > Edit HTML and Click the Check box to Expand your Widget Templates

Replace all Occurrences of

<!--b:include name='quickedit'/-->


<b:include name='quickedit'/>

and Save the Template and it will be back to normal.

Blogger Actually provides an Option in Settings > Basic to Hide the Quick Edit Links. But this doesn't actually remove the Quick Edit links. They are just made invisible

I hope that the Blogger Team will remove these Quick Edit Links completely(when author is  not logged in) rather than hiding them.


Remove Blogger Nav bar Completely


Blogger has got a default Navigation Bar. This navigation bar is hidden in most of the third party templates. Instead of hiding the nav bar using CSS, we can completely remove it.

To do that

1. Login to your Blogger account and navigate to Layout > Edit HTML

2. In the Template Code find <body> and just above that add the following Code.


3. Now Save the Template and you will see a confirmation about deleting the Navbar Widget. Confirm the Deletion by Clicking on the Delete Widgets Button


4.Now your Nav bar is completely removed from your Blog.


Advantages of this Method

You will be completely removing the nav bar and not hiding it. The nav bar iframe codes wont be present in your blog’s HTML source and so the blog  would be more Search Engine Friendly and your blog will have a more valid XHTML code..

Disadvantages of this Method

You will no longer see the Quick Edit pencil image  or wrench links quick-edit-wrench-blogger  on your blog even if you are logged in. This is not a a big deal. You can Edit the Widgets from the Layout > Page Elements Page. You wont see the Comment Delete icon near your comments even if you are logged in.But you can definitely manage the comments from the Blogger Comment Tab.It would also be a good idea to completely remove the Quick Edit and Wrench Links from Blogger

How to Get back the Nav Bar?

If you followed this method to remove the nav bar and now want to get it back, then  delete the extra code that you added. i.e remove the code from step 2, that you added into your template and Save the Template.


Facebook Like Button For Blogger

Facebook Like Button For Blogger

This Tutorial will help you in adding a Facebook Like Button For Blogger. Facebook has come up with a new set of Social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. You can see a demo of the like button on this page. The Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post .This tutorial will teach you to add a Facebook Like button for Blogger

How to Add the Facebook Like Button Below every Post

1. First Generate the Facebook code using the options below. (Code will be updated with these details)

Button Type
Text on Button
Show Send Button
Color Scheme
Location of the Button
<b:if cond='data:post.isFirstPost'>
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); = id; js.async = true;
js.src = "//";
<fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like>

2. Copy the Above code. Login to your Blogger Account and go to Design > Edit HTML and click on the check box which says “Expand Widget Templates

3. Look for <data:post.body/> and immediately below that place the copied code.

4.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find


and change it to

<html xmlns:fb=""

The following screenshot will help you out.

image This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

4. Now Save the template and you should see the Like Button near each of your posts. You are done :)

Do you feel that the Like Button is boring and not so likable? – Then checkout the Facebook Like box, a styled version of the Like Button which would definitely bring you more “Likes” Also Check out :

  1. Facebook Share Count Buttons For Blogger

  2. Create Facebook Fan Page for your Blog

If you liked this post, then consider “Like” ing it :)

Permalink : Facebook Like / Recommend Button For Blogger


Enclosure Links in Blogger

"Enclosures" are the bits of info in Atom and RSS feeds that make podcasting possible. With the new enclosure links UI, you can turn your blog into a podcast quite easily.

To turn on enclosure links, just go to Settings > Formatting and set the “Show Link fields” option to “Yes.”  and save the settings



This will add the enclosure link fields to your post editor. From there, just paste in the URLs of your recorded media, and your blog will instantly become a podcast.

This is how your post editor look like, after adding the enclosure links



Better Post Preview in Blogger


Blogger has now added a better Post Preview  and a Preview Button on the Blogger Post Editor . The new Preview button opens up a new window showing a templated preview(the old preview function just showed a miniature preview without the actual templating) of the post that you are currently editing. This will let you see a complete preview of your post page even before hitting the Publish button.

In order to see the Preview Button, you should  Edit / Create your post from your

Blogger Dashboard and hit the Preview button on your post Editor.


This is a screenshot of the preview page, which came up when i was editing this post. [Click the image below for a larger image.]

The Preview Window won’t automatically update as you edit your posts(as the content of your post changes). You have to Hit the Preview button once again(or refresh the preview page)  to see the  changes in the preview

How to Add Custom Fonts to Blogger


Adding Custom Fonts to Blogger can improve the look and feel of your blog. Before getting into font embedding lets know how this works.

In your templates you can use any font you want, but these would be properly displayed only if the viewer has those fonts installed on his/her System.

Font embedding Techniques allows you to use any font on your Blog and these fonts will be viewable to the viewers even if they don’t have the font installed on their Systems.

@font-face is the  best Font Embedding technique in my opinion but it wont  easily work with  externally uploaded fonts unless the server has special Access Control Headers for your blog .(blogger wont allow you to upload the font to it’s servers :P ) So here are certain simple alternative  methods to add custom fonts to your blog. These are listed out in an order of my preference

  1. Google Font API
  2. Kernest Font API
  3. Cufon JavaScript Font Embedding

1. Google Fonts API.

This is the best and robust method to add custom fonts to your blogger blog. It uses the @font-face technique but you needn’t worry about the backend things. You can see a list of available Fonts at the Google Font Directory .

When you select a particular Font, Google will provide you with the Embed Code which looks like


<link href='' rel='stylesheet' type='text/css'>

Copy out this code and you have to modify it by changing > at the end of the code to />

That is you have to change the code to something like

<link href='' rel='stylesheet' type='text/css'/>

Adding the Google CSS Embed Code

Now Go to your Blogger >  Design  > Edit HTML page

Find <head> and immediately below that line paste the edited Embed Code and save your template.


Using This Custom Font on your Template

You use this Custom Font in any of your CSS Font Definitions. For example if you want to change the Post Title Font to this one, then you can use the following CSS code {font-family: 'CustomFontName', serif;}

In This definition serif is a fallback font which will be used in case the something bad happened when loading the custom font. (It is a safe practice to include at least one Fallback font and it  will help in tackling unexpected behaviours) After editing the above CSS with the proper Custom Font name,add the code above the closing ]]></b:skin> tag in your template.


You can alter other fonts in your Template by modifying the font-family definitions in your template.

How to use Multiple Custom Fonts in your Blogger Template

When you use multiple Custom Fonts, then there is no need to add the Google CSS embed codes multiple times.You can load multiple fonts using a single line of code.

For example if you are planning to use  3 custom Fonts Tangerine,Inconsolata, Droid Sans, then you can load all these three fonts using a single embed code

<link rel="stylesheet" type="text/css" href="|Inconsolata|Droid+Sans"/>

ie, just separate the multiple fonts by a |

Now to apply these fonts on your template, you can use these in your template CSS

For example you may use something like {font-family: 'Tangerine', serif;}
#header h1 {font-family: 'Inconsolata', serif;}
.sidebar h2 {font-family: 'Droid Sans', serif;}


Extra Settings

By Default the Google API provides the Regular version of the Font. If you need specialised versions like  bold, italic or bold and italic, then you have to append :b  , :i or :bi to the font name in the  google font embed code.

For example, if you need the blold + italic version of the Tangerine font, then you should have used the following embed code

<link href='' rel='stylesheet' type='text/css'/>

If you like to play around with codes , then refer the Google Font API Documentation

You might also want to refer the Google JavaScript Web Font Loader, which provides you with more Fonts and Font Providers.

These Web Fonts would be much useful for Non-English Blogs, if the other language Fonts get added to the  Font Directory

2. Kernest Font API

1.Create an Account and signup at Kernest

2.Browse through the Fonts at Kernest.

3. Add your  domain url by clicking on the Domain Embed Url


4.If the Font is free you will find the embed code below the font demo.


Copy the Style Sheet code from there(as shown in the image above)

5.Login to your blogger Template and Go to Design > Edit HTML and paste this code just below the <head> tag in your blogger template and save it.


6. Now you can use this Custom Font name inside your CSS style Definitions.

For example , if you need to change the font style of the post title, add the following code

.post-title h3 {font-family: 'NAME_OF_THE_FONT_U_ADDED' , serif;}

just  above the closing ]]></b:skin> tag after editing the code with the custom font name that you added.(serif is the fallback font which will be used if some misbehaviours prevented your custom font from loading)


You can use this Custom Font name in any font style definitions in your template


3. Cufon Font Embedding

1.You should have the font with you in TTF , OTF or PFB formats.

2.Now Goto the Cufon Generator Page and browse for your Font in the Regular Type Face section

Make  sure that “The EULAs of these fonts allow Web Embedding” .

Accept the terms and click the “Lets do it” Button

3. You will be prompted to download a JavaScript file. Save it to your computer.

4.Right Click on this link and Click on the Save Link as option and save this JavaScript File to your PC.

5.Upload these 2 JavaScript files somewhere and note down their urls.

6. Now Goto Blogger Design > Edit HTML and just below the <head> in your template , add the following code after editing the code with the proper urls of the two script files

<script src="url_of_cufon-yui.js" type="text/javascript"></script> 
<script src="url_of_the_font.js" type="text/javascript"></script>

<script type="text/javascript">
Cufon.replace('.post h3');

7. Now just before the closing body tag </body> , add the following code(IE fix)

<script type="text/javascript">; </script>

I would advice you to use the Google Font Embedding API , but the Fonts available on them are now limited. Kernest also has a good Collection of Fonts. If you use Cufon make sure that you have the rights to use the font. Cufon will allow you to use virtually any font but its not as robust as the other two methods.


If you have any doubts regarding Font Embedding, please let me know via the comments and i will try to help you out.

Play : Agame | Y8 Games | Y3 Games
Copyright © 2011. Blogger Tips And Tricks 2012 - All Rights Reserved

Proudly powered by Blogger