11 November 2011

Cara Menampilkan dan Menyembunyikan Sidebar atau Widget di Halaman Tertentu

Untuk membuat halaman blog lebih Dinamis salah satu caranya adalah menyembunyikan Widget, sidebar, dan footer pada halaman tertentu (artikel ini berasal dari teman : kode-blogger) . Misalnya sidebar dan footer hanya tampil pada halaman utama. nah, bagaimana caranya ?? berikut trick-nya.

Ikuti langkah-langkah berikut ini

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

Misalnya sobat mau nyembunyiin widget yang ada di blog sobat, contoh, widget recent post/comment.

4. Maka carilah kode widget id dari gadget post/comments itu, lalu sisipkan baris kode yang berwarna biru pada baris kode widget id dari gadget comments tadi seperti dibawah ini:

<b:widget id='Feed1' locked='false' title='Comments' type='Feed'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

5. Kalau sudah, lalu simpan template.

Maka sekarang sidebar post/comments hanya akan tampil pada halaman depan saja.

Contoh Lagi, Misalnya Sobat mau menyembunyikan Widget daftar isi di slidbar, yang hanya ingin ditampilkan pada halaman posting selanjutnya, maka setelah menemukan baris kode widget id yang dinginkan, maka sispkan baris kode yang berwarna Biru pada baris kode widget id dari widget daftar isi tadi.

<b:widget id='HTML2' locked='false' title='Facebook Profile' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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>

Setelah selesai, lalu simpan template.
Maka sekarang widget daftar isi hanya akan tampil pada halaman selanjutnya saja, dimana posting tampil utuh. Sedangkan pada halaman depan widget ini tidak akan ditampilkan.

Jika yang ingin disembunyikan pada halaman depan dan ditampilkan pada halaman selanjutnyaadalah satu elemen halaman, misalnya sidebar yang paling kanan, maka baris kode yang harus disisipi kode adalah seperti berikut :

<div id='sidebar-wrapper'> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section> </b:if>
</div>

Setelah itu Simpan template.
Maka gak usah khawatir, jika ternyata nanti pada bagian Elemen Lamansidebar yang telah diberi kode tersebut akan tidak tampak. Untuk mengedit isi sidebar tersebut, cukup hapus baris kodeyang telah disisipkan tadi agar sidebar tersebut terlihat kembali.


Nah mungkin ada yang belum tahu cara mencari widget id slidbar, saya jelasin lagi neh..
1. Masuk ke edit laman, click edit pada sidebar yang ingin kita tahu widget id-nya.

Lihat Gambar
2. Prhatikan gambar di atas, tulisan di pojok kanan atas yang di blok warna biru, itulah kode widget id. itulah cara mengetahui widget id, pada widget blog.

NB : Untuk memudahkan pencarian kode pada kolom HTML, gunakan kolom pencari dengan mengklik Ctrl + F, lalu ketikan kata atau kalimat yang ingin dicari.


Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 komentar: on "Cara Menampilkan dan Menyembunyikan Sidebar atau Widget di Halaman Tertentu"

Posting Komentar