Cara Mudah Memasang Related Post/Artikel Terkait di Dalam Postingan Blog

Daftar Isi [Tampilkan]

Pada kesempatan posting kali ini adalah mengenai tips blogger membuat widget related post atau artikel terkait di dalam/tengah postingan secara otomatis. Jika anda sudah jenuh dengan tampilan related di bawah postingan, mungkin artikel tentang related post di tengah postingan ini akan menjadi solusi buat anda.

Widget related post ini memungkinkan pengunjung untuk menjelajahi artikel lain di blog tertentu. Dengan demikian, page views di blog pun akan bertambah. Apalagi related post ini berada ditengah artikel, ini memungkinkan para pengunjung dapat melihat langsung artikel lain dalam postingan.

Sebenarnya widget related post di tengah postingan ini juga fungsinya sama dengan related post yang biasanya berada di bawah postingan, yaitu diambil dari label tertentu yang telah ditentukan pada artikel-artikel tertentu. Simak tutorialnya berikut ini.

Cara membuat widget artikel terkait di tengah atau di dalam postingan

Sebaiknya silakan kamu backup HTML template dulu untuk mencegah terjadinya error dalam penerapan cara ini nanti sehingga bisa diterapkan kembali template yang lama. baiklah berikut adalah Cara Membuat Related Post/Artikel Terkait di Dalam Postingan

# Langkah 1
Letakkan kode di bawah ini tepat di atas kode </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 2
Cari kode <data:post.body/> (yang kedua), atau bagi pengguna template dari saya cari kode <div class='artbody' itemprop='articleBody description'><data:post.body/></div>

Replace kode tersebut dengan kode 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/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>

# Langkah 3
Untuk memperindah tampilan widget Related Post tersebut, silahkan copy kode CSS berikut ini dan letakkan di atas kode </style> atau ]]></b:skin>

/* Related Post di dalam postingan*/
.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 4
Simpan template.

Demikian tutorial tentang cara membuat related post di dalam postingan. Semoga bermanfaat dan selamat mencoba di blog masing-masing...

thanks to : https://www.bungfrangki.com/

Bagikan Artikel ini