Kali ini tips blogging tentang Cara Membuat Related Post di Bawah Postingan Blog dengan desain simple. Hanya berisi daftar judul tulisan sehingga lebih ringan (fast loading).
Tampilan Related Postnya seperti gambar di bawah ini:
Fungsi Related Post
Kita bahas dulu fungsinya. Widget ini berfungsi sebagai navigasi sekaligus internal link untuk memudahkan pengunjung mengeksplorasi konten blog.
Related Post menampilkan tulisan dengan label yang sama secara otomatis. Jika satu label hanya satu postingan, maka related post tidak akan muncul.
Karenanya, pastikan setiap postingan Anda dikasih Label. Label ini semacam kategori atau tags untuk mengelompokkan postingan berdasarkan tema/topik.
Related Post menampilkan tulisan dengan label yang sama secara otomatis. Jika satu label hanya satu postingan, maka related post tidak akan muncul.
Karenanya, pastikan setiap postingan Anda dikasih Label. Label ini semacam kategori atau tags untuk mengelompokkan postingan berdasarkan tema/topik.
Cara Membuat Related Post Simple di Bawah Postingan Blog
Cara Membuat Related Post di Bawah Postingan1. Klik Tema > Edit HTML
2. Simpan kode berikut ini di atas kode </head>
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKv2nJjpFe04Nud-OiA5Swh4KcMBxzm9svlxw9QwJFDWqaUQ5TSkTyuLhgKZfUB9DZYyc__faFwOiu9fslJ_C5yssgwu9VH_jn36smHrJGyvDaWksiNIFRg4GG9eClaQFa5_mt8Hab-xI/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a style="font-size:18px;font-color:#FF0000;" rel="dofollow" href="http://bos-tutorial.blogspot.com/">Tutorial Blog</a></font>');
}
//]]>
</script>
3. Simpan kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.
<br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
4. Simpan Template.
Demikian tutorial mengenai Cara Membuat Related Post di Bawah Postingan.*
Post a Comment
Post a Comment