Cara Membuat Artikel Terkait di Blogspot

AB | Tutorial | Cara Membuat Artikel Terkait di Blogspot - Walau sebelumnya AB sudah memposting Cara Membuat Related Post pada Blog dengan linkwithin, namun kali ini AB akan membahas Cara Membuat Artikel Terkait di Blogspot tanpa thumbail. Anda tidak perlu susah-susah untuk berhubungan dengan linkwithin, tapi bisa saja anda memakai dua-duanya, seperti AB pakai dua-duanya... heheheh..

Kita ketahui bahwa Artikel Terkait atau Related Post berfungsi untuk membantu para pengunjung agar mengetahui apa saja artikel yang berhubungan dengan keyword atau artikel yang dia baca. Sementara manfaat bagi pemilik blog adalah akan menambah Page view apabila stiap artikel pada related post tersebut di kunjungi oleh pengunjung. Lihat gambar dibawah ini Contoh Artikel Terkait di Blogspot atau anda bisa lihat langsung di bagian bawah setiap postingan blog ini.

Contoh

Cara Membuat Artikel Terkait di Blogspot
1. Login ke blog anda > Design > HTML > centang Expand widget templates
2. Cari kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F agar lebih mudah
3. Biasanya ada 2 kode tersebut, anda cukup fokuskan pada kode yang pertama saja.
4. Jika sudah ketemu, Copy kode dibawah ini.

Klik Spoiler Berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 100;
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>

5. Lalu paste dibawah kode <div class='post-footer-line post-footer-line-1'>
6. Simpan template. Lihat hasilnya

Catatan:

• <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda juga bisa  menghapusnya.
• <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
• maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

Itulah Cara Membuat Artikel Terkait di Blogspot. Kalau anda masih bingung silahkan untuk bertanya. Kotak Komentar menanti pertanyaan anda. Okay sudah, semoga catatan ringan mengenai Cara Membuat Artikel Terkait di Blogspot bisa bermanfaat. Salam Blogger.

Referensi: www.bamz.us