Cara membuat baca juga di tengah postingan

Cara Membuat Artikel Terkait/Baca Juga di Dalam Postingan - Lagi-lagi saya akan membuat tutorial tentang blogger, saya tidak akan bosan untuk membuatkan artikel untuk para pengujung saya, hehe. Kali ini saya akan membuat tentang Cara Membuat Artikel Terkait/Baca Juga di Dalam Postingan. Yup, seperti pada blog ini yang terdapat Baca Juga, Fungsi dari Widget Baca Juga dapat menambah jumlah pengunjung dan meningkatkan kualitas internal link di blog Anda.



Untuk artikel kali ini saya mendapatkan request dari salah satu pengunjung diblog ini dan saya mendapatkan tutorial dari blog Arlina Design http://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html  Dan saya berterima kasih atas tutorial-tutorial yang dibagikan Arlina Design, karna semua artikelnya sangat bermanfaat bagi para blogger. Oke, bagi kalian yang tidak sabar ingin mempraktekan tutorial kali ini silahkan ikuti intruksi dibawah ini.

Cara Membuat Artikel Terkait/Baca Juga di Dalam Postingan
1. Login Blogger > Tema > Klik Edit HTML
2. Lalu tambahkan 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>

3. Dan Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin>atau</style>
Style 1
Baca Juga
Cara Memasang Fungsi Sticky Widget di Blog
Cara Membuat Blockquote Keren di Blog
Cara Membuat Recent Post ala BungFrangki
/* 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)}}


Contoh Widget CSS Style 1

Style 2
/* Relat