Tips Memasang Artikel Terkait Dalam Postingan Terbaru dan Keren

Tips Memasang Artikel Terkait Dalam Postingan Terbaru dan Keren – Mysolutionseo – Selamat malam teman-teman apa kabar hari ini disini saya ingin memberikan tips menarik mengenai Blogger yang berjudul Tips Memasang Artikel Terkait Dalam Postingan Terbaru dan Keren. Pastikan anda mendownload dan mencobanya langsung pada blog anda. Namun sedikit berbeda dari sebelumnya, di sini saya akan memberikan tutorial Cara Memasang Artikel Terkait di Dalam Postingan.

Tips Memasang Artikel Terkait Dalam Postingan Terbaru dan Keren

Manfaat lain yang didapatkan dari memasang artikel terkait di dalam postingan ini yaitu untuk menambah jumlah pengunjung serta meningkatkan kualitas Internal Link di blog kamu.

Bagi yang ingin memasangnya di blog, silakan ikuti langkah-langkah Cara Memasang Artikel Terkait di Dalam Postingan atau lebih tepatnya di tengah konten artikel berikut ini.

Berikut Tips Memasang Artikel Terkait Dalam Postingan Terbaru dan Keren :

1. Buka Blogger > Template > Klik tombol Edit HTML > Tambahkan kode di bawah ini sebelum tag </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>

2. Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

/* Related Post */

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

@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Pastikan di blog kamu sudah memasang Font Awesome agar icon bisa muncul

3. Selanjutnya, cari dan ganti kode <data:post.body/> dengan kode di bawah ini

Di dalam template kamu akan menemukan beberapa kode <data:post.body/> tergantung template yang digunakan, coba satu persatu sampai artikel terkait muncul di dalam halaman artikel

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

4. Simpan template dan lihat hasilnya.

Result

Jadi dengan memasang kode ini kamu tidak perlu lagi repot-repot memasang link secara manual di artikel blog.

Sekian dari artikel Tips Memasang Artikel Terkait Dalam Postingan Terbaru dan Keren.