Cara Membuat Baca Juga Di Tengah Artikel Blog – Salah satu cara yang dapat dilakukan agar blog ramai pengunjung adalah menulis artikel yang baik dan membuat widget baca juga. Nah, pada artikel ini akan dijelaskan bagaimana cara membuat baca juga di tengah artikel blog.
Baca juga atau related post merupakan tautan yang berisi artikel terkait di dalam halaman postingan blog. Umumya, baca juga disisipkan di tengah artikel agar pengunjung lebih mudah menemukan artikel lainnya yang relevan.
Membuat baca juga di tengah artikel blog sangat penting diketahui bagi seorang blogger pemula, baik yang menggunakan platform blogspot maupun wordPress. Selain blog terlihat lebih menarik, widget baca juga dapat menurunkan bounce rate yang menjadikan performa blog menjadi lebih baik.
Cara Membuat Baca Juga Di Tengah Artikel Blog
Untuk membuat widget baca juga di tengah postingan blog, setidaknya terdapat dua cara yang dapat digunakan, yaitu secara manual dan otomatis. Berikut pembahasannya.
A. Membuat Baca Juga Secara Manual
Dalam membuat baca juga secara manual, kita harus dapat memilih aritkel lainnya yang relevan. Sehingga akan menumbuh minat pengunjung untuk membacanya. Selain itu, tampilan juga perlu dibuat menarik dan tidak mengganggu pengunjung.
Membuat baca juga manual dapat diletakan dimana saja sesuai keinginan. Bisa di awal, di tengah,maupun di akhir postingan. Untuk membuatnya pun sangat mudah. Kita tidak perlu mengedit kode html atau css yang terdapat pada template blog.
Langkah-langkahnya adalah sebagai berikut:
- Tulis artikel seperti biasa
- Kemudian blok teks kalimat yang akan dijadikan related post
- Setelah itu, klik Insert Link pada menu penulisan
- Masukan link artikel yang sesuai, kemudian centang Open this link in a new window, lalu klik Ok/Submite
- Jika penempatannya di luar paragraf, tambahkan teks baca juga di awalnya
Membuat baca juga secara manual dapat dilakukan pada platform blogger maupun wordPress. Contohnya seperti di bawah ini:
B. Membuat Baca Juga Secara Otomatis
A. Membuat Baca Juga Otomatis Di Blogger
Untuk membuat widget baca juga otomatis di blogger, awalnya memang perlu mengedit template untuk memasukan kode html dan script lainnya. Namun, kedepannya tidak akan repot untuk membuat link satu per satu di dalam postingan seperti cara manual.
Langkah-langkah membuat baca juga secara otomatis di blogger adalah sebagai berikut:
Silahkan login ke Blogger > Pilih Template > Klik Edit HTML. Kemudian letakkan kode berikut ini di bagian bawah <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> |
Selanjutnya, tempelkan kode html berikut ini untuk memasang css sebelum ]]></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)}} |
Setelah itu, cari kode <data:post.body/> dan ganti dengan kode berikut 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> |
Setelah semua terpasang, klik Save
B. Membuat Baca Juga Otomatis Di WordPress
Untuk membuat baca juga otomatis di wordPress lebih mudah dari pada di blogger. Karena wordPress memiliki plugin yang dapat membantu dalam pembuatannya. Salah satunya yaitu plugin Inline Related Posts.
Adapun langkah-langkah membuat related post otomatis di wordPress adalah sebagai berikut:
- Masuk ke dashboard wordPress > Plugins > Add New
- Ketik inline related posts pada kotak search
- Jika sudah ketemu, klik Install Now, lalu Activate
- Kembali ke dashboard wordPress > Settings > Inline Related Posts
- Lakukan pengaturan plugin
- Di bagian paling atas, centang Active
- Kemudian pada related text or call-to-action, diisi dengan Baca Juga
- Pilih theme, untuk versi gratis hanya dapat menggunakan theme minimalist dan shock
- Pengaturan selanjutnya yaitu initial opacity, margin, color dan display. Silahkan lakukan penyesuaian yang diinginkan
- Centang insert in already existing posts jika ingin menampilkan pada postingan yang sudah diterbitkan
- Isi jumlah related post pada kolom how many boxed per single post. Untuk versi gratis maksimal 3
- Centang use on post untuk menampilkan di semua postingan
- Pilih asal related post, bisa only categories, only tags, atau keduanya
- Kemudian mengatur link “rel” attribute apakah dofollow atau nofollow
- Lalu setting link target, apakah link akan terbuka di tab baru (_blank) atau terbuka di tab yang sama (_self)
- Centang metabox integration jika ingin menonaktifkan related post di postingan tertentu. Jika ini dicentang, akan muncul pengaturan di bagian post editor.
- Klik save
Demikianlah pembahasan mengenai cara membuat baca juga di tengah artikel blog, baik platform blogger maupun wordPress. Semoga bermanfaat.
Baca Juga :
