Menyembunyikan Salah Satu Widget - berikut adalah tutor cara Menyembunyikan Salah Satu Widget.
Pertama-tama carilah kode yang mirip-mirip seperti ini :
<b:widget id='HTML6' locked='false' title='Tentang Kami' type='HTML'/>
<b:widget id='HTML9' locked='false' title='Langganan Template Via Email' type='HTML'/>
<b:widget id='HTML5' locked='false' title='Langgan artikel Via Email' type='HTML'/>
Setiap blog pasti berbeda kodenya, makanya saya tulis yang mirip dengan kode diatas. Copy kode tadi pada pada note pad atau sejenisnya.
Dari contoh diatas, terdapat 3 widget, dan yang penting harus anda perhatikan adalah yang tercetak merah dan hitam yaitu :
HTML6 - Tentang Kami
HTML9 - Langganan Template Via Email
HTML5 - Langgan artikel Via Email
Yang dicetak merah adalah ID dari widget sidebar dan yang dicetak hitam adalah judul widget atau judul yang ada di sidebar. Dari sini tentunya kita sudah bisa mengetahui ID dari masing-masing widget yang ada, dan langkah selanjutnya adalah widget mana yang di inginkan agar di halaman home page tidak muncul, namun pada halaman single post widget tersebut bisa muncul.
Agar tutorial ini tidak buntu, Okelah kalau begitu kita ambil contoh untuk ID ini :
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 :
Karena tadi ID nya sudah didapatkan yaitu #HTML6 ( hanya contoh ), maka kodenya menjadi seperti ini :
Dimana menempatkan kode tersebut? anda bisa menyimpannya dibawah kode ]]></b:skin> atau diatas kode </head>
Masih belum paham? berikut cara pemasangan lengkapnya :
Namun, mungkin diantara anda ada yang bertanya secara terbalik, bagaimana menampilkan suatu widget sidebar hanya di home page saja, sedangkan di halaman single post widget tersebut tidak muncul ( hilang ) ?
Jawabannya sangat-sangat sederhana, perhatikan kode berikut :
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#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 == "item"'>
#ID{display:none}
</b:if>
</style>
Terima kasih buat Kang Rohman yang mau bagi-bagi ilmu tentang cara "Menyembunyikan Salah Satu Widget" ke Cut Info.
Pertama-tama carilah kode yang mirip-mirip seperti ini :
<b:widget id='HTML6' locked='false' title='Tentang Kami' type='HTML'/>
<b:widget id='HTML9' locked='false' title='Langganan Template Via Email' type='HTML'/>
<b:widget id='HTML5' locked='false' title='Langgan artikel Via Email' type='HTML'/>
Dari contoh diatas, terdapat 3 widget, dan yang penting harus anda perhatikan adalah yang tercetak merah dan hitam yaitu :
HTML6 - Tentang Kami
HTML9 - Langganan Template Via Email
HTML5 - Langgan artikel Via Email
Yang dicetak merah adalah ID dari widget sidebar dan yang dicetak hitam adalah judul widget atau judul yang ada di sidebar. Dari sini tentunya kita sudah bisa mengetahui ID dari masing-masing widget yang ada, dan langkah selanjutnya adalah widget mana yang di inginkan agar di halaman home page tidak muncul, namun pada halaman single post widget tersebut bisa muncul.
Agar tutorial ini tidak buntu, Okelah kalau begitu kita ambil contoh untuk ID ini :
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 :
Karena tadi ID nya sudah didapatkan yaitu #HTML6 ( hanya contoh ), maka kodenya menjadi seperti ini :
Dimana menempatkan kode tersebut? anda bisa menyimpannya dibawah kode ]]></b:skin> atau diatas kode </head>
Masih belum paham? berikut cara pemasangan lengkapnya :
- Silahkan login ke blogger dengan ID anda.
- Klik Rancangan.
- Klik tab Edit HTML.
- Cari kode ]]></b:skin>
- Copy lalu paste kode berikut di bawah kode ]]></b:skin> ( ingat! ID nya harus anda ganti sesuai dengan template blog anda ).
- Klik tombol SIMPAN SETELAN.
- Selesai. Silahkan lihat hasilnya.
Namun, mungkin diantara anda ada yang bertanya secara terbalik, bagaimana menampilkan suatu widget sidebar hanya di home page saja, sedangkan di halaman single post widget tersebut tidak muncul ( hilang ) ?
Jawabannya sangat-sangat sederhana, perhatikan kode berikut :
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#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 == "item"'>
#ID{display:none}
</b:if>
</style>
Terima kasih buat Kang Rohman yang mau bagi-bagi ilmu tentang cara "Menyembunyikan Salah Satu Widget" ke Cut Info.
0 komentar:
Posting Komentar
Assalamu'alaikum pengunjung...
Silahkan komen.. tapi yang sopan ya..!