Cara Menampilkan dan Menyembunyikan Widget di Halaman Depan

Impian saya yaitu memiliki blog yang Dinamis dan ini mungkin adalah impian setiap blogger karena dengan tampilan menarik biasanya pembaca akan memperhatikan perubahan yang terjadi pada setiap halaman apalagi dilengkapi dengan navigasi serta widget yang dapat memudahkan pengunjung mencari atau memilih artikel yang mereka inginkan, contohnya dengan menambahkan Daftar isi, kotak pencari, kategori, label, Related Post dan lain-lain, dengan harapan dapat membuat pengunjung lebih betah berlama-lama.
Untuk membuat halaman blog lebih Dinamis salah satu caranya adalah menyembunyikan Widget, sidebar, dan footer pada halaman tertentu. 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 selanjutnya adalah 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 Laman, sidebar yang telah diberi kode tersebut akan tidak tampak. Untuk mengedit isi sidebar tersebut, cukup hapus baris kode yang 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.


Sekian dulu dari saya, semoga bermanfaat.

Sumber:http://kode-blogger.blogspot.com/2010/09/cara-menampilkan-dan-menyembunyikan.html

Terima kasih sudah singgah di blog ID CREATIVE   «« jangan lupa tinggalkan komentarnya "thanks.