Bagaimana Menampilkan Widget Pada Halaman Tertentu Blogger ?

Cara Menampilkan Widget Pada Halaman Tertentu Blogspot
Pengaturan widget dengan menampilkan pada halaman tertentu blog konsepnya sama dengan Cara Menyembunyikan Sidebar pada Halaman Blogspot karena sama-sama diperlukan sebuah pemahaman mengenai deklarator kode css.

Konsep penerapan seperti ini sebenarnya tidaklah terlalu rumit karena cukup dengan memahami beberapa tags pada xml/html template. Misalnya 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. Untuk menerapkannya, berikut caranya.

1. Mencari ID widget yang akan ditampilkan

Mencari ID widget tidaklah sulit, anda bisa 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, kemudian akan muncul popup window. Perhatikan pada URL pada addressbar, nah ID widget berada tepat di ujung url. Contohnya seperti gambar di bawah.

Cara Menampilkan Widget Pada Halaman Tertentu Blogspot

Perhatikan id widget pada gambar di atas (HTML4), nah id tersebut harus anda simpan di notepad atau dimana saja yang penting anda bisa ingat.

2. Memberikan tags conditional 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 anda simpan tadi di notepad dengan cara menekan CTRL + F untuk mempermudah pencarian. Berikut contohnya :
Cara Menampilkan Widget Pada Halaman Tertentu Blogspot
  • 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 :
1. 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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
2. 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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
3. 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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
4. 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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
5. 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 anda disini"'>
<!-- 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>
</b:includable>
</b:widget>
  • Terakhir, simpan template dan lihat hasilnya.
Thanks for reading and happy nice blogging...!!!

Unknown
Unknown

1 comment:
Write comment
  1. AnonymousJune 27, 2013

    makasih gan tutornya, saya coba dulu hhe

    ReplyDelete