Cara Membuat Related Post di Blogger

Share

topgans.blogspot.com - Waktu itu ada sobat blogger yang bertanya kepada saya tentang, bagaimana cara membuat baca artikel yang lainnya, atau istilahnya yaitu related post. Kalau belum sobat blogger belum tahu apa itu related post, coba liat kebawah suatu artikel/postingan , cari tulisan baca juga artikel yang lainnya. Nah itu dia yang namanya Related Post, ayo di simak..hehe

Pemasangan related post ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.

Tujuan pemasangan related post ini agar pengunjung lebih mudah untuk mencari artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu report untuk mencari satu persatu artikel dalam menu label atau kategori.

Bagi yang masih bingung, silahkan lihat contohnya dibawah ini.

Mungkin sobat sekalian ada yg sudah tau cara membuat Related Post ini ,hehe. Saya hanya mencoba membagi ilmu kepada sobat yg belum bisa hoho , tapi saya sendiri disini masih tergolong newbie , jadi kakak-kakak yg sudah pro mohon di kritik jika ada kesalahan , hehe

Berikut juga tips memasang related post :

• Rapi, Jangan asal sob menempatkannya.
• Tampilannya menarik perhatian, anda beri warna yang mencolok juga menarik perhatian, tapi pertimbangkan juga dengan keseimbangan dari keseluruhan warna blog sobat.
• Ada efek tertentu saat bagian tersebut disorot mouse, ini berkaitan juga dengan point dua yaitu cari perhatian.

Gimana ? Sudah cukup paham kawan ? Nah kita lanjut aja ..
Sekarang masuk ke Design-Edit HTML, ingat sebelumnya centang "Expand Widget Templates".< Pertama cari kode dibawah ini pada template anda <p><data:post.body/></p>

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 ]]></b:skin>

Kemudian paste DIATAS kode tadi.

<br />/*----------------------------- <br />kode related post optimal <br />visit http://www.topgans.blogspot.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'/>

Sobat bisa merubah 'Artikel Terkait' dengan kalimat yg sobat mau , jumlah post yg akan di tampilkan pada related post juga bisa sobat rubah jd happy editing , hehe :)

Related Posts by Categories