Ở 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 300×250 hoặc 300×300 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