Blogger Widgets

Facebook Share Count Buttons For Blogger

2009-10-28T12:43:00.002+05:30

Facebook has now officially introduced the Retweet like buttons for your blogs or sites. These buttons look much similar to the Retweet buttons by Tweetmeme. Facebook has 5 styles of Sharing buttons. Here we will see two of them.

Adding a Facebook share count button will show a neat count of how many times your blog post has been shared on Facebook.

Facebook Share Button Style 1

Code for Facebook Share Button Style 1

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Style 2

Code for Facebook Share Button Style 2

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Compact Style 1

Code for Facebook Share Compact Button Style 1

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Compact Style 2

Code for Facebook Share Compact Button Style 2

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

How to install Facebook Share Count Button on your Blogger Blog?

1.Select one of the Share Button Styles and copy the Corresponding Code.

2.Now login to your Blogger Dashboard and navigate to Layout > Edit Html and expand the widget templates

3.Find this piece of code

and immediately after that place our Facebook share button code(that you copied)

If you were unable to find this code in your template,then look for the first occurance of

<data:post.body/>

and immediately before that paste our Facebook Share button code(that you copied).

5.Save the template and you should get a facebook share count button near each of your blog posts.

If you liked this post and if it helped you in implementing the facebook buttons, then please consider sharing this post on Facebook using the button on the top-right of the post :)

Link: Additional Share Button Styles on the Facebook Developers Wiki

Permalink :Facebook Share Count Buttons for Blogger

Create a Facebook Fan Page for your Blog

2009-10-28T10:26:00.009+05:30

Facebook is a great Social Networking Site to promote your blog or brand. Most of the major brands do have a Facebook Fan Page. Here are some examples of Facebook Fan pages – Coca Cola FB Fan Page , Mashable FB Fan Page. Are you impressed and wanna create one for your blog? I too wanted to create one and i finally made it. Here is the link of my Facebook Fan Page . So lets start making our own Facebook Fan Page for our blog.

1.Go to the Create Fan Page Link on Fabebook

Select Brand, Product, or Organization > Website . Type the Name of your Fan Page and agree to make it public. Now just hit the Create Button and your Fan page would be created :)

2.On the Next Page, select the options Change picture and Edit Information and you what is to be done there :)

3.Now the most important thing that you might want is to automatically import your blog posts to the Fan Page .From the Tabs, Click on the + and Opt for Notes.

On the next screen Opt to Write a New Note

4.You will see an Editor and some icons at the Top . Click on the Notes Icon at the top.

5.On the Next Page, opt for Import a blog

6.On the next screen, type in your blog URL, and agree to the agreement and Click Start Importing

7.On the Next page, Confirm the Blog import

8.After confirming, all your blog posts will be imported to the fan page. Now click on your Fan Page Link and get back to the fan page..

9. Now we have successfully created the Fan Page.If you want to remove some of the unwanted tabs like Discussions, Photos, Boxes etc, then you can go to that Tab and remove it.

Now you can add a Fan box to your blog so that your blog readers can join you on Facebook. To do this, click on the Promote with a Fan Box link below your page profile photo.

Now Select the Options that you want and then opt to to add the fan box to blogger using the Blogger Button

Now you should have the Fan box added on to your blog :)

Your Fan Page URL will look something like http://www.facebook.com/pages/Blogger-Widgets/252379165362 .Now if you have a pretty good number of fans(i think the minimum requirement is 25 fans) , then you can have a pretty facebook URL like http://www.facebook.com/bloggerplugins instead of a long one like http://www.facebook.com/pages/Blogger-Widgets/252379165362 .

To claim such small usernames for your facebook page, go to http://www.facebook.com/username/ and Click on Set a username for your Pages. There you can select the small pretty user name for your fan page.Once you opt for a user name you can’t change it back again. So be careful when choosing your Facebook Fan Page Username.

10. This is the most important Step of all ;)

Be my fan on Facebook ;) and you will get all my blog updates on my Facebook Fan Page.

Permalink: Create a Facebook Fan Page for your Blog

Setting up Blogger Custom Domain on Name.Com

2009-10-21T02:56:00.003+05:30

If you are not sure what a custom domain is, then first read this article about Blogger Custom Domains and come back .

How to buy the Domain Name?

Name.Com will allow you to buy domains with different extensions like .COM, .NET, .ORG etc .

1. First of all Goto Name.Com and you will find a Search Box there. This search box can be used to check if the domain name is available or not. For example if i need the domain mynewcustomdomain.com , then i will search for mynewcustomdomain

2.Name will show the available domain name extensions.Select the one you want.

3.Click the Checkout Button and on the next screen opt to create an account(if you don’t have one. if you have one , then login with that account)

4.Now finish the payment process(using credit card or paypal) and you will be having the domain under your name.com account

How to Setup the Blogger Custom Domain?

1.If you are logged in at your name.com account, then click the Account Icon V

2. Now you will be taken to a page listing all your domains. Click on the domain name which you want to use for your blogger blog.

3. On the next screen Click DNS Management form the Right Sidebar

4.In the DNS Management, add a new CNAME record with the following values CNAME, www, ghs.google.com,1800 and submit

5.Now again add another DNS record with the following values A, (leave next field blank),216.239.32.21 and 1800 and click submit

6. Now we are done setting up the CNAMES

Adding the Custom domain at Blogger.com

1.Login to your Blogger Dashboard and Navigate to Settings > Publishing.

2.Opt For Switch to: Custom Domain (Point your own registered domain name to your blog) and switch to advanced settings

3.Type your new domain there ,fill in the Captcha and save the settings.

4.Now select the redirection Option and save the settings Once again

5. Now your blog should be visible at your new domain. The changes can take up to 3 days to take effect (This is because your ISP’s DNS Server has to get the new updated information about the domain records.)

Setting Up Google APPs

1.Login to you Name.Com account once again

2.Click the Account Icon and then Click the domain name that we just used.

3.Now Click on the Enable link next to Google APPS

4. On the next Screen fill out the required details and click Continue with setup

5.Now you will be able to access your version of Gmail at http://mail.yourcustomdomain.com and similarly you will have the other Google apps running on your sub domains.

Try it out guys. and let me know if this tutorial helped you in any way :)

Permalink: Setting up Blogger Custom Domain on Name.Com

Google Ajax Search With Your Adsense Ads

2009-10-18T09:33:00.004+05:30

All of you might have seen the New Ajax Search Gadget on your Layout > Add Gadget Page. This Ajax search gadget doesn't support adsense ads.But you can now have a Google ad supported Google Ajax search widget on your blog.The speciality of the Ajax Search is that it can search your blog, without actually leaving your blog.(no need to go to a new page.. it acts like an inline search)

The Ad supported Ajax search Code is available at Google Web Elements .You can see 3 options there.

Automatically Search My Site
Search my Site and use Adsense for Search
Use an existing Custom Search Engine

For showing adsense ads you have to opt for option 2 or 3 .If you choose to use the second option,then you will have to provide you Adsense publisher id(which looks like pub-xxxxxxxx).If you opt for the option 3, you will have to provide the Custom search ID, which will be present in your Google Custom search Code.[Code is generated inline when you enter any of these ids.]

After grabbing this code, just go to your Blogger > Layout page and add a new HTML/JavaScript Gadget and paste the Google Web Element Custom Search code there and save the gadget. The Gadget will look better if you drag it to above the Blog Posts Widget and save it.[that area has got enough space to display the ads :)]

Here is a preview of what you should see.

Custom Search Control

Web

Web

If you want to change the colours and styling of the search results, you will have to add additional CSS Classes.

Update: – Now Google CSE has added all these things. and much more(themes and other customization stuff) So it would be easier for you guys.. :)

Permalink :Google Ajax Search With Your Adsense Ads

Some Friend Connect Gadgets that you might not know

2009-10-17T01:55:00.003+05:30

Most of you might be aware of the Google Followers gadget.Its just one of the different friend connect gadgets.

Where Can i get a Friend Connect Gadget?

1. Goto Google Friend Connect and on the left pane you will see a list of your blogs.

2.Expand your blog name(just click on it) and Opt for the “Social Gadgets” From the expanded list.

3.Now you can see a list of gadgets.You can customize the colours and the Generate the Code.

4.Copy this Code . Now in your blogger layout page(of the same blog), add a new HTML/JavaScript Gadget and paste this code there and save.

5.Now you should have that gadget running on your blog.

Here is a list of some of the Popular Gadgets[Some of them which can be demoed here :)]

1.Members Gadget – This is the same thing as what you see in a normal Followers Blogger Gadget

2.Cloud Gadget

Shows your followers as an animated Cloud

3.Sign in Gadget – This is also a followers gadget with a sign button like style

There are so many other friend connect gadgets like Recommendation Gadget, Comments Gadget, Ratings and Reviews Gadget and Lots More.The Recommendation gadget can be used as a popular posts gadget.so you guys better check out the big list of friend connect gadgets, available for you. And one most important thing. Don't forget to follow me using any of the Friend connect preview gadgets listed here ;)

Permalink: Some Friend Connect Gadgets that you might not know

A New Make over

2009-10-15T17:38:00.006+05:30

Hi guys, today i have tried to improve the look of this blog. We now have a new template specially designed and coded for this blog. First of all i would like to thank my friend Klodian of Deluxe Templates for helping me in coding this template.He is just awesome. Thanks a lot buddy for your valuable help and support.. What do you think of this new make over? Give me your feedback guys :)

Show avatars on Blogger Comments

2009-09-18T11:59:00.005+05:30

Blogger is now introducing features every day as part of its 10th birthday celebrations.Now it has formally announced the Blogger Comment avatars. To know what it means take a look at the comments here on this blog and you will see the profiles pictures of the commentators near to the comments.If you are using some default blogger template things would be much easy.Here is a little screenshot of the new feature.

Implementation of Comment Avatars

1.First of all Go to Blogger > Settings >Comments and enable “Show profile images on comment”

2.Now if you have a normal un customized template you will see the avatars on the comments on your blog.

3.If you have a customized template you will have to add some codes and play around with your template.For that first go to Blogger Layout >Edit HTML and backup your template.

4.Expand the widget templates and check if you can find this line there

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

If you can’t then that means we have something to do..

If you couldn’t find this,then do the following steps.

a)Find

<dl id='comments-block'>

and replace it with

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

b)Now Find all occurrences of

<a expr:name='data:comment.anchorName'/>

and replace each of it with

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

If you are using the author comment highlighting trick and if doesn’t work out with that trick,then leave a comment and i will try to help you out..

Further Styling.

If you want to add a default avatar for the ones with no profile pics,then place the CSS code just above

]]></b:skin>

CSS Code

.avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
.avatar-image-container  img { border:none;}

You can customize the CSS according to what you need.

If you need bigger avatars instead of smaller ones,then use the following CSS instead of the one above.

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(http://3.bp.blogspot.com/_u4gySN2ZgqE/SrSUS1YpxwI/AAAAAAAAAv4/DihiWlWRxQs/s400/grav.png);width:50px;height:50px;}

This will give you a bigger avatar and also a default gravatar image but it has a little drawback.It will also resize the small blogger favicons to a big size.(blooger favicon is displayed when a blogger user doesn’t have a profile avatar.Similarly OpenId also has a similar small icon.. ).

BTW to set you avatar pic you can use two methods.You can choose the edit profile link on your blogger profile and upload an image there,The second method is to enter a blogger comment somewhere in any blogger comment form and then click the Preview button instead of the Post Comment button.Now you will see an option to upload your avatar.

In case anything bad happens restore the template backup.. and comment here..:)

Permalink: Show avatars on Blogger Comments

Numbered Page Navigation For Blogger

2009-09-17T17:29:00.013+05:30

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about.

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find

]]></b:skin>

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

</body>

and replace it with

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-—>
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.

Permalink: Numbered Page Navigation For Blogger

Post Summaries on Blogger With Read More

2009-09-10T22:40:00.006+05:30

Blogger is fulfilling some of our expectations. Now blogger officially supports Post Summaries With Read more.This means that you wont need any JavaScript and CSS based tricks to display post summaries on Non-Post Pages.The static pages would be out soon. A screenshot on the official blogger buzz blog has made it more clear.

How Does This Work

Blogger has introduced something called jump breaks. This will help you in creating the summary.

What is a jump break? - Jump break is a special tag which can be inserted anywhere in a post using the post editor.When you have inserted a jump break into a post, the portion of the post above(or before) the jump break will serve as the summary of the post. This means that only this smaller portion will be displayed on Non-post pages.

How to insert a jump break?

If you are using the New Advanced Post Editor, then you can insert the jump break easily from the post editor.

If you are not using the New Post editor,then you will have to manually type the jump break tag . To do that just place  [Note that there is a space before and after more.] at the position where you want the break to occur. Now try going to your home page,and only the summary would be displayed on the home page.You might get problems if you are using a modified and highly customized template. In that case try the following adjustments. Go to your Blogger Layout > Edit HTML and expand the Widget templates. Now check if the following code is already present in your template

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>  
      </div>
    </b:if>

If this code is not present in your template,then add this code before

<div class='post-footer'>

Now it should work properly.. If it doesn't,then leave a comment here and i will try to help you out..

Changing the Read More Text

By default the read more link text is Read more » . You can change this to whatever you like. To do that, Go to Blogger Layout and click on the Edit link on the Blog Posts Widget.

Change the Post Page Link Text and Save the Settings..

Drawbacks of the New Feature

For the post summaries to work effectively, you have to edit each of your posts and add the jump link in each of them. Blogger wont generate summaries automatically.:(

A mistake that you might make.

When you insert a jump break in the post,the part of the post after the jump break gets truncated. In your posts,there are some opening div tags before the jump break and some of these are closed after the jump break. So when blogger truncates the part of the post after the jump break,the closing div gets missing. That's why the sidebar shifts to the bottom.

So in order to solve this you should take some care in inserting the jump break.The jump break shouldn't be inserted into open tags..

For example something like this shouldn't happen.(You can see these things if you switch to Edit HTML instead of Compose)

<div>
This is the short summary

This is the rest of the post
</div>

As it is clear from this code, the jump break is inserted into an open div tag and the div is closed after the jump break.This should not happen.You should insert jump breaks after closing the div tag..

So this should look like

<div>
This is the short summary
</div>

This is the rest of the post

I hope that the blogger post editor will soon show warnings when the jump break is inserted into open tags.

Permalink:Post Summaries on Blogger With Read More

The Best Blogger Resources

2009-09-10T22:04:00.018+05:30

There are many many sites about blogger. Here i would like to share with you all blogger related sites which i love. All of these are my personal favourites.So i thought of sharing them with you guys! All of these sites provide tutorials,gadgets and templates which can be used on Blogger.

Blogger Tutorials and Gadgets

Amanda Fazani

She writes at Blogger Buster and Gadgets For Blogger . Blogger Buster is the Best Blog on Blogger Tutorials. Gadgets For Blogger is a directory which list all useful gadgets that can be used on blogger. Amanda also designs templates which can be found at Blogger Buster Designs and she also has made some premium templates at Theme Forest

Some Other Sites on Blogger Tutorials

Blogger Templates

Klodian

He is the person behind Deluxe Templates. He is now a good friend of mine and he has got a good collection of Blogger Templates.Some of these were inspired from Wordpress and other templates.All of these templates are perfectly coded and you can get them from his blog.

Dante

Dante has some truly original Blogger Templates at his blog.(Dante Araujo) . I really love his templates because they are so original. and elegant .He has got some really elegant templates that serve as image galleries. I haven't even seen any wordpress template to match those gallery templates. All of these blogs are powered by blogger.

Other Template Resources

Another great resource for Blogger Templates is Btemplates . Its actually the biggest collection of Blogger Templates which are organized well into categories and tagged properly so that you can find the best one out of them.

You can also check out my bigger list of Blogger Template Resources .

There are many other good resources for blogger. These are just my personal favourites.

New Advanced Post Editor For Blogger

2009-09-03T12:08:00.005+05:30

Blogger has released an updated version of the Post Editor.This one has more features than the old post editor.Here is a screen shot of the new Post Editor,so that you can get an overview of what is new in this advanced post editor.

Some of the added Features in this new Editor are:

Improved Image Handling
Improved Raw HTML
Geotagging
Resize the Post Editor Vertically
Easy Link Editing in Compose Mode
Better Previews
Draggable Placeholders
A New Advanced ToolBar

How to Enable the New Post Editor

Go to the Settings Page, and under the global Settings, Opt for the Updated Editor and save the settings.

Blogger Releases the new version of the Label Widget

2009-08-26T11:58:00.010+05:30

Blogger,as a part of its 10th Birthday celebrations, has now released a new version of the label gadget.This one is much better that the old version

What is new?

It comes with a Label Cloud.
It lets you choose which labels are to be displayed.
You can customize it further using CSS.

Drawbacks

The cloud just has 5 variations.All labels will be divided into 5 classes depending on the usage of these labels.
It would have been better if there was a bigger number of classes.

How to Customize?

You can customize the looks further by using CSS..As i said it has 5 classes of clouds..You can add CSS styles to each of them.

Here is a sample Style which will give a bluish look for the cloud..Here i have applied styles for all 5 label classes and their hover styles (so 10 style definitions in total).

.label-size-5 a {color: #2789ce; /*color of a label of class 5*/
font-size: 3em;
text-decoration: none;
   }
.label-size-5 a:hover {color: #2789ce; /*color of a label of class 5 on hover*/
text-decoration: underline;
   }
.label-size-4 a {color: #2789ce;/*color of a label of class 4*/
font-size: 2.5em;
text-decoration: none;
   }
.label-size-4 a:hover {color: #2789ce;/*color of a label of class 4 on hover*/
text-decoration: underline;
   }
.label-size-3 a {color: #2789ce;/*color of a label of class 3*/
font-size: 2em;
text-decoration: none;
   }
.label-size-3 a:hover {color: #2789ce; /*color of a label of class 3 on hover*/
text-decoration: underline;
   }
.label-size-2 a {color: #2789ce;/*color of a label of class 2*/
font-size: 1.5em;
text-decoration: none;
   }
.label-size-2 a:hover {color: #2789ce; /*color of a label of class 2 on hover*/
text-decoration: underline;
   }
.label-size-1 a {color: #2789ce;/*color of a label of class 1*/
font-size: 1em;
text-decoration: none;
   }
.label-size-1 a:hover {color: #2789ce; /*color of a label of class 1 on hover*/
text-decoration: underline;
   }

Here all of these CSS styles are customizable.You can change the colours and font sizes of each of the 5 classes.

color: #2789ce; is responsible for the colouring of each of the classes.You can change it appropriately with some other hex colour code or something like color:red;

You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class.. (em is a unit of font size just like px)

I have commented the css codes(10 comments)..You can remove those comments if you want(eg: /*color of a label of class 2 on hover*/ is a comment)

These CSS style definitions should be placed above

]]></b:skin>

If you are not impressed by the customizability of this blogger label cloud,try this advanced version of the cloud which is highly customizable Label Cloud Widget For Blogger

and immediately after that place our retweet code(from our text file).and you are done :)

If you were unable to find this code in your template,then look for the first occurance of

<data:post.body/>

and immediately before that, place our retweet code(from our text file)

5.Save the template.

Now you should have a retweet button near each of your blog posts.

Retweet Button for Blogger classic Templates

This is not for the blogger XML templates that we normally use.If you are using a blogger classic template,these four code styles can't be directly used in your template.You will have to modify any of these four code styles for it to work on the classic template.In any of these four code styles change <data:post.url/> to <$BlogItemPermalinkUrl$>

Now you have got the code for the classic template!

Where to place the code for classic blogger template?

Place the code just above <$BlogItemBody$> and save the template.Now you should have the retweet buttons on your classic blog.

If you liked this post, why not help me by retweeting it.. :)

Additional Note: How to check the retweet count of any url?

To check the retweet count of any url,just go to this url in your browser. http://api.tweetmeme.com/imagebutton.gif?url=http://twitter.com .Make sure to replace http://twitter.com with the url whose retweet count you would like to know.

Alternate Comment Forms For Blogger

2009-08-11T10:25:00.011+05:30

Have you ever felt that the blogger comment form (even the embedded inline one) doesn’t look pretty.Don’t worry you can convert the default comment form of blogger to an stylish commenting system which enables threaded comments and author images.Here i am listing some of the most popular commenting alternatives,.

These are the three famous commenting systems!

1. Intense Debate –

To give you a better demo,i am using the intense debate commenting system on this post.This is now owned by Automattic, the makers of Wordpress.This is my personal favorite and i am now confused whether i should switch to this or if i should use the default blogger commenting system.

2.DISQUS -

This is another Commenting system – It is the same thing that Mashable.com uses for its comments.

3.JS-Kit (Echo)

This is also another JavaScript based commenting system.Echo offers both free and paid packages!The free package comes with threaded comments and an interface where the commenter can add videos,images,similes, etc.The commenter can also format his comments using a simple WYSIWYG comment editor.

When you try to go for any of these commenting systems,make sure that you backup your template and keep a copy,so that you can revert back if it didn’t work out well.

These are the three most popular commenting systems.They come with threaded commenting with Gravatar based profile images,which can make you commenting system look more professional.I personally prefer Intense Debate over the others.

So if you want to remove the default blogger commenting system and get a better commenting interface,then you can opt for any of these commenting systems.

Note: These comment forms come with an option to show the comment form on new posts only(means posts with 0 blogger comments)!That means your old comments will stay intact and will use the old blogger comment form.(This is optional.. you can also revert all posts to use the new commenting system.But in that case, you cant display the existing comments easily..)

What can you expect from blogger in the future?

2009-08-11T07:47:00.011+05:30

If my guesses are correct,blogger will soon come up with post summaries(+ read more link) and static pages.

Some of you might have noticed the changes to your blogger templates.I have seen some new codes which give me the feeling that something better is coming!

Blogger May Soon have Static Pages like in Wordpress

This code gives me the feeling that blogger too will soon have Pages like in Wordpress

~~Blogger May soon have the Read more link and Post Summaries.~~ - Blogger has now added this Functionality.

This thing has been around for a while.

This code should probably give the indication that we will soon see post summaries and read more links on blogger..

When will these become a reality.. :)

Link to me widget for blogger

2009-08-09T12:47:00.004+05:30

This is a nice little widget which can find its place in your blog’s sidebar.You might want to let your readers link back to you in an easy way.We will now make a new Link To Me Widget which will display the code needed for a reader to link back to your blog.We will also provide a Add link using Blogger Button.

This button will work like a widget installer,which makes it easier for your readers to add your link.They can link back to you easily by adding your link to me widget.

How to make the Link to me Widget?

1.First of all Make a Small Logo of your blog,which can easily fit into any blog sidebars.It should be small and pretty :P

2.Now upload this image somewhere.[You can use blogger to upload the logo if you want or you can opt for some service like tinypic.com]

3.Now note the url of this uploaded image

4.Ok now you Copy this Code into a Text File

<p>If you like this blog,then link back to me.<br/>
This is what you will see.</p>
<div style="text-align: center;">
<a style="border:0px;text-decoration:none;" href="Your_Blog_URL" title="Your_Blog_Title">
<img alt="Your_Blog_Title" style="border: 0px;" src="Url_of_a_Small_logo_of_your_blog"/>
</a>
</div>
<textarea rows="3" cols="30">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea><br/>
<br/>

Optionally use this Widget installer to add this link to your blogger blog.

<form action="http://beta.blogger.com/add-widget" method="post">
<input style="display: none;" value="My Favourite Site" name="widget.title"/>
<textarea style="display: none;" name="widget.content">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea>
<br/>
<input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/>
</form>

5.In this code replace all occurrences of Your_Blog_Title with the Title of your blog

6.Replace all occurrences of Your_Blog_URL with the url of your blog.

7.Replace all occurrences of Url_of_a_Small_logo_of_your_blog with the url of the logo that you uploaded.

8.Now your code is Ready!!

9.Copy out the modified code from your text editor.

10.Now Goto Blogger > Layout page

11.Choose to add a gadget and Opt for HTML/Javascript

12.In that widget paste the modified Code and Save.

Now you should have a link to me widget on your blog.If you want to test the Add Link With Blogger Button,Then try adding the widget to your blog itself.[You can remove it after testing!]

With Slight Modifications to the code,you can change this to a text link instead of an image link.

If you need some help in Customizing this widget, then drop in a comment or better contact me via a topic at the Blogger Forum

Height Fixer For Blogger

2009-08-07T23:21:00.007+05:30

Making the Sidebar and the Post Area to be of Same Height

Some of the simple blogger templates use CSS to set the background color of the sidebar and the main post part.In this case,the heights of these two columns can be different making it look a little awkward.In many cases you may want to make both of these columns of the same height.

If you didn't understand what i am talking of,then i will show you some demos.

Check out the sidebars of both

Blog Without Height Fixing – Link

Blog After Height Fixing – Link

The height adjustment can be done using a very simple javascript code.Actually i had to make something like this for another site of mine.So i thought of sharing this with you guys,

Here is the height fixing script.

<!--Height Fixer Starts-->
&lt;script type=&#39;text/javascript&#39;&gt;
&lt;!--
onload=function() {

var mh = document.getElementById(&#39;main-wrapper&#39;).offsetHeight;
var sh = document.getElementById(&#39;sidebar-wrapper&#39;).offsetHeight;
if(sh&gt;mh) mh=sh;
document.getElementById(&#39;main-wrapper&#39;).style.height = document.getElementById(&#39;sidebar-wrapper&#39;).style.height = mh+ &#39;px&#39;
 }
//--&gt;
&lt;/script&gt;
<!--Height Fixer Ends-->

What does this height fixer do?

When the page is fully loaded,this javascript code will get executed(as we have used onload). Now the variable mh will get the value of the height of the div with id main-wrapper.The variable sh will get the value of the height of the div with id sidebar-wrapper,Next we make a check.We check if sh is greater than mh.The greater of these values will be assigned to the variable mh

Now we set the height of both the divs[div with id sidebar-wrapper and the div with id main-wrapper] as sh pixels. So what does this actually do?? This script checks which of these divs have a larger height and assigns that larger height to both of these divs thus making both of them of equal height.

Where to place this height Fixer Code?

The height fixer code can be placed anywhere in the head section of your template.If you are still confused about where to place the code,then place it just above

</head>

Where else Can i Use this Script?

This script can be used anywhere where you need to adjust the height of two divisions(divs) to be the same.In that case don’t forget to change main-wrapper and sidebar-wrapper in this script with the respective ids of those divs.That means you can use this script to adjust the height of any two columns and make them of same height.

Why is the script having so many complex characters like < > etc?.

This is a parsed javascript.Blogger has problems with normal javascript(you might know this if you have tried to add the adsense code into the template).

Does this work on All Browsers?

This is a a very simple javascript code and it will work on all browsers.

Your comments and suggestions are always welcome.

The Complete FeedBurner Guide with Some Cool Enhancements

2009-08-06T14:14:00.011+05:30

What is Feedburner?

Feedburner is a service(now owned by google) which helps you in publishing your feeds in a better way.It helps you analyze your feeds,keep track of your visitors,know the number of feed subscribers etc.

How to Use Feed Burner?

1.Login to Feedburner.com using your Google account

2.Copy your blog url,or your blog feed url and paste that url at feedburner.com

3.If you pasted your blog url(yourblog.blogspot.com) instead of your feed url (yourblog.blogspot.com/feeds/posts/default),then feedburner should be able to fetch your feed url automatically.[If you don't have a malformed template]

4.In the Next Step Give Title to your feed(Probably your site title itself) and also pickup a fancy slug(the final feed url will be http://feeds.feedburner.com/slug)

5.In the Next Stage,you should have finished Creating your feed

6.Now your feed should be live at http://feeds.feedburner.com/yourfeedslug

Branding Your Feedburner Feeds

You can Apply Domain Branding and Email Branding on Feed Burner

What is Domain Branding?

This is what we normally do-We burn our blog feeds using Feed Burner and ask our visitors to go to our feedburner Url to subscribe to our feed.

Wouldn't it be better if we were able to make the feed a part of our own domain rather than asking them go to a url like feeds.feedburner.com/yourfeedname .Now with feedburner you can do that too. For example look at my feed url http://feeds.bloggerplugins.org/BloggerPlugins . Doesn't it look better than http://feeds.feedburner.com/BloggerPlugins ?.Domain Branding can be done only if you have your own Custom Domain

What is Email Branding?

If you have activated the Email Subscriptions Option in feedburner,then users will be able to subscribe to your feeds by email.When someone subscribes via email,feedburner will sent feed updates to all the email subscribers.We can brand the emails being sent.We can decide on the email from which the feeds should be sent(I use feeds@bloggerplugins.org) .You can also Brand the email by including your logo in the emails.You can do This from the different Sub Options under Email Subscriptions in the Publicize Tab at Feedburner.

How Does Branding Help Me?

Branding helps you in giving a professional touch to your feeds.You will now feel like a better owner of the feeds as the feeds can be viewed from your own sub-domain.

Will i loose my existing Subscribers if i Opt for branding?

No, you are actually just making your original feed visible on your feed specific domain.And even your old feed url will continue to work..Ie if you have http://feeds.feedburner.com/FeedName , then after setting up branding, you will have the feed available at http://myfeedspecificdomain/FeedName also. These feeds are actually the same.So you wont loose any subscribers when you change the feed links on your blog with your new branded feed url

How To Setup Domain Branding?

Do you remember how you configured the Custom Domain For Blogger? You created a CNAME record for that.Its the same method for this one also.

Now From the Left Pane Opt for My Brand

you will see something like

feeds CNAME something.feedproxy.ghs.google.com on the right pane.

Now Create a CNAME record with the Name feeds and value something.feedproxy.ghs.google.com from your domain control panel(in the same way as you did for the custom domain)

Now add the new feed sub ddomain on the Right Pane(Feedburner) – I gave feeds.blogegrplugins.org as i have created a CNAME with name feeds

After doing this,my feed feeds.feedburner.com/BloggerPlugins became visible at feeds.bloggerplugins.org/BloggerPlugins.

How to Setup Email Branding?

Navigate to the Publicize Tab and Opt for Email Subscriptions.If it is not yet activates,then activate it.Now in Communication Preferences,you can provide your custom email[user@yourdomainname] .I used feeds@bloggerplugins.org .You can also format the email Properly in a custom way,and also add a logo to your email feeds by filling in the options in the Branding submenu.

Configuring Blogger To use our new FeedBurner Feed(Feed Redirection)

1.Login to your Blogger DashBoard

2.Goto Settings > Site Feed

3.Give Your new Feedburner Feed Url there and Save the Settings.

4.If you have used any links on your blog,pointing to your blogger feed,then change then replace them with the new FeedBurner Feed Url

5.Now anyone trying to access http://yourblog.blogspot.com/feeds/posts/default(and other blogger post feed urls) will be redirected to the Feedburner Feed that we Specified.

Adding Feedburner Email Subscription To Blogger

1.Login to Feedburner and Go to The Publicize Tab.

2.Look for the Email Subscriptions link in the left pane and click it

3.If you haven’t activated that service,Activate it.

4.Now Copy the Subscription Form Code from the right pane.

5.Make a New HTML/JavaScript Gadget in Blogger and Paste this code in that Gadget and save it.

6.Now you should have an email subscription form on your blog

Adding The Feedburner Feed Count to Blogger

1.At Feedburner Navigate to the Publicize Tab

2.Look for the Feed Count link in the left pane and click it

3.If you haven’t activated this service activate it

4.Choose the Proper Colors for the counter and click Save

5.Now Copy the Code from there and add it to any HTML/Javascript Gadget.If you have branded your feed URL,then make sure that you change the feedburner feed url in this code to your branded URL(i changed feeds.feedburner.com/BloggerPlugins to feeds.bloggerplugins.org/BloggerPlugins)

Adding The Feed Link to Blogger Instead of the Counter

<a href="my feed url" title="Subscribe To My Feed" rel="nofollow">Subscribe to My Feed</a>

You can modify the above Code with your feed url and paste into into an HTML/Javascript Gadget to have a Subscription Link on your Blog.If you need a better looking link,then

1.Navigate To the Publicize tab in Feedburner

2.Look For Chicklet Chooser in the Left Pane,and click it

3.Select the proper link that you need from the right pane and copy out the code

4.Paste this into an HTML/Javascript Gadget(If you used a branded domain make sure that you replaced the feedburner feed url with your branded feed url)

Preventing Search Engines From Indexing Your Feed

1.Login to your Feedburner Account and Navigate to the Publicize Tab

2.Now In the Left Pane,Look For the NoIndex Link

3.In The right pane,indicate that your feed shouldn't be indexed and activate that service

I have tried to explain all important aspects of using FeedBurner.Did i miss out anything important?If so Kindly let me know and i will update the post. Did you fall into trouble trying to use a branded feed url?? Then drop me a comment or contact me @ the Blogger Forums. I will be happy to help you out.

If you are planning to add multiple images use rel="lightbox[albumname]" title="Your Image Caption"

now if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname" If you do this, lightbox will work like a gallery with next and previous links

Demo of a Light Box Album

Did you notice that your keyboard arrow keys can be used to navigate through the album? :) I hope this would be very useful for those who own a photography blog.If you have any troubles in implementing this,you can surely contact me vis comments or @ Blogger Forums . If you are reading this in a feed reader,the Demos wond be displayed. To see the demos, visit the actual post page @ Light Box Image Viewer For Blogger

Numbering your blogger Comments

2009-08-02T12:14:00.010+05:30

This trick helps you to number each of your comments under a particular post..Thanks to Fernando of Quite Random for this awesome trick.You can read his original tutorial at Quite Random

I have tried to make it easier for you.. You can implement the trick in 3 simple replacement steps..(and a little SEO is added onto this hack.)

A small Demo

Steps involved in implementing this trick

1.Login to your Blogger Dashboard

2.Goto Template >Edit HTML

3.Choose to expand your Widget templates.

4.Find this line of Code

<dl id='comments-block'>

and replace it with

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>

5.Now find this line of code

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

and replace it with

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='clear: both;'>

6.Now find this line of code

<data:commentPostedByMsg/>

and replace it with

<data:commentPostedByMsg/>
<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a rel='nofollow' expr:href='data:comment.url' title='Comment Link' style='text-decoration:none'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter);
</script>
</a>
</span>

So you should have it working in just 3 replacement steps..:)If everything went well,you should now have a numbered commenting system on your blog.

Using Windows Live Writer for Blogger

2009-07-29T07:21:00.013+05:30

Blogger Supports XML-RPC Protocol which enables 3rd part Clients to make posts on Blogger.One of the Best Blogging Clients is Windows Live Writer.It comes for free.They just need you to have a windows live id(Sign up for one if you don’t have any)

Download Windows Live Writer

What is Windows Live Writer?

Its a Software which lets you to make posts to your blog from your desktop.This Software has a very simple and easy to use post editor with live preview and a bunch of very useful features

Features

1.Easy Upload of Images with Effects Watermarks and Borders

Live Writer Allows you to easily add pictures.In addition to that you can also add watermarks,effects, and special borders to your pictures.See this pic.I have added some watermarking and black and white effect to this photo.I have also added some special border effects

2.Easy Upload of Videos.

Live Writer allows you to easily upload your videos.You can post your video files to youtube and soapbox from this software and publish it on your blog.In addition you can also embed existing youtube videos onto your blog posts

3.Offline Editing is possible Windows live writer helps you to make posts offline and publish it when you want to. You will also get a live preview feature.

4.Availability of Plugins

There are lots of plugins available for Windows Live Writer.Some of them which i use are

a)Table Plugin – This plugin helps us to easily insert tables to our blog posts.See this demo table. :)

Image Upload	borders,Watermarking and other effects
Video Upload	Upload videos to youtube or use existing youtube videos
Availability of plugins	choose plugins that match your needs

b) Code Plugin – This Plugin allows you to insert code into your blog posts.If you are a programmer who posts code snippets in posts,then this will surely be useful.As a demo check out the code presentation at my label cloud post

There are many more plugins available. You can check them out yourself – List Of Plugins

5.Make multiple Posts at the Same Time. – You can run multiple copies of windows live writer at the same time

6. More Options for Hyper links. – There are more options for making link.You can opt to open link in new window,add title to the link and add nofollow tags and lots more.

If you are a noob to Windows Live Writer(like me) just take a look at some of these tips - Windows Live Writer Tips

Did i miss out any nice features or plugins?? Or did i miss out any annoyances?? If i did please let me know so that i can update this post.

A very special thanks to Prasannajeet who brought me back to Windows Live Writer.I haven’t been using this for long.

Some Tricks for making links in Blogger Posts

2009-07-28T04:32:00.013+05:30

Creating links in blogger is very easy. There is a link Option in our WYSIWYG Editor.When you use this option you can easily add a new link. Now to see the Code of this link just clisk on the Edit Html Option on your Editor[See image for details]

There you will see something like

Additional Options

1.Open The link in New Window

To open the link in a new window,add the target="_blank" option to your link so that the code becomes something like

2.Adding a Relation attribute

Relation attribute can be specified by adding the rel="relation"

The relation attribute is used to specify the relation of the link to the our post. One commonly used relation is external which specifies that the link is a link to an external page

The external relation is not much useful to us.But there is yet another one,

rel="nofollow" - When we add this to a link,we specify the search engines that they shouldn't go exploring this link url from our post page.This thing is important.Having too many links[especially to external pages] is not good for Search Engine Optimization. So if you link to some external website use the rel="nofollow" option

[Note:Don't use the rel="nofollow" option when you are giving credit to the original author of an article that you use in your blog.They deserve to be followed by the search Engines :)]

3.Adding the Title Attribute

If you add a title attribute to a link,then if someone hovers his mouse over that link,the title will be displatyed as a description of the link.

As an example try doing a hover over the next link[W3Schools] it will display Title of the link to W3 Schools.This is beacuse i have given this text as the tilte attribute of that link

To know more about the different attributes available for links visit W3Schools . Its the best place for a beginner.

4.Remove Underlining of a link

In some blogger templates,the links within the posts may be underlined. To remove the underlining you can use the style attribute - text-decoration:none

5.List of Links

If you want to use a list of links ,then you should use the<ul> <ol> and <li tags

<ul> stands for unordered list and <ol> stands for ordered list.:( What does this mean??

Ordered list means the list of links will be numbered. Here is the demo

Ordered List Demo

Ordered List Code

To change this to an unordered list,i.e without numbering, just change <ol> to <ul> and </ol> to </ul>

You can also use the ordered and unordered lists for arranging normal text[other than links]

How to add Pages to Blogger like in Wordpress

2009-07-28T04:02:00.008+05:30

Many of you might have wanted to use pages for Blogger like in Wordpress.But unfortunately Blogger doesn't provide any thing like Wordpress Pages.But there is still something that can be done.To know what i am talking about,just have a look at my About Page .

To create a Wordpress like page in blogger,we will first create a normal post in blogger.If you don't want this post to be shown in your feed updates,change the date of the post to something very old[may be an year back.See the pic for details] . If you want to prevent users from posting comments on your pages,you can disable commenting on this particular post[see the pic for details]

Now publish your post.We will use this as a pge.You might want to hide the social bookmarking icons and such other stuff from your ‘’pseudo pages’. Actually our blogger template is full of different divisions and we style each of these divisions using CSS.Using CSS rules,it is also possible to hide some of these divisions.So what must we be doing?We need to hide some unwanted divisions on our new pseudo page.

Ok, to Do this find the </head> tag in your template.Just before this,we will add some additional CSS rules to hide those unwanted parts and divisions.We will use the b:if conditions to make the hiding affect our pseudo page only..[so that these rules don't hide these divisions on other pages]

Just before the ,insert the following

<b:if cond='data:blog.url == "http://www.bloggerplugins.org/2005/06/about-me.html"'>
<style>
.comments-block,.comment-form,.comment-footer,.blog-pager,.feed-links,.comments,.bookmark{display:none;}
</style>
</b:if>

Here i have given some list if divisions which should be hidden.If you need to hide any other divisions you can add this to the list but make sure to separate the different divisions using commas.

Blogger Widgets

Facebook Share Count Buttons For Blogger

Facebook Share Button Style 1

Code for Facebook Share Button Style 1

Facebook Share Button Style 2

Code for Facebook Share Button Style 2

Facebook Share Button Compact Style 1

Code for Facebook Share Compact Button Style 1

Facebook Share Button Compact Style 2

Code for Facebook Share Compact Button Style 2

How to install Facebook Share Count Button on your Blogger Blog?

Create a Facebook Fan Page for your Blog

Setting up Blogger Custom Domain on Name.Com

How to buy the Domain Name?

How to Setup the Blogger Custom Domain?

Setting Up Google APPs

Google Ajax Search With Your Adsense Ads

Some Friend Connect Gadgets that you might not know

Where Can i get a Friend Connect Gadget?

A New Make over

Show avatars on Blogger Comments

Implementation of Comment Avatars

Further Styling.

Numbered Page Navigation For Blogger

Implementation of Blogger Page Navigation

The Complex Method. :P

Label Fix

How to Edit the template to cut short the posts per page?

Post Summaries on Blogger With Read More

How Does This Work

How to insert a jump break?

Changing the Read More Text

Drawbacks of the New Feature

A mistake that you might make.

The Best Blogger Resources

Blogger Tutorials and Gadgets

Amanda Fazani

Some Other Sites on Blogger Tutorials

Blogger Templates

Klodian

Dante

Other Template Resources

New Advanced Post Editor For Blogger

How to Enable the New Post Editor

Blogger Releases the new version of the Label Widget

What is new?

Drawbacks

How to Customize?

Related Posts with Thumbnails for Blogger

Related Posts with Thumbnails for Blogger

Related Posts Widget with Thumbnails for Blogger

How to add Retweet Button on Blogger

How to add a retweet button on Blogger ?

Retweet Button Style 1

Retweet Button Style 2

Retweet button Compact Style 1

Retweet Button Compact Style 2

How to install the Retweet Button on your blog?

Retweet Button for Blogger classic Templates

Where to place the code for classic blogger template?

Alternate Comment Forms For Blogger

What can you expect from blogger in the future?

Link to me widget for blogger

How to make the Link to me Widget?

Height Fixer For Blogger

Making the Sidebar and the Post Area to be of Same Height

What does this height fixer do?

Where to place this height Fixer Code?

Where else Can i Use this Script?

Does this work on All Browsers?

The Complete FeedBurner Guide with Some Cool Enhancements

What is Feedburner?

How to Use Feed Burner?

Branding Your Feedburner Feeds

What is Domain Branding?

What is Email Branding?

How Does Branding Help Me?

Will i loose my existing Subscribers if i Opt for branding?

How To Setup Domain Branding?

How to Setup Email Branding?