Membuat Related Post Otomatis - Berikut saya akan langsung je topik pembahasan yaitu bagaimana caranya menambahkan atau membuat fitur Baca Juga atau Related Post khusus untuk Blogger atau blogspot yang tampil pada postingan artikel kita dengan Otomatis.
Apa itu Related Post?
Yaitu Singkatnya, related post adalah rekomendasi artikel/postingan yang terkait atau berkategori sama dengan postingan yang sedang dibaca.
Cara memasang Related Post dengan Otomatis di Blogger
- Pergi ke pengaturan Template pada blogger anda dan ke Edite HTML
- Cari kode </head> atau </head><!--<head/>--> untuk mempermudahnya dengan menekan Ctrl + F pada Keyword anda dan pastekan code </head>
- Pastekan Code di bawah ini sebelum code </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 cari code <data:post.body/> lalu kode <data:post.body/> teman - teman ganti dengan code di bawah ini. Jika teman - teman menemukan beberapa code silahkan teman pilih code <data:post.body/> yang ke dua atau yang pertengahan.
<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>
- Pada langkah ini teman - teman sudah Selelsai Membuat Related Post Otomatis teman - teman tinggal Save.
Cara Mempercantik Tampilan Related Post Otomatis di Blogger dengan CSS
- Langkah yang petama teman - teman silahkan cari code ]]></b:skin> atau </style> seperti biasanya dan teman - teman pastekan code dibawah ini sebelum code ]]></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)}}
- Juka sudah selesai tinggal Save dan Selesai, maka tampilan related post atau baca juga akan tampak cantik dengan di tambah code CSS diatas, berikut tampilan hasil akhirnya.
