Membuat Read Also/Baca Juga Di Tengah Artikel Blogspot

Membuat Read Also/Baca Juga Di Tengah Artikel Blogspot - Di dunia blogging, artikel merupakan dasar atau pondasi yang nantinya akan berpengaruh pada penentuan layout template dan akan mendukung artikel dari Super Fusion Junior tentang Blogspot SEO. Tampilan artikel yang menarik dan navigasi yang tidak ribet juga akan mempengaruhi berapa lama pengunjung akan diam dan nyaman menjelajahi setiap fitur di blogspot kesayangan anda.

Salah satu fitur yang harus anda isi di blogspot anda adalah Read Also/Baca Juga Di Tengah Artikel berdasarkan related post/artikel itu sendiri, selain fungsi sebagainya "Internal Link" dalam dunia SEO. Ada 2 cara untuk membuatnya, yang pertama secara manual dan yang kedua secara otomatis. Pakde akan bahas kedua cara tersebut.

Cara Manual

Login Ke dashboard bloggger anda.

Tulis Artikel sepanjang yang anda suka.

Contoh, ketikan "Baca Juga: Memasang Favicon di Blogspot", kemudian sorot crusor dan highlight kata "Memasang Favicon Di Blogspot", kemudian klik icon rantai untuk menambahkan sebuah link yang nantinya akan menuju URL artikel tersebut.

Letakkan kira-kira diantara paragraph 1 atau 2. Lakukan beberapa kali tergantung panjang artikel anda.

Cara Otomatis

Disebagian template blogspot yang pakde temukan di internet sana, beberapa template sudah mengimplementasikan fitur read also/baca juga ini. Bagi yang masih memakai template lama atau  bawaan blogger itu sendiri, anda bisa menggunakan cara dibawah: 

Login Ke dashboard blogger anda.

Theme >> Customized >> Edit HTML

Cari Kode berikut </head> kemudian paste kode berikut tepat diatas kode </head> tadi.

<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>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4431f75a9e.js'/>

Perhatikan kode tadi, terdapat sebuah load script yang penggunaannya Optional, fungsinya adalah untuk memanggil Font Awesome Icon, lihat penjelasannya disini.

<script crossorigin='anonymous' src='https://kit.fontawesome.com/4431f75a9e.js'/>

Oke, lanjut... Kemudian cari kode <data:post.body/> kemudian ganti/replace dengan kode dibawah:

Sampai disini berikut tampilannya pada artikel anda.

Disini, anda perlu mempercantiknya sedikit dengan menambahkan kode CSS, cari kode ]]></b:skin> kemudian paste kode CSS dibawah tepat diatas kode ]]></b:skin>

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

Tampilannya akan seperti gambar diawah ini.

Sekian artikel Membuat Read Also/Baca Juga Di Tengah Artikel Blogspot dari Pakde, Semoga bermanfaat dan rekomendasi karena widget/fitur blogspot ini mempunyai multi fungsi yang berguna bagi blogspot kesayangan anda. Adios, Tepat sehat dan mari kalahkan COVID-19, bye...