Supaya ngga kelupaan lagi... Langsung kita buka layar pertunjukkan trik blogger yang bertitle membuat related posts dinamis (kaya film aja) :
- Login dulu ke account blogger kamu.
- Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".
- Copy script berikut dan paste di atas kode </head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(){var b=Math.floor((relatedTitles.length-1)*Math.random());var a=0;document.write("<ul>");while(a<relatedTitles.length&&a<20){document.write('<li><a href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
//]]>
</script>
Catatan :- Kode yang berwarna merah merupakan jumlah judul posting yang ingin ditampilkan.
- Javascript di atas sudah dikompres melalui Online YUI Cimpressor.
- Masih dalam "Edit HTML", cari kode di bawah 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>
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.<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>
- Jika sudah ketemu, sisipkan kode berwarna merah di antara kode di atas.
<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&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Catatan :Sesuaikan kode yang berwarna biru dengan jumlah judul blog yang ingin ditampilkan dalam javascript related posts.
- Simpan dulu template kamu
- Pilih tab Tata Letak --> Elemen Halaman --> buatlah elemen baru atau "TambahGadget" dalam blog kamu (entah itu di sidebar, footer, atas posting, bawah posting).
Trik tambahan
Untuk menambah elemen baru yang belum ada di atas atau di bawah posting, trik bloggernya adalah sebagai berikut :
Cari kode dibawah ini
<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
...dan seterusnya ...
</b:widget></b:section>
Apabila kamu ingin menambah elemen di atas atau di bawah posting cukup dengan menambahkan kode :
<b:section class='main' id='main1' showaddelement='yes'/>
- Di atas posting --> letakkan kode yang berwarna hijau di atas kode yang berwarna merah.
- Di bawah posting --> letakkan kode yang berwarna hijau di bawah kode yang berwarna merah.
Coba lihat Tata Letak --> Elemen Halaman (Terdapat elemen baru di atas atau di bawah elemen posting)
- Jika sudah membuat elemen baru --> Tambah Gadget --> pilih HTML/JavaScript dalam widget atau gadget, kemudian masukkan kode berikut :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
removeRelatedDuplicates();
printRelatedLabels();
</script>
- Jangan lupa diberi judul (ex : Posting yang berkaitan)
- Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget.
- Cari kode yang sesuai dengan judul widget related posts yang kamu masukkan, seperti pada contoh di atas judulnya adalah Posting yang berkaitan.
- Tambahkan kode sisipan berwarna merah seperti di bawah :
<b:widget id='HTML111' locked='false' title='Posting yang berkaitan' 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>
Catatan :<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>
Untuk kode id='HTML111' abaikan saja, karena tiap template mungkin beda-beda.
- Jangan lupa disimpan
Posting yang berkaitan :
(Sumber : Cara menampilkan posting yang berkaitan (Related Posts) by O-OM)
Selamat membuat related posts dinamis...
hai….admin slam kenal ya,ni pendatang baru.semangat para bloger dan maju terus.
BalasHapusto tika : salam kenal juga. Thanks, sami-sami :D
BalasHapussalam kenal bos...
BalasHapusmampir...
http://dkarimun.blogspot.com
salut deh sama pakar html
BalasHapusmanatab sob
BalasHapuswah.. jadi jga.. good job
BalasHapus