Cara Membuat Related Post/Artikel Terkait Di Dalam Postingan Blog

Kali ini mimin akan membagikan tips blogger mengenai cara memasang artikel terkait di dalam postingan blog. Untuk lebih detail nantinya artikel terkait ini berada di tengah postingan blog anda. Jika sebelumnya anda sudah pernah menggunakan related post di bawah postingan, mungkin artikel ini akan menjadi solusi yang sempurna untuk mencari cara membuat artikel terkait berada di tengah postingan.

Widget related post ini berfungsi sebagai artikel terkait, artikel yang terkait yang dimaksudkan yaitu artikel yang memang ketika itu topik pembicaraannya mengenai topik yang sama namun beda solusi. Selain itu widget ini juga memiliki kegunaan untuk pengunjung yang memungkinkan untuk menjelejahi semua artikel terkait pada postingan blog anda. Tentunya juga pageviews anda akan bertambah bila menggunakan widget ini.

Cara Membuat Widget Related Post / Artikel Terkait di Tengah atau di Dalam Postingan

Sebelum melaksanakan dan menerapkan tutorial ini, adakalanya anda harus mengunduh atau memback-up template anda biar tidak terjadi suatu hal yang tidak di inginkan.

Langkah Pertama

Tambahkan arahan di bawah ini sempurna di atas arahan </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type="text/javascript"> //<![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 Kedua

Cari arahan <data:post.body/> dengan menggunakan tombol CTRL + F. Setelah anda temukan ganti arahan tersebut dengan arahan di bawah 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/javascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/javascript'> 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/javascript'> 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>

Baca juga artikel mengenai :

1. Script Anti Adblock dan UC Browser.
2. Cara Membuat Blog AGC Terlengkap.
3. Cara Mencari HPK (High Paying Keywords).
4. Script untuk memperbanyak pengunjung blog atau visitor.

Langkah Ketiga

Tambahkan Kode CSS di bawah ini sempurna di atas arahan ]]</b:skin> atau </syle>

/* CSS Related Post */ .post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc} .post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important} .post-terkait ul {margin:0;padding:0} .post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important} .post-terkait ul li:last-child{border:none !important} .post-terkait a {color:#1b71bc;font-size:13px !important} .post-terkait a:hover {text-decoration:underline}

Langkah Keempat

Simpan template

Demikianlah cara membuat related post di dalam postingan. Semoga bermanfaat

Tweet