Mengatur Tampilan Widget Blogger

Terinspirasi setelah menambahkan Widget Linkwithin, maka muncul-lah ide untuk menulis artikel ini, karena setelah widget ini terpasang ternyata Widget Linkwithin ikut tampil pada Homepage Blog.  Hal seperti ini akan banyak dialami jika kita menggunakan widget javascript eksternal selain widget standart yang telah disediakan oleh blogger.  Untuk mengontrol atau mengatur tampilan widget ini, dibutuhkan sedikit tweak ekstra pada kode dokumen HTML template, agar template ini dapat di atur, apakah akan di tampilkan pada Homepage atau tidak, bahkan dapat diatur untuk tampil pada halaman artikel tertentu.

Berikut ini adalah, kode yang perlu disisipkan pada dokument HTML template untuk mengatur tampilan widget.  Dua baris kode dibawah ini yang ditulis dengan warna biru tebal akan mengatur widget anda apakah akan ditampilkan pada homepage atau tidak atau akan ditampilkan pada halaman artikel tertentu.

Kode di bawah ini akan mengatur widget untuk tampil pada Homepage blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>

WIDGET CODE

</b:if>

Kode di bawah ini untuk menyembunyikan widget agar tidak tampil pada Homepage blog

<b:if cond='data:blog.pageType == "item"'>

WIDGET CODE

</b:if>

Kode di bawah ini untuk menampilkan widget hanya pada halaman artikel tertentu.

<b:if cond='data:blog.url == "Masukkan URL Artikel anda di sini"'>

WIDGET CODE

</b:if>

Kode di bawah ini untuk menyembunyikan widget agar tidak tampil pada halaman artikel tertentu.

<b:if cond='data:blog.url != "Masukkan URL Artikel anda di sini"'>

WIDGET CODE

</b:if>

Cara menyisipkan kode di atas pada dokument HTML template anda.

Selain diperuntukkan bagi widget eksternal, kode di atas dapat pula diterapkan untuk mengatur tampilan pada widget bawaan blogger.  Ikuti prosedur di bawah ini untuk menyisipkan kode yang mengontrol tampilan widget pada dokumen HTM template anda.

• Login ke blogger dengan ID anda

• Pilih menu Template, sebelum melakukan update atau perubahan pada template biasakan untuk melakukan Bakup Template terlebih dahulu.

• Beri tanda ✔ check pada kotak Expand widgets templates

• Cari title widget anda (contoh widget Linkwithin), untuk mempermudah pencarian tekan tombol Control+F pada keyboard dan masukkan title widget anda pada kotak search browser yang anda gunakan, jika ditemukan kemungkinan kode akan seperti di bawah ini.

<b:widget id='HTML3' locked='false' title='Linkwithin' type='HTML'>
<b:includable id='main'>
  <!-- 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>

• Jika sudah menemukan kode HTML widget anda, kemungkinan kodenya akan seperti kode yang ditampilkan di bawah, perhatikan dua baris kode yang ditulis dengan warna biru tebal,  anda hanya perlu menyisipkan kode pengendali widget yang ditulis berwarna merah tebal tepat dibawah code <b:includable id='main'> dan tutup dengan kode </b:if> seperti di bawah ini.  Contoh ini adalah tweak yang dilakukan untuk menyembunyikan widget pada Homepage blog.

<b:widget id='HTML3' locked='false' title='Linkwithin' type='HTML'>  
<b:includable id='main'>  
<b:if cond='data:blog.pageType == "item"'>
  <!-- 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>

• Jangan lupa menekan tombol Save Template untuk menyimpan perubahan

• Lakukan hal yang sama untuk mengendalikan widget yang anda inginkan.

Note :

Untuk widget eksternal type HTML yang tidak diberi title, agar mudah melakukan pencarian pada dokumen HTML template anda, sebaiknya untuk sementara diberi title terlebih dahulu, agar title dapat digunakan sebagai kata kunci pencarian kode, setelah template selesai diupdate hapus kembali title tersebut. 

 

Semoga Bermanfaat.. :)