Cara Mengatasi Tampilan Sidebar Blog Yang Kosong

Sidebar Blog Yang Kosong
Sebenarnya ini trik cukup mudah karena memang cara penulisannya cukup mudah. Namun jika pikiran kita tidak sampai ke sana, maka ini akan menjadi sesuatu hal yang sulit.

Apa sih sidebar blog yang kosong itu? Ini hanya istilah yang saya pakai, untuk Anda ya...terserah Anda. Mungkin di antara Anda ada yang pernah lihat pada sidebar suatu blog yang letaknya di bawah atau di atas widget lainnya berupa kotak atau garis. Untuk lebih jelasnya silahkan simak pada gambar di bawah ini.

Cara Mengatasi Tampilan Sidebar Blog Yang Kosong

Itu biasanya disebabkan oleh trik menampilkan widget hanya di halaman postpage (widget tidak ditampilkan di homepage) dan widget yang hanya ditampilkan di homepage (widget tidak ditampilkan di postpage). Jika widget tersebut hanya ditampilkan di postpage saja, maka sidebar kosongnya akan tampak di homepage. Begitu juga sebaliknya jika hanya menampilkan widget hanya di homepage maka sidebar kosongnya akan tampil di postpage. Dan hal ini bisa juga disebabkan dari pemakaian widget statis seperti buku tamu yang disimpan di pinggir blog, atau widget sharing yang melayang dan lain sebagainya. Biasanya hal ini terjadi jika background sidebar tidak sama dengan background body.

Dan ini menurut saya cukup mengganggu tampilan blog, sehingga terlihat kurang rapih. Untuk mengatasinya silahkan coba dengan trik di bawah ini:

1. Untuk widget yang hanya ditampilkan di postpage. Silahkan tambahkan kode kode di bawah ini di bawah kode ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#PlusFollowers1, #Stats1 {visibility:hidden}
</style>
</b:if></b:if>

Perhatikan kode yang berwarna merah di atas, itu adalah ID widget yang hanya ditampilkan di postpage. Untuk mengetahui ID widget, saya contohkan pada kode di bawah ini.

   <b:widget id='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers'>
     <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
......
......
......
  </div>
</b:if>
</b:includable>
   </b:widget>

Perhatikan kode yang berwarna merah, itu adalah ID widget-nya. Untuk kode yang berwarna biru adalah kode untuk menampilkan widget hanya di postpage.

2. Untuk widget yang hanya ditampilkan di homepage. Silahkan tambahkan kode kode di bawah ini di bawah kode ]]></b:skin>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#PlusFollowers1, #Stats1 {visibility:hidden}
</style>
</b:if>
Perhatikan kode yang berwarna merah di atas, itu adalah ID widget yang hanya ditampilkan di homepage. Untuk mengetahui ID widgetnya sama dengan langkah nomor 1 di atas.

3. Untuk sidebar yang disebabkan oleh widget statis seperti buku tamu yang disimpan di pinggir blog atau lainnya, saya anjurkan untuk menyimpan kode html-nya pada edit HTML bukan pada gadget HTML/Javascript di Tata Letak. Simpan kode html widget statisnya di edit HTML di atas kode </body> agar tidak menghasilkan sidebar yang kosong.

Nah demikin saja trik untuk mengatasi tampilan sidebar blog yang kosong ini semoga dapat dimengerti dan bermanfaat.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments