Cara Membuat Artikel Terkait/Related Post Responsive Ditengah Postingan

Bagi agan yang sering mencari ilmu di Google dan membuka salah satu artikelnya pasti sudah tidak asing dengan kata "baca juga" ditengah artikel. Membuat related post atau cara membuat artikel terkait otomatis ditengah postingan. Manfaat memasang artikel terkait ini ada beberapa poin penting untuk blogger seperti

1. Menambah jumlah pengunjung
2. Meningkatkan kualitas internal link di blog

Cara membuat artikel terkait otomatis ditengah postingan.

• Langkah awal yaitu buka blogger > Tema > Edit HTML > tambahan kode dibawah ini diatas tag </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<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>

• Jika sudah tambahan kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style> untuk memanggil kodenya.

Style 1

/* 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)}}

Style 2
Kalau yang ini nanti kembaran sama saya gan hehehe

Baca Juga

• 5 Cara Mempercepat Loading Blog Agar Fast Loading Dan Ringan [2018]
• Mempercepat loading blog dengan menghapus JavaScript & CSS yang menghalangi perenderan !
• Cara Cepat Membuat Blog Dalam 5 Menit!
• Cara Cepat Memasang Lazy Load di Blog

/* Related Post Style 2 */

.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}

.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;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:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}

.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}

.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#0383d9;}

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

Style 3

/* Related Post Style 3 */

.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}

.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}

.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:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}

.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}

.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#fff;text-decoration:underline}

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

• Langkah terakhir cari dan ubah kode <data:post.body/> dengan kode dibawah ini untuk menampilkannya ditengah postingan

<div expr:id='&quot;post1&quot; + 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 == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

<h4>Baca Juga</h4>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</div>

<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>

<script type='text/javascript'>

var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);

var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);

var s=obj1.innerHTML;

var t=s.substr(0,s.length/2);

var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);

if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}

</script> 

Disetiap template mungkin ada beberapa kode <data:post.body/> agan cari satu persatu sampai muncul dihalaman artikel.

Jika semua langkah langkahnya sudah agan klik simpan dan lihat hasilnya. Dengan cara ini agan tidak perlu memasukkan manual beberapa link di postingan blog, demikian cara membuat artikel terkait otomatis ditengah postingan, Semoga bermanfaat.