16 September 2014

, ,

How to Add Stylish Recent Comment widget in Blogger Blog

Add Stylish Recent Comment widget in Blogger Blog

Recent Comments

Today in Tutorial i will Tell you How to Add Recent Comment Widget in Blogger Blog Its Easy and It will make your Blog more Attractive.

Also Read:

How to Add Recent Comment Widget in Blogger



Step (1) Go to Blogger.com and Then Go to Blogger Dashboard.

Step (2) Go to Layout and Then Click on Add Gadget.

Step (3) Now add Html/JavaScript and Then Paste the Below Code in Content Field and in Title type Recent Comments



<!-- Start Recent Comments Widget By LatestTipsandTricks.Com-->
<style type="text/css">
ul.nbl_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nbl_recent_comments img {
opacity: 0.6;
}
.nbl_recent_comments img:hover {
opacity: 1;
}
.nbl_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 6px 7px 6px 7px !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.nbl_recent_comments li:hover {
    background: none !important;
    border: solid 1px #D5D3D3;
    margin: 0 0 6px !important;
    padding: 5px 6px 5px 6px !important;
}
.nbl_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 6px 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.nbl_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
.nbl_recent_comments li span {
    margin-top: 4px;
    color: #999;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
.nbl_recent_comments li span:hover {
    color: #000000;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 18,
 roundAvatar = true,
 characters  = 100,
 showMorelink = true,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="https://googledrive.com/host/0BwB_QitqQh3wN1lac2FsV1BHT1E"></script>
<script type="text/javascript" src="http://LatestTipsandtricks.com/feeds/comments/default?alt=json&callback=nbl_recent_comments&max-results=5"></script>
<!-- End Recent Comments Widget By LatestTipsandTricks.Com--> 

Step (4) Now Just Replace Red Latesttipsandtrick.com with your Site Link.

Step (5) Now Click on Save.



Congrats You are Done.

Hope This Will Help You And Please Don,t Forget Like us On Facebook and Google Plus.




0 comments:

Post a Comment

Give your Thoughts about this Post in Comments.

Top Ad 728x90