Cara Membuat Artikel Terkait

 

Artikel Terkait

Cara Membuat Artikel Terkait di dalam postingan sangat diperlukan untuk lebih meningkatkan traffic pada blog atau website kita. Artikel terkait atau dalam bahasa inggrisnya related post ini berfungsi untuk menyarankan pengunjung atau visitor agar membaca artikel lain di dalam blog.
Nah secara otomatis maka akan menambah page view di dalam blog kita. Semakin banyak pengunjung dan page viewnya suatu blog, maka akan semakin disukai oleh google. Dalam membuat artikel terkait ini tidaklah begitu sulit, karena kita hanya mengkopi kode html dan memasangnya ke template blog kita.

 Saya akan berbagi sedikit artikel tentang Cara Membuat Artikel Terkait. Baiklah langsung saja ya gan hehehe.

Cara Membuat Artikel Terkait

1. Login ke akun blog anda 

2. Klik Template lalu pilih Edit html

3. Cari kode  <data:post.body/>

Untuk memudahkan dalam mencari kode ini silahkan anda tekan tombol ctrl+f pada kotak html. Apabila menemukan kode tersebut lebih dari satu, maka pilihlah kode yang kedua dari atas.

4. Silahkan download kode berikut ini dan letakan di bawah kode <data:post.body/>
Untuk mendownloadnya silahkan anda Klik Disini. Kode tersebut sudah termasuk kode untuk langkah yang nomor 6. Karena blog ini saya buat tidak bisa untuk dicopy paste hehehe.

<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 = 5; 

var maxNumberOfLabels = 15; 

maxNumberOfPostsPerLabel = 40; 

maxNumberOfLabels = 5; 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. Kemudian anda cari lagi kode ]]></b:skin> 

Untuk memudahkan pencarian lakukan seperti pada langkah nomor 3 ya.

6. Lalu copy paste  kode yang tadi di download dan letakan tepat di atas 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;}

7. Lalu klik save template atau simpan template, namun sebelum mengklik save silahkan lihat previewnya dahulu kalau tidak sesuai silahkan jangan dissimpan, tetapi kalau sudah sesuai dengan yang diharapkan maka klik save template.

KETERANGAN

Artikel Terkait: anda bisa ganti dengan related post atau yang lain.

maxNumberOfPostsPerLabel = 40  menunjukan jumlah artikel  yang ingin anda tampilkan

maxNumberOfLabels = 5   menunjukan jumlah label  yang terkait yang anda ingin tampilkan

background-color: #F2F2F2  menunjukan warna background pada kotak artikel terkait dan anda bisa mengganti warna tersebut dengan mengganti kode warnanya.

background-color: #EFFBEF    menunjukan warna background pada saat kursor diarahkan ke kolom artikel terkait, ini juga bisa diganti warnanya sesui selera anda.

http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png menunjukan gambar atau simbol yang terletak di depan artikel terkait.

Cukup sekian postingan mengenai Cara Membuat Artikel Terkait, apabila ada yang salah mohon diberi masukan ya. semoga bermanfaat bagi kita semua.

ARTIKEL TERKAIT: