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">Catatan :
//<![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>
- 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'>Catatan :
<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>
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...
Artikel Terkait: Trik Blogger | Related Posts Dinamis
Widget
- Penyusunan Dasar Template Blogger.com
- Navigasi Breadcrumbs dengan Microdata
- Widget Posting dan Komentar Terbaru yang Sederhana
- Membuat Halaman Arsip tanpa JavaScript
- Fitur Blogger Konfigurasi Navbar Off
- Trik Membuat Kotak Banner
- Otomatis Update Posting di Facebook dan Twitter
- Widget Update via Twitter
- Cara Tambahkan Mode Energy Saving Untuk Blog atau Website
- Admin Bar Widget untuk Blogger
- 2 Gadget baru untuk Blogger
- Plugin Sosial dari Facebook
- Memasang Widget Google Translate di Tiap Posting
- Trik Blogger | Widget Kontak Kami dengan EmailMeForm
- Memasang Button Show/Hide (Spoiler)
- Menambah Sexy Sliding Sidebar di Blogspot
- Gratis: Social Bookmark Widget di bawah setiap Posting Blog
- Pasang Navbar Statis ala Apture
- Revisi Cara Memasang Top Posting
- Top Komentator Widget
- Recent Comments ala Wordpress versi II
- Random Post Dinamis
- Menambah Big Social Bookmark dibawah posting
- Optimasi Widget yang ditampilkan dalam Blog
- Parse Your Code
Trik Blogger
- Menerapkan Desain yang Responsif
- Formulir Kontak Manual
- Navigasi Breadcrumbs dengan Microdata
- Widget Posting dan Komentar Terbaru yang Sederhana
- Membuat Halaman Arsip tanpa JavaScript
- Memodifikasi Tanggal Posting (date-header)
- Menu Navigasi Horizontal dan Dropdown
- Kustomisasi Setelan pada Preferensi Penelusuran
- Hilangnya Taut Hapus pada Komentar
- Fitur Blogger Konfigurasi Navbar Off
- Membuat Amplop + Perangko Dengan CSS3
- Trik Membuat Kotak Banner
- Membuat Style pada Link dengan CSS3
- Styling menggunakan CSS pseudo-element
- Styling Unordered & Ordered lists
- Kostumisasi Penomoran pada Komentar Blogger™
- Optimasi Kotak Komentar Blogger™
- Kostumisasi Avatar Komentar
- Mengganti Nextprev dengan Judul Posting
- Widget Update via Twitter
- Google Web Fonts
- Dropdown Menu (Navigasi Horizontal) dengan CSS3
- Membuat Menu Navigasi Image
- Admin Bar Widget untuk Blogger
- Animasi Transparent Navbar