Cara Membuat Baca Juga Di Dalam Postingan Blog

Cara Membuat Baca Juga Di Dalam Postingan Blog – Salah satu upaya untuk menayangkan postingan secara otomatis di dalam blog adalah dengan membuat related post.

Related post atau yang sering disebut dengan baca juga biasanya menampilkan beberapa judul postingan yang relevan yang umumnya dipasang di tengah atau di bawah postingan.

Dengan adanya baca juga, akan memudahkan pengunjung untuk menemukan postingan lainnnya di dalam. Berikut akan dijelaskan bagaimana langkah-langkah membuat baca juga di dalam postingan blog secara otomatis.

Cara Membuat Baca Juga Di Dalam Postingan Blog

Sebenarnya, untuk membuat baca juga dapat dilakukan dengan cara menual. Yaitu dengan cara memblok teks, kemudian diberi link dofollow agar dapat diklik. Contonya adalah sebagai berikut:

Lalu bagaimana jika sudah banyak postingan yang diterbitkan dan ingin membuatnya secara otomatis? Nah, untuk membuat baca juga secara otomatis, langkah-langkahnya adalah sebagai berikut:

1. Langkah pertama, silahkan masuk ke dashboard blogger, kemudian pilih Template, lalu klik Edit HTML. Kemudian letakkan kode dibawah ini sebelum kode </head>.

<b:if cond=’data:blog.pageType == "item"’> <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>

2. Langkah kedua adalah memasang CSS dibawah ini sebelum kode ]]></b:skin> atau </style>.

/* Related Post Style 1 */
.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)}}

3. Langkah ketiga adalah mencari kode <data:post.body/>, lalu ganti dengan kode di bawah ini.

<div expr:id=’"post1" + 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 == "item"’> <script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"’ type=’text/javascript’/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id=’"post2" + data:post.id’><p><data:post.body/></p></div> <script type=’text/javascript’> var obj0=document.getElementById("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

4. Langkah terakhir, silahkan klik Simpan Template.

Demikianlah informasi mengenai membuat related post atau baca juga di dalam postingan blog secara otomatis. Silahkan share jika bermanfaat.

Cara Membuat Baca Juga Di Dalam Postingan Blog

Artikel Terkait