Search This Blog

Tuesday, May 31, 2011

How to add Facebook like button on the top of the blogger post?

  • Please login to blogger with your ID
  • Click on Design
  • Click on Edit HTML
  • Click to Download Template to backup the file
  • Check the small box besides Expand Template Widget
  • Find this code on your template with Ctrl+F

   <data:post.body/>

  • Delete the code and replace it with the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
</b:if>
<data:post.body/>

How to add Facebook like button under the blogger post?

  • Please login to blogger with your ID
  • Click on Design
  • Click on Edit HTML
  • Click to Download Template to backup the file
  • Check the small box besides Expand Template Widget
  • Find this code on your template with Ctrl+F
   <data:post.body/>
  • Delete the code and replace it with the following code.
<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
</b:if>

How to Add Icon beside Post Title?



How to Add Icon besides the title of the Post – You must know how to make your blog cool and here is a cool way. How about adding your blog’s icon besides your post title? 


  • First create your icon image and upload it. You can only upload image files to your Blogger blog. These can only be uploaded through your blog posts. To do this Login to Dashboard and click on "New Post". The Post Editor will open. In the top frame of the Post Editor just mouseover all the icons. This will show the tooltips and click on the square bluish icon (Add Image). The upload Image dialog box opens. Click Browse under Add an image from your computer to choose the picture file on your PC. Click on file to highlight it and then click Open. You can also add an image from the web. Paste the URL of your image in the URL text box under "Or add an image from the web". 
  • Now replace LINK OF YOUR IMAGE with your link in the following code.
<img src="LINK OF YOUR IMAGE" style="border-width:0px" />