 |
| Cara Membuat Baca Juga pada Artikel Blogger secara Otomatis |
Pada artikel kali ini, kita akan mempelajari cara membuat Baca Juga pada artikel Blogger. Bagi kamu yang ingin memahami bagaimana caranya, ikuti langkah-langkah berikut ini dengan seksama, ya!
Dalam era digital saat ini, menjadi seorang blogger yang sukses adalah tujuan banyak orang. Blogging tidak hanya menjadi platform untuk berbagi cerita dan pengetahuan, tetapi juga dapat menjadi sumber penghasilan yang menjanjikan.
Jika kamu tertarik untuk memulai perjalanan sebagai blogger, maka kamu telah berada di tempat yang tepat!
Dalam artikel ini akan memberikan panduan lengkap tentang cara membuat baca juga artikel Blogger yang dapat meningkatkan pengalaman pengguna dan menarik lebih banyak pengunjung ke blog.
Mengapa Baca Juga Artikel Penting?
Sebelum kita membahas cara membuat baca juga artikel, penting bagi kita untuk memahami mengapa fitur ini penting untuk dimiliki di blog. Baca juga artikel adalah sejenis rekomendasi artikel yang muncul di antara konten utama yang sedang dibaca oleh pengunjung.
Tujuan dari baca juga artikel ini adalah untuk mendorong pengunjung agar tetap berada di blog milikmu dan membaca lebih banyak konten yang relevan dengan minat mereka. Dengan begitu, penulis blog dapat meningkatkan jumlah pengunjung dan meningkatkan engagement pengguna di blog.
Langkah-langkah Membuat Baca Juga di Artikel Blogger
Berikut ini adalah langkah-langkah yang perlu Anda ikuti untuk membuat baca juga di artikel Blogger:
1. Buka Akun Blogger
Langkah pertama adalah kamu perlu login ke akun Blogger yang ingin kamu tambahkan Baca Juga pada setiap artikel secara otomatis.
2. Edit Kode HTML
Setelah masuk ke akun Blogger kamu, pergi ke menu Tema > Edit HTML. Masukkan kode berikut ini tepat 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>
Setelah itu, copy dan paste kode script di bawah ini tepat sebelum kode ]]></b:skin>
/* 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)}}
Selanjutnya, cari kode <data:post.body/> yang terdapat pada Edit HTML template yang sedang kamu gunakan saat ini, lalu ganti script tersebut dengan copy dan paste script berikut.
<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>
5. Simpan dan Refresh Blogger
Setelah kamu menyelesaikan penyesuaian pengaturan baca juga artikel seperti di tahapan sebelumnya, simpan perubahan yang telah kamu lakukan pada template Blogger.
Kemudian, refresh halaman blog untuk melihat hasilnya. Kini, kamu telah berhasil menambahkan fitur baca juga artikel di blogger!
Dalam artikel ini telah memberikan panduan lengkap tentang cara membuat baca juga di artikel Blogger secara otomatis.
Ketahui juga cara membuat custom subdomain di Blogger dan cara setting Robots.txt di Blogger yang benar.
Fitur ini dapat meningkatkan engagement pengguna dan mendorong pengunjung untuk membaca lebih banyak konten yang relevan di blog kamu. Selamat mencoba dan terima kasih sudah menyimak artikel ini sampai tuntas.
