Cara Membuat Related Post / Artikel Terkait di bawah Postingan Blog

Cara Membuat Related Post / Artikel Terkait di bawah Postingan Blog. Salah satu cara yang paling ampuh  untuk menampilkan artikel yang dicari oleh pengunjung blog yaitu dengan Membuat Artikel Terkait atau Related Post di bawah artikel blog.

Dengan Memasang Related Post atau artikel Terkait di bawah postingan blog, pengunjung akan langsung melihat daftar isi blog saat selesai membaca artikel sesuai dengan Label artikel artikel yang sedang ia baca. Bagi seorang blogger blogspot, ada 2 macamrelated post yang paling banyak digunakan. Yang pertama adalah related post biasa, dan yang kedua adalah Related Post dengan Gambar Thumbnail. Untuk tutorial kali ini. Saya hanya akan membahas Related Post atau Artikel Terkait biasa karena menurut saya Related Post biasa ini lebih baik dari Related Post Thumbnail dilihat dari jumlah Judul artikel yang ditampilkannnya. Tapi, karena Related Post Thumbnail lebih menarik, akhirnya saya menggunakan Related Post dengan Gambar / Thumbnail.

Jika anda ingin memasang Related Post atau Artikel Terkait di bawah postingan blog anda berikut saya share caranya. Tapi sebelumnya, supaya related post bekerja sesuai dengan yang diharapkan, berikan Label pada setiap artikel anda. Baik artikel yang baru mau di posting, maupun artikel yang sudah di posting tapi tidak berLABEL.

Berikut cara membuat Related Post atau Artikel Terkait Biasa dengan Fungsi Scroll :

• Seperti biasa, masuk dulu ke Akun blog anda.

• Pada halaman Dasbor, cari kata "RANCANGAN" lalu klik

• Pada halaman Rancangan, klik tombol "EDIT HTML"

• Sebaiknya simpan dulu template anda dengan mengklik tombol "DOWNLOAD TEMPLATE LENGKAP".

• Beri tanda CHECKLIST pada kotak kecil yg ada di depan tulisan Expand Template Wdget yang terletak diatas kotak kode HTML template blog anda

• Cari kode ]]></b:skin> (Gunakan tombol F3 pada keyboard untuk melakukan pencarian cepat).

Copy kode dibawah ini, lalu paste DI ATAS kode ]]><b/skin> berikut kodenya :

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

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

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

• Selanjutnya, cari kode ini  <data:post.body/></b:if> . simpanlah code di bawah ini di tengah-tengah kode tadi. contoh: <data:post.body/>kode diletakan disini</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</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 = 10;
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>

• Lakukan pratinjau untuk melihat hasilnya. ( jika anda tidak menggunkan Read More Otomatis )

• Jika sudah sesuai, silahkan klik tulisan "SIMPAN TEMPALATE" untuk menyimpan hasil kerja anda.

Jika belum sesuai dengan yang diharapkan dan ingin mengubah warna / tampilan kotak Related Post, silahkan simak petunjuk berikut ini :

Anda bisa mengganti warna dan tebal garis pinggir kotak Related Post anda dengan mengganti angka dan kode warna yang berwarna merah pada kode pertama baris pertama.
Untuk melihat kode warna, silahkan sklik tulisan "KODE WARNA" yang ada diatas / header blog ini.

Jika ingin mengganti warna background kotaknya, ganti kode warna ( #F2F2F2 ) pada kode pertama baris kedua.

Kode pertama baris ketiga ( .rbbox:hover ) adalah warna background kotak jika mouse menyentuh kotak Related Post. Silahkan Ganti kode Warnanya sesuai dengan warna yang anda inginkan.


Anda Juga bisa mengganti Tulisan "Artikel Lainnya" dengan kata yang anda inginkan. Silahkan Ganti Tulisan Artikel Lainnya pada kode kedua ( kode yang ada didalam Text Area ).

Oke sob, selamat melakukan Copy Paste....
Happy Blogging...