ASMAN COUNTER

Catatan Belajar Dari Kendawangan

  • RSS
  • Delicious
  • Facebook
  • Twitter

Twitter

Artikel Terkait Tampil di Side Bar

Posted by AWAN THE KILL - -

Setelah kemarin kita belaja membuat  MENGEMBALIKAN KODE CSS YANG BERANTAKAN kali ini kita akan membuat artikel terkait yang terletak di side bar terinspirasi dari blognya O Om. Dan biasanya artikel ini  diletakkan dibawah postingan.

LANGKAH LANGKAH MEMBUAT ARTIKEL TERKAIT DI SIDE BAR
1. Seperti biasa login dulu ke blogger.
2. Masuk ke Elemen Halaman.
3. Kemudian Tuju Edit HTML.
4. Klik Expand Template Widget.
5. Letakkan kode berikut ini sebelum 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>
6. Kemudian cari kode seperti dibawah ini : 
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
 7. Lalu sisipkan kode yang berwarna merah, sehingga hasilnya menjadi seperti berikut :
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if> </b:loop>
</b:if>
8.  Simpan Template, sampai disini proses Edit HTML sudah selesai. 

9. Sekarang kita menuju Tata Letak, kemudian klik Tambah Gadget pada sidebar.

10. Pilih yang HTML/Javascript, kemudian masukkan kode berikut :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
11.  Jangan lupa beri judul, lalu klik Simpan.Contoh punya saya judulnya : ARTIKEL MENARIK LAINNYA

Sampai disini  sudah selesai pembuatan artikel terkait di sidebar. Namun permasalahannya artikel terkait akan selalu muncul di halaman depan blog kita, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka kita harus mengubah beberapa kode lagi

12. Klik Edit HTML.

13. Klik Expand Template Widget.

14. Cari kode yang seperti ini, dan sisipkan kode yang berwarna merah :
<b:widget id='HTML11' locked='false' title='ARTIKEL MENARIK LAINNYA' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
15. Kemudian klik Simpan Template.

16. Untuk tulisan HTML 11 dan ARTIKEL MENARIK LAINNYA Hanya mengambil dari template saya, silahkan sobat sesuaikan dengan template dan judul artikel terkait yang tadi sudah sobat buat. 

Sumber : miscah.blogger