Cara menyembunyikan suatu widget tertentu pada blog - Jika sobat mempunyai sebuah blog dan pada blog sobat terdapat banyak widget tentu saja akan berdampak pada kecepatan blog tersebut saat mencoba meloadnya, dan pastinya ini juga akan berimbas atau berdampak terhadap trafiknya juga. karna menurut saya tidak sedikit orang yang mau menunggu saat mencoba mencari sesuatu di internet termasuk juga saya hehee.. untuk itu cara ini sangat penting untuk diterapkan, karna selain mempercepat loading pada blog cara ini juga dapat membantu kita untuk memilah dan memilih widget yang layak ditampilkan (memunculkan) dan menyembunyikan pada halaman tertentu.. Oiya cara ini juga dapat kita fungsikan agar suatu widget yang ada pada blog kita hanya tampil pada desktop ataupun mobile version loh, jadi kita juga dapat memunculkan dan menyembunyikan widget yang kita pilih supaya tampil atau sembunyi jika di akses melalui mobile phone ataupun versi desktop
Lalu bagaimana cara untuk menampilkan ataupun menyembunyikan widget pada header, sidebar, footer atau postingan html agar dapat muncul pada halaman tertentu?
Cara Menampilkan dan Menyembunyikan Elemen atau Widget di blogger
disini saya akan mencoba menjabarkan 1 per 1 dari berbagai fungsi jadi sobat bisa memilih sesuka hati sesuai dengan kebutuhanya
Kumpulan Fungsi dan Kegunaan Tag Conditonal Blogspot Versi Desktop
1. Menampilkan widget hanya di Homepage
<b:if cond="data:blog.url == data:blog.homepageUrl">
.......ISI......
</b:if>
2. Menampilkan widget selain di Homepage
<b:if cond="data:blog.url != data:blog.homepageUrl">
.......ISI......
</b:if>
3. Menampilkan widget hanya di Archivepage
<b:if cond='data:blog.pageType == "archive"'>
.......ISI......
</b:if>
4. Menampilkan Widget selain di Archivepages
<b:if cond='data:blog.pageType != "archive"'>
.......ISI.....
</b:if>
5. Menampilkan Widget hanya di Itempages / Postingan
<b:if cond='data:blog.pageType == "item"'>
.......ISI CSS......
</b:if>
6. Menampilkan widget selain di Itempages
<b:if cond='data:blog.pageType != "item"'>
.......ISI......
</b:if>
7. Menampilkan widget hanya di Staticpages
<b:if cond='data:blog.pageType == "static_page"'>
.......ISI......
</b:if>
8. Menampilkan widget selain di Staticpages
<b:if cond='data:blog.pageType != "static_page"'>
.......ISI CSS......
</b:if>
9. Menampilkan widget pada URL atau halaman tertentu
<b:if cond='data:blog.url == "alamatpostingan"'>
.......ISI CSS......
</b:if>
10. Menampilkan widget selain di URL atau halaman tertentu
<b:if cond='data:blog.url != "alamatpostingan"'>
.......ISI CSS......
</b:if>
11. Menampilkan widget hanya halaman muka, tidak terlihat dihalaman posting
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.......ISI CSS......
.......ISI JAVASCRIPT......
</b:if>
</b:if>12. Halaman ERROR
<b:if cond='data:blog.pageType == "error_page"'>
<a expr:href='HALAMAN/LINK_POSTINGAN_ERROR'/></b:if>
13. Menampilkan widget di halaman mobile/seluler
<b:if cond='data:blog.isMobile'>
... Isi ...
</b:if>
14. Menampilkan widget di halaman perambaan label Semua/Umum
<b:if cond='data:blog.searchLabel'>
-----Isi-----------
</b:if>
15. Menampilkan widget di halaman perambaan label Tertentu/Spesifik
<b:if cond='data:blog.searchLabel == "NAMA LABEL"'>
-----Isi-----------
</b:if>
16. Menampilkan widget di halaman perambaan Keyword
<b:if cond='data:blog.searchQuery == "KEYWORD"'>
-----ISI-----------
</b:if>
17. Menampilkan widget di halaman Posting Pertama
<b:if cond='data:post.isFirstPost'>
-----ISI-----------
</b:if>
Contoh cara penggunaan :
<b:widget id='HTML2' locked='false' title='' 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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Ingat! Jika sudah menyisipkan kodenya jangan lupa Simpan Perubahan pada template sobat
Cara menggunakan Tag Conditonal Blogspot untuk Versi Mobile/Seluler (Agar widget hanya tampil atau sembunyi saat dibuka di Browser Mobile)
Tag conditional untuk menampilkan pada versi mobile
<b:if cond='data:blog.isMobileRequest == "true"'>
Tag conditional untuk menyembunyikan di versi mobile
<b:if cond='data:blog.isMobileRequest == "false"'>
Berikut cara menggunakannya
Script di atas disimpan diatas widget,css,html,java script,jquery kemudian di akhir script yang akan di sembunyikan atau di tampilkan bungkus dengan penutup </b:if> agar berfungsi dengan baik.
Contoh penggunaan nya seperti di bawah ini
<b:if cond='data:blog.isMobileRequest == "true"'> disini tempatnya script nanti yang akan di sembunyikan atau di tampilkan</b:if>
Contoh penggunaanya
- Pertama sebelum melakukan tutorial ini sobat harus mengetahui dulu kode html dari widget yang ingin disembunyikan pada tampilan mobile, untuk mengetahuinya cukup mudah yaitu tinggal masuk ke tata letak lalu klik edit pada widget yang ingin disembunyikan dan lihat dibagian kode HTML di bagian URL tersebut, (biasanya ada dibagian akhir).
- Jika sudah diketahui selanjutnya masuk ke menu template lalu pilih "Edit HTML", kemudian untuk cara cepatnya mencari kode tersebut bisa klik menu "lompat ke widget" lalu pilih kode widget yang sudah dilihat di tata letak.
- Jika sudah ketemu silahkan klik tanda panah kecil dibagian nomor, maka otomatis akan membuka seluruh kode widget tersebut. Disini biasanya akan terdapat lagi tanda panah setelah sobat klik tanda panah pertama, silahkan klik lagi.
- silahkan tambahkan kode CSS berikut untuk menyembunyikan widget tersebut di tampilan mobile yang sudah saya tandai dengan warna merah.
<b:widget id='HTML11' locked='false' title='' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- 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:if>
</b:includable>
</b:widget>
Terakhir tinggal simpan deh template dan coba sekarang cek di smartphone sobat.
Semoga bermanfaat yah, apabila ada masukan baik kritik pesan dan komentar silahkan sampaikan pada kolom komentar dibawah guna menyempurnakan artikel ini. trimakasih
Semoga bermanfaat yah, apabila ada masukan baik kritik pesan dan komentar silahkan sampaikan pada kolom komentar dibawah guna menyempurnakan artikel ini. trimakasih
Beri Komentar Tutup comment