Chèn bài viết liên quan ngay dưới tiêu đề bài cho blogger/ Blogspot
Việc chèn bài viết có liên quan vào trong Web/Blog thì cái nào mà không có. Đó là điều hữu ích cho cả Admin và độc giả. Tuy nhiên, cách cho xuất hiện thường là ở cuối bài viết, hoặc chân trang. Mình tìm được mà Code nầy và có cải tiến lại vài chổ nhầm chia sẽ lại cùng các bạn sử dụng.
Các bước thực hiện đơn giản như sau:
Bước 1: Chèn mã code Css sau lên trước thẻ ]]></b:skin>
.post-ads{padding-top:0}Bước 2: Thêm JavaScript lên trên thẻ </head>
.post-ads{float:left;margin:0 10px 10px 0;position:relative}
@media(max-width:600px){.post-ads{width:100%}.post-right{margin-left:0!important;width:100%;float:left}}
.post-body img{transition:all.3s;max-width:650px}
.post-right{margin:0 0 0 310px;padding:0 0 10px} p.post-excerpt{overflow:hidden;margin:10px 0 10px 0;padding:10px;background-color:#f5f5f5;border:0 solid #eee;box-shadow:0 0 0 0 #B5B5B5;font-size:17px;line-height:1.5em}
#related-posts1{margin:10px 0}
#related-posts1 ul li{list-style-type:none;color:#0053f9;font-size:16px;line-height:22px;max-height:22px;overflow:hidden}
#related-posts1 ul li a{color:#0053f9}
#related-posts1 ul li a:hover{color:#ff0000}
#related-posts1 ul li a:before{content:"\f046";font-family:'FontAwesome';padding-right:5px}
#related-posts1 h4{color:#E74C3C;border-bottom:1px dashed#E74C3C;font-size:18px;margin-bottom:5px}
#related-posts1 ul{margin-left:0}
#related-posts1.fa{margin-right:5px}
#random-posts img{border-radius:1000px;border:5px solid;color:#dddddd;float:left;margin-right:5px;width:75px;height:75px;background-color:#F5F5F5;padding:3px;transition:all 0.2s linear 0s}
<script type='text/javascript'> //<![CDATA[ var titles = new Array();var titlesNum = 0;var urls = new Array();var time = new Array();function related_results_labels(c){for (var b = 0;b < c.feed.entry.length;b++){var d = c.feed.entry[b];titles[titlesNum] = d.title.$t;for (var a = 0;a < d.link.length;a++){if (d.link[a].rel == "alternate"){urls[titlesNum] = d.link[a].href;time[titlesNum] = d.published.$t;titlesNum++;break;}} ;}} function removeRelatedDuplicates(){var b = new Array(0);var c = new Array(0);e = new Array(0);for (var a = 0;a < urls.length;a++){if (!contains(b,urls[a])){b.length += 1;b[b.length - 1] = urls[a];c.length += 1;c[c.length - 1] = titles[a];e.length += 1;e[e.length - 1] = time[a];}} titles = c;urls = b;time = e;} function contains(b,d){for (var c = 0;c < b.length;c++){if (b[c] == d){return true;}} return false;} function printRelatedLabels(a){var y = a.indexOf('?m=0');if (y != -1){a = a.replace(/\?m=0/g,'');} for (var b = 0;b < urls.length;b++){if (urls[b] == a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);}} var c = Math.floor((titles.length - 1) * Math.random());var b = 0;document.write("<ul>");if (titles.length == 0){document.write("<li>Không có bài viết liên quan → </li>");} else{while (b < titles.length && b < 20 && b < maxresults){if (y != -1){urls[c] = urls[c] + '?m=0';} document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8,10) + "/" + time[c].substring(5,7) + "/" + time[c].substring(0,4) + '">' + titles[c] + "</a></li>");if (c < titles.length - 1){c++;} else{c = 0;} b++;}} document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length);} ;//]]> </script>Bước 3: Tìm đến hàng lệnh <div class='post-header-line-1'/> bằng cách nhấn tổ hợp phím Ctrl+F và dán code sau xuống phía dưới nó:
<b:if cond='data:blog.pageType == "item"'> <div class='qc-header-post'> <div class='post-ads'> Dán quảng cáo của bạn ở đây </div> <div class='post-right'> <p class='post-excerpt'> <data:post.snippet/> </p> <b:if cond='data:blog.pageType == "item"'><blockquote class="tr_bq" style="background-color: #d0e0e3; border-left-style: solid; border-left-width: 6px; border-radius: 3px; box-shadow: rgb(171, 171, 171) 0pt 0pt 14px; font-family: cuprum; font-size: 15.4px; line-height: 21.56px; padding: 8px 9px;"> <div id='related-posts1'> <h4> <i class='fa fa-bullhorn'/> Bài viết liên quan:</h4> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/"+ data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:loop> <script type='text/javascript'> var maxresults=5;removeRelatedDuplicates();printRelatedLabels("<data:post.url/>");</script> </div> </blockquote> </b:if> </div> </div> </b:if>Cuối cùng các bạn Lưu mẫu lại và xem kết quả Blogspot.
Lưu ý với các bạn: Khanhnguyen dùng thẻ Blokquote để thể hiện một bảng đóng khung cho việc xuất dữ liệu của các hàng lệnh. Thẻ Blokquote nầy được mả hóa và in hàng chữ đỏ trên khung Code mà bạn thấy. Nếu muốn thay đổi khung về màu sắc, size chữ, hay kiểu chữ hiển thị...đều được cả.
Chúc các bạn thành công !
Khanhnguyen' s Blog tổng hợp
