Trik Blogger | Related Posts Dinamis

Trik Blogger | Related Posts Dinamis

Posted by rike on 0

Setelah dijelaskan dalam garis-garis besar related posts (GBRP), bahwa trik blogger tentang related posts dapat dibagi dua trik. Yang pertama bersifat dinamis dan kedua bersifat statis. Dalam posting ini OB akan mengulas tentang related posts yang bersifat dinamis.



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

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

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

1. Kode yang berwarna merah merupakan jumlah judul posting yang ingin ditampilkan.


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

• 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&amp;callback=related_results_labels&amp;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'/>

1. Di atas posting --> letakkan kode yang berwarna hijau di atas kode yang berwarna merah.


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

• Jangan lupa diberi judul (ex : Posting yang berkaitan)

Selanjutnya agar related posts tidak tampil di halaman pertama atau hanya tampil apabila kamu mengklik sebuah judul posting, maka diperlukan modifikasi kode lagi [sampai disini sudah pusing apa belum??? ya, ngga lah ... (sambil garuk-garuk kepala)].

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

Untuk kode id='HTML111' abaikan saja, karena tiap template mungkin beda-beda.

• Jangan lupa disimpan

Posting yang berkaitan :

• Trik Blogger | Related Posts Statis

(Sumber : Cara menampilkan posting yang berkaitan (Related Posts) by O-OM)

Selamat membuat related posts dinamis...