Ads Kiri Khusus Desktop

Cara Menyembunyikan Elemen Widget Pada Blog

Generating Link...
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 == &quot;archive&quot;'>
.......ISI......
</b:if>

4. Menampilkan Widget selain di Archivepages

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
.......ISI.....
</b:if>

5. Menampilkan Widget hanya di Itempages / Postingan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
.......ISI CSS......
</b:if>

6. Menampilkan widget selain di Itempages

<b:if cond='data:blog.pageType != &quot;item&quot;'>
.......ISI......
</b:if>

7. Menampilkan widget hanya di Staticpages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
.......ISI......
</b:if>

8. Menampilkan widget selain di Staticpages

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.......ISI CSS......
</b:if>

9. Menampilkan widget pada URL atau halaman tertentu

<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>
.......ISI CSS......
</b:if>

10. Menampilkan widget selain di URL atau halaman tertentu

<b:if cond='data:blog.url != &quot;alamatpostingan&quot;'>
.......ISI CSS......
</b:if>

11. Menampilkan widget hanya halaman muka, tidak terlihat dihalaman posting

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.......ISI CSS......
.......ISI JAVASCRIPT......

</b:if>
</b:if>

12. Halaman ERROR

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<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 == &quot;NAMA LABEL&quot;'>
-----Isi-----------
</b:if>

16. Menampilkan widget di halaman perambaan Keyword

<b:if cond='data:blog.searchQuery == &quot;KEYWORD&quot;'>
-----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 != &quot;&quot;'>
<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 == &quot;true&quot;'>

Tag conditional untuk menyembunyikan di versi mobile

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

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 == &quot;true&quot;'> 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 != &quot;&quot;'>
<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
  • What is Linku?

    safelinku is the security website link or shortener url, you can make your own short link on Linku.ml for free

  • What is Shortener url?

    As the name implies, shortlink or is a short link. Usually these shortlinks are provided by most advertising-based companies, such as Linku.ml and much more. Shortlink own point to shorten a link or url, be it a download link or url to a particular website. For what? of course for easy to remember. For example, I have a link "http: //site*.com/profile.php? HGgyawewihjassd", now I ask, are you easy to memorize the url? there is a once read already memorized and also there are many times read not memorized. Now I try to shorten the url into Linku.ml/iuYS which is shorter and easier to know even though it is a bit complicated, you can customize the shortened url Shortlink or url shortener is very easy to use by its users, because you do not spend a bit, even you who get money.

Ads Kanan Khusus Desktop