Cara Membuat Artikel Terkait / Related Post

Cara Membuat Artikel Terkait / Related Post, pada kesempatan kali ini saya akan berbagi cara membuat Artikel Terkait yang hanya menampilkan judul postingannya saja, ini memenuhi permintaan sahabat yang berkomentar diblog ini. Sahabat tersebut sebenarnya meminta untuk dikirim langsung lewat Email namun ga ada salahnya saya punya inisiatif mempostingnya biar lebih jelas dan mungkin ada sahabat lain yang membutuhkannya. sahabat tersebut meminta script artikel terkait seperti pada blog ini;

sebelum saya pasang artikel terkait diblog ini yang ada gambar/thumbnailnya namun setelah dipikir-pikir artikel terkait seperti itu apalagi yang bergerak / pake marque ternyata kurang efektif karena kelihatannya hanya sekilas, kalau memakai seperti ini mungkin pengunjung yang ingin mencari artikel lainnya dimudahkan dalam pencariannya.

Artikel terkait ini sangat cocok kalau dipadukan dengan Cara Membuat 2 kolom widget dibawah postingan  karena ini sesuai permintaan sahabat saya.

Langkah-langkah Membuat Artikel Terkait / Related Post sebagai berikut;

Langkah Pertama :

• Seperti biasa saja login ke blogger
• klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin.
• Klik edit HTML klik lanjutkan centang Expand Template Widget kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.

#related{height:160px;overflow:auto}
#related ul{margin:0;padding:5px 5px 5px 25px}
#related li{font-size:10px;margin:0;padding:0;line-height:15px;text-align:left}

• Selanjutnya cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>

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

• Atau kalau sobat mau yang simple boleh menggunakan script dibawah ini sebagai ganti kode diatas, kode dibawah ini sudah saya hosting namun kalau sobat mau menghosting sendiri script diatas silahkan sobat hosting terlebih dahulu.

<script src='http://my-project-favicon.googlecode.com/files/Related-post.js' type='text/javascript'/>

Langkah Kedua

Pada langkah kedua ini kalau sobat mau memasangnya pada kolom yang telah disediakan atau sudah memasang Cara Membuat 2 kolom widget dibawah postingan maka sobat tinggal memasukan kode dibawah ini pada kolom yang telah disediakan pada tutorialtersebut atau pada ( Letakan Widget disini.), namun jika sobat mau memasang secara langsung maka sobat cari kode <data:post.body/> kemudian letakkan script berikut ini di bawah kode <data:post.body/> apabila menemukan kode tersebut lebih dari satu maka simpan kode dibawah ini setelah kode  <data:post.body/> yang kedua.

<div style='font-size:12px;text-align:center;padding-top:0px;background:#000;'><font color='#ffffff'><b>BACA JUGA ARTIKEL TERKAIT LAINNYA</b></font></div>
<div id='related'>
    <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=100&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if> </div>

Keterangan;
- height:160px itu adalah tingginya sobat bisa sesuaikan.

Itulah Cara Membuat Artikel Terkait / Related Post seperti pada blog ini, semoga berhasil. Oh iya mungkin sobat mau artikel terkait lainnya Membuat Atikel Terkait dengan Gambar thumbnail bergerak

Sumber: http://azzam10.blogspot.com/2012/08/cara-membuat-artikel-terkait-related-post.html