Cara Membuat/Memasang Artikel Terkait (Baca Juga) di Dalam Postingan

Cara Membuat/Memasang Artikel Terkait (Baca Juga) di Dalam Postingan_Pada kesempatan kali ini saya akan memeberikan tutorrial mengenai bagaimana cara memasang artikel terkait di dalam postingan, atau biasanya juga kita sebut sebagai Related Post (Baca juga).
Widget artikel terkait ini berfungsi menampilkan sejumlah artikel baik itu dalam bentuk tumbnail (gambar) atau link saja.
manfaatnya sendiri sangat efektif memberikan trafick pengunjung dan meningkatkan kualitas link artikel sobat.

Cara Memasang Artikel Terkait di Tengah-Tengah Postingan Blog

• Buka Blogger sobat
• Pada Menu Dashboard pilih Template lalu kilk Edit HTML
• Tambahkan kode JavaScript ini tepat di bawah </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

• Setelah itu tambahkan kode CSS ini tepat di atas ]]></b:skin> atau </style>

.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)}}

Oya sobat pastikan blog nya udah di beri fonts awsome ya

• langkah terakhir adalah ganti kode <data:post.body/> Dengan kode di bawah ini. jika dalam blog sobat terdapat banyak sekali <data:post.body/>   maka cobalah satu persatu sampai artikel terkali bisa muncul di tengah tengah postingan.
• langkah trakhir simpan Template sobat.

Mudah bukan cara Cara Membuat/Memasang Artikel Terkait (Baca Juga) di Dalam Postingan Blog, semoga apa yang saya sampaikan bermanfaat untuk anda.

Share :