Cara Membuat Related Post Di Dalam Postingan Blog

Cara Membuat Related Post Di Dalam Postingan Blog

Diposting pada

Blog Mang Otep | Cara Membuat Related Post Di Dalam Postingan BlogCara Memasang Artikel Terkait/Related Post di Tengah Postingan pada Blogspot ini merupaka fitur untuk menyediakan artikel yang berkaitan dengan postingan yang dibaca oleh pengunjung blog kita agar betah berlama lama didalam blog kita.

Jika anda merasa jenuh dengan Related Post/Artikel Terkait yang biasanya terletak pada bagian akhir postingan, cara ini bisa menjadi solusi terbaik untuk menampilkan nya ditengah postingan pada blog anda. Anda juga bisa mengatur dimana lokasi Related Post ini akan muncul.

Menarik bukan? mari kita bahas saja sekarang dibawah ini adalah Cara Membuat Related Post Di Dalam Postingan Blog anda, silahkan ikuti cara yang disiapkan agar tidak terjadi error pada postingan anda.

Cara Membuat Related Post Di Dalam Postingan Blog:

1. Masuk ke dalam blogger.com dan pilih blog yang akan anda edit.

2. Langsung saja pindah ke bagian Template >> Edit HTML

3. Tambahkan Kode Dibawah ini sebelum Tag </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='https://www.mangotep.com?e2005165a7=cHBUYzVNdmFWcVBNRGRlOGhxMDYrZG9WMmJRTWtkeVc2STJoUU9Pci9DVG9nV2gyUjJnQjQ2N01NOUdBS05JOA==' rel='nofollow'>' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

4. Tambahkan Kode CSS dibawah ini sebelum Kode ]]></b:skin> atau </style>

/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#ccc;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#333;border:1px solid #ccc}
.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)}}

5. Cari dan gantilah kode <data:post.body/> dengan kode berikut, biasanya ada lebih dari satu kode, cobalah satu persatu atau sesuaikan dengan kode iklan anda.

<div expr:id='"post1" + 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 == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");var obj1=document.getElementById("post2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf("<br>");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

6. Simpan dan lihat hasilnya untuk blog anda.

Kode yang perlu anda sesuaikan sudah saya beri tahu dibawah untuk mengatur tata letak related post postingan anda. Jika kalian ingin mengganti gambar gantilah kode #ccc diatas dan jika ingin mengganti jumlah post yang ditampilkan ganti angka 3 diatas. Kemudian untuk menampilan dimana letaknya silahkan cari kode (0,s.length/2) ganti angka 2 dengan sesuai keinginan anda.

Jika anda ingin menambahkan iklan untuk postingan tepat di atas Related Post yang sudah dipasang tersebut, maka cukup tambahkan kode adsense yang sudah anda siapkan dan letakkan tepat di atas.

Demikianlah postingan dari Blog Mang Otep untuk artikel Cara Membuat Related Post, semoga bermanfaat untuk anda. Jika anda menyukai artikel dari mang otep bisa klik like and subscribe untuk mendapatkan informasi terbaru. Terima kasih.

2 thoughts on “Cara Membuat Related Post Di Dalam Postingan Blog

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *