Cara Membuat Artikel Terkait (Related Post) dibawah Postingan Blog

Cara Membuat Artikel Terkait dibawah Postingan di Blog, merupakan suatu cara yang harus kita terapkan pada blog yang kita punya jika dalam templete yang kita gunakan tidak ada related post / artikel terkait ini.

Fungsi dari memasang artikel terkait dalam setiap posting mempunyai pengaruh yang besar terhadap jumlah Pageview setiap pengunjung. Bisa dibayangkan jika satu orang pengunjung blog anda membuka 2-4 artikel anda maka trafiik pun akan meningkat dan ini semakin membuat website / blog anda lebih disukai oleh search engine seperti google.

Manfaat yang lain yaitu mempermudah pengunjung mencari artikel yang dibutuhkan, agar pengunjung menjadi lebih betah dan sering berkunjung pada blog kita.

Jika anda tertarik ingin meningkatkan Pageview diblognya, maka simak saja langkah dalam membuat artikel terkait dibawah ini karena sangat mudah dilakukan.

Cara membuat Related Post Artikel Terkait :

1. Login ke Akun Blog Anda.

2. Klik Templete,  lalu pilih Edit HTML

3. Kemudian anda cari kode <data:post.body/>, Gunaka CTRL+F agar pencarian lebih Mudah dan jika menemukan kode tersebut lebih dari satu, 

4. Copy-paste kode berikut ini di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;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 = 15;
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>

Keterangan :
Kode yang berwarna Merah ganti sesuai keinginan misal: Related Post,Artikel Terkait
Kode yang berwarna Hijau adalah jumlah posting atau artikel terkait yang ingin Anda tampilkan
Kode yang berwarna Biru adalah  jumlah label terkait yang ingin ditampilkan

5. Selanjutnya cari kode ]]></b:skin>

6. Copy-paste semua code berikut ini tepat diatasnya kode ]]></b:skin>

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

Keterangan : 
Kode yang berwarna Coklat adalah warna background kotak artikel terkaitsesuai selera.
Kode yang berwarna Ungu adalah warna background saat kursor menyorot kolom tersebut
Kode yang berwarna Kuning adalah icon didepan link
Untuk melihat kode warnanya Klik Disini!!!

7. Klik Save/Simpan Templete

Dan lihat hasilnya diblog anda, mudah bukan! Baca juga Cara Membuat Artikel Terkait dibawah Postingan Blog bagian kedua,
Demikianlah postingan Cara Membuat Artikel Terkait (Related Post) dibawah Postingan Blog, semoga bermanfaat, bila ada yang kurang jelas silahkan berkomentar.

Artikel Terkait: