Latest comment widget for Blogspot with Jquery

Thích Code | July 29, 2016 | Edit Post

Surf the web to see the latest comment widget for Blogspot this pretty nice to share with you. You should add this widget to the site to easily track other people commented on the article so we can answer. This is also a way to optimize the SEO, which helps the user interact with our website.

Widget nhận xét mới nhất cho Blogspot

Here's how:
Step 1: Sign in to Blogger, select Layout -> Add a Gadget
Step 2: Copy all the code below into the gadget you just created.

Chú ý: You just change https://thichcode.net trong Javascript become your domain. Widget is use Jquery and Font-Awesome

HTML
CSS
JS
Demo
Code by ThichCode.NET

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.mbtcmts {
list-style-type:none;
overflow:hidden
}

.mbtcmts li {
margin:0 auto 20px;
clear:both;
color:#666;
font-family:helvetica;
font-size:12px;
padding:0
}

.mbtcmts i {
color:#999;
padding-right:4px
}

.mbtcmts .idate {
display:block;
font-family:arial;
font-size:11px;
text-align:left;
padding:3px;
margin:0 0 0 40px
}

.mbtcmts .icontent {
display:block;
font-family:Georgia;
color:#999;
font-style:italic;
line-height:1.5em
}

.mbtcmts .icontent a {
color:#999;
text-decoration:none;
font-weight:700;
font-size:16px;
font-style:normal
}

.mbtcmts div {
line-height:2em;
clear:both;
border-top:1px solid #eee;
margin-top:5px
}

.mbtcmts span {
margin:5px 0 0;
padding-right:5px
}

.mbtcmts img {
border-radius:100%;
float:left;
margin:0 20px 20px 0;
border:1px solid #eee;
padding:3px;
width:50px;
height:50px;
box-shadow:2px 2px 4px #ddd
}

.mbtcmts .icapital {
text-transform:Capitalize;
display:inline-block
}

.mbtcmts .ititle {
font-family:oswald;
font-size:14px;
color:orange;
font-weight:400;
text-decoration:none
}

.mbtcmts .ititle:hover {
color:#666
}

.mbtcmts .idate:before,.mbtcmts .ipostTitle a:before {
font-family:fontAwesome;
position:relative;
padding-right:5px
}

.mbtcmts .idate:before {
content:'\f017';
color:#999
}

.mbtcmts .ipostTitle a {
text-decoration:none;
color:#999
}

.mbtcmts .ipostTitle a:before {
content:'\f07c'
}

#mbtloading {
margin:20% auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd08crpC4wqlOp6El80KrG74WFJ446QbuNkDeqnldjecZPAetnQ43E7rquyOS3_xGGlY6CYP5VFJJlgd7A4Z4fg9VTijUSU05bUUGgJpyMvJivL-FAavd_kD6lTizFzh3P-1B9Lj4IUrlT/s1600/wgloading.gif) no-repeat left center;
width:80px;
height:80px
}

.tooltip {
outline:none;
text-decoration:none!important;
position:relative
}

.tooltip:hover {
border-bottom:none
}

.tooltip strong {
line-height:30px
}

.tooltip > span {
text-transform:capitalize;
width:150px;
padding:5px;
opacity:0;
top:120%;
left:0;
visibility:hidden;
z-index:10;
position:absolute;
font-family:helvetica;
font-size:12px;
font-weight:700;
border-radius:2px;
box-shadow:2px 2px 5px #999;
-webkit-transition-property:opacity,margin-top,visibility,margin-left;
-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;
-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;
transition-property:opacity,margin-top,visibility,margin-left;
transition-duration:0.4s,0.3s,0.4s,.3s;
transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out
}

.tooltip > span img {
float:right;
width:110px;
margin:0 0 30px 10px;
padding:0;
border:none
}

.tooltip:hover > span {
opacity:1;
text-decoration:none;
visibility:visible;
overflow:visible;
display:inline;
margin-left:-50px
}

.tooltip span b {
width:15px;
height:15px;
left:30%;
top:-9px;
display:block;
position:absolute;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
display:none\0/;
*display:none
}

.tooltip > span {
padding-top:10px;
color:#fff;
background:orange;
border:1px solid #fff
}

.tooltip span b {
background:orange;
border-top:1px solid #fff;
border-right:1px solid #fff
}

.mbtcmts .itotal {
color:#333;
padding:3px 3px 3px 10px;
border:1px solid #eee;
font-family:arial;
font-size:12px
}

.mbtcmts .itotal i {
font-style:normal
}

.mbtcmts .itotal span {
font-family:oswald;
font-weight:400;
color:#333;
text-decoration:none
}

.mbtcmts .itotal span:before {
font-family:FontAwesome;
position:relative;
content:'\f075'
}
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
    function mbtcmts(json) {
        document.write('<ul class="mbtcmts">');
        for (var i = 0; i < ListCount; i++) {
            //################### Khai báo biến
            var listing = ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m = "";
            //################### Link nhận xét
            for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                if (json.feed.entry[i].link[j].rel == 'alternate') {
                    break;
                }
            }
            if (json.feed.entry[i].link[2] != null) {
                ListUrl = "'" + json.feed.entry[i].link[j].href + "'";
            } else {
                ListUrl = "'#'"
            }
            //####################### Lấy tiêu đề bài viết
            if (json.feed.entry[i].link[2] != null) {
                var mbt_slit = json.feed.entry[i].link[j].href;
                var M_slit = mbt_slit.split("#");
                M_slit = M_slit[0];
                var K_slit = M_slit.split("?");
                K_slit = K_slit[0];
                var B_slit = K_slit.split("/");
                B_slit = B_slit[5];
                B_slit = B_slit.split(".html");
                B_slit = B_slit[0];
                var T_slit = B_slit.replace(/-/g, " ").charAt(0).toUpperCase() + B_slit.replace(/-/g, " ").slice(1).substring(0, 50);
                var Link_slit = T_slit.link(K_slit);
            }
            //################### Info 
            TotalPosts = json.feed.openSearch$totalResults.$t;
            ListAuthor = json.feed.entry[i].author[0].name.$t;
            var ListAuth = ListAuthor.split(" ");
            var ListAuth = ListAuth.slice(0, 1).join(" ");
            ListProfile = "'" + json.feed.entry[i].author[0].uri.$t + "'";
            //################### ội dung nhận xét
            ListConten = json.feed.entry[i].content.$t;
            ListContent = ListConten.replace(/(<([^>]+)>)/ig, "").substring(0, ChrCount);
            //################### Ngày nhận xét
            ListMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
            ListDate = json.feed.entry[i].published.$t.substring(0, 10);
            Y = ListDate.substring(0, 4);
            m = ListDate.substring(5, 7);
            D = ListDate.substring(8, 10);
            M = ListMonth[parseInt(m - 1)];
            //################### Avatar nhận xét
            if (json.feed.entry[i].author) {
                thumbUrl = json.feed.entry[i].author[0].gd$image.src;
                sk = thumbUrl.replace("/s72-c/", "/s60-c/");
                ListImage = "'" + sk + "'";
            } else {
                ListImage = "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP4qIqdinQE5QHSIwUAItllRE3MppGkB_68TmP-XzhI8Skadi1H1BngPd_BeYdiwlAumx9WGXmwMqYlNmskaPXtEf1xhJPxYsVZ5Rf2V32xfzMoZWKyFnYmVLW0z5b04d7fbjl6xxY5W0/s200/Icon.png'";
            }
            //################### Xuất hiển thị nhận xét
            var listing = "<li class='node" + [i] + "' ><a rel='nofollow' href=" + ListProfile + "><img src=" + ListImage + "/></a><a class='ititle tooltip' href=" + ListUrl + "target='_blank'><span><b></b>" + ListAuth + " Commented on » " + M + " " + D + ", " + Y + "</span>" + ListAuthor + "</a> <i> posted in</i>  <span class='ipostTitle'><a class='tooltip'  href='" + K_slit + "'><span><b></b>" + T_slit + "</span></a></span><span class='icontent'>" + ListContent + " ...   <a href=" + ListUrl + ">  » </a></span><div></div></li>";
            document.write(listing);
        }
        document.write('<div class="itotal"><span> ' + TotalPosts + ' </span><i>nhận xét trên <b>ThichCode.NET</b> !</i></div></ul>');
    }
</script>
<script>
    var ListCount = 5; //Số nhận xét hiển thị
    var ChrCount = 90; //Chiếu dài nội dung nhận xét
</script>
<script src="https://thichcode.net/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>
    document.getElementById("mbtloading").style.display = "none";
</script>

Thích Code | July 29, 2016 | Edit Post

ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.

Latest comment widget for Blogspot with Jquery

1 comment:

Most read

Latest