Cara Membuat Baca Juga di Tengah Postingan

Assalamu'alaikum wr.wb - Memasang related post di tengah artikel dapat membantu SEO On Page dalam blog anda. Cara ini cukup banyak dilakukan oleh para blogger untuk menurunkan 'Bounce Rate' dan menawarkan artikel yang memiliki bahasan serupa kepada pengunjung.


Memasang baca juga ditengah postingan memberikan kesan bahwasanya blog anda memiliki konten yang unggul dengan topik dan tujuan pengguna, lalu bagaimana cara memasang baca juga ditengah postingan ?

Cara Memasang Artikel Terkait Di Tengah Postingan


Pertama silahkan anda buka dashboard blogger -> Tema -> Edit HTML dan letakkan kode dibawah ini tepat sebelum </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>

Kemudian tambahkan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>

/* Related Post Edited Fellcia */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify 

h4{background:#f24a4a;background:linear-gradient(to left,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 5s ease infinite;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #E6E6FA}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#F0FFF0;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:#F0FFFF}
.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)}}

Selanjutnya ganti kode <data:post.body/> dengan kode dibawah ini

Setiap template memiliki jumlah kode <data:post.body/> yang berbeda, silahkan coba satu persatu hingga artikel terkait tampil di dalam postingan

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

Simpan template, selesai.

Nah itulah cara membuat artikel terkait secara otomatis ditengah postingan. Kode saya dapat dari arlina dan sudah didesain sesuai gaya Fellcia. Perlu diketaui bahwa ini sudah responsive menyesuaikan template yang anda pakai. Akhir kata wassalamu'alaikum wr.wb


0 Comments

Posting Komentar