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 :

  • PSD Ảnh bìa Túy Âm Cho facebook P2Chia sẻ File PSD Ảnh bìa bài hát Túy Âm Cho facebook P2PSD này không kèm tên nhé vì mình thấy để tên không hợp còn bạn nào muốn có thể tự thêm vào hoặc tải PSD Túy Âm P1 tại đây.Với em chắc quá đủ cho một mối t… Read More...
  • Share bộ ảnh Chibi, Ảnh hài hước, Ảnh 3D Liên Quân MobileTải về bộ ảnh Chibi, Ảnh hài hước, Ảnh 3D Liên Quân Mobile cực chất.Demo 1 số tấm tải full 99 tấm ở dưới bài nhé.… Read More...
  • PSD Ảnh bìa Chạm Khẽ Tim Anh Một Chút ThôiPSD Ảnh bìa Chạm Khẽ Tim Anh Một Chút Thôi - Noo Phước ThịnhĐừng hôn nếu môi em chưa quên dư vị ngọt ngào hai ta đã traoĐừng ôm nếu em thấy anh ta chẳng thể vỗ về … Read More...
  • PSD Ảnh bìa Yêu Ư ? Để Sau - FaptvVừa qua Faptv - Hi team vừa ra mắt bộ phim mới tên là Yêu Ư ? Để Sau, Lúc đó mình định cover ảnh bìa rồi nhưng mà tại dạo này bận đi học quá nên hôm nay chủ nhật rảnh rỗi mình mới làm ảnh bìa được. Đây là ảnh b… Read More...
  • PSD Ảnh Bìa Là Anh - FaptvBộ Phim Là Anh do Faptv sản xuất đến nay cũng đã hơn 1 năm rồi ảnh bìa về phim faptv mình cũng làm cũng nhiều rồi riêng phim này chưa làm... Đó là lý do có bài viết này :))Tải thêm ảnh bìa khác về faptv: Ảnh bì… Read More...
Rated 4.6/5 based on 28 votes

Đăng nhận xét