Cara Membuat Related Post

Waktu itu ada sobat blogger yang bertanya kepada saya tentang, bagaimana cara membuat Baca Artikel yang lainnya, atau kalau bahasa keren nya related post. Kalau belum sobat blogger belum tahu apa itu related post, coba liat kebawah, cari tulisan baca juga artikel yang lainnya. Ketemu kan?? Hehehe

Waktu itu kalau nggak salah, saya rekomendasikan untuk mencari nya di google, maklum saya juga lupa-lupa ingat sob waktu itu. Huhu


Tapi pada kesempatan kali ini, saya akan mencoba membahas nya dengan detail dan sejelas mungkin untuk sobat blogger semuanya. Loh?? tapi tadi katanya lupa??
Saya emang lupa sob, tapi saya secara nggak sengaja nemuin scipt nya tersimpan di kompi saya dengan balutan sebuah notepad yang sedikit usang, Hehehe

Oiya,
Tips ini saya dapatkan dari blog nya http://www.ateonsoft.com/
Makasih yah sob, berkat tips dari anda, blog saya jadi sediit rapi. Hhehehe

Oke, kita langsung aja yah,
Tapi sebelumnya saya mau bertanya dahulu, Apa manfaat dari menggunakan related post?? Kalau menurut sumber yang saya dapatkan sih, katanya dapat meningkatkan pageview. (Setuju banget), tapi agar fungsi dari related post ini semakin maksimal sebaiknya sobat blogger memperhatikan dalam hal pemasangan nya, berikut kira-kira tips nya.

• Rapi, Jangan asal sob naruhnya.


• Tampilannya menarik perhatian, anda beri warna yang mencolok juga menarik perhatian, tapi sudahkah menyatu dengan keseluruhan warna blog?


• Ada efek tertentu saat bagian tersebut disorot mouse, ini berkaitan juga dengan point dua yaitu "CAPER" alias cari perhatian.


• Penempatan yang benar, karena saya pernah mencoba dulu menempatkan related post ini di sidebar dan ternyata kurang efektif karena menjadi kurang diperhatikan. Atau penempatan yang terlalu kebawah juga kurang efektif, karena terlalu jauh dari artikel.

Sudah mengerti?? kalau begitu, mari kita lajutkan. Hehe
Pertama cari kode dibawah ini pada template anda, ingat sebelumnya centang "Expand Widget Templates".

<p><data:post.body/></p>

kalau sudah ketemu silahkan copy kode berikut ini, kemudian paste dibawah kode tadi.
<br /><b:if cond="'data:blog.pageType"> <br /><h2>Artikel Terkait:</h2><br /><div class="'rbbox'"> <br /><div style="'margin:0;"><br /><div id="'albri'/"><br /><script type="'text/javascript'"><br />var homeUrl3 = "<data:blog.homepageurl/>";<br />var maxNumberOfPostsPerLabel = 4;<br />var maxNumberOfLabels = 10;<br />maxNumberOfPostsPerLabel = 100;<br />maxNumberOfLabels = 3;<br />function listEntries10(json) {<br />var ul = document.createElement('ul');<br />var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? <br />json.feed.entry.length : maxNumberOfPostsPerLabel;<br />for (var i = 0; i < maxPosts; i++) {<br />var entry = json.feed.entry[i];<br />var alturl;<br />for (var k = 0; k < entry.link.length; k++) {<br />if (entry.link[k].rel == 'alternate') {<br />alturl = entry.link[k].href;<br />break;<br />}<br />}<br />var li = document.createElement('li');<br />var a = document.createElement('a');<br />a.href = alturl;<br />if(a.href!=location.href) {<br />var txt = document.createTextNode(entry.title.$t); <br />a.appendChild(txt);<br />li.appendChild(a);<br />ul.appendChild(li); <br />}<br />}<br />for (var l = 0; l < json.feed.link.length; l++) {<br />if (json.feed.link[l].rel == 'alternate') {<br />var raw = json.feed.link[l].href;<br />var label = raw.substr(homeUrl3.length+13);<br />var k;<br />for (k=0; k<20; k++) label = label.replace("%20", " ");<br />var txt = document.createTextNode(label);<br />var h = document.createElement('b');<br />h.appendChild(txt);<br />var div1 = document.createElement('div');<br />div1.appendChild(h);<br />div1.appendChild(ul);<br />document.getElementById('albri').appendChild(div1);<br />}<br />}<br />}<br />function search10(query, label) {<br />var script = document.createElement('script');<br />script.setAttribute('src', query + 'feeds/posts/default/-/'<br />+ label +<br />'?alt=json-in-script&callback=listEntries10');<br />script.setAttribute('type', 'text/javascript');<br />document.documentElement.firstChild.appendChild(script);<br />}<br />var labelArray = new Array();<br />var numLabel = 0;<br /><b:loop values="'data:posts'" var="'post'"><br /><b:loop values="'data:post.labels'" var="'label'"><br />textLabel = "<data:label.name/>";<br />var test = 0;<br />for (var i = 0; i < labelArray.length; i++)<br />if (labelArray[i] == textLabel) test = 1;<br />if (test == 0) { <br />labelArray.push(textLabel);<br />var maxLabels = (labelArray.length <= maxNumberOfLabels) ? <br />labelArray.length : maxNumberOfLabels;<br />if (numLabel < maxLabels) {<br />search10(homeUrl3, textLabel);<br />numLabel++;<br />}<br />}<br /></b:loop><br /></b:loop><br /></script><br /></div><br /><script type="text/javascript">RelPost();</script><br /></div><br /></b:if><br />

Kalau sudah silahkan dicari lagi kode dibawah ini:

]]></b:skin>

Kalau sudah ketemu copy kode dibawah ini kemudian paste DIATAS kode ]]></b:skin> tadi.

<br />/*----------------------------- <br />kode related post optimal <br />visit http://www.remo-xp.com <br />------------------------------*/<br />.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;<br />background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}<br />.rbbox:hover{background-color: rgb(255, 255, 255);}<br />
Setelah itu copy kode dibawah ini kemudian paste DIBAWAH kode ]]></b:skin> tadi:

<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>

Kalau sudah silahkan disimpan templatenya. Lihat hasilnya dengan membuka salah satu artikal anda.
Bagaimana??

Selamat mencoba.