Hover Effect Recent Comments Widget For Bloggers

Monday, 23 June 2014

Hover Effect Recent Comments Widget For Bloggers

As I said already, recent comments widget inspires your audience to writing on your post. I told about the importance of recent comments widget. Here I had posted Recent comments widget for blogger blog with hover effect. You can set the widget anywhere on your blog. Easy to implement to your blogger blog. It will maximize your blog traffic rate. If someone comment on any of the post on your blog, they will come back to your blog when discussion going on.

It is an automatic updated widget. So you don't want to update it again. Thumbnail is rounded and blogger set as logo default thumbnail. Follow the simple steps to add hover effect recent posts widget to your blogger blog.

Implementation Guide

Login to your Blogger account
Go to dashboard and move on Layout section
Click on Add a gadget link and select HTML/JavaScript option

<style type='text/css'>
ul.btt_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}
.btt_recent_comments li {
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
border: 2px solid transparent;
}
.btt_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;}
.btt_recent_comments li {
background: none!important;
margin: 5px!important;
padding: 5px!important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
}
.btt_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;
}
.btt_recent_comments li img {
padding: 0;
position: relative;
overflow: hidden;
display: block;
}
.btt_recent_comments li span {
margin-top: 3px;
color: #666;
display: block;
font-size: 12px;
line-height: 1.4;
}
</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/AVvXsEjN_80ZLPr6sRPmCYYN61xIYmXCX8PxQ6c6FKr7fgJG-_LKgYnjksGaiM_V-xV3JU7b-2eM_hpehKB1Aw0D1S7iK5S0UOlDiYU2li5DzXFsYJ7D-CtpCLe7pA8Mytz5otv4QlgT-OZ1jhb0/s45/btt_blogger_logo.png",
hideCredits = true;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize
|var||else|||entry|indexOf|com|true||http
|avatarClass||defaultAvatar|img|showMorelink
|replace|roundAvatar|hideCredits|||span|href
|characters|showAvatar|authorName|commentlink
|typeof|undefined|btt|length|link|moreLinktext
|numComments|blogblog|gif|class|hideCSS|gravatar
|author|src|feed|s1600|false|ul|s220|s512|for|www
|rounded|break|bp|blogspot|li|png|div|commHTML
|btt_recent_comments|display|image|b16|function
|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI
|QYau8ov2blE|btt_blogger_logo|avatar|openid16
|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc
|btt_openid_logo|blank|avatarRound|write
|avatarImage|alt|width|height|40|name|content|60
|ig|substring|hellip|raquo|gd|none|style|font|size
|10px|block|text|align|right|Widget|by|SoftGlad
|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{}))
//]]>
</script>
<script src='/feeds/comments/default?alt=json&callback=btt_recent_comments&max-results=8' type='text/javascript'></script>

Finally, Click on Save button.

You can customize this widget as your wish. If you need any help to customize this widget or if you encounter any problem when you add it to your blogger blog, feel free and comment below to get solution. Share Your Experience with us..