Blogger User » Blogger Tutorials

Make Blogger Template look better with Google’s Font API

Pradeep Kumar Singh — Sat, 22 May 2010 13:01:50 +0000

Looking to make your Blogger Templates design better? You no longer need to be designer now! With few lines of additional codes in your templates, you can change its look with smart fonts. Yes, I am talking about Google’s Font API that will make the process of including non standard fonts in our blogger templates a lot easier. In this tutorial, I want to include details on how you can easily implement different fonts available from Google’s Font directory in your template to make it look beautiful and thus better.

First, Google’s Font API

Google’s Font API is simply a web font service that allows you to use the available fonts in its Google Font directory for your designs and most importantly it is Open Source and served by Google servers.

Google Font Directory

The fonts available in the Google Font directory are all open source and you can quickly use them with simple clicks and codes. The below screenshot shows some fonts (till the time of writing this post) you can use for your templates or projects.

Steps for Adding to your Blogger Template

Well, if you learnt enough about the Google’s Font API and now want to implement in your blogger template, let’s get started.
1. Go to the Google’s Font Directory and click on the font you want to use. For example in this tutorial, I have chosen the Droid Serif.

2. Now navigate to “Get the Code” button which is highlighted on your right.

The Code for the Droid Sans will be

3. Now see the below screenshot and copy the code you need to use for your Blogger Template.

4. After you have copied this code, go to your Blogger Template you want to add this font to; and Navigate to the Edit Html Tab. See image below. (we are now going to edit your Blogger Template)

5. Search for the tag in your Template and add the above copied code directly after it.

6. Wait as blogger uses strict HTML markup and considers the original font embed code to be an open tag you also need to add forward slash (/) just before the closing “>” symbol in your code, so that the code can be properly parsed and thus the code for Droid Serif becomes

7. Save your Template.

8. One more Step before you can start using it. The above steps added the CSS file to support the font. And now we need to define where we need to apply the font in our theme. In order to define where we need to apply that, we need to add some additional style statements to the section of our template.

Don’t be confused! For example if I need to Use the Droid Serif font to my h3 title in my blog, then I would add the following line just beneath the closing tag :

 h3.post-title {font-family: Cantarell, Sans=Serif;}

9. Now after you have decided where to apply the font, just change the font-family name to the required font.
The Following references and text areas to look for also can help you decide where you need to apply the font.

Description	Reference
The header section (title and description)	#header
Blog title	h1
Post titles	.post-title
Body of blog posts	.post-body
Sidebar headings	#sidebar h2
Sidebar text	#sidebar .widget-content
Footer section	.footer

10. And once you have added that required CSS, you can preview to see it in action in your template. Try using different fonts and see which font suits your template better.
11. You can finally save changes to your template if you like it.

Still Found it Confusing ?

Check the Below video from Net Tuts that helps you learn the simple concept behind it and you can go through the steps again for the Blogger.

How can this benefit the Blogger Template Designers?
This can be the easiest Web font solution if you are a designer. It’s as easy as Copy and Paste; you don’t need to go through the process of sign ups and getting licence to use this with your designs.

Additional Resources for Using / Understanding Google Font API

Have Something to say?

Personally, i found this Google API appealing for design. How do you take it? Are you gonna make use of it? Let us know in the comments below? or Are you stuck with the above tutorial. I am always happy to help. Just leave a comment below.

Add Google Adsense / Html scripts in your Blogger Templates

Facebook Like / Recommend button for Blogger Blog

Pradeep Kumar Singh — Fri, 07 May 2010 12:43:29 +0000

Your blogger blog can be more social with Facebook’s set of social plugins. I hope you already using the Facebook fan page and Fan box for your blog to optimise and distribute your blogger content on Facebook. And now along with the Like of you main blog page on facebook, people or your friends can specifically like your every single post. This blog also makes use of the Facebook Like plugin, which you can see at the top of the post or in the demo below.
The Facebook like button will enable your blog readers to easily spread the love of your post among their friends on their facebook wall. And that can be just with one click for your readers. So is it easier for you to implement on your blog, as Facebook says “with just a line of Html”.
Ok so ready to add the button in your blog? Here we go with the detailed instructions. Follow these step by step instructions to add the like button in your blog.
1. Log in to your dashboard–> Navigate to layout –>Edit Html Tab

2. Before you edit your blogger Template, Make sure you backup every time, by clicking on the Download Full Template so that you may restore it if something goes wrong.

3. You need to “expand Widget Templates”. To do that check the box and it will expand itself.

4. Look for

in your code, (Press Ctrl + F to find) and immediately after that place the following code.

5. This code will show the Like Button on Post pages only (Single Posts only) . If you want to display it everywhere, then remove the the first (1) and last line (3).

Customise the Button

You can change the following parameters in the above code and customise the button according to your need.
# If you want to show friend icons under the button, then you should use the parameter:

show_face=true

#If you want to display only the simple button with count, then you need to use the parameter:

layout=button_count

#If you want a darker color scheme for your button, then you need to use the parameter:

colorscheme=dark

#Width of the frame
see those figures in the code, You can change them to customize the width of the iFrame as you like.
# Font of the Button
You can change the font by editing the font=arial parameter. You can change it to any of

1. font=lucida+grande
2. font=segoe+ui
3. font=tahoma
4. font=trebuchet+ms
5. font=verdana

Make it Recommend Button

Dont like the word, “Like”, You can esily change it to “Recommend and thus have a recommmend Button.

Additional Resources

Facebook Documentation for the Like button
I hope you like this Like Button. Feel free to ask any questions in the comments below.

Add Google Adsense / Html scripts in your Blogger Templates

Pradeep Kumar Singh — Thu, 06 May 2010 11:04:05 +0000

Who doesn’t want to add some Adsense ads to their blog and make some bucks out of their content? And when Blogger has really made it easier to add Adsense Ads and monetize your blog’s content, I hope there’s nothing wrong to give it a try. Ok it’s up to you to decide whether you need to monetize your blog or not but I guess, most of you must be doing that. And do you know you need to keep on playing with the ads position to find out the spot for more earnings? But sometimes you face the problem to have your ads displayed in the right position you wanted to. May be you need to edit your blogger template in order to do that. So in this post, I wanted to include tips that will help you to display your Adsense ads in better position and thus increase you earnings.

If you are including your ads via gadget, you can simply follow the ways of adding a new gadget and select adsense ads to include ad in your blog.
But if you want to display somewhere in places where you cannot add gadget, then you may need to edit your template. This post will show you how to exactly do that. (Note: you may need to some basic Html skills, at least in order to identify the codes where you need to add the advertisement code)
1. Log in to your dashboard–> Navigate to layout –>Edit Html Tab

2. Before you edit your blogger Template, Make sure you backup every time, by clicking on the Download Full Template so that you may restore it if something goes wrong.

3. You may need to “expand Widget Templates”. To do that check the box and it will expand itself.

4. You should have got the Adsense code or other html that you want to add. And now you need to change the code. Otherwise you are gonna get error like
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

5. Ok so what you need to do is, Parse the Google Adsense Html or any other Html. To do that change the following characters to the given ones.

< – < > – > & = & ”= "

Found it complex and time consuming. Try this tool Escape Html from blogcrowds. Copy and Paste your Google Adsense or other code to the textbox in the tool and click on parse.
6. Now when you have got the parsed code, Paste that code to the specific place you need to display it. Now it should work perfectly.

If you want to display adsense ads inside your blogger post please go through this post Adding Adsense Ads in Blogger Posts.

I hope you enjoyed this. Stuck somewhere? Let us know in comments below and we will be happy to help.

Remove Navbar from your Blogger Blog completely

Pradeep Kumar Singh — Wed, 05 May 2010 13:42:42 +0000

If you are using the third party Blogger Templates, then you shouldn’t have this Navigation bar but if you using the default blogger template, it should consist a Navigation Bar. Unlike hiding the Navbar from your blogger, this method helps to remove the Navbar from blogger template completely. This is a way of completely deleting the navbar widget.

Here’s a step by step tutorial to remove Remove Navbar from your Blogger Blog completely.
1. Log in to your dashboard–> Navigate to layout –>Edit Html Tab

2. Before you edit your blogger Template, Make sure you backup every time, by clicking on the Download Full Template so that you may restore it if something goes wrong.

3. In the Template Code find and just above that code, add the following Code.

You shall get a warning saying that, “Would you like to keep these widgets on your blog or delete them?
Deleting widgets cannot be undone.”

4. Confirm by clicking on the “Delete WIdgets” button and its done !

So, Why should you remove this?

a. If you want to have a clean template.
b. Want to remove the Nav bar code from your HTML source code of your blog.

What will this effect?

a. You won’t see the Quick edit pencil icon and the wrench links even though you have enabled the option and logged in.

How will I get the Navigation Bar back?

If you have removed the navigation bar and want to get it back , just delete the above code you added in your template.
This post dealt with removing the NavBar. Are you still using the Navigation bar in your template? Let us know in the comments below.

Post Summary – Read More Feature for Blogger !

Pradeep Kumar Singh — Sat, 12 Sep 2009 19:15:00 +0000

Blogger’s Birthday has some very special gifts for Bloggers now. The “Read More” or say “Continue Reading” feature was really most requested and awaited feature of Bloggers. Many had applied this hack in their blog going through the entire long html editing process which was really complicated. Now Blogger as a part of its Blogger’s 10th happy birthday feature has announced the “Read more” feature with just simple steps, which it preferably calls the “Jump Breaks”. With this, you can now easily have the summary of the post with the “Read More” feature in your blog index pages.

You can activate this feature in couple of ways. If you have made “Blogger in Draft your default dashboard or just use it, you’ll see the “Insert jump break” icon in the editor’s toolbar. Alternatively you can also activate it from the Settings tab (Basic) of your respective Blog’s dashboard. See the Image below to get the idea of using the “Jump Break”.

One more thing, if you still find the old editor comfortable like I do, you can still use this feature. All you need to do is just add the code manually. In your “EDIT HTML” section of creating post, add the code where you want to use the Jump Break feature.

The default code will enable you to have the summary of the post with the “Read More >>” title at the break. If you need to change this to something else you can do it by editing the “Read more” text by clicking Layout and then Edit the Blog Posts widget.

For those who use custom templates, you may not be able to enjoy this feature. If you are using classic templates, blogger probably has some solution for you. Follow the instructions at the bottom of this help article of Blogger.
For more and detailed help of using this feature with customized templates, you can read the post of Bloggerbuster “Read More function to Customized Templates”
Oh yes, you Might as well jump! Like official blogger blog says while announcing this feature.

Share Posts from your Blogger NavBar

Pradeep Kumar Singh — Sun, 30 Aug 2009 21:22:00 +0000

I guess most of you have removed the NavBar from your Blogger Template if you are using some custom versions of the template for your blog. Well, its now time to get back the NavBar again in your template. But not really if you don’t like to use this new feature of Blogger, which allows you to share posts directly from the NavBar. NavBar of the Blogger starting from august 27, 09, includes a “SHARE” button. This button will help you to share posts to popular social networking sites and even e-mail them directly. Social Networking sites have been really popular and a lot many people use those medium to gain readers by sharing posts on such sites. Social Bookmarking widgets are really popular in the blogosphere and now it seems easier when the blogger itself comes with idea of including that in its NavBar. And I know many of you don’t like this blogger’s idea of feature being introduced in the NavBar. Anyway, you can learn how to use this feature and things you can do with it in this post.

To use this feature it’s essential that you have the NavBar in your Template. Don’t worry if you have removed the NavBar already but still interested in this feature, here is how you can add the NavBar again.

NavBar Restoring Instructions

1. From your Blogger Dashboard go to Layout > Edit HTML.
2. In most of your templates, the Blogger Navbar is not displayed just because it’s hidden. Now search for this code within your Template

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

3. Delete this code from your template and now Blogger NavBar should be appearing in your template.
OK if you now have the Blogger NavBar in your template, you can see the “Share” button yourself in your blog.
Now if you want to use this feature, you need to click on that “share Button”, a pop-up menu appears with links to popular networking (sharing) sites “Facebook” and “Twitter” and also the “Google Reader”. (see the Image Below). If you happen to use this feature on the item pages of your blog, you shall gain access to the “Email” feature too.

If you use this New feature of Blogger there’s a hack you can try. The blogger buzz notes the hack as
“Here’s a fun hack: each URL that gets shared has a specific parameter appended (?spref=nn, where fb=Facebook, tw=Twitter, and gr=Google Reader). If you’re using Google Analytics to measure traffic on your blog, you can search for those strings to see how much traffic you’re getting from each source.” Via Blogger Buzz

My comments:

This is one more feature announced from Blogger as a part of its 10th Birthday. It’s really good to see ongoing improvements in Blogger with often addition of new features. Frankly this feature is not great though. At least, not for users like us who choose to hide the Blog NavBar. But in case if this feature persuades you to keep the NavBar back, then its sure going to be of your benefit. Or for users who are displaying the NavBar, this is sure going to be an additional important feature for their blog.

You Say

Did you really find this feature useful? What could have been done to make it more useful? Or did this feature really persuade you to keep the NavBar back for your blog? Let us know by adding comments in the box below.

Blogger has Label Clouds Now!

Pradeep Kumar Singh — Sat, 29 Aug 2009 15:37:00 +0000

Blogger is releasing many features as a part of Blogger’s 10th happy birthday. Many bloggers (Blogger User) requested Blogger to change the label gadget or make it more flexible when the blogger team invited suggestions from them last April. And as of blogging groups wish, Blogger has made this feature available. It has now improved its “Label” element, thus making it more flexible and customizable according to blogger’s need and wish. With this improvement Blogger user can easily change the old format of Labels display to “Labels cloud”. You can also choose among your labels to display in the gadget. We shall be discussing two major changes from blogger in this Labels widget below.

Label Clouds of Blogger

Labels in blogger were displayed as a long list with the numbers of post in the specified label previously. Though we could customize our widget to make changes according to our wish with the help of adding codes or using stuff such as javascript, it was bit tough. Now it’s relatively easier. You could just define what you need from the Blogger widget itself.
To add this feature you need to have already added the Labels page element to your template. If you haven’t added this widget, just go to PAGE ELEMENTS section under LAYOUT and “Add a Gadget” and choose “Labels“.
If you have already added the Labels Element in your blog, you can click on “EDIT” for the “Labels” widget.
See the Image below, you will get after you add or edit your “labels” widget.

Under the display option check that “Cloud” radio active button as shown in the image above. This will change your view of labels and you will get the new feature “Label cloud” in your blog.

Selected Labels to Display

Another Important change in the same “labels” gadget is the ability to choose the Labels to display. Previously, all Labels were displayed in the blog and this often limited to using labels if you have used the labels section for displaying the category one. Now you can select from the labels to display under the category widget (if you are using) or the same label widget.

As shown in the image below, you can edit the labels and choose by placing tick in the box adjacent to the specified labels you want to display. Deselect the labels you don’t want to display in your widget.

My comments:

I really like this feature of blogger and really appreciate it. However limitations such as actual differentiation among the “tags” and the “labels” remain even if we use under those topics.
This post is to make Blogger User aware of the new feature that is introduced lately. Blogger Buzz: Partly cloudy, chance of labels notes the feature “This is one of many features announced as part of Blogger’s 10th birthday. Happy Birthday!”
We wish to see more improvements soon as part of the tenth birthday of Blogger.

You Say

Let us know if you liked this new feature or any other opinions related to this by adding comments below.

Adding Adsense Ads in Blogger Posts

Pradeep Kumar Singh — Thu, 14 May 2009 14:14:00 +0000

Adsense Ads in Blogger posts has relatively higher CTR (Click through Ratio) and can also significantly increase the number of clicks you receive. Adding Adsense Ads along side bars or between different posts is an easy task but to place Adsense ads directly in the blog post requires some trick. Have you seen most bloggers placing Adsense ads right after the Title of the post? This is really crucial to increase your adsense earnings. But Adsense ads are not displayed if you directly add the adsense code in the blogger post or even in the template. Ok so through this method, you can add adsense in two most popular spots in blogger posts; either just below the title or at the end of the posts. You can also align them to left or right on these spots according to your need and look. In this post we shall discover how to add such Adsense ads in your posts so that you could earn more from them.

This adsense adding method is found very beneficial for bloggers to increase their adsense earnings. The idea of writing this post came to my mind when I stumbled Themelib’s article for increasing adsense earnings for better design. And the main section I can relate to the article is
“Inside Blog Posts – If we display Adsense ads inside post, it is found that it has relatively higher CTR. People mostly think this ads as a part of the content and click it often. And these ads have almost related words to the topic or key words you have in your specific blog post. (Thanks BloggerUser)”

Well, now let’s move on if you are really interested to add Ads in such way. Specifically, we shall be discussing two main steps in order to add such Adsense ads style.

Widget Adding Instructions:

1. First get your Adsense Ad code from your Adsense Account.

2. Parse the code to replace special characters with HTML entities. You can take help of the Blog Crowds Parse Code Website.

3. Navigate to the Layout of your blogger blog

4. Now Go to the Edit Html Tab

5. Click on Expand Widget Templates

Wait: Before Editing your Template, Save a copy of your current template by clicking ‘Download Full Template’ in ‘Edit HTML’ page of the Blogger ‘Layout’ Window and ‘Preview’ the changes before Saving.
6. Search for the following code inside your template html.

[/html]   or  1

PUT YOUR parsed Adsense code HERE

1



<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



1

This trick will certainly boost your adsense earnings. If you want to increase your adsense earning (which i hope most of you want to), then you should be applying this trick.
If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !You can also comment if this widget has really helped you as i said.

Changing Templates of Blogger Blogs

Pradeep Kumar Singh — Wed, 15 Apr 2009 13:43:00 +0000

Templates determine the main style of your blogger blog. Your Blogger blogs can have a unique design if you carefully select the templates of your choice and work in accordance to the design of the template. These templates are great to show your design, work out on your interest or they can even carefully portray your business. Well, you can have a lot of template modifying options from a wide range of blogger templates available on the third party sites which I discussed in my blog post “Places to find Best Blogger Templates” earlier. Changing the blogger template to another third party template is very easy but it also depends on which template you are going to use. Some templates may be relatively very hard to configure after you use them on your blog. So select the best template and lets get started to change the blogger template of your blogger blog.

Now let’s focus on how to use the templates efficiently or say properly. After you have carefully chosen the Blogger Template, you need to download that. Most templates are available to download in the Zip format and if so, you may need to extract them. Most templates have the “Read me” file along with the blogger template and its always best to go through that file for proper and specific instructions on what you need to do.
But then, almost all templates have the same way of being uploaded in your blogger template. So you need not worry. Just follow the steps below and you shall surely find it easy. Use the Images to make the process easy.
1. Download and extract the blogger Template.
With this you will be able to access the files included in that archive. The archive should contain a XML document. Figure that out.

2. Go to the Blogger Dashboard and click on the LAYOUT tab of the blog you need to change the template.
Under the layout tab you are on the page of Page Elements (sub tab) with this step.

3. Click the Edit HTML sub tab right along the Page elements Tab.
The edit Template page (Backup / Restore Template) opens .
Use the Image below to get find out where you need to be if you lost with these words.
Changing templates in blogger blogs

4. You may need to Backup your existing template in case you make your mind to use the previous one again.
To Backup your existing template, please click on the Download Full Template and save the file for your use in future. This step is necessary in almost every attempt you make to use the EDIT HTML tab.

5. Upload the Blogger Template file by locating it with the help of the Browse button and using the upload button to confirm it.
The browse button will help you to locate the file from your saved place. After you have selected the required xml or notepad file, click on the upload button adjacent to the browse button.

6. Confirm and save for the new template.
A warning in red will appear saying that your widgets (if any) from the previous templates and going to be deleted if you are going to use these template. You need to confirm and save this for the sake of new template.

7. Enjoy your new template.

See it’s that easy. Isn’t it? You now have a new template and so a new look for your blog. Now the next step is that you may need to configure the widgets in your blog. It’s always good to follow the guidelines of the download and setup page provided by the blog template author in order to accomplish that. However, you can have general idea on configuring your widgets on another post “Configuring widgets on Blogger blogs”.
Enjoy with variety of templates and let us know which template you are using on your blog.

No related posts.