Cara mudah membuat related post

cara membuat related post atau yang sering juga di sebut membuat artikel terkait, inilah yang kita akan bahas.

baiklah sahabat blogger semua, kalau kemarin saya sudah menjelaskan tentang tutorial breadcrum dan buku tamu, sekarang saya akan berbagi sedikit ilmu mengenai cara  sangat mudah membuat related post ..dan related post yg saya berikan ini adalah related post yg menggunakan scroll,jadi tidak memanjang kebawah dan lebih efektif..

fungsi related post ni sangat bagus,jadi pengunjung bisa melihat judul postingan kita yg terkait atau yg dalam satu categori saat mereka mmbaca postingan yg kita buat,

caranya gini:

1. log in ke akun blogger, di dasbor pilih design atau rancangan
2. pilih edit html
3. centang expand template widget dan back up templtae dgn cara download full template,bwt jaga jaga..

di edit html cari kode ini  <p><data:post.body/></p>  kalau tidak ketemu, cari kode yg mendekati atau cari kode bagian bawah di daerah postingan, sulit memang dijelaskan, karena masing masing template berbeda beda..

setelah ketemu,

copi kode ini dibawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<H2>Related Post:</H2>

<div class='rbbox'>

<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>

<div id='albri'/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 50;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement(&#39;ul&#39;);

var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i &lt; maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == &#39;alternate&#39;) {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement(&#39;li&#39;);

var a = document.createElement(&#39;a&#39;);

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 &lt; json.feed.link.length; l++) {

if (json.feed.link[l].rel == &#39;alternate&#39;) {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);

var txt = document.createTextNode(label);

var h = document.createElement(&#39;b&#39;);

h.appendChild(txt);

var div1 = document.createElement(&#39;div&#39;);

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById(&#39;albri&#39;).appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;

+ label +

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

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 = &quot;<data:label.name/>&quot;;

var test = 0;

for (var i = 0; i &lt; labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

<script type='text/javascript'>RelPost();</script>

</div>

</b:if>

sekarang cari kode ]]></b:skin>

letakan kode ini diatasnya  :

/*-- modifikasi related posts oleh http://berryhs.com/--*/

.rbbox{border: 1px solid #D8D8D8;padding: 5px;

background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}

.rbbox:hover{background-color: #EFFBEF;}

save, semoga berhasil membuat related post menggunakan fungsi scroll,sukses semuanya ya..


update : untuk cara meletakkan kode related post ini sobat bisa lihat cara memasangnya di edit html sesuai dengan gambar yang saya kasih ini, yang saya blog itu adalah kode related post sampai kebawah, silahkan disamakan dengan kode yag saya berikan di postingan.

kira kira letak saja kodenya di bawah kode seperti ini : <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

contohnya dapat dilihat disini : 

You May Like :

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn