Cara Membuat Baca Juga Dalam Postingan Blogspot Blogger – Apa kabar sobat Pohon ilmu apakah blog sobat terkena dampak dari Google Update Alogaritma Saat ini ?
Untuk teman-teman yang memakai Platform seperti WordPress sangatlah tidak khawatir,tinggal pasang plugin pelajari sebentar,nanti cepat balik seonya.
Namun kali ini saya akan bahas untuk para blogger yang menggunakan platform Blogspot.com atau bawaan dari Google.
Jarang sekali menemui themeuntuk blogspot yang menyediakan fitur “Baca Juga Artikel Berikut”
Tanpa berlama-lama berikut Scriptnya
Catatan : Harap Backup Theme terlebih dahulu,sebelum melakukan ini.
1. Langkah pertama silahkan masuk ke Blogger >> Theme>> Edit HTML. Letakkan kode dibawah ini sebelum Kode </head>   atau </head><!–<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 berikutnya yaitu memasang script/code CSS. 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. Setelah itu Cari kode <data:post.body/> dan hapus,lalu ganti dengan Script 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 lalu simpan Theme
Catatan :Â Biasanya dalam Theme terdapat lebih dari 3 kode <data:post.body/> jadi harap bersabar dan teliti.
Semoga berhasil,selamat mencoba.
Kesimpulan:
Membuat fitur “Baca Juga” dalam postingan Blogspot Blogger adalah cara efektif untuk meningkatkan pengalaman pengguna dan menjaga pengunjung tetap berada di blog Anda lebih lama.
Fitur ini memungkinkan pengunjung untuk dengan mudah menemukan artikel terkait yang relevan dengan topik yang sedang mereka baca.
Proses implementasinya dapat dilakukan dengan memanfaatkan widget atau menambahkan kode HTML/CSS secara manual ke dalam template Blogger Anda.
Dengan menggunakan kode yang tepat, Anda bisa menampilkan daftar artikel terkait di bagian bawah postingan secara otomatis, yang akan meningkatkan keterlibatan dan waktu baca pengunjung.
Secara keseluruhan, menambahkan “Baca Juga” dapat membantu meningkatkan SEO dan menjaga pengunjung tetap terhubung dengan konten yang lebih banyak, memberikan manfaat baik dari sisi pengguna maupun mesin pencari.
FAQ: Cara Membuat “Baca Juga” Dalam Postingan Blogspot Blogger
1. Apa itu fitur “Baca Juga” di Blogspot?
Fitur “Baca Juga” adalah sebuah elemen di bawah artikel yang menampilkan beberapa postingan terkait atau artikel lainnya yang relevan dengan topik yang sedang dibaca oleh pengunjung. Tujuannya adalah untuk meningkatkan keterlibatan pengunjung dan memberikan mereka lebih banyak pilihan konten yang menarik.
2. Bagaimana cara membuat fitur “Baca Juga” di Blogspot?
Untuk membuat fitur “Baca Juga”, kamu bisa menggunakan dua metode:
- Menggunakan Widget: Banyak template Blogspot sudah menyediakan widget bawaan untuk menampilkan postingan terkait. Kamu hanya perlu mengaktifkan fitur ini melalui pengaturan Tata Letak (Layout).
- Menambahkan Kode HTML/CSS: Jika kamu ingin hasil yang lebih kustomisasi, kamu bisa menambahkan kode HTML dan CSS ke dalam template blog, menggunakan tag
<b:if>untuk menampilkan artikel terkait berdasarkan kategori atau label.
3. Apakah fitur “Baca Juga” otomatis menampilkan artikel terkait?
Tergantung metode yang digunakan. Jika menggunakan widget bawaan Blogspot, umumnya akan menampilkan artikel terkait secara otomatis berdasarkan label atau kategori yang sudah kamu tentukan. Namun, jika kamu menambahkan kode manual, kamu bisa menentukan artikel mana yang ingin ditampilkan dengan cara lebih fleksibel.
4. Bisakah saya menambahkan gambar di bagian “Baca Juga”?
Ya, kamu bisa menambahkan gambar dengan mengedit kode HTML pada bagian template atau widget. Gambar akan ditampilkan bersama dengan judul artikel terkait untuk menarik perhatian pembaca.
5. Bagaimana cara agar fitur “Baca Juga” ini berfungsi dengan baik di semua template Blogspot?
Sebagian besar template Blogspot sudah mendukung fitur ini secara langsung, tetapi jika template yang kamu gunakan tidak mendukung atau kamu ingin menambahkan kustomisasi, pastikan untuk menyesuaikan kode HTML dan CSS agar sesuai dengan desain dan struktur template kamu. Periksa juga kompatibilitas dengan perangkat mobile untuk memastikan tampilannya responsif.
6. Apakah fitur “Baca Juga” dapat membantu SEO?
Ya, fitur ini dapat membantu SEO dengan meningkatkan internal linking antara artikel di blog kamu. Internal linking yang baik dapat meningkatkan peringkat pencarian dan membantu mesin pencari mengindeks konten kamu lebih efektif.
7. Apa manfaat dari menambahkan fitur “Baca Juga”?
- Meningkatkan Keterlibatan Pengunjung: Membuat pengunjung lebih lama tinggal di blog kamu karena mereka tertarik untuk membaca artikel terkait lainnya.
- Meningkatkan Lalu Lintas Halaman: Pengunjung lebih cenderung membuka lebih banyak halaman jika mereka melihat rekomendasi artikel lainnya.
- Meningkatkan SEO: Dengan internal linking yang baik, mesin pencari akan lebih mudah memahami struktur konten blog kamu.
8. Apakah ada alternatif lain untuk fitur “Baca Juga”?
Selain fitur “Baca Juga”, kamu bisa mencoba menggunakan fitur “Artikel Terkait” atau “Popular Posts” yang sering ditampilkan di sidebar atau footer blog. Kedua fitur ini juga memiliki manfaat serupa dalam hal meningkatkan keterlibatan pengunjung.
9. Bagaimana jika saya tidak bisa menambahkan kode sendiri?
Jika kamu tidak terbiasa dengan kode HTML atau CSS, kamu bisa mencari template Blogspot yang sudah memiliki fitur “Baca Juga” atau menggunakan widget siap pakai yang tersedia di pengaturan Blogger. Banyak tutorial yang dapat membantu kamu menambahkan fitur ini tanpa perlu menulis kode sendiri.
