Like Page để cập nhật tin mới ngay trên facebook nhé

Chèn bài viết liên quan vào giữa bài viết cho Blogspot

Trong bài viết trước mình đã hướng dẫn các bạn cách chèn quảng cáo vào giữa bài viết Blogspot để tăng thu nhập, trong bài này mình sẽ hướng dẫn các bạn cách chèn bài viết liên quan với những style đẹp mắt mà mình sưu tầm được bên trang của arlinadzgn - một blogger nổi tiếng 😝, trước khi thực hiện bạn có thể xem qua demo để hiểu rõ hơn
Chèn bài viết liên quan vào giữa bài viết cho Blogspot
Bài viết liên quan là một bộ phận không thể thiếu trong một bài viết, nó giúp bạn đọc tiếp cận với những bài viết nhanh nhất mà không cần tìm kiếm, đặc biệt bài viết liên quan này nằm giữa bài viết sẽ tăng lượt tiếp cận nhiều hơn.

Hướng dẫn cách làm:

Bước 1: Bạn đăng nhập Blogger -> Chủ đề -> Sau đó tìm đến thẻ đóng </head> và dán đoạn code sau lên trên đó
<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>
Bước 2: Ở bước này bạn cần chú ý nhiều hơn, bạn tìm đến thẻ <data:post.body/> tuy nhiên kết quả sẽ cho nhiều hơn 1, vì vậy bạn cần thử từng cái (nên backup template nếu có lỗi thì còn mẫu để cập nhật lại)
Bạn thay <data:post.body/> vừa tìm thành đoạn code dưới đây
<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=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Bạn muốn xem:</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>
Bước 3: Để làm đẹp tiện ích này bạn có thể dùng CSS để làm đẹp hơn tìm đến thẻ ]]></b:skin> và dán CSS này lên trên nó, bạn có thể tự viết thêm hoặc tham khảo 3 mẫu dưới đây
Mẫu 1:
/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);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:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;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)}}
Chèn bài viết liên quan vào giữa bài viết cho Blogspot
Mẫu 2:
/* Related Post Style 2 */
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
Chèn bài viết liên quan vào giữa bài viết cho Blogspot
Mẫu 3:
/* Related Post Style 3 */
.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}
.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#fff;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
Chèn bài viết liên quan vào giữa bài viết cho Blogspot
Lưu mẫu lại và xem kết quả! Hy vọng thủ thuật nhỏ này sẽ giúp ích cho bạn, chúc bạn thành công!

13 nhận xét:

  1. hay lắm bác. cám ơn bác đã chia sẻ

    Trả lờiXóa
    Trả lời
    1. Thấy họ hỏi han nhiều quá nên làm top hướng dẫn luôn, vừa có bài viết thêm cho mục thủ thuật blogspot

      Xóa
  2. Tuyệt, đúng cái đang cần :D

    Trả lờiXóa
    Trả lời
    1. Thấy cũng hay hay, lôi về cho ae họ hàng sài luôn :D

      Xóa
  3. Nặc danh4/04/2017

    bác Ad cho em hỏi là tạo text màu xanh ở đầu Nội dung bài viết như thế nào đấy ạ, bác cho em xin code với ạ: mail em : hieutu.pv@gmail.com

    Trả lờiXóa
    Trả lời
    1. Là sao bạn nhỉ ? Bạn nói rõ chỗ nào để mình hướng dẫn

      Xóa
    2. https://lh3.googleusercontent.com/-trK1U-kJdc4/WOOvYJ1XQvI/AAAAAAAABWQ/Bm0Aoo-cqwgblMie3-Isq86VQzVxgwlLQCLcB/h61/Untitled.png

      Đây Ad ơi

      Xóa
  4. Manh Hùng4/04/2017

    Ad ơi, em làm thành công cái tạo bài viết liên quan rồi, nhưng mà nó cứ nhảy lọa lên , mỗi bài viết 1 vị trí, em muốn nó nằm cố định dưới dòng Mô tả thì làm cách nào ạ

    Trả lờiXóa
    Trả lời
    1. À đúng rồi cách này thì nó sẽ tự ở vị trí giữa bài viết của mỗi bài đắng nha bạn!

      Xóa
    2. Nếu bạn muốn để quảng cáo dưới mô tải thì như bước 2 ở trên, tìm tới thẻ <data:post.body/> sau đó bán mã quảng cáo phí trên đó là được rồi

      Xóa
  5. Mạnh Hùng5/08/2017

    Ad ơi cho em hỏi cách làm cái này với: https://lh3.googleusercontent.com/-trK1U-kJdc4/WOOvYJ1XQvI/AAAAAAAABWQ/Bm0Aoo-cqwgblMie3-Isq86VQzVxgwlLQCLcB/h61/Untitled.png

    Trả lờiXóa
    Trả lời
    1. Bạn có thể liên hệ facebook để mình chỉ rõ hơn Fb.com/blogchiasethuthuat

      Xóa

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói