Bài viết liên quan đẹp cho blogspot

Bài viết liên quan có hình cho blogspot chuẩn HTML5 tích hợp Quảng cáo, Bài viết liên quan đẹp cho blogspot

Ở 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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</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 ý:
  1. numPosts: 5: Số lượng bài viết liên quan
  2. "Đặ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



Related Posts :

  • Bài viết liên quan đẹp cho blogspotBài viết liên quan có hình cho blogspot chuẩn HTML5 tích hợp Quảng cáo, Bài viết liên quan đẹp cho blogspotỞ 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 … Read More...
  • Tạo tiện ích nhãn 2 cột đẹp cho blogspotNhãn (Label) có thể được xem là chuyên mục cũng có thể được xem là Tag từ khóa của 1 bài viết. Thường thì người dùng blogspot sẽ dùng Label làm chuyên mục trong website. Và bài viết này sẽ hướng dẫn các bạn tạo… Read More...
  • Hướng dẫn sử dụng template Star Tuấn đang dùngChào các bạn ở bài viết trước đây mình đã Share template blog mà mình đang dùng và được nhiều bạn quan tâm và chú ý nhưng cũng nhiều bạn chưa biết sử dụng, tùy biến sao nên hôm nay mình sẽ hướng dẫn chi ti… Read More...
  • Tạo widget cố định (Sticky widget) cho BlogspotDemo (đang cập nhật)Thông thường khi bạn xem một bài viết trên blog và kéo xuống dưới thì những widget ở trên sẽ bị ẩn dần đi. Tuy nhiên bạn cũng có thể giữ cố định một hay nhiều widget khi người đọc kéo xuống … Read More...
  • Nút bài viết ngẫu nhiên/Random Post cho BlogspotHôm nay Star Tuấn sẽ hướng dẫn các bạn cách làm một thủ thuật đến Bài viết ngẫu nhiên/Random Post cho Blogspot. Đây là thủ thuật blog cực kỳ thú vị và mang đến nhiều trải nghiệm cho người dùng, giúp tăng lượt x… Read More...
Rated 4.6/5 based on 28 votes

Đăng nhận xét