-->

Cara membuat Fitur Baca Juga atau Related Post Otomatis di Blogger


Cara membuat Fitur "Baca Juga" atau "Related Post" Otomatis di Blogger

Membuat Related Post Otomatis - Berikut saya akan langsung je topik pembahasan yaitu bagaimana caranya menambahkan atau membuat fitur Baca Juga atau Related Post khusus untuk Blogger atau blogspot yang tampil pada postingan artikel kita dengan Otomatis.

Apa itu Related Post?

Yaitu Singkatnya, related post adalah rekomendasi artikel/postingan yang terkait atau berkategori sama dengan postingan yang sedang dibaca.

Cara memasang Related Post dengan Otomatis di Blogger

  • Pergi ke pengaturan Template pada blogger anda dan ke Edite HTML
Membuat Related Post Otomatis
  • Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; untuk mempermudahnya dengan menekan Ctrl + F pada Keyword anda dan pastekan code </head>
  • Pastekan Code di bawah ini sebelum 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>

  • Selanjutnya cari code <data:post.body/> lalu kode <data:post.body/> teman - teman ganti dengan code di bawah ini. Jika teman - teman menemukan beberapa code silahkan teman pilih code <data:post.body/> yang ke dua atau yang pertengahan.
<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>

  • Pada langkah ini teman - teman sudah Selelsai Membuat Related Post Otomatis teman - teman tinggal Save.
Jika teman teman ingin mempercantik tampilan Related Post Otomatis dengan menambahkan code CSS silahkan ikuti tahapan dibawah ini.

Cara Mempercantik Tampilan Related Post Otomatis di Blogger dengan CSS

  • Langkah yang petama teman - teman silahkan cari code ]]></b:skin> atau </style> seperti biasanya dan teman - teman pastekan code dibawah 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)}}

  • Juka sudah selesai tinggal Save dan Selesai, maka tampilan related post atau baca juga akan tampak cantik dengan di tambah code CSS diatas, berikut tampilan hasil akhirnya.
Cara membuat Fitur "Baca Juga" atau "Related Post" Otomatis di Blogger

Nah mungkin itu saja yang dapat saya sampaikan mengenai tips atau tutorial Cara membuat Fitur Baca Juga atau Related Post Otomatis di Blogger mudah - mudahan artikel ini dapat bermanfaat bagi anda yang membutuhkannya, mohon maaf bila ada kesalahan dalam penulisan artikel dan pembahasan jika ada yang masih kurang jelas atau kurang paham silahkan komentar dibawah ya.

Jangan lupa Subscribe Channel YouTube saya Ewing Tutorial untuk mendapatkan informasi tutprial lainnya lewat video tutorial yang saya bagikan.


LihatTutupKomentar