Cara membuat baca juga di tengah postingan blog atau dikenal dengan istilah related post (artikel terkait) sangat perlu diketahui bagi seorang penulis blog, baik itu yang menggunakan platform Blogger (blogspot) maupun Wordpress, agar tulisan tersebut terlihat lebih menarik dan menumbuhkan minat baca pengunjung.
Selain itu, BACA JUGA yang ada ditengah postingan blog merupakan salah satu cara agar visitor membaca artikel lainnya yang relevan dan membuat pengunjung blog tersebut betah untuk berlama-lama dan puas terhadap informasi yang ditampilkan didalam situs web.
Dengan membuat pengunjung bertahan lama, maka akan membuat performa situs web menjadi lebih baik dan akan mengurangi bounce rate blog. Untuk melihat seberapa besar bounce rate blog, Kamu perlu melihat ranking website blog Kamu terlebih dahulu.
Untuk membuat baca juga artikel terkait bisa menggunakan 2 cara, yaitu dengan cara manual atau secara otomatis. Jika menggunakan cara manual, Kamu harus memperhatikannya baik-baik agar tampilan blog menarik dan tentu saja tidak akan mengganggu pengunjung.
Jika membuat secara otomatis, Kamu tidak akan susah payah untuk membuat link satu per satu dan akan tampil berdasarkan label yang Kamu pilih. Artikel yang terkait pun mungkin akan tampil secara acak.
Blog paltycox.com menggunakan kedua cara tersebut, ada yang cara manual dan ada yang secara otomatis berdasarkan label.
Jadi pertanyaan, bagaimana cara membuatnya? Yuk simak saja langsung!!!
Cara Membuat BACA JUGA di Tengah Postingan Blog Secara Manual
Membuatnya dengan manual cukup mudah tidak perlu menggunakan kode HTML atau script lain.
Baca Juga diatas merupakan contoh pembuatan dengan cara manual dan bisa ditempatkan dimana saja asalkan ada celah-celahnya 😄 Hehehhe.
Caranya cukup mudah, Kamu tinggal blok atau highlight teks yang ingin diberikan link kemudian klik Insert Link pada menu penulisan di blogger.
Lalu masukkan link artikelnya, jangan lupa untuk mencentang Open this link in a new window dan Klik OK.
Nah, membuat BACA JUGA di tengah postingan blog menggunakan cara manual telah sukses. Namun, bagaimana jika ingin menggunakan cara otomatis? Simak penjelasan dibawah ini !!!
Cara Membuat BACA JUGA di Tengah Postingan Blog Secara Otomatis
Jika Kamu ingin membuat baca juga atau artikel terkait secara otomatis, maka Kamu memerlukan kode HTML dan script lain yang akan dipasang di template blogmu. Kemungkinan hal ini akan memperlambat sedikit Loading Blog.
Berikut ini caranya Login ke Blogger → Pilih Template → Klik Edit HTML. Kemudian letakkan kode dibawah ini dibawah bagian <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 copy dan paste kode HTML dibawah ini untuk memasang CSS nya dan letakkan di bawah kode 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 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>Terakhir, klik Save dan lihat hasilnya.
Bagaimana? Cukup gampang kan? membuat BACA JUGA atau related post di tengah postingan blog, Kamu juga perlu memasang tombol live blog, agar pengunjung Kamu bisa berinteraksi secara langsung dengan Kamu.
Nah itu saja cara membuat related post di tengah postingan blog secara manual maupun otomatis. Jika Kamu ingin melihat contoh hasilnya, silahkan Kamu lihat gambar dibawah ini.
Sekian artikel tentang membuat related post baca juga ini. Jika Kamu ingin lebih tahu tentang blogging, bisnis, investasi, saham, emas, aplikasi, game dan lainnya. Kamu bisa mengoprek informasi di paltycox.com agar menambah wawasan Kamu.
Selamat mencoba, semoga bermanfaat dan terimakasih telah berkunjung.
Posting Komentar