Blogger Tips And Tricks 2012

Shutting Down Do Follow

I am shutting down the Do Follow movement due to excessive spammy comments on blogs.. Nowadays new webmasters are becoming so spammy that they hire guys to comment on DO FOLLOW blogs. I have been receiving a lot of these now a days.. and so it was almost impossible to reply to genuine comments.
I keep on moderating the comments but it is a tedious task considering the number of spam comments i am getting..

Sorry to the genuine commentators.. From now on i will try to reply to your comments as soon as i can.

Source: http://www.bloggerplugins.org/2009/06/shutting-down-do-follow.html

Breadcrumb for Blogger

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

The trails like Home » Label » Post Name are the breadcrumbs.

Here is a screenshot of a Breadcrumb Trail

Now that you know what a breadcrumb is , let us get into the details of adding the same to your Blogger Blog.

1. Go to Template > Edit HTML and check the check box which says Expand the Widget Templates.

2. Now in the Template, Find

<b:include data='top' name='status-message'/>

and immediately above that, paste this line of code

<b:include data='posts' name='breadcrumb'/>

3. Now find

<b:includable id='main' var='top'>

If you find two occurrences of this, then locate the second one(locate the only one otherwise) and immediately above that paste this code snippet

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove those 2 green lines of code.

4. Save the Template

5. If you want to make the breadcrumb smaller then go to Template Designer > Advanced > Add CSS and add the following Snippet there and Apply the changes

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Now you should have a working breadcrumb navigation on your system. The original breadcrumb idea is based on Hoctro's Code from HOCTRO breadcrumb hack. It has been modified to accommodate Search Pages, Label Pages and Archives.The post breadcrumb uses RDF breadcrumb Markup to assist you in displaying breadcrumbs in Google Search Results.

Source: http://www.bloggerplugins.org/2009/06/breadcrumb-for-blogger-blogspot.html

How to setup custom domain for your blogger blog?

What is a Custom Domain ?

When you register your blogspot blog, you will get a new blog with some URL like http://yourblogname.blogspot.com . This blog will be hosted on Google’s servers and you can make posts on your blog by logging in at Blogger.Com. Now Custom domain means that we will be using our own domain name instead of having the .blogspot.com extension. That is our blog URL will look something like http://www.yourblogname.com When you use a custom domain, your blog will still be hosted on Google’s servers and you can continue making posts from Blogger.Com as you usually do.So the only thing that changes is the blog’s URL

How much does this Cost?

For using a custom domain you should buy your own domain name. The price of the domain name will vary depending on the domain extension that you choose. But normally most of us will prefer to buy domains which ends with a .COM .COM, .ORG , .NET domains will cost something under 10 US Dollars. So you just need to spend 10 dollars and you can have your blog running at the new domain which you buy.

Where to Buy the domain from?

There are many domain registration websites. You can directly buy your domain from any of them. But if you are a little lazy, then you can buy the domain directly from Blogger.Com .Actually Blogger is not a Domain Registrar and they buy domains for you from third party sites. So i always prefer to buy from other domain registration sites.

How to buy the domain and setup my blog with the new domain?

If you want to setup your custom domain by buying the domain from Blogger.Com, then you just check out this Video tutorial from the Official Blogger Help Team.

You can add Google apps like Gmail and Docs on your domain very easily.Actually blogger will do everything for you.

By the way i wont advice you to buy domains from blogger. I would prefer to buy domains from Name.Com or Godaddy.Com

1. Instructions For Setting Up Blogger Custom Domain on Name.Com

2. Instructions For Setting Up Blogger Custom Domain on Godaddy.Com

It just costs something less than 10$.. Isn't it worth a try? Hurry up guys get your own custom domained blogs and let me know if this tutorial was useful for you.. :)

Source: http://www.bloggerplugins.org/2009/06/how-to-setup-custom-domain-for-your.html

Adsense Below the post title in Blogger

Your blog earnings depend mainly on your blog's traffic and on your ad placement. One important place to place the ads is below the Post title. It will give more importance to the ads and there is more possibility to get clicks. This is in accordance with the Google Adsense TOS

I am personally using the same hack on this blog. You can see adsense ads below the post title on all my pages.Ok now let us get into the details of how to set it up.

First of all login to your adsense account and generate ad code of optimum size..
Now copy that adsense code into the following box and parse it(you may not see the parser if you are reading my feed)

Copy off the parsed code..
Now login to your blogger account.
Go to Layout > Edit Html and expand the widget templates.
Find this piece of code

<data:post.body/>

Now add the following code just above that line.

<b:if cond='data:post.isFirstPost'>
Put your parsed adsense code here
<br/>
</b:if>

From now on you should have adsense below the post title. On pages with multiple posts(eg: home page, label page etc) , the adsense ads will show up only on the first post(i.e below the post title of the first post). It wont show up on the other posts on the same page.So you are abiding by the Adsense TOS.

Source: http://www.bloggerplugins.org/2009/06/adsense-below-post-title-in-blogger.html

Back To Top / Scroll To Top Widget For Blogger / Blogspot

You might have seen a Scroll to Top or Back To Top button on many sites and blogs.You can see a similar button here on my blog.

Ok what is the advantage of using a scroll to top or back to top widget?
When you add the scroll to top widget you will get a button on the right corner and when a user clicks on it he can get back to the top of the blog.

How to Install the Back to Top Widget for Blogger

I hope this will improve your blog's navigation interface.This will provide them with an easy way to get back to your blog's top.

Note: If you are reading this in a feed reader, the widget installer maynot work.In that case visit the atual post

Source: http://www.bloggerplugins.org/2009/06/back-to-top-scroll-to-top-widget-for.html

Automatic Post Summaries for Blogger with Thumbnails

Wordpress users might have seen the Wordpress excerpt thing, which displays a summary of your post. Now we have something similar for blogger.Actually i should say it is really amazing..This hack will automatically create post summaries with thumbnails.. you needn't need to add any extra code in every BlogSpot that you make..These summaries will be displayed on all pages other than the post page..Here in my blog i am using a modified version of the same which displays summaries on pages other than the post page and homepage.Check out some of my labels to see the hack in action..

First of all, this hack was developed by Blogger Sphera . I will try to explain his hack to you guys..

First of all Edit your blogger template

Find this code

</head>

and replace it with

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://bloggergadgets.googlecode.com/files/excerpt_min.js' type='text/javascript'/>
</b:if>
</b:if>
</head>

Off course you can edit these parameters..

Now Find

<data:post.body/>

Replace it with

And you are done.. now you should have the post summaries on your homepage,search results,archive and label pages..

Update: 29/03/2012 : If this Script is not working on your blog anymore, please change http://blogergadgets.googlecode.com/files/excerpt.js to http://bloggergadgets.googlecode.com/files/excerpt_min.js. Sorry for the trouble :-)

Source: http://www.bloggerplugins.org/2009/06/automatic-post-summaries-for-blogger.html

Creating a Separate Archive Page or Labels Page for blogger

Many bloggers dont prefer to display the blog archive and the labels on each and every page of their site. They may wish to create a separate page for the Blog Archives. I have made one such implementation of a blog archive here . You can also check out my label cloud page .

So i think you guys understood what i am trying to explain.

Ok lets get into the details of doing this. Blogger allows little bit of programming.Those who have coded using C or any simple programming language might surely have used the conditional if statements. The same thing is there for the blogger template also.learn about these conditional tags over here and come back..

So how are we going to do this..First we will make a blank post with an appropriate title.In this case i have made a post with title "Label Cloud" .Also make sure that you have disabled comments on this post .You can do that from the Post Options in your Post Editor. When making the post set the post date to a little earlier date so that this post wont reflect in your feed.(You can do that in the post options in your post editor).Now we have created a page where we want to display our blog label cloud. Note that url. We will need it

Now we are going to make a new label gadget.For this goto Blogger > Template > Page Elements and add a Label gadget.Drag it just below the blog post gadget.

Ok now we will get a label gadget on every page of our blog.(If you want you can convert the label widget into a cloud)Now we want to hide the blogpost widget on this particular label page.For this we use conditional tags..
I placed the following code just below ]]></b:skin>

<b:if cond='data:blog.canonicalUrl == "http://www.bloggerplugins.org/2005/06/label-cloud_06.html"'>

<style>

.post{display:none;}

.comments-block{display:none;}

.comment-form{display:none;}

.comment-footer{display:none;}

.blog-pager{display:none;}

.feed-links{display:none;}

.comments{display:none;}

</style>

</b:if>

Now the Blog Post widget will be hidden in the Label Cloud Post Page.The label cloud appears on every blog page.Now we have to make it invisible on other pages(pages other than the cloud page).To make a widget invisible we have to wrap conditional tags within the main b:includable of the widget.Other B;includables needn't be wrapped as they are called from the main includable(This can be compared to main function and other functions in C. If the main function is disabled,the program wont work.Similarly if the main includable is disabled,then the widget will be hidden).The general structure of a any widget looks like

<b:widget id='something' locked='false' title='something' type='something'>

<b:includable id='main'>

----

----

----

</b:includable>

Other includables //Not Present in Label Widget
</b:widget>

Now we have to impose the conditions within the widget which will make the structure to

<b:widget id='something' locked='false' title='something' type='something'>

<b:includable id='main'>

<b:if cond='data:blog.canonicalUrl == "http://www.bloggerplugins.org/2005/06/label-cloud_06.html"'>

----

----

----

</b:if>

</b:includable>

Other includables //Not Present in Label Widget
</b:widget>

Similarly we can create a separate archive page also..
Remember that the Archive widget has more than one b:includables..You just need to hide the main includable..
.

Note:In this tutorial you will have to modify the URLS properly.I have used my blog urls for explanation.This method doesn't cause problems with rearranging of Widgets in the Page Elements Tab.

Permalink:Creating a Separate Archive Page or Labels Page for blogger

Source: http://www.bloggerplugins.org/2009/06/creating-separate-archive-page-or.html