Showing posts with label comment box html java code. Show all posts
Showing posts with label comment box html java code. Show all posts

Thursday, May 28, 2015

Stylish Comment Box for Blogger (Beautiful Comment Box)

Posted by Amit Kumar Biswas with 54 comments | in , , , , ,
I will share with you today 4 different types of Beautiful comment box widget. Hopefully you will love these widgets.

 Go to Layout >> Add a widget >>> HTML/JAVA Script  >>>> Paste one of this codes and press Save.  And you are done...!!!

Widget 1:
<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/AVvXsEivJyKMMWCoF6bae5Yzy55ODG7CmQsB7qrukh6XCVQL8fXb0JeKnhtg6Sjnr6_orBPIhkdPAIzeW1ujcacMA3HW_5v28sSudA0Ga4XgbvaJUkcWYN8tiMBKRvT3vzDpAwabHwfaulX8NwVq/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>



Widget 2:   Animated
<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>


Widget 3:
<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/AVvXsEivJyKMMWCoF6bae5Yzy55ODG7CmQsB7qrukh6XCVQL8fXb0JeKnhtg6Sjnr6_orBPIhkdPAIzeW1ujcacMA3HW_5v28sSudA0Ga4XgbvaJUkcWYN8tiMBKRvT3vzDpAwabHwfaulX8NwVq/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>



Widget 4:

<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/AVvXsEivJyKMMWCoF6bae5Yzy55ODG7CmQsB7qrukh6XCVQL8fXb0JeKnhtg6Sjnr6_orBPIhkdPAIzeW1ujcacMA3HW_5v28sSudA0Ga4XgbvaJUkcWYN8tiMBKRvT3vzDpAwabHwfaulX8NwVq/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>


ENJOY>>>!!!

Subscribe to: Posts (Atom)