Revisi cara menambahkan related posts sederhana ke dalam blogger

Revisi tutorial singkat ini kami lakukan karena kami telah mengecewakan seorang pengunjung yang sangat berharga, juga sebagai bentuk permohonan maaf kami atas kekacauan yang telah terjadi akibat 'kesalahan dan kelalaian instruksi' dalam menuliskan petunjuk yang bisa saja berakibat fatal bagi sebuah template (tergantung seberapa penting pengeditan dilakukan). Kepada Mbak Nila Minata dengan setulusnya kami menyampaikan permintaan maaf.

Related posts simpel sederhana
Related posts simpel sederhana - ilustrasi by editblogtema.

Kedepannya kami berjanji akan sangat berhati hati terhadap jenis konten yang akan kami suguhkan. Kami juga sangat ber-terimakasih karena kunjungan Mbak Minata telah secara langsung maupun tidak langsung telah  memberikan kritik positif dan perbaikan yang sangat berharga.

Related posts pada blogger mampu meningkatkan performa blog, membuat pengunjung berada lebih lama membaca konten blog dan mengurangi efek bounching (pentalan) akan tetapi tentu saja dengan related post yang bagus cepat dan ringan.
Related posts simpel
Related posts simpel by editblogtema.

Dan ini dapat di terapkan dengan baik pada template bawaan (default) terbaru blogger seperti Contempo, SOHO, Emporio dan Notable atau template template blogger yang lebih tua.

Artinya dengan sederhana setiap orang dapat membuat template premium mereka sendiri setahap demi setahap. 

Untuk menjadi cepat dan ringan segalanya harus sederhana. namun sederhana bukan berarti tanpa style. Mari kita langsung saja memulai pembuatannya:

1. Masuk kepengaturan blogger, pilih tema, pilih edit HTML
2. Pada halaman editor HTML (yang terdiri dari kode kode xml, HTML, CSS dan Javascript, cari kode </head> lalu letakan kode berikut di bawah tepat diatasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: 27px;
font-weight: normal;
color: #FF69B4;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 15px;
color: #333;
text-transform: capitalize;
border-bottom:1px dotted #FF69B4;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #f0f0f0;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #F8F8FF;
border-left: 5px solid #FF69B4;
}
#related-posts li {
padding: 0px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=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];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;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]=relatedTitles[i]}}relatedTitles=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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script></b:if>

3. Masih di dalam halaman editor HTML blogger cari kode berikut: <data:post.body/> jika ada terdapat beberapa buah pilih yang kedua atau yang ketiga (sampai ketemu yang tepat) dan letakan kode di bawah ini tepat di atasnya  maaf salah (editor redaksi), maksud Anissa tepat dibawah kode <data:post.body/> yang disebutkan tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a href='https://www.editblogtema.net/2018/11/related-post-keren-generik-yang-sangat.html' rel='nofollow' style='font-size: 9px; color: #CECECE; float: right;'>Artikel terkait simpel</a></div></b:if>

Save template. Contoh pada editblogtema.

8 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Yaaa.. saya udah pakai cara lain baru baca ini, kemaren juga sempat bikin related post gitu, tapi masih bingung ngatur yang mobile nya, jadi berantakan banget, akhirnya dengan susah payah saya cari kode tersebut dan saya hilangkan lagi kodenya ckckckck

    BalasHapus
    Balasan
    1. mantaplah ituuu he he eh

      Hapus
    2. Betul .. , itu mantap 😣

      Hapus
    3. Sebenarnya sedih sih soalnya aku tuh belum pinter ilmu utak atik html ...

      Hapus
  2. saya coba tapi jadinya malah posisi related posts nya di dalam post, di bawahnya judul gitu hehe lucu, terus sy hapus lg deh gajadi

    BalasHapus
    Balasan
    1. Minta maaf ternyata tutorial diatas terdapat kesalahan penjelasan:

      Meletakan kode tersebut harus di bawah kode

      <data:post.body/>

      bukan di atas-nya!

      Terimakasih kunjungannya ternyata telah memperbaiki tutorial ini!

      Sekali lagi atas nama tim editblogtema kami mohon maaf atas kekacauannya...

      Hapus
  3. Wah terimakasih banyak sudah direvisi.
    Sy seneng bgt krn merasa terbantu dengan tulisan2 di blog ini.
    Meski sy masih pemula, dan mestinya fokus bagusin konten dulu, tp gabisa dipungkiri sy tertarik dengan dunia html dan edit template, jadi blog ini sgt membantu.
    Semoga sy bisa bikin konten sebagus dan sebermanfaat blog ini ya. :)

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak