Mendapatkan trafik yang melimpah dari kunjungan blog oleh pengguna internet pastinya menjadi hal yang paling diinginkan oleh para blogger, karena dengan banyaknya trafik maka akan meningkatkan peringkat situs dan menandakan bahwa situs yang dikelola merupakan situs yang cukup dikenal oleh para pengunjung internet. Hal ini juga akan memberikan hal positif di sisi pendapatan para blogger, karena dengan melimpahnya kunjungan diblog maka hal itu juga akan meningkatkan pendapatan Adsense maupun jaringan iklan lainnya.
Ada banyak metode yang dapat digunakan untuk meningkatkan trafik blog ini, mulai dari membuat konten yang berkualitas dan bermanfaat, memberika template atau tema blog yang mudah dinavigasi oleh pengunjung, loading konten yang cepat dengan tehnik lazy load, ada juga tehnik meningkatkan trafik pengunjung internet dengan menambahkan fitur "baca juga" atau "also read" yang secara otomatis muncul di semua artikel untuk meningkatkan backlink, dan masih banyak cara-cara lainnya untuk meningkatkan trafik internet ke blog yang dikelola.
Dan kali ini saya akan membahas mengenai cara menambahkan fitur "Baca Juga" ke dalam artikel secara otomatis menggunakan java script, caranya anda hanya perlu menaruh beberapa baris kode JavaScript, Html dan Css ke dalam template blogspot yang anda kelola maka secara otomatis semua artikel didalam blog anda akan muncul tulisan "Baca Juga", 3 judul artikel akan muncul dibawah tulisan "Baca Juga" yang memiliki "label" yang sama dengan artikel yang sedang di buka dan ketika di klik maka akan mengarah ke artikel lainnya dan dari sinilah anda mendapatkan backlink internal, mirip seperti read also hanya saja disisipkan ke dalam artikel.
Seperti yang saya sebutkan sebelumnya bahwa tujuan fitur ini untuk menabah backlink internal, maksud dari backlink internal adalah "adanya kunjungan trafik internet melalui link yang memiliki domain yang sama". Berikut cara untuk menambahkan fitur ini.
Tutorial Cara Memasang Fitur "Baca Juga" Di Semua Artikel Di Blogspot
1. Silahkan masuk ke Blogger >> Template >> Edit HTML. Letakkan kode dibawah ini 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. Berikutnya memasang CSS dibawah ini 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. Silahkan anda cari Kode <data:post.body/> lalu ganti dengan Kode dibawah ini, ada banyak kode <data:post.body/> dan pastikan yang anda ganti adalah kode <data:post.body/> yang berada didalam artikel.
<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 sobat sudah memasang Font Awesome agar icon bisa muncul
Dan anda bisa mengecek artikel pada blog anda, tampilan masih simpel dan sebenarnya saya memiliki banyak model fitur atau tampilan "Baca Juga" dan mungkin akan saya posting pada artikel lainnya, terima kasih sudah berkunjung!.
Tidak ada komentar:
Posting Komentar