Cara Mengatasi Tampilan Sidebar Blog Yang Kosong

Cara Mengatasi Tampilan Sidebar Blog Yang Kosong

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

25 Comments Add Comment

oh begitu to perlu di bookmard dulu nih ;)

Balas

Iya mas kira begitu hehehehe...

Balas

Saya gak Ngerti Tentang ID Widgetnya Mas...
Mohon pencerahannya Mas..
Trima kasih

Balas

Wah , trik baru nih
makin jozz aja nih mas adhy

Balas

Pada langkah 1 sudah saya jelaskan mas hehehehe...
Atau biar gampang, pada edit html klik pada "Jump to widget" nah di situ ada widget2-nya tinggal pilih lalu klik, otomatis kita akan langsung ke html widget tersebut.

Balas

Iya mas...hehehe biasa aja...

Balas

Makasih Banayk Mas...
Maklum mas masih Newbie..kkkkk
Terima kasih Banyak mas..

Balas

Om Yang Stats1 maksudnya apa Om...
jangan marah ea Om...
maklum Harus Di asah Terus ne otak Om...
kwkwkw

Balas

Itu hanya contoh aja mas kebetulan saya menyembunyikan widget popular post dan stats. Jika widgetnya lebih dari 1 pisahkan dengan , (koma)

Balas

apa bedanya dengan display:none mas (visibility:hidden)

Balas

Bisa juga dengan itu mas (display:none)

Balas

mas, tulis artikel tentang perbedaan visibility:hidden dan display:none dong :)

Balas

Sebenarnya kedua kode itu fungsinya sama yaitu untuk tidak menampilkan sesuatu. perbedaanna yaitu jika visibility:hidden maka sesuatu tidak ditampilkan tapi masih terbaca oleh peramban, jika display:none maka sesuatu tidak ditampilkan dan tidak bisa dibaca oleh peramban. Kira2 seperti itu....

Balas

akan saya coba untuk menerapkannya mas....
mudah2an bisa berhasabat diblog saya mas...

Balas

Owh itu to perbedaanya saya malah bru tau karena terbiasa menggunakan display none saja, makasih pencerahannya bro.

Balas

iya sudah paham mas brusan saya praktekkan..
klo visibility:hidden ruangnya masih tampil tapi kosong

Balas

Blog saya satunya mengalami hal yg demikian ketika widget tdk saya tampilkan di homepage, makasih mas udah berbagi

Balas

Mau Tanya..

Kok Emoticon Blog Saya Pas Di Klik emoticon nya Ga Keluar Kodenya Itu Gimana...

Bila Berkenan Mohon Bantuannya .

Thanks..

Balas

http://silebo-blog.blogspot.com <<< Blog nya

Balas

punyaku gak jadi-jadi bang adhy...
gak mau sembunyi tuh

Balas

hahahay ketemu juga ni ,,hehe saya sempat bingung master .. karna widget uda disembunyikan tapi masih ada garis yang nongol wkwkwk thx ya master..

oot : master tolong share cara membuat emoticon komentar seperti di blog master ini, kayaknya ringan banget maaf master oot :)

Balas

Harus gunakan cara lain mas seperti blog saya tapi jadi ga kelihatan di tata letak. Kalau mau ngedit harus copot dulu kodenya, selesai ngedit pasang lagi kodenya.

Balas

Silahkan dicoba mas, ini kadang berhasil kadang enggak, tergantung templatenya. :D

Balas

untuk emotikon itu sudah menyatu dengan komentarnya, coba di blog Kang Ismet cari Threaded Comment Hack tutorial terbaru, kalau ga salah versi ke-3, kebetulan itu sudah valid html5 juga.

Balas

Oke Master thx master saranya .. :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×