✔ Cara Menciptakan Related Post (Baca Juga) Dalam Tengah Posting Blog

Membuat related posts atau artikel terkait pada blog memang dianggap sebagai cara terbaik untuk menurunkan score bounce rates dari blog. Karena pengunjung dipancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca.

Oleh sebab itu, pada postingan kali ini aku akan membahas perihal cara menciptakan related posts secara otomatis menurut “tag” tapi yang berada di dalam postingan, bukan di selesai artikel. Biasanya diawali dengan kata “Baca Juga”.

Seperti ini contohnya.

Sebaiknya backup terlebih dahulu template kau untuk menghindari hal-hal yang tidak diinginkan sehingga kau tetap memilikinya data cadangan Kalau hingga anda Salah Meempatkan kode.

Salin Kode Dibawah Ini dan Letakkan di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type="text/j4vascript"> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script>   </b:if> 

Langkah selanjutnya..

Cari isyarat <data:post.body/>
Biasanya anda akan menemukan 2 atau 3 Kode tersebut, Pastekan Ke nomor 2 klo belum berubah coba ke nomor 3,
Hapus isyarat tersebut dan ganti dengan isyarat berikut ini..

<div expr:id='&quot;post1&quot; + data:post.id'/> <div class='post-terkait'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/j4vascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/j4vascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div> <script type='text/j4vascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/3); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>  

 Untuk mempercantik tampilan, sisipkan isyarat CSS berikut ini, dan letakkan di atas kode  ]]></b:skin>


 

/*Artikel Terkait Tengah Postingan rifanytop*/
.post-terkait{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.post-terkait h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD font-size: 17px;}
.post-terkait ul{padding:7px;list-style:none}
.post-terkait ul{font-family:fontawesome;content:&quot;\f105&quot;;padding-right:10px}
.post-terkait li{border-radius:5px;border-bottom:1px solid rgbaundefined227,227,227,0.33);line-height:1.7em}

Jika sudah, simpan template..
Dan Lihat Hasilnya Selamat Mencoba dan biar berhasil.

Sumber http://inirifany.blogspot.com

Berlangganan Informasi Terbaru: