Thủ thuật: Bài viết liên quan cho blogger [SEO Blogspot]

Loading...

Đã có rất nhiều blogger chia sẻ thủ thuật này, trong bài viết SEO blogger toàn tập mình đã đề cập đến phần bài viết liên quan cho Blogger, Tạo bài viết liên quan giúp cho người xem dễ dàng xem được những bài cùng chuyên mục khi đọc hết 1 bài viết, điều đó giữ chân khách ở lại lâu hơn khi xem trang của các bạn. Tăng số lượng page views page của blog bạn
itviet360 xin tổng hợp tiện ích bài viết liên quan cho blogger của các trang cho các bạn tham khảo và lựa chọn mẫu riêng cho mình.
1. Mẫu bài viết liên quan blogspot 1 (tham khảo nguồn bloggerplugins)

Demo - bài viết liên quan Blogspot

Để sử dụng mẫu này các bạn cần tùy vào mẫu -> mở rộng mẫu HTML và chỉnh sửa theo hướng dẫn sau:
- Tìm đến </head> và chèn Code dưới đây bên trên nó:
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJeQ4Vr5I1oj-uVq2axHs9qLzZTEldaDF3J2WvCTV4Dwhc4uxCw22PQMNIWO5GChByfbZyAnxsoMtBL8yvl-QbxPp2MNRTavCB9Hv0DIP8CNy-mX-LS6I2O86iOt2qMlremLAGXvgSeWA/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://itviet360.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

</b:if>




Nếu muốn thay đổi tên tiện ích thì các bạn thay ở dòng:
var relatedpoststitle="Related Posts";

Thay tên muốn hiển thị của bạn.
var relatedpoststitle="TÊN HIỂN THỊ";
- Tiếp theo các bạn tìm đến đoạn
<div class='post-footer-line post-footer-line-1'>
Nếu không thấy thì nó có thể là đoạn Code:
<p class='post-footer-line post-footer-line-1'>
Dán đoạn code dưới đây ngay bên dưới Code vừa tìm được. Có thể bạn tìm thấy nhiều hơn 1 đoạn code ở trên:

<!-- Related Posts Code Start-->

<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.itviet360.com/2012/12/bai-viet-lien-quan-cho-blogger-seo.html'>Thủ thuật Blogger itviet360.com;</a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>

<!--Remove--></b:if>
<!-- Related Posts Code End-->

Giá trị này là bài viết liên quan sẽ hiển thị
var maxresults=5;
2. Bài viết liên quan cho blogger - mẫu có ảnh

DEMO trên blog truyen360vn
Mẫu bài viết liên quan cho blogspot có ảnh này khá thú vị, có 1 điểm lưu ý là chúng ta chọn số lượng bài viết hiển thị sao cho phù hợp với độ rộng bài viết (khung post) của bạn.
Cách làm vẫn ở chế độ mở rộng HTML
- Tìm </head> và dán đoạn dưới đây trên nó

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimry0Je7c54KJtepz-lXxRdvIG_2BexSjU_WWvycoU1os3BQRZilb_kOlEpYZbUBaDDgApKmEPl0IwSQ7djpvD2QuOpyPmAGleVSJDjrjNoTqjdJ1Y1VeCuM2ZLVxX0b5pXOzelWJepTk/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://itviet360.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

- Tìm đến đoạn:

<div class='post-footer-line post-footer-line-1'>

nếu không thấy thì nó là đoạn:
<p class='post-footer-line post-footer-line-1'>
và dán đoạn code dưới đây ngay sau nó.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.itviet360.com/2012/12/bai-viet-lien-quan-cho-blogger-seo.html'><img style="border: 0" alt=" Bài viết liên quan cho blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://itviet360.com/' ><img style="border: 0" alt="Blogger Templates" src="https://lh6.googleusercontent.com/-fSqIVyDB8gY/UMwkpHlFkLI/AAAAAAAABnQ/8IKV9P-0Q1A/s128/itviet360.png" /></a>
</b:if></b:if>

Bạn có thể chỉnh sửa 2 giá trị màu đỏ tương ứng.
Ở Code trên đó là số lượng hiển thị bài viết liên quan 5, tối đa là 6.
Để thay đổi tiêu đề thì bạn thay đổi ở dòng:
var relatedpoststitle="Related Posts";
Lưu mẫu và xem kết quả .
---------------------------------
Mình sẽ cập nhật những mẫu bài viết liên quan cho blogger tiếp theo
Chúc các bạn thành công !

Loading...

Chuyên mục: kinh-nghiem-SEO, Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger