Sabtu, 01 Januari 2011

Cara Membuat Tampilan Widget Berbeda Antara Homepage dan Isi Blog


Mungkin di antara temen-temen blogger ada yang pernah melihat sebuah blog yang tampilan widgetnya berbeda antara widget yang di homepage and setelah masuk salah satu artkel (Isi blog). Bingung yach..? :)) Maksudnya?

Maksudnya gini, dalam hal widget, di homepage ada beberapa widget yang tidak muncul dan widget sendiri baru muncul saat masuk ke halaman posting. Begitu juga dengan sebaliknya, ada beberapa widget yang hanya bisa tampil di halaman awal (homepage) dan setelah masuk ke halaman posting widget tersebut tidak muncul. Hemm... sudah ngerti kan maksudnya..? Jadi intinya, kita tidak menampilkan semua widget yang kita pasang di sidebar. jadi, cara ini sedikit efektif untuk menghemat waktu reload blog.

Trus caranya?

Untuk membuat itu semua kita harus melakukan sedikit bedah pada template blog:

1. Membuat Widget Hanya Tampil Di Homepage (dan hilang di halaman posting)
  • Tentukan widget/pilih widget yang ingin di tampilkan
  • Jika widget di buat tanpa nama, silahkan di page element kalian isi dulu judul widgetnya, agar pencarian di (Edit HTML) mudah di temukan.
  • Cari judul widget tersebut di di halaman HTML template kalian (gunakan Ctrl+F) untuk memudahkan pencarian
  • Maka secara keseluruhan widget tersebut memiliki struktur (code HTML) seperti dibawah ini:


<b:widget id='HTML14' locked='false' title='Judul Widget Kamu' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>

Catatan :
Untuk huruf yang berwana Merah adalah judul widget kalian
Sedangkan untuk kode yang berwarna Biru adalah kode yang harus kalian sisipkan.
Save, dan lihat hasilnya..

2. Membuat widget tampil di halaman posting (dan hilang di Homepage)

Sebenarnya cara ini sama saja dengan cara yang di atas, hanya saja kode yang kita sisipkan berbeda:


<b:widget id='HTML14' locked='false' title='Judul Widget Kamu' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
Catatan :
Untuk huruf yang berwana Merah adalah judul widget kalian
Sedangkan untuk kode yang berwarna Biru adalah kode yang harus kalian sisipkan.
Hemmm.. mudah kan.. selamat mencoba an salam sukses.. :)

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Silahkan tinggalkan komentar untuk postingan ini. Untuk komentar yang tidak mendidik akan segera didelete. No SPAM, NO SARA! Terimakasih. by : bLoGnYa AnAk InPurE