TAMPILKAN WIDGET PADA HALAMAN TERTENTU

Akhirnya aku sadari bahwa membangun sekaligus mendisain sebuah blog (yang mungkin menjadi dasar sebuah website) ternyata tidak semudah yang kita bayangkan selama ini. Banyak faktor yang harus menjadi bahan pertimbangan utama, mulai dari pemilihan template blog, disain tampilan, optimasi SEO sampai dengan proses mencari serta mendapatkan backlink untuk mendukung eksistensi blog itu sendiri.

Artikel kali ini sengaja aku batasi hanya mengupas tentang disain tampilan blog agar terlihat rapi dan lebih profesional bila dibandingkan dengan blog-blog yang lainnya. Untuk dapat mendisain tampilan blog itu sendiri (agar terlihat elegant) ternyata memiliki beberapa faktor utama yang harus dipertimbangkan, yaitu :

Pertama, kita harus mengetahui secara jelas dan pasti seberapa besar space yang tersedia dalam template blog (khususnya pada halaman home-page) yang kita pakai, selanjutnya informasi-informasi apa saja yang akan kita tampilkan pada halaman home-page ini. Satu hal yang penting untuk menjadi perhatian adalah, saat mendisain halaman home-page ini jangan sampai memunculkan kesan semrawut, acak-acakan yang bisa jadi diakibatkan oleh banyaknya iklan yang terpasang dan tidak kita atur sebagaimana mestinya.

Bilamana kita serong blogwalking, pastinya kita pun sering menjumpai banyak blog yang terkesan semrawut karena banyaknya iklan yang terpasang tanpa memperhatikan faktor estetika. Kadang terjadi hal yang demikian, saat kita sedang konsentrasi membaca artikel blog (yang mungkin memang benar-benar kita butuhkan) tiba-tiba muncul iklan-iklan dalam format jendela munculan yang tentu saja hal ini sangat mengganggu kenyamanan kita sebagai seorang visitor. Bahkan lebih tragis lagi, identitas iklan-iklan yang terpasang akhirnya mengalahkan identitas blog itu sendiri. Runyam khan ?

Kedua, kita mesti paham juga tentang seberapa berat loading blog yang kita miliki setelah kita selesai mendisain blog tersebut. Terlalu banyak kode html yang kita pasangkan pada halaman home-page, secara langsung maupun tidak langsung pasti akan mempengaruhi berat-ringan nya loading suatu blog. Sebagai contoh nyata : sebuah blog yang terpasang widget feedjit, waktu loading blognya pasti akan lebih lama bila dibandingkan dengan blog yang tidak memasang widget tersebut.

Untuk mengatasi masalah berat-ringannya loading blog ini, akan saya bahas dalam artikel tersendiri nantinya, karena kalau dipaksakan untuk dibahas pada artikel ini akan menjadi panjang dan akan mengaburkan thema artikel ini yaitu menampilkan widget pada halaman tertentu.

Ketiga, perhatikan juga faktor estetika atau keindahan tampilan halaman home-page blog anda. Faktor estetika atau keindahan ini sama sekali tidak identik dengan banyaknya tulisan-tulisan atau gambar-gambar yang bergerak dalam sebuah halaman home-page. Semakin banyak tulisan atau gambar-gambar yang bergerak pasti akan membawa dampak kebingungan tersendiri bagi para visitor, disamping itu pasti akan membuat visitor merasa tidak nyaman. Perlu diperhatikan hal yang berikut : dalam hal membaca sesuatu informasi sangat dibutuhkan kenyamanan serta konsentrasi, oleh karenanya sesuatu yang berrgerak pastilah mengganggu konsentrasi maupun kenyamanan tersebut.

Berkaitan dengan ketiga hal tersebut di atas, maka berikut ini saya ingin memberikan sedikit solusi dalam mendisain tampilan blog, yaitu tampilkan widget hanya pada halaman tertentu, hal ini akan banyak membantu kesan dinamisnya tampilan blog yang kita miliki. Seperti contohnya demikian : pada halaman home-page tidak terdapat widget popular-post, namun pada saat visitor masuk ke salah satu artikel postingan, maka widget popular-post ini akan muncul pada bagian side-bar.

Berikut ini cara membuatnya, saya ambil widget 'popular post' sebagai contohnya, namun anda dapat menerapkannya untuk widget-widget yang lainnya.

Untuk menampilkan widget di halaman tertentu, anda harus menambahkan conditional tags (b if cond) pada elemen widget yang diinginkan. Berikut langkah menambahkannya sesuai dengan contoh widget yang sudah disampaikan di atas:

a. Masuk ke halaman template (Dashboard > Template)
b. Klik "Edit HTML" > Proceed.
c. Jangan lupa klik/centang "Expand Widget Templates" untuk menampilkan seluruh elemen widget di dalam editor.
d. Tekan CTRL+F, masukkan ID widget yang diinginkan yang sebelumnya telah dicari dan dipersiapkan. Dalam contoh ini saya akan menggunakan id widget "HTML11" sebagai contoh dan berikut kurang lebihnya elemen widget sobat:

<b:widget id='HTML11' locked='false' title='popular post1 ' 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

e. Kemudian tambahkan conditional tag setelah <b:includable id='main'> dan tag penutupnya sebelum </b:includable>. Berikut conditional tags berdasarkan jenis halaman dan cara menambahkannya, perhatikan tag berwarna merah dan itulah yang harus ditambahkan:

Cara Menampilkan Widget Hanya di Halaman Utama/Indeks (Homepage)

<b:widget id='HTML11' locked='false' title='popular post1' 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Posting

<b:widget id='HTML11' locked='false' title='popular post1' 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Statis

<b:widget id='HTML11' locked='false' title='popular post1' 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;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Arsip (Archive)

<b:widget id='HTML11' locked='false' title='popular post1' 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;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Salah Satu Halaman (Berdasarkan URL)

<b:widget id='HTML11' locked='false' title='popular post1' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>
  <!-- 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

f. Setelah conditional tags ditambahkan, save template.

Jika ingin melakukan hal yang sama pada beberapa widget, anda harus melakukan dan mengulang cara yang sama seperti di atas: cari ID widget, cari elemen widget sesuai ID di edit HTML, dan masukkan conditional tags berdasarkan jenis halaman ke dalam elemen widget. Save and Done.

Sampai di sini dulu, semoga dapat bermanfaat and have a nice blogging.