Mengatur Tampilan Widget/Gadget Tertentu Di Halaman Tertentu Pada Blog

 

Hallo Blogger,
Pada artikel ini kita akan membahas lagi tentang dunia blogging khususnya dalam mengatur tampilan blog agar menjadi menarik. Pengaturan widget sangat penting bagi sebuah blog karena bagus atau tidaknya tampilan blog tergantung dari widget yang kita atur. Widget juga akan mempengarungi kecepatang loading blog jika terlalu banyak memakai widget dan juga akan mempengaruhi penilai Google AdSense (GA) ketika anda ingin mendaftar ke GA.
Apa Itu Widget ?

Widget atau Gadget merupakan sebuah aplikasi sederhana yang di pasang pada sebuah web atau blog dengan menggunakan beberapa kode seperti HTML, JavaScript, CSS, Ajax dan lainnya. Widget biasanya bisa berupa teks, gambar, flash, video, dan lainnya. Kita pun bisa mendapatkan banyak widget menarik yang telah disediakan oleh setiap situs. Pada blog kita bisa menemukan widget bawaan yang ingin kita tampilkan pada halaman tata letak yang ada pada halaman dashboard. Jika kita menginginkan widget tertentu yang tidak tersedia kita bisa mendapatkan dari situs penyedia dalam bentuk berbayar.

Baca Juga : Panduan Lengkapn Membuat Blog Bagi Pemula Dari Awal [Update 2017]

Mengatur Tampilan Widget/Gadget Di Blog 

Dalam pembuatan blog kita pasti akan berurusan dengan widget dimana sangat sering membuat kita kesal karena sulit mengatur letaknya sesuai dengan keinginan kita. Oleh karena itu, jika kamu menginginkan widget atau gadget tampil pada halaman tertentu saja dari blog kamu, maka itu bisa diatur dengan  menggunakan kode fungsi b:if. Salah satu contoh widget yang diatur hanya tampil pada halaman tertentu saja, bisa dilihat di homepage blog ini (samalangaku.com).

Dengan menggunakan fungsi  b:if ini kita bisa mengatur widget apa saja yang ingin kita munculkan pada suatu halaman bahkan bisa mengatur muncul di halaman pilihan kamu. Adapun langkah-langkah yang harus kamu ikuti adalah sebagai berikut;

1. Cari ID dari Widget Yang Ingin Dibatasi Tampil Pada Halaman Tertentu : Silakan Ikuti langkah berikut ini;

  • Silakan masuk ke menu TATA LETAK.
  • Klik EDIT pada widget/gadget yang ingin dibatasi (diatur)
  • Pada saat kamu mengklik EDIT pada widget lama akan terlihat ID dari widget tersebut PADA BAGIAN AKHIR URL (lihat gambar di bawah ini)
 
2. Masuk Ke Menu Template Yang Ada Di Halaman Dashboard :
  • Klik tombol EDIT HTML dan setelah itu LANJUTKAN
  • Silahkan centang EXPAND TEMPLATE WIDGET
  • Setelah itu tekan Ctrl+F pada browser kamu (sebelumnya klik dulu di halaman kode)
  • Nanti akan muncul kotak pencarian, silahkan ketikkan ID yang tadi didapatkan (contoh lihat gambar)
 
3.  Sekarang Gunakan Kode b:if Pada Gadget atau Widget Yang Akan Kita Edit :
Setelah kamu menemukan kode seperti di atas, saatnya menyisipkan kode b:if pada kode di atas. Kode b:if yang kamu sisipkan tergantung pada type halaman yang kamu targetkan untuk menampilkan widget tersebut. Kita akan bahas satu per satu
 

PERHATIAN! Perhatikan baik-baik posisi kode b:if di dalam kode widget. Kode <b:if… selalu tepat di bawah  <b:includable id=’main’> sedangkan kode penutup </b:if> selalu tepat di atas  </b:includable>

3.1. Menampilkan Widget Pada Halaman Homepage Saja
Bentuk kode b:if yang bisa kamu gunakan adalah seperti contoh di bawah ini:

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
Kode Yang Dibatasi….
</b:if> 

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ 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;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>

</b:widget>

Dan Klik Simpan

3.2. Menampilkan Widget di Semua Halaman KECUALI pada Homepage
Cukup ubah kode <b:if cond=’data:blog.url == data:blog.homepageUrl’>
menjadi <b:if cond=’data:blog.url != data:blog.homepageUrl’>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ 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;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan

3.3. Menampilkan Widget di Semua Halaman Posting Artikel
Bentuk kode b:if yang bisa kamu gunakan untuk membatasi widget hanya tampil pada halaman artikel saja adalah seperti contoh di bawah ini:

<b:if cond=’data:blog.pageType == “item”‘>
Kode Yang Dibatasi….
</b:if> 

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ locked=’false’ title=” 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;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan

3.4. Menampilkan Widget di Semua Halaman KECUALI halaman Posting Artikel
Cukup ubah kode <b:if cond=’data:blog.pageType == “item”‘>
menjadi <b:if cond=’data:blog.pageType != “item”‘>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ locked=’false’ title=” 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;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan

3.5. Menampilkan Widget di Semua Laman Statis
Bentuk kode b:if yang bisa kamu gunakan untuk membatasi widget hanya tampil pada halaman artikel saja adalah seperti contoh di bawah ini:

<b:if cond=’data:blog.pageType == “static_page”‘>
Kode Yang Dibatasi….
</b:if> 

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType == “static_page”‘>
<!– only display title if it’s non-empty –>
  <b:if cond=’data:title != &quot;&quot;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan

3.6. Menampilkan Widget di Semua Halaman KECUALI pada Laman Statis
Cukup ubah kode <b:if cond=’data:blog.pageType == “static_page”‘>
menjadi <b:if cond=’data:blog.pageType != “static_page”‘>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType != “static_page”‘>
<!– only display title if it’s non-empty –>
  <b:if cond=’data:title != &quot;&quot;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan

3.7. Menampilkan Widget di Semua Halaman Arsip
Bentuk kode b:if yang bisa kamu gunakan untuk membatasi widget hanya tampil pada halaman artikel saja adalah seperti contoh di bawah ini:

<b:if cond=’data:blog.pageType == “archive”‘>
Kode Yang Dibatasi….
</b:if> 

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType == “archive”‘>
<!– only display title if it’s non-empty –>
  <b:if cond=’data:title != &quot;&quot;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan

3.8. Menampilkan Widget di Semua Halaman KECUALI pada Halaman Arsip
Cukup ubah kode <b:if cond=’data:blog.pageType == “archive”‘>
menjadi <b:if cond=’data:blog.pageType != “archive”‘>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType != “archive”‘>
<!– only display title if it’s non-empty –>
  <b:if cond=’data:title != &quot;&quot;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan

3.9. Menampilkan Widget Hanya Pada Satu Halaman Tertentu
Bentuk kode b:if yang bisa kamu gunakan untuk membatasi widget hanya tampil pada halaman artikel saja adalah seperti contoh di bawah ini:

<b:if cond=’data:blog.url == “URL Halaman di sini”‘>
Kode Yang Dibatasi….
</b:if> 

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == “URL Halaman di sini”‘>
<!– only display title if it’s non-empty –>
  <b:if cond=’data:title != &quot;&quot;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan

3.10. Menampilkan Widget di Semua Halaman KECUALI satu URL tertentu
Cukup ubah kode <b:if cond=’data:blog.url == “URL Halaman di sini”‘>
menjadi <b:if cond=’data:blog.url != “URL Halaman di sini”‘>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya dimasukkan

<b:widget id=’HTML7′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url != “URL Halaman di sini”‘>
<!– only display title if it’s non-empty –>
  <b:if cond=’data:title != &quot;&quot;’>
    <h4 class=’title’><data:title/></h4>
  </b:if>
  <div class=’widget-content’>
    <data:content/>
  </div>
  <b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

Dan Klik Simpan, Kemudan Simpan untuk semua perubahan yang sudah kamu edit. Selanjutnya tinggal lihat hasilnya.

Sekian dulu artiker tentang Mengatur Tampilan Widget/Gadget Tertentu  Di Halaman Tertentu Pada Blog. Semoga bisa bermanfaat buat semua para blogger yang sedang mepercantik tampilan blognya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *