Menyisipkan Related Post Ditengah Artikel Posting Blog

Membuat related post ditengah artikel yakni salah satu upaya untuk menciptakan pengunjung blog betah berlama usang mengunjungi blog kita. Tentu saja upaya ini dilakukan sehabis kita dapat menciptakan konten berkualitas.

Related post yang akan dibahas dalam postingan kali ini yakni releted post sederhana sekali tetapi lezat dilihat, cocok untuk template blog non AMP yang mengusung tema simpel, clear and clean dan related post ibarat ini juga termasuk fast loading. pola related post yang saya bahas disini yaitu ibarat gambar dibawah ini:

Cara Membuat Related Post Simpel Ditengah Postingan Artikel Blog

• pertama buka blog >> Tema >> Edit HTML >> cari isyarat </head> gunakan ctrl+F untuk mempermudah pencarian
• Copy isyarat dibawah ini dan paste diatas isyarat </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if>

• Cari isyarat ]]></b:skin>
• Tambahkan isyarat dibawah ini sempurna diatas isyarat ]]></b:skin>

 /* Related Post Ditengah Postingan*/ .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;} .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s} .related-simplify ul li:nth-child(odd){background:#fefefe} .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;} .related-simplify a:hover{color:#0383d9;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}} 



• lalu langkah terakhir yakni cari isyarat <data:post.body/>
• Ganti isyarat <data:post.body/> dengan isyarat dibawah ini: (Perhatian, kita akan menemukan beberapa kode <data:post.body/> kalo tidak salah ada 3 s,d 4 isyarat didalam template dan setiap template itu berbeda-beda jadi coba saja satu persatu mengganti kode <data:post.body/> dengan isyarat dibawah ini hingga berhasil.

<div expr:id='&quot;post1&quot; + data:post.id'/> <div class='related-simplify'> <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'><p><data:post.body/></p></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/2); 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> 

Begitulah cara menciptakan atau menyisipkan related post didalam postingan blog. kode-kode tersebut diatas bersumber dari www.arlinadzgn.com silahkan kunjungi blog nya untuk mendapat lebih banyak variasi related post ditengah postingan.