Membuat Baca Juga secara automatis itu baik karena kita tidak ribet membuat linknya. Secara automatis bakal tampil jika kita up-date artikel dan yang ada yaitu berdasarkan Label Blog. Untuk artikel di atas 500 kata cukup baik untuk membuat Baca Juga secara automatis tapi bila artikel anda pendek maka penampilannya tidak akan rapi dan mengganggu para pengunjung.
Pengunjung akan merasa terganggu dengan munculnya hal yang tidak dibutuhkan pas di tengah-tengah postingan. Ditambah lagi anda pun membuat atau memasangkan Iklan adsense secara automatis di tengah postingan. Dan juga tidak menutup kemungkinan link Artikel berkaitan itu akan bersebelahan dengan Iklan Adsense yang anda pasang.
Saya cenderung memilih untuk memakai langkah manual dalam membuat internal link pada Baca Juga, karena kita bisa mengatur sendiri maka penampilannya bisa kita sesuaikan agar tidak berantakan. Karena jika membuat internal link pada artikel saya rasa cukup mudah, jadi disini saya akan buat panduan bagaimanakah cara membuat Baca Juga untuk link di tengah artikel Blog secara Automatis.
Cara membuat Baca Juga Otomatis Di Blogspot dan Wordpress
 |
| (Sumber Foto: mastimon.com) |
1. Hal pertama yang harus kamu lakukan ialah masuk ke Blogger , pilih menu Template, lalu Edit HTML. Kemudian salin kode dibawah ini dan paste 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>
2. Langkah selanjutnya ialah memasang kode CSS. Salin kode dibawah ini dan pastekan 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. Langkah selanjutnya yaitu silahkan Anda cari Kode <data:post.body/> di edit HTML template, lalu ganti dengan Kode dibawah 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. Simpan Template dan lihat Hasilnya. Pastikan di Blog Anda sudah terpasang Font Awesome agar icon bisa muncul dengan baik. Untuk masalah icon pada font awesome kamu bisa klik disini.
Penutup
Itulah langkah-langkah membuat Link Baca Juga di tengah Postingan Blog secara automatis. Bagaiamana? penampilan cukup menarik bukan? Lihat dan ikuti langkah-langkah di atas dengan teliti, supaya berhasil dan dapat muncul BACA JUGA di tengah-tengah artikel, karena jika Anda salah menyimpan tempat code nya, BACA JUGA tidak bakal tampil atau malah membuat error.
Tapi perlu diingat, jangan sampai kalian memasangkan BACA JUGA, tapi malah membuat page speed pada blog jadi berat dan lambat. Jadi gunakanlah secara bijak, jika sekiranya tidak terlalu dibutuhkan, jangan coba-coba untuk memasangnya
Demikian artikel dari saya, mudah-mudahan berguna untuk
kita semua. Jika kalian masih mengalami masalah saat membuat baca juga, Anda dapat mengirimkan komentar di bawah dan kita akan
menuntaskan bersama-sama.
Posting Komentar