Cara Membuat Related Post/Postingan Terkait di Blogspot

Related Posts atau Postingan Terkait adalah navigasi yang sangat "User Friendly" dalam sebuah blog, karena mempermudah pengunjung untuk menemukan lebih banyak referensi dalam kategori yang sama di blog Anda.

Related Posts sangatlah penting dalam sebuah blog, karena selain sebagai internal link, navigasi ini juga akan sangat membantu untuk meningkatkan Page View blog Anda. Penempatan dan tampilan related posts yang cukup menggoda akan membuat pengunjung berlama-lama menelusuri blog Anda. Tentunya hal ini sangat bagus untuk menaikkan Page View!

Ada beberapa pilihan untuk Membuat Related Post/Postingan Terkait di Blogspot yang banyak dibagikan oleh para blogger lokal maupun mancanegara, caranya pun sangat mudah untuk Anda terapkan di blog Anda.

Disini akan saya berikan 3 Cara Membuat Related Post/Postingan Terkait di Blogspot yaitu dengan memasukkan kode-kode dibawah ini ke Template Blog Anda. Silahkan Anda simak baik-baik:

(* Pilih salah satu cara di bawah ini.)

CARA #1 Membuat Related Post/Postingan Terkait di Blogspot

1. Pertama "Login" ke blogger dan masuk ke dashboard blog Anda.
2. Di dashboard blog, Klik menu "Theme" --> Klik "Edit HTML"
3. Selanjutnya temukan kode <data:post.body/>
4. Letakkan kode berikut ini tepat di bawah kode <data:post.body/>
(*Jika terdapat dua atau lebih kode <data:post.body/> di template Anda, maka coba yang kedua atau ketiga. Pasti salah satunya akan berhasil!)

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

5. "Save Theme"

CARA #2 Membuat Related Post/Postingan Terkait di Blogspot

1. Pertama "Login" ke blogger dan masuk ke dashboard blog Anda.
2. Di dashboard blog, Klik menu "Theme" --> Klik "Edit HTML"
3. Sekarang temukan kode </head>
4. Letakkan kode berikut ini di atas atau sebelum kode </head>

<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; 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: bold; 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("http://www.webaholic.co.in/other/bw.png") 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 src='http://www.webaholic.co.in/other/related-posts-widget.js' type='text/javascript'/>

5. Selanjutnya temukan kode <data:post.body/>
6. Dan Letakkan kode berikut ini tepat di bawah <data:post.body/>

<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>

7. "Save Theme"

CARA #3 Membuat Related Post/Postingan Terkait di Blogspot

5. Selanjutnya temukan kode <data:post.body/>
6. Letakkan kode berikut ini tepat di bawah <data:post.body/>

<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>

7. "Save Theme"

Demikianlah Cara Membuat Related Post/Postingan Terkait di Blogspot, sangat mudah bukan. Jika masih ada yang belum jelas, mari diskusikan di kolom komentar dibawah ini. Good Luck!