Selamat datang di Kios-Tutorial

Membuat Artikel Terkait Tanpa Gambar Di Bawah Postingan 1

Sunday, May 17, 20150 komentar

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

Membuat Artikel Terkait Tanpa Gambar Di Bawah Postingan 1Berbeda 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("http://1.bp.blogspot.com/-Kxc1tTmVeew/VVhK5s0Ic1I/AAAAAAAAAO8/QDe64xUl4Ig/s1600/icon%2Brelated%2Bpost1.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.
Share this article :

Post a Comment

- Maaf, komentar LINK AKTIV / IKLAN akan saya HAPUS
- Komentar sara / spam akan saya hapus
- Jika ada link gambar yang mati laporkan disini
- Berkomentarlah dengan bijak sesuai dengan artikel
- Komentar anda merupakan undangan buat saya

 
Support : Cara Gampang | Creating Website | Johny Template | Mas Templatea | Pusat Promosi
Copyright © 2013. Tutorial Tips & Trik - All Rights Reserved
Template Created by Creating Website Re-Design by Kios
Proudly powered by Blogger