Ở bài viết này mình phân bố bên trái là bài viết liên quan cho blogspot chuẩn HTML5, bên phải dành cho quảng cáo với kích thước chuẩn 300x250 hoặc 300x300 rất tiện lợi mà không làm mất thẩm mỹ của template của các bạn.
Tiến hành chèn code vào template:
Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Chọn mẫu
Bước 3: Chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]
]></b:skin> hoặc
</style> Copy đoạn CSS bên dưới và Paste trên nó.
@media (max-width: 600px) {
.post-ads {
width: 100%;
}
.post-right {
margin-left: 0 !important;
width: 100%;
float: left;
}
}.post-right {
margin: 0 0 0 310px;
padding: 0 0 10px
}
.post-ads {
float: left;
margin: 0 10px 10px 0;
position: relative
}
p.post-excerpt {
margin: 0;
padding: 10px;
background-color: #ECF0F1;
font-size: 17px;
line-height: 1.5em;
color: #09f
}#related-posts {
margin: 10px 0
}
#related-posts ul li {
list-style-type: none;
color: #2980C1;
font-size: 16px;
line-height: 22px;
max-height: 22px;
overflow: hidden
}
#related-posts ul li a {
color: #09f
}
#related-posts ul li a:hover {
color: #F90053
}
#related-posts h4 {
color: #f90053;
border-bottom: 1px dashed #f90053;
padding: 5px 0;
font-size: 18px;
margin-bottom: 5px
}
#related-posts ul {
margin-left: 0;
padding: 0
}
#related-posts .fa {
margin-right: 5px
}
#related-posts ul li a:before {
content: "\f046";
font-family: 'FontAwesome';
color: #f90053;
padding-right: 5px
}
#related-posts1 ul li:before {
display: none;
}Sau khi chèn đoạn CSS xong các bạn copy đoạn code javascript dưới đây vào trước thẻ </head>
<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>
Chèn Bài viết liên quan vào nơi bạn muốn hiển thị trong blog
Copy đoạn code bên dưới
<b:if cond='data:blog.pageType == "item"'>
<div class='qc-header-post'>
<div class='post-ads'>
Đặt 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"'>
<div id='related-posts'>
<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><a class="home-icon" href="http://www.startuanit.net/" style="position: absolute;visibility: hidden;"></a>
</div>
</b:if>
</div>
</div>
</b:if>
Tìm đoạn code tương tự dưới đây
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
Và chèn trước thẻ <data:post.body/> nếu bạn muốn tiện ích bài viết liên quan xuất hiện ở trên đầu bài viết hoặt chèn sau thẻ <data:post.body/> nếu bạn muốn nó xuất hiện ở cuối cùng bài viết.
Lưu ý:- Tìm kiếm với đoạn code
<data:post.body/> sẽ cho kết quả chính xác nhất.
- Đôi khi trong template blogspot của bạn có nhiều hơn 1 đoạn code này nên bạn chèn code trên lần lượt vào những đoạn code bạn tìm được, tới khi nào nó xuất hiện trong bài viết thì ngừng nhé.
Bước 4: Lưu lại và xem kết quả
Lưu ý:- numPosts: 5: Số lượng bài viết liên quan
- "Đặt quảng cáo của bạn ở đây" Thay banner hoặc code hiển thị quảng cáo
Chúc các bạn thành công
