Cara Membuat Related Post di Tengah Postingan

Di Tutorial 34 views

Cara Membuat Related Post di Tengah Postingan, panduanblog.online – Haloo. Kali ini panduan blog akan share bagaimana cara membuat artikel terkait atau retaled post di tengah postingan. Caranya cukup mudah, kalian hanya perlu menambahkan kode javascript dan juga css. Untuk live demonya, kalian bisa melihatnya disini

Cara Membuat Related Post di Tengah Postingan

Memasang artikel terkait di tengah postingan mempunyai banyak manfaat. Hal ini di karenakan dapat membuat pembaca penasaran dan juga semakin betah untuk membaca artikel-artikel yang telah kita buat. Nah buat kalian yang ingin memasangnya di blog kalian, bisa melihat tutorialnya di bawah ini.

 

Cara Membuat Related Post di Tengah Postingan

Langkah pertama yang harus kalian lakukan adalah menambahkan sebuah javascript di antara <head> dan juga </head>. Silahkan kalian copy javascript di bawah ini, lalu taruh di atas </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>

 

Kemudian cari <data:post.body/>. Biasanya sebuah template memiliki lebih dari satu kode <data:post.body/>. Cari kode <data:post.body/> yang kedua lalu ganti dengan code script 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>

 

Terakhir, tambahkan kode css di bawah ini:

 

.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}

Selesai.

 

Di atas adalah cara memasang artikel terkait di tengah postingan. Bisa kalian kombinasikan dengan iklan di tengah postingan juga.

 

Tips dan Trik Daftar Adsense Agar Diterima
Tips dan Trik Daftar Adsense Agar Diterima
Tips dan Trik Daftar Adsense Agar Diterima
Cara Setting Auto HTTPS di .htaccess
Cara Setting Auto HTTPS di .htaccess
Cara Setting Auto HTTPS di .htaccess –
Cara Memindahkan Iklan Anchor Kebawah
Cara Memindahkan Iklan Anchor Kebawah
Cara Memindahkan Iklan Anchor Kebawah – Google
Cara Install Jannah WordPress Themes
Cara Install Jannah WordPress Themes
Cara Install Jannah WordPress Themes – Pada
Baca Juga×

Top