Cara Memasang Artikel Terkait di Tengah Postingan Blog

Baca Juga Artikel Berikut Ini

Selamat pagi, pada kesempatan yang baik ini admin akan berbagi tutorial cara memasang artikel terkait di tengah postingan. Mengapa harus memasang fitur ini? Apa untungnya bagi blog saya? Tentu sangat menguntungkan.

Artikel terkait atau yang disebut juga dengan related post ini dibuat dengan tujuan agar pembaca tidak hanya membaca hanya satu postingan anda, tetapi juga membaca postingan yang lain yang masih saling berkaitan. Hal ini tentu saja berdampak baik yaitu bounce rate menjadi turun.

Sebenarnya widget yang satu ini sudah disediakan dibawah tombol share yang ada di bawah konten blog anda. Konsepnya sama, yaitu menyajikan daftar artikel yang masih berkaitan dengan artikel yang sedang dibuat. Keterkaitan ini didasarkan berdasarkan label postingan tersebut.

Dengan diletakkan di bagian tengah, akan menarik perhatian pengunjung secara langsung sehingga lebih tertarik untuk mengkliknya. Fitur ini digambarkan seperti di bawah ini :

Bagaimana cara memasangnya? Ikuti cara-caranya sebagai berikut :

Cara Memasang Artikel Terkait di Tengah Postingan

Back up dulu tema anda sebelum memulai tutorial ini !

• Pertama, masuk terlebih dahulu ke akun blogger anda
• Pilih tema, lalu klik edit HTML
• Cari kode <data:post.body/> (pilih yang kedua) dan ganti dengan kode di bawah ini :

<div expr:id='&quot;post1&quot; + data:post.id'/>

<div class='artikel-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 Artikel Berikut Ini</h4>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script></div>

<div class='artbody' expr:id='&quot;post2&quot; + data:post.id' 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>

• Selanjutnya buat style CSS agar tampilan menjadi lebih menarik dengan menaruh kode ini diatas kode </style>

/*Artikel Terkait Ditengah postingan*/

.artikel-terkait {position:relative;background:#fff;padding:0;margin:12px 16px 0 0;float:center;width:325px;border:1px solid #32BEFF}

.artikel-terkait h4{background:#32BEFF !important;padding:4px 0 !important;margin:0;text-align:center !important;font-size:14px !important;font-weight:400;text-transform:uppercase;color:#fff !important}

.artikel-terkait ul {margin:0;padding:0}

.artikel-terkait ul li {list-style:none !important;padding:6px 0;margin:0 6px;border-bottom:1px dotted #482AEC;line-height:1.4em !important;text-align:left !important}

.artikel-terkait ul li:last-child{border:none !important}

.artikel-terkait a {color:#32BEFF;font-size:14px !important}

.artikel-terkait a:hover {text-decoration:bold}

• Berikutnya tambahkan kode javascript berikut ini tepat diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

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

• Terakhir, Klik Simpan dan lihatlah hasilnya.

Itulah hal yang bisa anda lakukan jika ingin memasang artikel terkait atau related post ditengah postingan blog. Jika ada hal yang kurang dipahami, bisa ditanyakan. Semoga sedikit petunjuk ini bermanfaat bagi semua.