Recent Comments Widget will display excerpts of the most recent comments that have been posted to the articles in your blog. While displaying recent comments you can customize number of comments and comment excerpts size.

You can choose whether to display the post title and comment date or not. Below is a steps on How to Add Recent Comments Widget in Blogger.

Steps to Add Recent Comments Widget in Blogger

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Page Elements.





#Step 2. Click on Add a Gadget from layout where you want to put your recent comments and select HTML/javaScript.







#Step 3. Put the code given below in HTML/javaScript Page Element after making highlighted changes if you want.

<script style='text/javascript' src='http://sites.google.com/site/besthowtoblogger/about-me/recentcommentswidgets.js'></script>

<script style='text/javascript'>var a_rc=5;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src='http://besthowtoblogger.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script>

First Replace the blog url with your Blog URL in above code, and then change the below items as per your requirements.



var a_rc=5 ( Defines number of comments to display on blogger)



var m_rc=true ( Shows comment date, if False will not display comment date)



var n_rc=true (Shows Post Title , if False will not display Post Title)



var o_rc=100 ( Shows how much summarize text you want to show for the comments, you can change it as per your requiremnts)



#Step 4. Click Save and done!.

If you want to increase your blogs page visits/user then i recommend you to add related posts widget in blogger, if you Add related posts widget with Thumbnail in your blogger blog then you will definitely feel the change in terms of number of Pages visited by user.

Advantage of having related posts widget is that, Suppose any user is reading one of your blog post and seeking for some information. After finishing of reading he might be impressed with your post and want to visit another, then this widget is easiest way for surfing through related posts. Thus Number of page visits will be increased and as well your traffic bounce ratio will be decreased gradually.



Steps to Add Related Posts Widget with Thumbnail in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.







#Step 2. Find(Ctrl+F) </head> and

replace it with this code:

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://sites.google.com/site/besthowtoblogger/blogspot/relatedPostWiththumbs.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

</head>



#Step 3. Find the either line given below.

<div class='post-footer-line post-footer-line-1'>

OR

<p class='post-footer-line post-footer-line-1'>

Put the code given below immediately after the above one.

<!-- Related Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

#Step 4. You can adjust the maximum number of related posts being displayed by editing this line in the code:



var maxresults=5;



To edit the title of the widget you can change this line of code:



var relatedpoststitle="Related Posts";



#Step 5. Save template and done!.

Update: it is possible to make the thumbnail larger:

- Find ]]></b:skin> code in your blog and put below css code just before that.



#related-posts img {

height:150px !important;

width:150px !important;

}

Done :)

If your are using blogger blog and want to change some xml or css or html code in your blogger template then, it is advisable for you to have a full Backup of your blogger template. I know that this is very basic and common sense that before making any changes to the template the user should have backup of the full original template.

I am insisting to have copy of your blogger template, because once if you have made any bad changes and you are not that much use to with XML, then after saving bad changes you lose your previous template code.





Steps to Take Full Backup of Blogger Template.



#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.









#Step 2. Click on Download Full Template link.







#Step 3. Click OK button and save your template.



- If you need to upload that template again, just click on Browse button and give the path to the template file and click Upload button and done!.



Video of How to Take Full Backup of Your Blogger Template

If your blog is contain too much images and Page Loading time of your blog is too high, then Adding jQuery Lazy Load Plug-in in you blog can help to Reduce Page Loading Time in Blogger.

Images below the fold (the ones lower than window bottom) are not loaded with help of the Lazy Load Plug-in, Means when scrolling down they are loaded only when they needed.





This post will explain to you how you can add JQuery Lazy Load Code in your blogger blog or any other website. It can reduce the page loading time of your site. You can see more details about this JQuery Lazy Load Plugin from here: http://www.appelsiini.net/projects/lazyload.

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Steps To Add Lazy Load jQuery Plugin in Blogger:



#Step 1. Log in to your blogger dashboard--> layout- -> Edit HTML.



#Step 2. Scroll down to where you see </head> tag .



#Step 3. Copy below code and paste it just before the </head> tag .



<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://pwam.googlecode.com/files/jquery.lazyload.js' type='text/javascript'/>

<script charset='utf-8' type='text/javascript'>

$(function() {

$(&quot;img&quot;).lazyload({placeholder : &quot;http://pwam.googlecode.com/files/grey.gif&quot;,threshold : 200});

});

</script>

You might have seen a Link or Button image saying "Return to the top of the page" or "Back to Top" or "Jump to Top" on lot of websites and blogs. I will explain you how to add such functionality in your blogger blog.

Before starting let's have some basic knowledge about Anchor Tag - Intradocument Linking

Intradocument linking is linking to a location on the same page.



To link to a location on the same page, you need two anchor tags.



Hyperlink Reference <a href=></a>

Name Tag <a name=></a>



This configuration is used for the common Back to Top link on HTML pages.



The code is:



<a href="#destination_name">Destination</a>



The href destination is preceded by the pound sign.



The matching Name Tag: Provides a location to jump to.



<a name="destination_name"></a>



The <a name=> tag is placed at the desired location you wish to jump to. The name must match the hyperlink tag exactly, excluding the pound sign.

Steps to Add Jump to Top Link in blogger:

#Step 1: Go to your blogger dashboard.

#Step 2: Navigate to Layout > Edit HTML.



#Step 3: Find this line of code:



<body>



and replace it with this code:



<body id='top'>



#Step 4: Add this code at the bottom(footer) of your code:



<a href='#'>^ Back to Top ^</a>



#Step 5: Save Template and Done.

How to Add Image Which Link Back to Top

In above steps i have explained how to add link which lead to Back to Top, now let's try to add Image instead of link.



In #Step 4 above add code like this:



<a href="#"> <img src="Image_source_URL" alt='Back to top'/> </a>



Below here some images for you, to use this images [Right Click and "Copy Image Address/Location"]:







If you are facing any trouble then let me know.

Hi Bloggers, have you ever thought about having a blogger desktop editor or any blogger desktop applications by which you can write and save posts offline?. what an amazing and time saving idea hmm?.

There are many web tools for the bloggers job, but nothing can get to give you the convenience and speed that desktop applications offer. So, here is a list of some handpicked application, that can possibly increase a blogger’s productivity. You can use and control almost all features that you see in web editors using these desktop clients, they also integrate with almost all popular Blogging platforms

Blogger Desktop Editor & Applications

Windows Live Writer



Writer makes it easy to share your photos and videos on almost any blog service—Windows Live, Wordpress, Blogger, LiveJournal, TypePad, and many more.



Writer is already packed with useful features, but if you like to tinker, there are all sorts of plug-ins you can add to help you do even more—like insert your stuff from Facebook, Flickr, or other websites.



With Writer, you can preview everything you’re adding to your blog, to see how the fonts, spacing, colors, and images will look, before you publish.

Instant preview.













Supports: Windows Live, Wordpress, Blogger, LiveJournal, TypePad, SharePoint, Community Server, and many more.

License: FREE



Zoundry Raven



Zoundry Raven™ is our most advanced WYSIWYG full featured editor that makes posting to your blog easier and faster. It's as easy to use as a word processor, plus we include simple tools to add links, tags, photos, music and video files, and more.













Supports: Blogger, Movable Type & TypePad, Windows Live Spaces, WordPress, and more...

License: FREE



Blogdesk



As an offline weblog client, BlogDesk lets you comfortably write and effortlessly publish new entries to your blog.



No need to use those annoying HTML Tags in the WYSIWYG editor. Images can be directly inserted and are automatically uploaded. Even publishing simultaneously to multiple blogs is a matter of a click.













Supports: Blogger, Movable Type & TypePad, Windows Live Spaces, WordPress, and more...

License: FREE



Blog Jet



Blogjet is the most advanced Windows blog editor and manager. Get convenience and speed of a native application, and the ability to write posts offline using Blog jet. This popular Windows blog client can used for almost all blogging platforms. A beautifully designed WSIWYG editor lets you create your blog posts with ease with no HTML knowledge required. You can add image, videos, tags and smileys and multiple attachments.













Supports: WordPress, TypePad, Movable Type, Blogger, MSN Live Spaces, Blogware, BlogHarbor, Squarespace, Drupal, Community Server, etc.

License: Free limited trial (Single user License costs $39.95)





Ecto



ecto is a feature-rich desktop blogging client for MacOSX and Windows, supporting a wide range of weblog systems. With ecto you can write and manage entries for your weblog(s). The advantage over using your weblog's control panel is that you can compose entries offline and use the extra features ecto offers, such as spellcheck, creating links, attachments, and much more. ecto is designed to make blogging much more easier and yet give the users as much power as possible to manage their weblogs.













Supports: Blogger, Blojsom, Drupal, MovableType, Nucleus, TypePad, WordPress, and more.

License: 21 day trial version (Full version costs $17.95)





Perfect Journal



Perfect Journal is the FrontPage/Dreamweaver of the Blogging. Create your journal entry in PerfectJournal and publish it directly to Blogger.com. No more worrying whether your blogging site might go down or out of business with your content. Create, write, rewrite offline and publish online, Integrate your blog thoughts with all your other content and search it quickly. Currently supports publishing directly to Blogger.com only.















Supports: Blogger.com

License: FREE



Anconia RocketPost



RocketPost is smart blog software for power bloggers. It has one of the easisiest WYSIWYG editor, full local editing and full blog import. And it works just like email, so you already know how to use it.



Speed up your blogging with one-click Technorati, Flickr and Del.icio.us tags, built-in photo editing, instant photo albums, automatic linking to related posts, quote tracking, quick linking, drop caps, pull quotes and a running word count. Its fully multithreaded design lets you edit multiple posts and publish to multiple blogs at the same time, so it never slows you down.













Supports: Blogger™ (new and old), Movable Type™, WordPress, TypePad™, MSN Spaces™, BlogHarbor™, Drupal, dasBlog, BlogEngine.NET, .Text and SquareSpace™

License:

Free RocketPost [2 Basic · 1 blog on Blogger or Live Spaces]

$49 RocketPost [2 Professional · unlimited blogs]

$29 RocketPost [2 Home · 1 blog of any type]



Qumana



You don't need to know a thing about HTML code to make perfect posts. Write your posts at your own pace without having to be online. you can Publish your post, then repost it instantly to another blog. No more messing with different blog accounts or hosting services.













Supports: Angelfire,Blogger/Blogspot, BlogHarbor, Blogware, Bryght, DiaryLand, Drupal, LiveJournal, MovableType, MSN Spaces, Tripod, TypePad, Roller, SquareSpace, Wordpress.com, Wordpress.org

License: FREE



Wblogger



The w.bloggar is an application that acts as an interface between the user and one or more blog(s); in other words, it is a Post and Template editor, with several features and resources that the browser based blog editors do not offer. Another great advantage of w.bloggar is that it is compatible with most of the weblog systems available, allowing an advanced user to have only one interface to several accounts hosted on several different sites, using different publishing systems.













Supports: Blogger, Wordpress, MSN Spaces, TypePad, BigBlogTool, Blogalia, TheBlog, Blog-City, EraBlog.NET, Upsaid, UBlog, SquareSpace, BlogWare, DearDiary.Net.

License: FREE.



So try one by one and let me know which one is best for your niche and why?, happy blogging :)

How to replace blogger sidebar widget title with any customize image would be a good hack for so many blogger's. I have noticed that in blogger help forum many of the blogspot users are asking for the help about how they can put an image instead of sidebar title.

suppose you need to put an image Replacing title in your sidebar with image can be very helpful when you want to design your custom design unique blog.





Demo Question asked by: Matthew Floratos

I'm looking to replace the traditional side bar title like "Archives" or "Tags" with images so that I can match the blog's aesthetic with fonts not available to Blogger. I've looked around in the template HTML, but it's a bit above me. Can anybody give be a quick pointer as regards to how I can replace widget names, which are traditionally text, with images? (If it's even possible at all, that is.)

So below here you will find the steps through which you can replace the title of the widget with image and yes answer of the question given above.



Prerequisites: You have already every image which you are going to replace with title text in sidebar.



# Step 1: Go to your Blogger Dashboard and Navigate to Layout > Edit HTML Section and check Expand Widget Templates check box.







# Step 2: Then use "Ctrl+F" to search for id='BlogArchive1' (for Archives gadget).

You may find this set(or something close to this) of codes:

<b:widget id="BlogArchive1" locked="false" title="Archives" type="HTML">

<b:includable id="main">

<b:if cond="data:title != &quot;&quot;">

</b:if></b:includable></b:widget>

<h2 class="title">

<data:title></data:title></h2>

# Step 3: <data:title></data:title> is your sidebar title data tag and is responsible for display the title text for that widget. To use an image, replace it with your image source URL like this:

<img src="YOURI_IMAGE_URL" alt='Image Name' /># Step 4: Save your template and done :)

Add bubble comments count near your each of you post title can make make your blog more attractive to your visitors. If you are a new blogger in blogging era and want to design your own customize template or modify the existing one, this tutorial is for you. so let's go ahead and add a small bubble comment count in front of your blogger post area. find working demo on this blog :)

This tutorial will add comments bubble icons to each of your post titles displaying the total count of the comments for that post. You have to add a simple code in your blog Template code, you will be able to see this beautiful in your blog.

Steps to add bubble comments count:

STEP #1: Log in to your blogger “Dash Board”. Navigate to Layout > Edit HTML section and a give tick to “Expand widget Template”.





STEP #2:

Find ]]></b:skin> in your template code and place the below code just before ]]></b:skin>

.comment-bubble {

float : right;

width : 48px;
height : 48px;

background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipN-9YsnBW0miVyvKIvxli_iz24d5MzLJPcKmR3fmFTPx0qwt6qnLPgkXvyP28fsIMlW9JhtXqCZbSCg1vINPG789a8bBZPQsW_dUmdqz_ITDuaSH0bMDuChz_Fa60lfA9o0lpFl00cv6M/s1600/Comment+Bubble+%2815%29.png) no-repeat;

font-size : 18px;

margin-top : -15px;

margin-right : 2px;

text-align : center;

position:absolute;

}

Note: To Align bubble image right of the title remove position:absolute; line from #step 2 code.

Now find the below code and add the red code inside the code.

<b:includable id='post' var='post'>

<div class='post hentry uncustomized-post-template'>

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>

<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>

<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

</b:if>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

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

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>

Now click on Preview button and have a look at your post first, if every thing is correct then save template and done. Instead of adding the above image, you can add your own image or you can choose one of the image given below.

IMPORTANT: You may use any image instead of the one linked in the code above (STEP #2), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.

To use this images [Right Click and "Copy Image Address/Location"]

So what is the output? are you succeed and get a bubble comment count on your blog?