Minggu, 04 September 2016

Menampilkan dan Menyembunyikan Widget Pada Blogspot


Menampilkan/ menyembunyikan widget tertentu pada halaman index/ post/ static page/ arsip pada blogger perlu dilakukan untuk tujuan tertentu. Tidak hanya widget saja anda bisa menerapkan metode ini pada kode html, css, javascript, video atau kode lain pada blogger.


Semisal anda ingin menampilkan kode pesan popup atau lightbox script hanya tampil pada halaman index saja, atau anda ingin halaman posting anda hanya menampilkan satu kolom atau dua kolom sementara halaman index template anda defaultnya adalah dua kolom atau tiga kolom. Lebih komplex lagi anda ingin membuat halaman statis yang menampilkan demo dari tutorial atau kode script yang sama sekali berbeda dari tampilan halaman index anda.



Berikut kode yang perlu dijadikan panduan untuk mengatur tampilan blog anda sesuai dengan kebutuhan. Anda hanya perlu menambahkan satu baris kode diatas widget atau kode html/css/js/swf atau apapun yang akan anda masukkan kedalam template dan diakhiri dengan kode </b:if>.



  1. Menampilkan/ menyembunyikan widget hanya di halaman index (homepage).
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    .................... kode widget ........................
    </b:if>

  2. Menampilkan/ menyembunyikan widget di semua halaman kecuali halaman index (homepage).
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    .................... kode widget ........................
    </b:if>

  3. Menampilkan/ menyembunyikan widget hanya di halaman arsip saja.
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    .................... kode widget ........................
    </b:if>

  4. Menampilkan/ menyembunyikan widget di semua halaman kecuali pada halaman arsip.
    <b:if cond='data:blog.pageType != &quot;archive&quot;'>
    .................... kode widget ........................
    </b:if>

  5. Menampilkan/ menyembunyikan widget hanya di halaman posting.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    .................... kode widget ........................
    </b:if>

  6. Menampilkan/ menyembunyikan widget di semua halaman kecuali halaman posting.
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    .................... kode widget ........................
    </b:if>

  7. Menampilkan/ menyembunyikan widget hanya di postingan tertentu saja.
    <b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
    .................... kode widget ........................
    </b:if>

  8. Menampilkan/ menyembunyikan widget selain di postingan tertentu.
    <b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
    .................... kode widget ........................
    </b:if>

  9. Menampilkan/ menyembunyikan widget di semua halaman kecuali halaman staticpage.
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    .................... kode widget ........................
    </b:if>

  10. Menampilkan/ menyembunyikan widget hanya di halaman staticpage.
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    .................... kode widget ........................
    </b:if>
Contoh kasus anda menginginkan widget tertentu tidak tampil di halaman homepage. Sebagai catatan saya menggunakan browser mozilla firefox terbaru yang sudah terinstsall addons firebug. 
  1. Buka blog anda pada tab baru kemudian tekan ctrl+shift+c dan gunakan pick element tool untuk mencari id widget pada halaman blog anda. Biasanya setiap widget memiliki kode angka unik tersendiri contoh id=HTML? ('?' adalah angka unik widget yang ingin di target). Catat kode id tersebut. Metode lain anda bisa baca artikel cara mengetahui id widget blogger.
  2. Seperti biasa masuk ke dashboard template edit html anda.
  3. Cari kode </b:skin> dan salin kode dibawah ini di bawah kode </b:skin>. Ganti tanda '?' dengan angka unik id widget anda. Kemudian simpan dan lihat perubahannya.
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style>
    #HTML? {display:none}
    </style>
    </b:if>
Contoh hanya sederhana anda bisa mengembangkannya sesuai kebutuhan. Jika anda masih bingung saya akan update artikel ini dengan disertakan video tutorialnya. Terima kasih.

sumber : viantdblogspot

Tidak ada komentar:

Posting Komentar