Terkadang pada saat melakukan setting Design Blog, widget atau item yang terpasang pada tempat tertentu kadang mengganggu sehingga desain blogspot yang dilakukan tidak menampilkan hasil yang maksimal dan tidak sesuai dengan apa yang diharapkan.
Pengaturan widget dengan menampilkan pada halaman tertentu blog konsepnya agak sedikit berbeda dengan cara menyembunyikan sidebar pada halaman blogspot karena penerapan konsep untuk menyembunyikan widget diperlukan sebuah pemahaman mengenai deklarator kode css. Sedangkan untuk menampilkan sidebar / widget diperlukan sebuah pemahaman condtional tags, posisi dan id widget pada xml/html blog yang akan ditampilkan.
Nah, untuk penerapan konsep ini sebenarnya tidaklah terlalu rumit cukup dengan memahami beberapa tags pada xml/html template. Tags yang yang saya maksudkan disini adalah conditional tags b:if, dimana tag ini merupakan sebuah bagian pada xml/html template blog yang berfungsi untuk menampilkan atau menyembunyikan element pada halaman tertentu.
1. Mencari ID widget yang akan ditampilkan
Mencari ID widget tidaklah sulit, yakni bisa dengan cara mengakses "quickedit" (gambar obeng dan kunci pada sudut kanan bawah widget) atau dengan cara masuk ke dasboard, pilih tata letak dan mengklik edit pada sudut kanan bawah widget yang akan dicari ID-nya tersebut, kemudian akan muncul popup window. Perhatikan pada URL pada addressbar, nah ID widget berada tepat di ujung url. Contohnya seperti gambar di bawah.
Perhatikan id widget pada gambar di atas (HTML4), nah id tersebut harus sobat simpan di notepad atau dimana saja yang penting sobat bisa ingat.
2. Memberikan tags conditional tags pada widget atau sidebar yang akan ditampilkan
Perhatikan langkah-langkah di bawah dalam pemberian contional tags pada widget yang akan ditampilkan pada halaman tertentu pada blog.
- Login Blogger
- Pilih Template » Edit HTML dan centang "Expand Template Widget"
- Langkah selanjutnya, cari ID wiget yang sobat simpan tadi di notepad dengan cara menekan CTRL + F untuk mempermudah pencarian. Berikut contohnya :
- Selanjutnya tambahkan conditional tag pembuka (<b:if cond='.......'>) sesudah tag <b:includable id='main'> dan tag penutup (</b:if>) sebelum tag </b:includable> kedalamnya. Berikut cara lengkpanya :
- Menampilkan widget pada homepage / beranda
<b:widget id='HTML4' 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:if>
</b:includable>
</b:widget>
- Menampilkan widget hanya pada halaman postingan
<b:widget id='HTML4' 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:if>
</b:includable>
</b:widget>
- Menampilkan widget pada halaman statis (contact us, daftar isi, forum, dsb)
<b:widget id='HTML4' 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:if>
</b:includable>
</b:widget>
- Menampilkan widget pada halaman arcive /arsip
<b:widget id='HTML4' 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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
- Menampilkan widget hanya pada halaman tertentu
<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Masukkan URL halaman sobat disini"'>
<!-- 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:if>
</b:includable>
</b:widget>
- Terakhir, simpan template dan lihat hasilnya.
Thanks for reading this article and happy nice blogging...!!!
No comments:
Post a Comment