Add Facebook Like Button on blogspot blogger

Facebook has now made a extremely easy for anyone to integrate Facebook social elements into their blog – just copy-paste a HTML code and your site will instantly become Facebook-ready.

To this, open your blogger html editor, make sure that “Expand Widget Templates” checkbox is ticked.
Now Search for the following code (you can use CTRL+F on your browser) 

<data:post.body/>

When you found it, on the next line you should past this code

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px' allowTransparency='true'></iframe>

If you found that, it means you are on the right spot.

Now Click “Save Template”. Refresh your main blogger blog now and you should be able to see your new Facebook Like Button.

Google Buzz share count button for Blogger / Blogspot blogs

Integrate Google Buzz Button in Blogger with some simple hacks is very easy now. After introducing Google Buzz in global market now buzz have started to dominate the micro blogging arena and every blogger wants to Add Google Buzz Button in Blogger Blogs, With this service users can now share the stuffs with each other. Google have not provided any script for adding a social bookmarking button for your blog. So if you want to Add the Google buzz Button in your Blogspot blogs then follow the steps given below here.

How to Add Google Buzz Button in Blogger:

Step 1: Login to Your Blogger Account.

Step 2: On Your Dashboard, Click on Layout

Step 3:Now Click on HTML

Edit HTML

Step 4: Now Check the box of Expand Widget Templates

Note: Before Applying Any Changes Please Download the Full Template for your Backup.

Expand template code

Step 5: Now you can add the Google Buzz Button either at the end of the each post or below the title of the each post.

Step 5.1: If you want to add the button at the end of each post then find this code in your template.

<data:post.body/>

Now paste this code belowe

<script src="http://www.buzrr.com/button.js"></script>

Now Save Template.

If you want more stylish and different button click on Image.

 

Blogger Template Designer, An Online Template Designer on Your Blogger Dashboard

Finally, Blogger has launched new feature called "Blogger Template Designer" . This online blogger template designer allow you to customize the look and layout of your blog by just clicking and dragging. There are many awesome blogger template design but maybe you want to create your own style. Blogger has facilitated your need.

Animated Image Icon Before Post Titles in Blogger / Blogspot

Blogging is all about providing valuable information to your readers. In addition to this, you can customize your blog in such a way that your readers would enjoy your blog layout with the contents. So, here is the tip to add and show animated image icon before blogger post titles. It will be displayed as the logo to your each post on blogspot. This can be done with some simple HTML edits. Lets learn this blogger trick step by step.

Finding An Image Icon To Insert Before Blogger Post Titles :

First things first. You have to do some homework before adding animated image icons. First of all you have to find an icon to place in your blog. The maximum size of your icon should be 50*50 pixels. You may make a search on Google with search phrases like “Animated icons”, “Animated logos” and choose an image. See if the image you have choosen is not protected under any copyright law. Try to get an icon which blends perfectly with your blog theme. Then upload your icon to any image hosting

site such as imageshack, photobucket, tinypic or googlepages etc and get the link to your image. When you are done with this, proceed to next step.

Making HTML Code For Your Image Icon :

After getting the link to your image icon it’s time to make a HTML code using the image link. Follow below code to make a HTML code using the link to your animated icon.

<img src="LINK TO YOUR IMAGE HERE" style="border-width:0px" />

Change the text LINK TO YOUR TEXT HERE with the link to your image. Now I guess you are done with the HTML code to your link. Move to the next step.

Editing HTML To Insert Image Code

Now it’s time to implement the above code in your blogger template and your blog will start showing your icon before blogger post titles. To do this follow below mentioned steps.

1. Go to your blogger dashboard.

2. Navigate to Layout >> Edit HTML

3. Expand Widget Templates by clicking the box next to it

4. Search for the below code in your template by pressing Ctrl+F on your browser

<b:if cond="data:post.url">

5. Add your image HTML code just above this code in your template.

6. Save the template and you are done.

Now you can see an animated image icon before all your post titles on blogger/blogspot. You can also apply this trick to add some special notes before your post titles. Simply post your text in place of the image icon code in your blogger template code and you are done.

How to add "Tweet This" button to your Blogger Posts

Twitter has become one of the most popular ever syndication and networking tools for bloggers. A few readers have asked if it is possible to add a "Tweet This" link to our Blogger templates, and while this was possible, I had not discovered a method of automatically shortening the URL of our blog posts until now.

In this tutorial, I'll explain how you can add this to your Blogger template so your readers can Tweet your posts to their Twitter followers, enabling your Blogger posts to be syndicated to a wider audience.

Thumbs up Blogger Posts- Simple post rating for blogger

This post is about adding thumbs up or thumbs down rating to blogger. This rating can be added to every blogger post just like on Youtube or yahoo answers.

This is simple modification the star rating developed by JS-Kit.  

To add this to your blogger blog follow these steps:

Replace an image instead of Newer posts, Older posts and Home text link

Today we will discuss how to replace an image instead of older posts and newer posts links. This hack is about replacing an image with the hyperlink instead of just the text link alone.

How to replace an image instead of Newer Posts, Older posts and Home

before you implement this hack make sure that you have created the necessary image for each links (Newer Post, Older Post and Home) and have uploaded in a web host. Now let us see how we can replace an image instead of Newer Posts, Older posts and Home link.

Floating Twitter Follow Widget

To add this Widget to your Blogger Blog, Click on the Add Twitter Widget button given below. You will reach a page with title Add Page Element. There you will see Select A Blog option. Choose your blog and keep the Title empty. Just below it you will see Edit Content. On clicking it you will see some code.

Floating "Top of Page" Icon Widget

Some blogs and webpages have obnoxiously long pages that go on forever... and that's where this widget comes in handy. As you can see, there is a small floating arrow at the bottom-right of this page. It always maintains the same position. Scroll down a little in your template, then if you click on it, it will take you to the very top of the page.