Membuat Artikel Terkait Tanpa Gambar Di Bawah Postingan 1

Related Posts Fast Loading - Mungkin beberapa template bawaan blogger atau platform yang lain sudah menyertakan fasilitas ini, tapi ada pula yang tidak. Membuat artikel terkait memang banyak sekali caranya, karena saya sendiri sampai bingung mau pilih yang mana saking banyaknya. Tapi bagi saya, cara mana saja boleh asal tidak membuat blog kita jadi LOLA alias Loading Lama. 

Artikel terkait tidak hanya sebagai penghias di akhir postingan atau hiasan footer saja, tapi fungsinya lebih dari itu. Jika kita memasang artikel terkait secara otomatis artikel-artikel kita yang mempunyai label sama akan muncul dan ini adalah salah satu teknik untuk meningkatkan pageview halaman. Sedangkan model dari artikel terkait ada 2 macam yaitu artikel terkait dengan gambar dan artikel terkait tanpa gambar. 

• Menyembunyikan Iklan Yang Muncul Diberanda

Sebenarnya template yang saya pakai (johny wuzz asli) ini sudah tersedia artikel terkait pada bagian akhir artikel. Tapi entah kenapa tiba-tiba isi dari artikel terkait jadi hilang. Akhirnya untuk beberapa waktu saya biarkan saja kosong, yang ada hanya tulisan Artikel Terkait saja. Tapi setelah jalan-jalan ke rumah mbah gugel akhirnya saya menemukan solusi untuk mengganti tampilan dari artikel terkait ini. Dan hasilnya bisa anda lihat di bagian bawah postingan ini.

Berbeda dengan artikel terkait bawaan Johny Wuzz, kalau aslinya artikel terkait pada template ini berupa gambar, namun dengan berbagai pertimbangan saya menggantinya hanya dengan tulisan saja (judul artikel yang tampil). Jika berminat silahkan ikuti langkah-langkahnya di bawah ini :

Membuat Artikel Terkait Loading Cepat

1. Login ke akun blog anda

2. Pilih Template, lalu Edit HTML

3. Gunakan CTRL+F untuk pencarian cepat, dan temukan kode berikut ]]></b:skin>

4. Copy kode di bawah ini dan Paste tepat di atas ]]></b:skin>

/* Artikel Terkait Loading Cepat
--------------------------------- */
#related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arial,serif;margin-bottom:0px;}
#related-postsku a{text-decoration:none;}
#related-postsku a:hover{text-decoration:none;}
#related-postsku ul{border:medium none;margin:10px 0px 10px 0px;padding:0;}
#related-postsku ul li{display:block;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuqjnSGzGcofvtSgnOjOZeeQwr8gzXeUp73QTwwUcSdnYpy_bjvljevls4Yj0LUzRWUv806_o5hB9X-SI_NlHTzxew3rgJOEj7FeeDF8BXDsIO7eE66CLAhGEpQORjDSVwjR2CuGMX6Znx/s1600/icon+related+post1.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #cccccc;}

**Silahkan ganti URL gambar warna ungu di atas jika ingin merubah icon

5. Lalu cari kode </head> dan Copy kode di bawah ini lalu Paste di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

**Jika template anda sudah menggunakan JQuery yang lain, abaikan langkah ini.

6. Kemudian Copy kode di bawah ini dan Paste tepat di atas </head>

<!-- Related Post Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');}//]]>
</script>
</b:if>
<!-- Related Post End -->

7. Selanjutnya, cari kode ini <div class='post-footer'>. Jika ada 2 pilih yang nomer 2. Lalu Copy kode di bawah ini dan Paste tepat di atas <div class='post-footer'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postsku'>
<font style='font-size:19px;color:#CC333B;font-family:Arial;'><b>Artikel Terkait: </b>
</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'/><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=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>

**Silahkan ganti tulisan ungu di atas jika tidak sesuai

• 19px = ukuran tulisan "ARTIKEL TERKAIT"
• #CC333B = warna tulisan "ARTIKEL TERKAIT"
• Artikel Terkait: = ganti kata-kata sesuai selera anda
• 5 = jumlah artikel yang di tampilkan

Setelah semua dirasa benar, silahkan save template anda dan lihat hasilnya. Jika terjadi error silahkan kembali ke Edit Template dan klik tombol UNDO. Bagi anda yang ingin membuat model artikel terkait berbeda dengan contoh di atas, silahkan tunggu updatenya hanya di kios-tutorial.tk. Selamat mencoba dan semoga berhasil.