Blog Khusus Membahas Tentang Tutorial, Tips dan Trik Seputar Blog Di BlogspotDotCom


1 Sep 2010

Cara Menampilkan dan Menyembunyikan Sidebar atau Widget di Halaman Tertentu

| 1 Sep 2010
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.

Related Posts

13 komentar:

  1. @Harun + TerGaptek : Sama2 Sob...

    @Reza : Code Yang Mana Sob yg gak ketemu ??

    BalasHapus
  2. Tks mas, saya sangat terbantu dgn artikel ini....
    Salam kenal!!

    BalasHapus
  3. @Dunia Alat Kedokteran: Sama-sama mas... senang bisa berbagi,

    Salam Kenal juga, :)

    BalasHapus
  4. trims kangmas, blognya apik tuenan, salam sukses

    BalasHapus
  5. @Rahman Wahid: makasih komentarnya sob.

    @RUZH: sip, matur tenggkyu mas ;))

    BalasHapus
  6. Berhasil pas saya praktekan, keren banget ilmunya nih, trima kasih yaa

    BalasHapus
  7. Terimakasih sangat membantu :)
    http://short8.net/12M4U

    BalasHapus
  8. sangat bermanffat,,saya akan mencobal di blog saya http://hobianak.com

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>