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.

Add a Subtitle to Blogger Posts

This Blogger tutorial shows you how to easily and quickly add a subtitle to your Blogger posts (Blogspot posts) so that both search engines and readers will have more information about your post.This is an easy tweak to your Blogger blog that anyone can carry out in a couple of minutes.

Benefits of Using Subtitles in Posts

Adding a subtitle which appears below the title of your post can be both eye catching and informative. For instance a titling schema for this post could be:

Title: Add a Subtitle to a Blogger

Subtitle: Make Your Posts More Search Engine Friendly and User Friendly

If you craft your titles and subtitles carefully you will encourage more targeted readers of your blog as they will be able to see at a glance what your post is about rather than reading the whole article. Your traffic therefore might be slightly less but they will be far more targeted to the content of your site resulting in a lower bounce rate.

I Love My Blog Widget (Updated)

To add this widget follow this steps:


1) Select below code.


2) Sign in blogger


3) Click on layout at Dashboard


4) Select Edit HTML


5) And paste in in your HTML file before < /body> tag


Or

6) Press Add widget to your blog Button

<script language="JavaScript" src="http://s2.sigmirror.com/files/57064_d9ki2/i%20love%20my%20blog%20top%20left.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://s2.sigmirror.com/files/56425_odzla/iluvmyblog_2.png")</script>

Please select below code If you want widget on Right Side.

<script language="JavaScript" src="http://s2.sigmirror.com/files/57065_kc4af/i%20love%20my%20blog%20top%20right.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://s2.sigmirror.com/files/56424_w03hv/iluvmyblog.png")</script>