Menyembunyikan Widget pada Sidebar

Fungsi ini bertujuan menampilkan 2 sidebar pada home page dan ketika masuk halaman posting menjadi satu sidebar.

• Untuk membuatnya pertama-tama teman-teman harus mencari css seperti berikut ini pada tempalate anda.Untuk contoh templatenya aku menggunakan template 3 kolom 

Ingat!!!!! Kode diatas akan terlihat tidak serupa pada setiap template, tapi intinya sama.

** main wrapper

#main-wrap1{width:460px;float:left; margin-top:10px}

#main-wrap2{float:left;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}

.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}

** Sidebar Wrapper

#sidebar-leftwrap{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#sidebarright{width:200px;float:right;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

• Coba perhatikan tulisan warna merah pada kode diatas. Jika kalian ingin merubah atau bertukar posisi antara main wrapper dengan sidebar kalian tinggal mengCopy kodenya dan menukar tulisan warna merahnyasebagai contoh kita akan menukar posisi sidebar right dengan main wrapper. Hasilnya seperti ini :

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}
.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}

Jadi sidebar kanan akan pindah ke kiri dan halaman posting akan pindah dari kiri ke kanan. Jika sudah kita tukar posisinya, sekarang kita tinggal menyisipkan kode tambahan supaya hanya muncul dihalaman tertentu.Untuk kodenya seperti dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>

• Sehingga kalo digabung hasilnya akan seperti ini (jangan lupa menyisipkan kode <style> untuk kode CSSnya) Seperti berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}
.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}

</style>

</b:if>

• Kode diatas berarti pada halaman single post, posisi sidebar akan pindah ke kiri dan posisi main wrapper pindah ke kanan, namun pada halaman depan posisinya sebaliknya. Simpan kode diatas dibawah kode]]></b:skin> atau diatas kode </head>

Penjelasan diatas adalah menukar posisinya, sekarang kita tinggal merubah ukuran main-wrapper lebih lebar dan menghilangkan satu elemen sidebar yaitu sidebar kiri yang dari tadi belum kita otak-atik. Coba perhatikan tulisan berwarna hijau pada kode diatas:

== Main : width:455px;
== Sidebarleft : width:200px;

• Sebenarnya gampang saja, kalian tinggal membuang sidebar left dan menambahkan angkanya pada main (halaman posting). jadi hasilnya seperti ini :

== Main : width:655px;
== Sidebar left : {display:none;} ---> dihilangkan.

• jadi kode keseluruhan akan seperti ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#sidebar-leftwrap {display:none;}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}

.main .widget{margin-top:4px;margin-left:1px;width:655px;padding:0px 5px;}

</style>

</b:if>

** PEMASANGAN PADA TEMPLATE

• Pilih Rancangan --> EDIT HTML (centang expand template widget) --> simpan kode modifikasi tadi diatas kode </head> atau dibawah kode ]]></b:skin>

• Simpan template.

Sekali lagi saya ingatkan, kode diatas hanya contoh pada salah satu template. INGAT KODE UNTUK SETIAP TEMPLATE TIDAK SELALU SAMA.

Semoga bisa menjawab pertanyaan teman saya dan bermanfaat juga untuk teman-teman juga.

Source : http://www.z33s.co.cc

Read this | Baca yang ini

Widget by [ Tips Blogger ]

Posted in: Go Blog