Cara Membuat Baca Juga di Tengah Postingan Blog secara Otomatis
Menulis artikel menarik dan berkualitas di platform Blogger dan Wordpress sudah menjadi salah satu faktor terpenting bagi seorang penulis. Untuk mewujudkan hal tersebut dibutuhkan pengetahuan yang cukup. Tujuannya sendiri yaitu untuk mendatangkan pengunjung yang banyak dan organik. Bukan hanya melalui link yang dibagikan di grup blogger atau media sosial, tetapi juga mendapat tempat di halaman satu Google. Salah satu cara agar artikel blog muncul di google paling atas yaitu dengan membuat Baca Juga di tengah postingan blog.
Baca Juga adalah salah satu trik untuk mendapatkan banyak visitor dengan membuat link yang mengarah ke artikel kita yang lain. Dengan membuat pengunjung berlama-lama ada di blog kita, membuat performa situs kita menjadi lebih bagus. Ada dua cara membuat Baca Juga di tengah artikel blog atau biasa kita kenal dengan istilah artikel terkait. Tetapi ada juga orang yang menyebutnya dengan istilah related post. Jika kamu membuatnya tidak benar atau asal-asalan, tentu hal ini membuat tampilan blog jadi tidak menarik dan membuat para pengunjung merasa terganggu.
Membuat Baca Juga di tengah postingan blog secara otomatis sangatlah bagus karena kita tidak perlu membuat linknya sendiri. Baca Juga akan secara otomatis tampil di tengah postingan blog ketika update artikel dan yang tampil yaitu berdasarkan Label Blog. Tetapi cara ini sangat tidak dianjurkan jika artikel yang kamu buat tidak lebih dari 500 kata. Artikelnya yang pendek membuat tampilan blog jadi tidak rapi.
Pengunjung merasa terganggu dengan hal tersebut karena linknya akan berada di bawah artikel. Terlebih lagi jika kamu membuat dan memasang iklan Adsense di bawah artikel. Tidak menutup kemungkinan kalau link yang dibuat akan berdampingan dengan iklan adsense yang kamu pasang.
Tetapi jika kamu ingin tampilannya rapi meskipun artikel yang dibuat dibawah 500 kata, kamu bisa menggunakan cara manual. Cara ini cukup bagus karena kamu bisa menempatkan linknya sesuai dengan keinginan. Di sini penulis akan membuatkan tutorial cara membuat Baca Juga di tengah postingan blog secara manual maupun otomatis. Silahkan kamu pilih sendiri cara mana yang menurut kamu bagus.
Cara Membuat Baca Juga di Blog secara Manual
Membuat Baca Juga secara manual tidak seperti cara otomatis. Karena tidak perlu membutuhkan kode HTML ataupun Script untuk membuatnya. Jika kamu membuat Baca Juga secara otomatis dan salah dalam prakteknya, kemungkinan besar bisa menyebabkan loading blog menjadi lama. Loading lama dapat membuat blog menjadi lemot dan kemungkinan bersaing di beranda Google menjadi sulit. Berbeda halnya jika kita membuat Baca Juga secara manual, karena kita bisa dengan leluasa menempatkan link di teks manapun yang kita suka.
Baca Juga: Jual BLOG Siap Pakai, Harga Terjangkau Kualitas Oke
Di atas merupakan contoh Baca Juga secara manual dan bisa kamu tempatkan di mana saja. Cara membuat Baca Juga ditengah postingan blog secara manual sangatlah mudah. Kamu cukup memberikan teks yang akan kamu beri link. Setalah itu blok teksnya lalu beri link dengan mengklik link di menu blogger. Salin link artikelnya dan jangan lupa untuk mencentang 'open this link in a new window' dan klik 'Apply'. Selesai deh, mudah kan?
Cara Membuat Baca Juga di Blog secara Otomatis
Cara yang kedua yaitu dengan membuat Baca Juga di Blog secara otomatis. Cara ini cukup ribet karena kita membutuhkan kode HTML dan CSS. Sebelum membuat Baca Juga di Blog secara otomatis, pastikan kamu harus membuat artikel diatas 500 kata agar tidak menggangu penggunjung. Untuk tutorialnya adalah sebagai berikut. Untuk kodenya didapat dari web mastimon.com.
<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>
/* 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 yang kamu lakukan yaitu mencari kode <data:post.body/> kemudian ganti kode tersebut 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 yang terakhir yaitu simpan tema kemudian lihat hasilnya. Pastikan kamu sudah memasang font Awesome agar icon bisa muncul.
Nah, itulah kurang lebih tutorial cara membuat Baca Juga di tengah postingan Blog secara otomatis maupun manual. Semoga bermanfaat dan selamat mencoba.