Recent Comment Widget With Avatar for Blogger

Today I have one widget for your blogger blog is recent comment widget with avatar which will display the commenter of your blog with profile pic and short summary of the comment. This absolutely customized with three different styles. You may seen this widget in footer of this blog before a month.

Here I customized in three different styles, one of them look like 3D zooming, second one make border-radius with green background, and at last just giving border only. 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.

Customization:
1. Go to Blogger > Template > Edit HTML.
2. Find  ]]></b:skin>  and add one of the following CSS code before it.

Style #1

.sg_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 2px solid transparent;
}
.sg_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 #2

.sg_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.sg_recent_comments li:hover {
    background: #C9FD7A !important;
    border-radius: 100%;
}

Style #3

.sg_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 2px solid transparent;
}
.sg_recent_comments li:hover {
    border: 2px Solid red;
}

I hope you like this widget. If you got anything wrong from this widget you can comment on below...

SHARE

Tweet