Menampilkan/Menyembunyikan widget di Home/post/static/archive page di blogger


Secara default, setiap kita menambahkan widget pada blogger. Maka otomatis akan tampil di semua halaman blogger. Baik itu di homepage, post, static page, atau archive page. 

Tentu ini akan mengganggu tata letak blogger sehingga tidak enak untuk dilihat. Sebenarnya kita bisa mengatur suatu widget blogger akan tampil atau tidak di suatu halaman tertentu.

Di sini kita akan menggunakan tag <b:if> widget content </b:if>
Ikuti langkah demi langkah berikut:

Langkah 1: Pergi ke blogger Dashboard > Layout dan berikan nama yang unik pada setiap widget yang telah ditambahkan. Ini untuk mengetahui widget mana yang nantinya akan di tampilkan/disembunyikan.

Langkah 2: Berikutnya buka tab Template dan klik Edit HTML


Langkah 3: Klik di mana saja di dalam area kode html dan tekan Ctrl + F untuk membuka search box


Langkah 4: Temukan HTML dari widget yang telah kamu buat dengan mengetikkan di kolom pencarian. 

Sebagai contoh kali ini adalah widget "Recent Post" ketikkan recent post di kolom pencarian dan tekan enter, maka akan ditemukan beberapa kode html dengan nama recent post. Carilah kode yang serupa dengan kode berikut:
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- 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:includable>
</b:widget>
Langkah 5:  Setelah menemukan kode widget yang diinginkan, tambahkan conditional tag yang berwarna merah sebelum dan sesudah kode widget yang akan ditampilkan atau disembunyikan di halaman tertentu.

Untuk menampilkan widget di halaman Homepage saja:
<b:widget id='HTML1' locked='false' title='Recent Posts' 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>
Untuk menampilkan widget hanya di halaman Post:
<b:widget id='HTML1' locked='false' title='Recent Posts' 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>
Untuk menyembunyikan widget di halaman Post:
<b:widget id='HTML1' locked='false' title='Recent Posts' 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>
 Untuk menampilkan widget di halaman tertentu:
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Masukkan URL"'><!-- 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>
Catatan: Ganti tulisan Masukkan URL dengan URL dimana widget akan ditampilkan

Untuk menyembunyikan widget di halaman tertentu:
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "Masukkan URL"'><!-- 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>
Catatan: Ganti tulisan Masukkan URL dengan URL dimana widget akan disembunyikan.

Untuk menampilakan widget hanya di halaman Static:
<b:widget id='HTML1' locked='false' title='Recent Posts' 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>
Untuk menyembunyikan widget di halaman Static:
<b:widget id='HTML1' locked='false' title='Recent Posts' 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>
Untuk menampilkan widget hanya di halaman Archive:
<b:widget id='HTML1' locked='false' title='Recent Posts' 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:include name='quickedit'/>
</b:if></b:includable>
</b:widget>
Untuk menyembunyikan widget di halaman Archive:
<b:widget id='HTML1' locked='false' title='Recent Posts' 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:include name='quickedit'/>
</b:if></b:includable>
</b:widget>
Langkah 6: Simpan perubahan dengan mengklik tombol Save Template

Sekian tutorial kali ini. Semoga bermanfaat dan selamat mencoba.
Share on Google Plus

About rahman lalu

Hi, my name is Rahman, this is my personal blog site. Where I visualize what's in my brain and then translated into beautiful words strung. Please enjoy. Thanks for reading Menampilkan/Menyembunyikan widget di Home/post/static/archive page di blogger
Dont miss another post below:
    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment