New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



How to Add Disqus Recent Comments Widget to Blogger


Today, all of us will discover a straightforward and valuable course about how to provide a nice-looking and fast-loading Disqus Recent Remarks widget using a Blogger blog. Widgets including these types of make it possible for followers know about the actual interactions happening pictures blog, and if you're rather active, this results in an excellent feeling. This widget showcased is usually well-scripted plus the JavaScript is usually organised in Disqus to be able to slow up the weight moment with your blog. And so why don't we discover ways to create this to widget.
See live demo:  How to Add Disqus Recent Comments Widget to Blogger
disqus recent comment widget


Adding Disqus Recent Comments Widget to Blogger


You can add this widget code inside any text/html block inside your blog.
Step 1. Go to Blogger >> Layout
Step 2. Click on Add a Gadget
Step 3. Choose the HTML/JavaScript widget
Step 4. Now add it anywhere you like on your blog
Step 5. Now copy and paste the following code inside the HTML/JS widget.
<div id="RecentComments" class="dsq-widget">
<script type="text/javascript" src="http://bloggingtipsandtrix.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=50"></script>
</div>
Step 6.  Click Save

Customization:


The code above contains a URL. You need to change the text in bold with your own domain name (yourdomain.disqus.com).
After the ? in the URL, you can see a bunch of parameters. These are used to customize the functionality of the widget. Here is a brief description for each of them.
num_items - Number of comments to show in the widget
hide_mods - Hide moderators' comments (1 for hidden, 0 for 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)

Adding CSS


.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;}



Enjoy your day buddies!!!
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...