Ada banyak cara menarik pengunjung datang ke blog kita. Salah satunya dengan memasang widget artikel terkait (related posts). Related posts atau artikel terkait merupakan salah satu fitur yang sangat penting dari sebuah blog. Fitur Artikel terkait menampilkan beberapa artikel lain yang terkait dengan judul artikel yang sedang dibaca pengunjung.
Artikel terkait biasanya berada di bawah postingan blog atau di bawah tombol sosial media. Kali ini kami akan membagikan cara memasang artikel terkait dalam postingan blog berbasis Blogger. Dengan posisi seperti ini pengunjung blog akan lebih betah di blog kalian.
Baca juga : Cek Domain TLD untuk blog dan web disini
Cara Memasang Artikel terkait dalam postingan Blog
Adapun cara memasang artikel terkait dalam postingan blog sebagai berikut.
1. Buka Blogger -> Tema -> Edit HTML.
2. Salin dan tempel kode HTML berikut sebelum kode </head>. Gunakan fungsi Find (Ctrl+F) untuk pencarian lebih cepat.
<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>
<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>
3. Carilah kode <data:post.body> pada editor HTML. Jika ada lebih dari 1 kode <data:post.body> maka temukan kode <data:post.body> yang paling bawah atau terakhir. Gantilah kode <data:post.body> tersebut dengan kode HTML berikut. Perhatikan bahwa kode HTML di bawah tidak perlu di-Parse lagi.
<div id='tgt-post'>
<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>
<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>
</div>
<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>
<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>
</div>
Sebagai tambahan bahwa kalian bisa ganti kata Baca Juga dengan kata lain yang kalian sukai.
Kode CSS Artikel Terkait dalam postingan blog
4. Salin dan paste kode HTML berikut sebelum kode </b:skin>.
/* Related Post dalam postingan*/
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:2px solid rgba(196,196,182,100)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#010101;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.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:#0E5FDA;font-size:15px;font-weight:300; margin:0 0 0 30px;}
.related-simplify a:hover{color:#f2132d;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
Jika kalian ingin gaya atau style artikel terkait yang lain kalian bisa coba mengganti kode HTML \f138 dengan \f0c8 . Nah kalian bisa cek sendiri hasil dan perbedaannya dengan kode di atas.
8. Langkah terakhir adalah klik Simpan Tema untuk melakukan pemasangan. Nah selanjutnya kalian bisa lihat blog kalian apakah sudah tampil dengan baik atau belum. Selamat mencoba!
 |
| Artikel terkait dalam postingan blog |
Begitulah informasi mengenai cara memasang Artikel Terkait dalam postingan blog. Bila ada kekurangan, mohon simpan di kolom komentar. Semoga informasi ini bermanfaat. Ikuti informasi/artikel terbaru melalui fanspage facebook kami di Supervba.
Tags:
Tutorial Blog