Ketika melaksanakan setting desain blog, terkadang kita terkendala dengan banyaknya widget yang ditampilkan, sehingga widget tampak berdesakan dan halaman menjadi begitu panjang. Dalam kasus lain lagi, terkadang kita hanya ingin widget tertentu hanya muncul di halaman spesifik, baik homepage, halaman statis, maupun halaman posting saja. Dulu aku pernah berbicara mengenai bagaimana menyembunyikan sidebar Blogger di halaman tertentu, dengan menggunakan conditional tags dan CSS (display), dan jikalau yang diinginkan hanya untuk menyembunyikan satu atau beberapa widget, maka tentu kurang sempurna jikalau diterapkan. So, dalam kesempatan ini, aku ingin menyebarkan mengenai bagamana menampilkan atau menyembunyikan salah satu atau beberapa widget dalam halaman tertentu, dan menampikannya pada jenis halaman lain.
Konsep Hack Menampilkan Widget Pada Halaman Tertentu
Cara ini bergotong-royong masih sama dengan artikel yang sebelumnya sudah aku sebutkan, yaitu menggunakan conditional tags (b if), salah satu tag XML Blogger, untuk menawarkan perintah semoga suatu elemen ditampilkan pada bagian/halaman tertentu saja dan menyembunyikannya pada bagian/halaman lain. Conditional (if) juga dikenal penggunaanya pada PHP, dan juga dikenal dalam bahasa Inggris (if clause, conditional sentence) hehehehe..... Bedanya dengan cara sebelumnya, cara yang aku tawarkan ini tidak akan menggunakan CSS, melainkan menggunakan conditional tags pribadi pada elemen yang hendak diberikan perintah, yang dalam hal ini ialah elemen-elemen widget.
Langkah-langkah Menampilkan Widget Pada Halaman Tertentu
1. Mencari ID Widget
Sebelum menawarkan conditional tags, anda harus mengetahui ID widget yang hendak ditampilkan pada halaman tertentu. Cara mencarinya sangat mudah:
a. Ada dua cara untuk mengakses editor widget (sebenarnya ada 3, yaitu melalui edit HTML, tapi cara ini akan lebih rumit:
- Jika anda dalam kondisi login Blogger, anda dapat pribadi mengakses "quickedit" pribadi dari halaman blog, quickedit ialah tool untuk mengedit widget secara langsung, letaknya biasanya ialah di bab pojok kanan bawah widget, berupa ikon obeng dan kunci (screwdriver and wrench). Klik icon pada widget yang diinginkan dan akan muncul pop-up window dimana anda dapat mengedit konten widget.
- Atau saluran editor widget melalui halaman "Layout", lalu klik link "edit" di salah satu bab widget. Kemudian akan muncul pop-up window.
b. Lihat di bab URL/address di browser pada halaman pop up window tersebut. Letak ID widget berada di bab simpulan URL (geser URL ke kanan). Perhatikan rujukan gambar berikut:
d. Simpan Id Widget tersebut, misalnya dari rujukan di atas, Id widget yang hendak aku edit ialah "HTML11".
2. Memberikan Conditional Tags Pada Elemen Widget
Untuk menampilkan widget di halaman tertentu, anda harus menambahkan conditional tags (b if cond) pada elemen widget yang diinginkan. Berikut langkah menambahkannya sesuai dengan rujukan 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 rujukan ini aku akan menggunakan id widget "HTML11" sebagai rujukan dan berikut kurang lebihnya elemen widget sobat:
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='' 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 != ""'>
<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='' 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 != ""'>
<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='' 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 != ""'>
<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:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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='' 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 != ""'>
<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 melaksanakan hal yang sama pada beberapa widget, anda harus melaksanakan dan mengulang cara yang sama menyerupai 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.
Semoga bermanfaat and have a nice Blogging.© buka-rahasia.blogspot.com. 2012 - 'Til drop. All rights reserved.