Cool Recent Cooment Widgets For Blogger/Blog

Now i'm reaching to show you excellent operating recent comments widget for your blogger blog that might extremely assist you in obtaining further variety of comments. In fact, at the gap of this web log, i did not had any commentators here, currently the time have extended and you'll be able to notice ton of latest commentators involving here a day and that i am even making an attempt to support them at my limit. Here I customized in four different styles of recent comments. So Let jump into tutorial to add this widget in your blog.

LIVE DEMO

How To Add Recent Comment Widget With Avatar in Blogger

• Click Add To Blogger Button below to add this widget in your blog with one click.

STYLE #1

Widget Title:

<style type="text/css"> ul.bh_recent_comments { list-style: none; margin: 0; padding: 0; } .bh_recent_comments li { background: none!important; margin: 5px!important; padding: 5px!important; display: block; clear: both; overflow: hidden; list-style: none; } .bh_recent_comments li .avatarImage { padding: 3px; background: #fefefe; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; float: left; margin: 0 6px 0 0; position: relative; overflow: hidden; } .avatarRound { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .bh_recent_comments li img { padding: 0; position: relative; overflow: hidden; display: block; } .bh_recent_comments li span { margin-top: 3px; color: #666; display: block; font-size: 12px; line-height: 1.4; } .bh_recent_comments li { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; } .bh_recent_comments li:hover { background: #FD7474 !important; border-radius: 100%; } .bh_recent_comments li { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; border: 2px solid transparent; } .bh_recent_comments li:hover { -webkit-transform: scale(1.2) translate(15px); -moz-transform: scale(1.2) translate(15px); -ms-transform: scale(1.2) translate(15px); -o-transform: scale(1.2) translate(15px); transform: scale(1.2) translate(15px); box-shadow: 0 0 20px 1px #aaa; } </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 45, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More ?", defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3PjFxjJfiQH__WtEFOqvWOwmEtVrsYBJXW8qPh8TNpg7M0h_dyxXZEz7hauVuVXgfk5EsDqRrMt3IgS11LEbHhS0BhlSLt7QSIQ-8J4HEyqr8Pu06wQ6DKKN6WNAR90XHz1ayBCWqfkte/s1600/blogger-avatar-1.png", hideCredits = true; //]]> </script> <script type="text/javascript" src="http://dl.dropbox.com/u/81212926/bloggerheroe-recent%3Dcomments.js"></script> <script type="text/javascript" src="/feeds/comments/default?alt=json&callback=bh_recent_comments&max-results=5"></script>

STYLE #2

Widget Title:

<style type="text/css"> ul.bh_recent_comments{list-style:none;margin:0;padding-bottom:5px;} .bh_recent_comments li{margin:0px 0px 0px 0px; border-bottom:1px dotted pink; display:block; clear:both; overflow:hidden; } .bh_recent_comments li .avatarImage{-webkit-border-radius:100px ; -moz-border-radius:100px ; border-radius:100px ; padding:3px; background: cyan; -webkit-box-shadow:0 1px 1px #333; -moz-box-shadow:0 1px 1px #333; box-shadow:0 1px 1px #333; float:left; margin:6px 6px 6px 0; position:relative; overflow:hidden; img filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; } .bh_recent_comments li .avatarImage:hover{-webkit-border-radius:100px ; -moz-border-radius:100px ; border-radius:100px ; padding:3px; background: pink; -webkit-box-shadow:0 1px 1px #333; -moz-box-shadow:0 1px 1px #333; box-shadow:0 1px 1px #333; float:left; margin:6px 6px 6px 0; position:relative; overflow:hidden; img filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .bh_recent_comments li img{-webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; padding:0px; position:relative; overflow:true; display:block; } .bh_recent_comments li span{color: #FFFFFF; display: block; font-size: 11px; font-style: italic; line-height: 1.4; } .commentNavi { clear: both; padding: 5px 0; display:inline-block; width:100%; } .commentNavi a, .commentNavi span.current { font-size:11px !important; } </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 7, showAvatar = true, avatarSize = 40, roundAvatar = true, characters = 50, defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true; //]]> </script> <script type="text/javascript" src="http://dl.dropbox.com/u/81212926/bloggerheroe-recent%3Dcomments.js"></script> <script type="text/javascript" src="/feeds/comments/default?alt=json&callback=bh_recent_comments&max-results=4"></script>

STYLE #3

Widget Title:

<style type="text/css"> ul.bh_recent_comments { list-style: none; margin: 0; padding: 0; } .bh_recent_comments li { background: none!important; margin: 5px!important; padding: 5px!important; display: block; clear: both; overflow: hidden; list-style: none; } .bh_recent_comments li .avatarImage { padding: 3px; background: #fefefe; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; float: left; margin: 0 6px 0 0; position: relative; overflow: hidden; } .avatarRound { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .bh_recent_comments li img { padding: 0; position: relative; overflow: hidden; display: block; } .bh_recent_comments li span { margin-top: 3px; color: #666; display: block; font-size: 12px; line-height: 1.4; } .bh_recent_comments li { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; border: 2px solid transparent; } .bh_recent_comments li:hover { -webkit-transform: scale(1.2) translate(15px); -moz-transform: scale(1.2) translate(15px); -ms-transform: scale(1.2) translate(15px); -o-transform: scale(1.2) translate(15px); transform: scale(1.2) translate(15px); box-shadow: 0 0 20px 1px #aaa; } </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 45, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More ?", defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3PjFxjJfiQH__WtEFOqvWOwmEtVrsYBJXW8qPh8TNpg7M0h_dyxXZEz7hauVuVXgfk5EsDqRrMt3IgS11LEbHhS0BhlSLt7QSIQ-8J4HEyqr8Pu06wQ6DKKN6WNAR90XHz1ayBCWqfkte/s1600/blogger-avatar-1.png", hideCredits = true; //]]> </script> <script type="text/javascript" src="http://dl.dropbox.com/u/81212926/bloggerheroe-recent%3Dcomments.js"></script> <script type="text/javascript" src="/feeds/comments/default?alt=json&callback=bh_recent_comments&max-results=5"></script>

STYLE #4

Widget Title:

<style type="text/css"> ul.bh_recent_comments { list-style: none; margin: 0; padding: 0; } .bh_recent_comments li { background: none!important; margin: 5px!important; padding: 5px!important; display: block; clear: both; overflow: hidden; list-style: none; } .bh_recent_comments li .avatarImage { padding: 3px; background: #fefefe; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; float: left; margin: 0 6px 0 0; position: relative; overflow: hidden; } .avatarRound { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .bh_recent_comments li img { padding: 0; position: relative; overflow: hidden; display: block; } .bh_recent_comments li span { margin-top: 3px; color: #666; display: block; font-size: 12px; line-height: 1.4; } .bh_recent_comments li { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; border: 2px solid transparent; } .bh_recent_comments li:hover { border: 2px Solid #1BA1E2; } </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 45, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More ?", defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3PjFxjJfiQH__WtEFOqvWOwmEtVrsYBJXW8qPh8TNpg7M0h_dyxXZEz7hauVuVXgfk5EsDqRrMt3IgS11LEbHhS0BhlSLt7QSIQ-8J4HEyqr8Pu06wQ6DKKN6WNAR90XHz1ayBCWqfkte/s1600/blogger-avatar-1.png", hideCredits = true; //]]> </script> <script type="text/javascript" src="http://dl.dropbox.com/u/81212926/bloggerheroe-recent%3Dcomments.js"></script> <script type="text/javascript" src="/feeds/comments/default?alt=json&callback=bh_recent_comments&max-results=5"></script>
I hope you like this widget. If you got anything wrong from this widget you can comment on below...

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 12:12 AM and have 0 comments

Writed by : Admin ID-Netblog

My friend was reading the article onCool Recent Cooment Widgets For Blogger/Blog. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below. <a href="https://bloggerheroe.blogspot.com/2013/04/cool-recent-cooment-widgets-for.html" target="_blank">Cool Recent Cooment Widgets For Blogger/Blog</a>

ARTIKEL TERKAIT: