Jumat, 10 Agustus 2018

Artikel terkait di dalam postingan terbaru

Tags

Artikel terkait di dalam postingan terbaru sudah asing lagi bagi blogger yang ingin artikelnya saling berkaitan satu dengan yang lainnya sesuai dengan label yang mereka buat, kali ini saya akan berbagi cara memasang Artikel terkait di dalam postingan terbaru sebagai referensi bisa kalian buka di website bung frangki.

Artikel terkait di dalam postingan terbaru

Artikel terkait bisa saja berupa link dan thumbnail atau link saja itu tergantung si pemilik blog atau website, selain untuk mengkaitkan artikel satu dengan yang lain, manfaat artikel terkait di dalam postingan terbaru juga akan meningkatkan traffic blog atau website.

Oke tidak perlu panjang lebar, contohnya di blog saya ini saya pasang dengan artikel terkait agar pengunjung bisa melihat artikel saya yang lain.

Artikel terkait di dalam postingan terbaru


Artikel terkait di dalam postingan pertama

  • Masuk ke dashboard blogger kalian
  • Pilih Tema/Template
  • Pilih tombol Edit HTML
  • Tambahkan kode berikut ini tepat di bawah 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>

Artikel terkait di dalam postingan kedua

  • Setelah itu tambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

/* 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)}}
Untuk memunculkan icon, kalian harus memasang Font Awesome terlebih dahulu diblog kalian dan jika sudah ada silahkan kalin upgrade ke versi terbaru.

Artikel terkait di dalam postingan ketiga

  • Setelah itu silahkan ganti <data:post.body/> dengan kode dibawah ini, biasanya setiap template ada sampai tiga <data:post.body/> dan untuk template buatan erlina design pilih yang nomor 3 atau yang terakhir.

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

Artikel terkait di dalam postingan keempat

  • Silahkan simpan template dan lihat hasilnya, untuk pembuatan artikel terkait diatas sama persis dengan artikel terkait di website ini.

Demikian artikel saya yang membahas tentang Artikel terkait di dalam postingan terbaru semoga bermanfaat untuk kalian dan salam blogger 17 an.


EmoticonEmoticon