Sabtu, 07 April 2018

Cara Membuat Related Post Di Dalam Postingan Blog

Cara Membuat Related Post Di Dalam Postingan Blog

Cara Membuat Related Post Di Dalam Postingan Blog
Blog Mang Otep | Cara Membuat Related Post Di Dalam Postingan Blog - Cara Membuat dan 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.

Cara Membuat Related Post Di Dalam Postingan Blog
 
Cara Membuat Related Post Di Dalam Postingan Blog :

1. Masuk ke dalam blogger.com
2. Langsung saja pindah ke bagian Template >> edit HTML
3. Tambahkan Kode Dibawah 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>

4. Tambahkan Kode CSS 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='&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>

6. Simpan dan lihat hasilnya
Contohnya ada di Blog Mang Otep Ini atau pada gambar postingan kurang lebih akan jadi seperti itu. 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.

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

Terima kasih.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments