in

Make Comments on your blog Appear on a static Page

Make Comments on your blog Appear on a static Page,blogger, blogger comments,blogger widgets, how to ,mashbyte,mashbyte.com

Many blogs has a lot comments with different posts, and one thing we know is that , as a blogger you need to always check your comments in other to reply your visitors…. Blogger unlike wordpress and co…. won’t allow you to see all your comments in a page but will rather let you view it one by one…. which is a waste of time……So in our tutorial today we will be learning how to display all the comments in our blog on a static page like the one we have here…. Comments.


Is  this important at all? 

Someone may ask if this has an importance or whether is necessary or not .. and the answer is YES!!,  this is because it helps us to easily survey our visitors aim and wants since people might request something from you …. and aside that, viewing all your comments on a page makes it beautiful … and many others.
Now lets move to the steps involved in implementing this on our site…..
Step 1:-  First create a static Page .. which is normally just a page…and change it from compose to HTML .… 

Step 2:-  Now just copy all this code below and paste it in your page, whiles in HTML mode,…..

<div id="CommentUI">
<script type="text/javascript">//<![CDATA[
var copyright_by_duypham_dot_info='Recent Comments free version 3.2 by http://duypham.info';
nc=200;
length_name=30;
length_content=300;
no_avatar='https://i.imgur.com/TsS2wN3.png';
home_page='https://www.mashbyte.com/';
admin_uri='https://www.blogger.com/profile/10693068228540996311';
admin_avatar='https://i.imgur.com/TsS2wN3.png';
function rc_avatar2(a) {
-1 != d[u].indexOf("/p/") ? (pn[u] = 1, o = a.entry.title.$t, t[u] = o) : (o = a.feed.title.$t, t[u] = o, num = a.feed.openSearch$totalResults.$t, i = parseInt((num - 1) / 200) + 1, pn[u] = i), u++
}

function rc_avatar1(t) {
tt = t.feed.openSearch$totalResults.$t, tb = t.feed.title.$t, "uri" in t.feed.author[0] && (ura = t.feed.author[0].uri.$t), ima = t.feed.author[0].gd$image.src;
for (g = 0; g < nc && g < tt && (c = t.feed.entry[g], g != t.feed.entry.length); g++) {
if (lk = c.link[0].href, lk = lk.split("/"), bid = lk[4], pid = lk[5], cid = lk[8], d[g] = c["thr$in-reply-to"].href, -1 != y && (d[g] = d[g] + "?m=0"), pi[g] = c.gd$extendedProperty[0].value, ti[g] = c.gd$extendedProperty[1].value, p[g] = cid, "content" in c) var e = c.content.$t;
else if ("summary" in c) e = c.summary.$t;
else e = "&#8592;";
if ((e = (e = (e = e.replace(/<br />/g, " ")).replace(/@<a.*?a>/g, "")).replace(/<[^>]*>/g, "")).length < length_content) j2[g] = e;
else {
var r = (e = e.substring(0, length_content)).lastIndexOf(" ");
e = e.substring(0, r), j2[g] = e + "&#133;"
}
if (a2 = c.author[0].name.$t, a2.length < length_name) a[g] = a2;
else {
a2 = a2.substring(0, length_name);
r = a2.lastIndexOf("");
a2 = a2.substring(0, r), a[g] = a2 + "&#133;"
}
"uri" in c.author[0] && (ur[g] = c.author[0].uri.$t), "http://img1.blogblog.com/img/blank.gif" == c.author[0].gd$image.src ? (im[g] = no_avatar, alt[g] = "no avatar") : (im[g] = c.author[0].gd$image.src, alt[g] = a[g]), -1 != d[g].indexOf("/p/") ? document.write('<script type="text/javascript" src="https://www.blogger.com/feeds/' + bid + "/pages/default/" + pid + '?alt=json-in-script&callback=rc_avatar2"></script>') : document.write('<script type="text/javascript" src="' + home_page + "/feeds/" + pid + '/comments/default?alt=json-in-script&max-results=1&callback=rc_avatar2"></script>')
}
}

function AvatarImg() {
var e = "";
for (e += "<ul>", z = 0; z < nc && z < tt; z++) {
t[z] = t[z].replace("Comments on " + tb + ": ", "");
var r = "";
1 == pn[z] ? r = "#c" : (cp = "commentPage=" + pn[z] + "#c", r = -1 != y ? "&" + cp : "?" + cp), e += '<li class="', e += "CommentBlock", e += '"><div class="AvatarImg"><img alt="' + alt[z] + '" class="AvatarImg" src="' + im[z] + '"/></div><div class="CommentUi"><div class="commentHeader"><span class="userName"><span itemprop="name">' + a[z] + '</span></span><time class="dateTime">' + ti[z] + '</time></div><a href="' + d[z] + r + p[z] + '" rel="nofollow" title="Nhấn vào để xem nhận xét"><div class="commentContent" itemprop="text">' + j2[z] + "</div>", e += '</a></div><div class="clear"></div></li>'
}
e += "</ul>", document.getElementById("CommentUI").innerHTML = e
}
tt = 0, u = 0, lk = [], d = [], p = [], pn = [], j2 = [], tb = [], t = [], pi = [], ti = [], a = [], im = [], alt = [], ur = [], ura = [], ima = [], ad = "duypham", loc = "http://", dot = ".", inf = "info", a3 = location.href, y = a3.indexOf("?m=0"), copyright_by_duypham_dot_info == "Recent Comments free version 3.2 by " + loc + ad + dot + inf && document.write('<script type="text/javascript" src="' + home_page + "/feeds/comments/default?alt=json-in-script&max-results=" + nc + '&callback=rc_avatar1"></script>');
//]]>
</script>
<script type="text/javascript">AvatarImg();</script>
</div>

<style>
/* Comment All*/
#CommentUI ul{margin:0!important;padding:0}
#CommentUI li{position:relative;padding:8px 12px;border-radius:18px;list-style:none}
#CommentUI .CommentInfo{}
#CommentUI .AvatarImg{display:flex;align-items:center;position:absolute;width:40px;height:40px;border-radius:50%;overflow:hidden;transition:all .2s ease-out;-webkit-transition:all .2s ease-out}
#CommentUI img{margin:0!important;padding:0!important;width:45px;height:45px;border-radius:50%;background:url(https://i.imgur.com/TsS2wN3.png) no-repeat center}
#CommentUI .CommentUi a{color: #343a40;font-size: 13px;}
#CommentUI .CommentBlock .CommentInfo{float:left;position:absolute;width:100%}
#CommentUI .CommentBlock a{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:15px 0 0}
#CommentUI .CommentUi{background:#f0f2f5;margin-left:50px;border-radius:8px;padding:8px 12px}
#CommentUI .CommentBlock a:hover{opacity:.85}
#CommentUI .userName{flex: 0 0 auto;display: flex;align-items: flex-start;font-size: 13px;font-weight: 700;color: #161617;}
#CommentUI .userName span {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 130px;}
#CommentUI .dateTime{font-size: 11px;color: #989b9f;margin-top: -10px;position: absolute;}
@media only screen and (max-width: 640px) {
#CommentUI li {padding: 0;}
#CommentUI li {margin-bottom: 10px;}}
</style>

Kindly Change the highlighted link with your own  respectively.

RED is your profile ID                    – BLUE is your site URL

Publish it after everything ………………..Please the Demo is Comments

I hope you find this useful, but if in any case you find it difficult to apply it to your site, then leave a comment below for help and a quick reply, or use our Contact page for a personal assistant.

Note: You have the right to share this with anyone of your choice or on your blog….but Don’t forget to link back to MashByte.com.… Read our ToC  or our DMCA here to understand how our Terms very well.

Remember to Subscribe and  share……. 


What do you think?

Written by Kwabena

Kwabena is a tech freak, passionate about every new gadget and technology that comes his way. Always searching, always curios, he managed to gather an astounding experience that is very useful in his Info-Tech career.....

Comments

Beautiful Love Story Themes for Blogger

How to make Disqus Comments Count on Blogger …