Thêm widget "Có thể bạn thích" giữa bài viết một cách chuyên nghiệp

Có thể bạn thích

Nếu bạn có đọc báo trên Kenh14 hoặc VnExpress, bạn sẽ thấy ở giữa bài viết sẽ có một vị trí dành cho những bài viết liên quan đến bài viết đó, điều này sẽ là cho bài viết của họ sẽ được tăng lượt tương tác và trở nên chuyên nghiệp hơn. Hôm nay mình sẽ hướng dẫn các bạn thêm widget này vào blog/website của bạn trên Blogspot.

Thêm widget "Có thể bạn thích" giữa bài viết một cách chuyên nghiệp

Thêm đoạn CSS sau vào trước thẻ ]]></b:skin>

/* Related Post Widget, CSS by OwlTek.Blogspot.Com */
.related-simplify{position:relative;padding:10px;margin:15px auto;width:93%;box-shadow: 0px 1px 3px 0px;}
.related-simplify h4{margin: 0;font-size: 20px;text-transform: uppercase;font-weight: 700;font-family: "Roboto Condensed", sans-serif;color: #e46565;}
.related-simplify h4:before{content: '\f06d';font-family: fontawesome; margin-right: 8px;}
.related-simplify h4:after; display: block; margin-top: 4px;content: ' ';width: 22.5%; height: 2px; background-color: #db6161;
}
.related-simplify ul{margin:0;padding:0!important;font-weight:700!important}
.related-simplify ul li{background: #f6f6f6;position: relative;list-style: none;padding: 9px;margin: auto;line-height: 1.4em;border-bottom: 0;transition: all .3s;}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{ content: '\f105';font-family: fontawesome;position: absolute;margin: 0 9px 0 13px; color: #222;overflow: hidden; transition: all .3s;
}
.related-simplify ul li:hover:before{content:'\f105';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color: #222;font-size: 15px;margin: 0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Thêm đoạn Javascript sau vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

Cuối cùng, bạn thay thế thẻ <data:post.body/> trong template (Lưu ý: Thông thường sẽ có rất nhiều thẻ <data:post.body/> trong đa số các template, do đó bạn hãy thay thế từng cái một cho đến khi nó xuất hiện nhé!)

<div expr:id='&quot;post1&quot; + data:post.id'/> <div class='related-simplify'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>Có thể bạn thích</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script> 

Xong rồi, chúc bạn thành công ^^!

Widget by Arlina Design

Edited by Owl Tek Blog