Mẫu bài đăng liên quan này là do một Blogger người Châu Á ( 90% là người Indonesia ) viết ra và được sử dụng ở rất nhiều Blog. Ưu điểm của tiện ích này so với một số mẫu Related Post khác chính là tính năng. Tiện ích này hỗ trợ các bạn hiển thị hình ảnh thu nhỏ ( thumbnail ), tiêu đề, tóm tắt nội dung, đường dẫn đọc thêm ( read more ), tooltip.... Các bạn có thể xem qua demo tại đây
Tiện ích bài đăng liên quan cho Blogger
Bước 1 : Chèn đoạn code dưới đây vào trên thẻ đóng </body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex, showRelatedPost;
(function(n, m, k) {
var d = {
widgetTitle: "<h4>Artikel Terkait:</h4>",
widgetStyle: 1,
homePage: "http://www.dte.web.id",
numPosts: 7,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 72,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Baca Selengkapnya",
callBack: function() {}
};
for (var f in relatedPostConfig) {
d[f] = (relatedPostConfig[f] == "undefined") ? d[f] : relatedPostConfig[f]
}
var j = function(a) {
var b = m.createElement("script");
b.type = "text/javascript";
b.src = a;
k.appendChild(b)
},
o = function(b, a) {
return Math.floor(Math.random() * (a - b + 1)) + b
},
l = function(a) {
var p = a.length,
c, b;
if (p === 0) {
return false
}
while (--p) {
c = Math.floor(Math.random() * (p + 1));
b = a[p];
a[p] = a[c];
a[c] = b
}
return a
},
e = (typeof labelArray == "object" && labelArray.length > 0) ? "/-/" + l(labelArray)[0] : "",
h = function(b) {
var c = b.feed.openSearch$totalResults.$t - d.numPosts,
a = o(1, (c > 0 ? c : 1));
j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&start-index=" + a + "&max-results=" + d.numPosts + "&callback=showRelatedPost")
},
g = function(z) {
var s = document.getElementById(d.containerId),
x = l(z.feed.entry),
A = d.widgetStyle,
c = d.widgetTitle + '<ul class="related-post-style-' + A + '">',
b = d.newTabLink ? ' target="_blank"' : "",
y = '<span style="display:block;clear:both;"></span>',
v, t, w, r, u;
if (!s) {
return
}
for (var q = 0; q < d.numPosts; q++) {
if (q == x.length) {
break
}
t = x[q].title.$t;
w = (d.titleLength !== "auto" && d.titleLength < t.length) ? t.substring(0, d.titleLength) + "…" : t;
r = ("media$thumbnail" in x[q] && d.thumbnailSize !== false) ? x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/s" + d.thumbnailSize + "-c") : d.noImage;
u = ("summary" in x[q] && d.summaryLength > 0) ? x[q].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, d.summaryLength) + "…" : "";
for (var p = 0, a = x[q].link.length; p < a; p++) {
v = (x[q].link[p].rel == "alternate") ? x[q].link[p].href : "#"
}
if (A == 2) {
c += '<li><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + '</span> <a href="' + v + '" class="related-post-item-more"' + b + ">" + d.moreText + "</a></span>" + y + "</li>"
} else {
if (A == 3 || A == 4) {
c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="' + v + '"' + b + '><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></div>" + y + "</li>"
} else {
if (A == 5) {
c += '<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="' + v + '" title="' + t + '"' + b + '><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-tooltip">' + w + "</span></a>" + y + "</li>"
} else {
if (A == 6) {
c += '<li><a class="related-post-item-title" title="' + t + '" href="' + v + '"' + b + ">" + w + '</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="' + r + '" width="' + d.thumbnailSize + '" height="' + d.thumbnailSize + '"><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + u + "</span></span>" + y + "</div></li>"
} else {
c += '<li><a title="' + t + '" href="' + v + '"' + b + ">" + w + "</a></li>"
}
}
}
}
}
s.innerHTML = c += "</ul>" + y;
d.callBack()
};
randomRelatedIndex = h;
showRelatedPost = g;
j(d.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + e + "?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")
})(window, document, document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
Bước 2 : Chèn đoạn code dưới đây vào vị trí bạn muốn hiển thị tiện ích. Theo mình vị trí hợp lí là ở phía dưới bài viết, tức là chèn vào phía dưới thẻ <div class='post-footer'>
<!-- Related Post Widget Start -->
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Posts :</h4>",
numPosts: 5,
summaryLength: 100,
titleLength: "auto",
thumbnailSize: 60,
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NksjHamBO2GWnEYmJo4uTieqyseH-XPGjPnOwc-aP2QfjIfYp1596kqUx8PrC0lkkBLBJGrCUEVl7jhchUAaOdT6rdBEmpMRnYvM1Auftt-6BvFKaN6CHlvYnUnPM_SFNKFY_zA7xPmT/w60-c-h60/no-image.png",
containerId: "related-post",
newTabLink: false,
moreText: "Read More...",
widgetStyle: 2,
callBack: function() {}
};
</script>
<!-- Related Post Widget End -->
Điều chỉnh :
- numPosts : Số bài viết hiển thị
- summaryLength : Số kí tự của nội dung trích dẫn
- titleLength : Chiều dài tiêu đề ( không khuyến kích điều chỉnh )
- thumbnailSize : Kích thước hình ảnh
- noImage : Hình ảnh mặc định khi bài viết không có hình ảnh
- moreText : Đường link đọc thêm. Thay Read More bằng Đọc thêm, Đọc tiếp hay gì gì đó
Bước 3: Tùy chỉnh giao diện của tiện ích bằng cách thêm đoạn code CSS dưới đây vào trên thẻ ]]></b:skin>. Đây là đoạn CSS mình sử dụng trong Demo phía bên trên, các bạn hoàn toàn có thể chỉnh sửa lại nếu không thích
.related-post {
padding-bottom: 10px;
margin-top: 10px;
border-bottom: 1px solid #e3e3e3;
}
.related-post ul {
padding: 0;
}
.related-post-item-thumbnail {
float: left;
margin-right: 8px;
}
.related-post-item-title {
display: block;
font-weight: 700;
color: #111;
font-size: 14px;
margin-bottom: 4px;
}
Bước 4 : Save template lại.
Lời kết : Tiện ích bài đăng liên quan không những góp phần giúp bạn SEO tốt cho Blog mà còn tăng đáng kể lượt xem bài viết trên Blog. Chính vì những ưu điểm đó, các bạn nên thêm ngay tiện ích này vào Blog của mình. Bài viết trên đây chưa khai thác hết toàn bộ các tính năng của mẫu tiện ích này, mà chỉ khai thác các tính năng cơ bản. Bạn nào có khả năng thì có thể tự nghiên cứu thêm. Chúc các bạn thành công
Không có nhận xét nào:
Đăng nhận xét