Selasa, 24 Agustus 2010

Tutorial menghilangkan salah satu widget sidebar di home page

kemarin aku baru dapat Ilmu, selalu daat Ilmu baru dari masternya blogger, Kang Rohman, Tentang cara menghilangkan salah satu widget sidebar di home page, Contohnya bisa anda lihat pada Tampilan Single Post Blog saya Dan Homepage Blog saya, Tapi pasti dari anda yang membaca artikel ini pasti bertanya, apa bedanya Single post dan homepage?, Jawabannya bisa anda lihat pada Uraian berikut:

Contoh:
HomePage  : http://onnyjuga.blogspot.com
Single post  : http://onnyjuga.blogspot.com/2010/08/buat-halaman-intro-selamat-datang-di.html
jadi HomePage adalah tampilan utama kita, Dimana beberapa artikel atau postingan terupdate kita tertampil di halaman utama kita (untuk pengaturan standar), Biasanya yang minimal 1 artkel dan maksimalnya bergantung setingan kita(tampilan bisa lebih dari satu), Sedangkan Single post adalah tampilan dimana ketika Link judul postingan artkel kita klik, maka yang muncul hanya artikel/posting yang kita pilih (tampilan hanya 1 artikel saja, sesuai keinginan).
Baik, langsung aja ke materi pokok, kita bisa menghilangkan salah satu widget di bagian Homepage saja, sedangkan di Single Post Widget Bisa Tampil Lagi (atau sebaliknya), Bagaimana caranya? Cekiprot
   1. Silahkan login ke blogger dengan ID anda.
   2. Klik Rancangan.

3. Klik menu Edit HTML
 4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
 5. Silahkan cari kode berikut/ yang Mirip: 
cari
<b:widget id='HTML6' locked='false' title='site info' type='HTML'/>
<b:widget id='HTML9' locked='false' title='download disini' type='HTML'/>
<b:widget id='HTML5' locked='false' title='my visitor' type='HTML'/>
->>perlu diingat, tidak semua blog memiliki memiliki kode yang sama dengan kode diatas, cari yang mirip seperti diatas,

->> dari contoh diatas maka bisa saya tunjukkan,
* HTML6 - site info
* HTML9 - download disini
* HTML5 - my visitors
yang harus anda perhatikan adalah warna merah dan warna Orange, yang berwarna merah sebagai ID widget yang berwarna Orange sebagai judul widget anda.
Terus apa hubungannya? jangan sampai berhenti disini dulu, kita akan buat Kode ID untuk CSS
HTML6
Karena ini adalah sebuah ID, di dalam kode CSS nanti hanya perlu ditambahkan tanda pagar ( # ) di depannya, sehingga menjadi seperti ini :
#HTML6

Membuat kode CSS

Kode CSS dasar untuk membuat sebuah ID jangan dI munculkan dalam sebuah halaman web adalah seperti ini :
#ID {display:none}
Karena ID nya tadi sudah di ketahui yaitu #HTML6, maka kodenya menjadi seperti ini :
#HTML6 {display:none}
Yang menjadi masalah adalah kita tidak ingin widget tersebut secara permanen tidak di tampilkan, tapi hanya di home page saja, sedangkan di halaman single post bisa muncul. Solusi dari ini adalah menggunakan fungsi if condition di blogger.

Fungsi CSS menggunakan If Condition

Metode yang akan di gunakan pada tutorial kali ini adalah penggunaan CSS dengan fungsi if condition. Kode untuk menampilkan suatu widget sidebar hanya tampil pada single post adalah sebagai berikut :

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>

Karena tadi ID nya sudah didapatkan yaitu #HTML6 ( hanya contoh ), maka kodenya menjadi seperti ini


<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#HTML6{display:none}
</b:if>
</style>

Dimana menempatkan kode tersebut? anda bisa menyimpannya dibawah kode ]]></b:skin> atau diatas kode </head> Masih belum paham? berikut cara pemasangan lengkapnya :
1. Silahkan login ke blogger dengan ID anda.

2. Klik Rancangan 
3. Klik Edit HTML
4. Cari Kode ]]></b:skin>
5. Copy lalu paste kode berikut di bawah kode  ]]></b:skin> ( ingat! ID nya harus anda ganti sesuai dengan template blog anda )  
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>
6. Klik tombol SIMPAN SETELAN.  
7. Selesai. Silahkan lihat hasilnya.  
sudah selesai, itu aja kok initinya, cuma kode CSS yang udah saya bahas tadi itu lho. Tidak ada yang aneh-aneh. Tapi Ilmu terus berkembang mengingat seseorang yang memiliki sifat selalu kurang puas, Timbul lagi pertanyaan baru, Bagaimana jika sebaliknya, saya ingin menghilangkan widget sidebar pada single post tidak pada homepage (kebalikan dari judul artikel ini), kira-kira bisa pa gak ya????/
Jawabannya sangat-sangat sederhana, perhatikan kode berikut : 
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>
Anda hanya perlu mengganti tanda seru ( ! ) yang kang Rohman cetak merah dengan tanda sama dengan ( = ), maka fungsi kode tersebut akan bersifat terbalik. 
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>
Cuma gitu aja kok, gak sulit kan.
Terima kasih, selamat mencoba. semoga artikel ini bermanfaat. jangan Lupa Klik iklan yang ada di blog saya. Contoh bisa anda lihat di blog saya ini.

0 Comments
Tweets
Komentar

0 komentar:

Leave a Comment

Klik Iklannya Donk