Cara memasang artikel terkait di dalam postingan

Alangkah mudahnya jika ketika membuat artikel terus langsung bisa masuk ke dalam postingan berupa judul postingan kita yang telah lewat dan tentunya kalian harus memasang label dulu atau masukkan artikel kalian kedalam daftar isi dengan memberikan label pada artikel kalian.

Lalu bagaimana cara memasang artikel terkait ke dalam postingan?

Untuk kalian yang belum pernah memasangnya, bisa kalian simak artikel saya berikut ini dan bisa langsung kalian praktikkan ke dalam blog kalian.

# Langkah 1 Cara memasang artikel terkait di dalam postingan
Cari code </head> di dalam tubuh blog kalian lalu masukkan code di bawah ini tepat diatas code </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>

# Langkah 2 Cara memasang artikel terkait di dalam postingan
Tambah CSS nya berikut 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)}}

# Langkah 3 Cara memasang artikel terkait di dalam postingan
Sebelumnya kalian harus memasang dulu Font Awesome ke dalam tubuh blog kalian agar simbol didepan artikel terkait muncul, caranya silahkan masukkan code berikut dibawah </head>

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>

# Langkah 4 Cara memasang artikel terkait di dalam postingan
Silahkan cari code <data:post.body/> biasanya ada 2 sampai 3 kode tersebut, pilih yang ke 2 dan ganti code <data:post.body/> dengan script di bawah ini.

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

 # Langkah 5 Cara memasang artikel terkait di dalam postingan
Setelah langkah 1 dan langkah 2 kalian selesaikan, tugas terakhir kalian adalah save template dan silahkan lihat hasil dari pemasangan script kalian tadi. (09/02/2017)

Demikian artikel yang membahas tentang cara memasang artikel terkait di dalam postingan. Semoga bisa bermanfaat untuk kita semua.