Add Disqus Recent Comments Widget to Your Blogger

In today's post, we will discuss a very simple topic but important topic on how to add an attractive and fast-loading Disqus recent comments widget on a Blogger's blog. Such widgets let their readers know about the conversations which is going on at your blog, and if you're mainly active on it, it gives a very positive impression. This widget should be well-scripted and the JavaScript should also be hosted at Disqus to reduce the loading time on your blog. So let us learn how to add this widget on blogger.

Adding Disqus Comment Widget to Your Blogger

You can put this widget code inside any text or html block inside your blogger.

• Go to Blogger >> Layout
• Click on Add a Gadget
• Choose the HTML/JavaScript widget
• Now add this code anywhere you do like on your blog

Now copy and paste the following given code in the HTML/JS widget.

<div id="RecentComments" class="dsq-widget">

<script type="text/javascript" src="http://bloggingbeggniers.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=50"></script>

</div>

Configuration

After the? in the URL, you can see a number of parameters therein. These are used to customize the functionality of the widget. Here is a short description for each of them.

• num_items - Number of comments to show in the widget
• hide_mods - Hide moderators' comments (1 as hidden, 0 as disabled)
• hide_avatars - Hide display images (1 for hidden, 0 for shown)
• avatar_size - Avatar size in pixels (32 by default)
• excerpt_length - Character-length of the excerpt (1000 by default)

Styles

If you want, you can customize the appearance of this widget as well. Following are some sample CSS rules;

dsq-widget ul.dsq-widget-list {
padding: 0;
margin: 0;
text-align: left;
}
img.dsq-widget-avatar {
width: 32px;
height: 32px;
border: 0px;
margin: 0px;
padding: 0px 3px 3px 0px;
float: left;
}
p.dsq-widget-meta {
clear: both;
font-size: 80%;
padding: 0;
margin: 0;
}
li.dsq-widget-item {
margin: 15px 0;
list-style-type: none;
clear: both;
}
span.dsq-widget-clout {
padding: 0 2px;
background-color: #ff7300;
color: #fff;
}
a.dsq-widget-user {font-weight: bold;}
a.dsq-widget-thread {font-weight: bold;}
table.dsq-widget-horiz td {padding-right: 15px;}
.dsq-widget-comment p {display: inline;}

How to Put Your Blogger Site on Maintenance Mode

You might have such seen websites which displays a message that “Our site is in a maintenance mode, please try later”. Many famous sites commonly uses maintenance mode when they are going through a monthly or fortnight maintenance check or improvising website experience because nobody will like to land on a page that is may broken or no longer reachable. In other words, new sites commonly use it as coming soon page allowing its users to sign up to be notified when site is ready to launch. In our first article, we will tell you how to put your blogger site on a maintenance mode. 

First thing you require to do is simply down Soonex- Maintenance mode template. As, you are switching your site on Maintenance mode so must remember to take a backup of your existing template.  Now upload the template in your blogger site. After uploading the template, go to Blogger >> Layout >> to configure the template.

The template setting has been divided into three different sections in tabs, first one is home, second is about and third is contact.

Add Welcome Note:

Soonex will allow you to create wonderful pages to provide improved user's experience. The first option will be  of “Welcome Note” that you will find in the Layout area on blogger dashboard. To customize, press the “Edit” link and input the description which you want to display on your site, Whether your website or blog is on Maintenance Mode or you are about to launch a new website.

When you have done writing this, press the “Save” button to store the changes you have made to the template.

Adding Email Subscription:

Soonex will allow you to add a subscription widget by which users can subscribe to your feeds and can also receive notification when your site goes live again. To customize,  go to “Email Subscription” and press the “Edit” link. Now input the username of your feed (Example feeds.feedburner.com/bloggingbeginer.com, here bloggingforbeggnier is the username).

Adding Countdown:

When you are going to create a coming soon page or you would like to set an accurate time for users when your site will be up, then scroll down to "Countdown Settings" & press “Edit” link. Now enter the required time and date of the countdown in this given format e.g. 2014/10/15 12:00:00.

Adding About us:

You can also add can information about your site or blog. Go to “About The Company” and  press the “Edit” link. Now in the text portion, drop the information you would like to show on about tab. Once you have done simply press “Save” to store the changes.

We hope this post would help you a lot in creating a useful under maintenance or coming soon page for your blogger site.  Have you like this post? if yes don't hesitate to share your knowledge and experience in the comments section below. If you find this article useful, share it on Twitter, Facebook and Google+.