22 October 2011

Cara Hilangkan Sidebar template blogger designer

Sekedar berbagi buat yang suka edit template blogger, kali ini saya ingin berbagi kebahagiaan atas kesuksesan eksperimen yang telah saya kerjakan dalam membangun blog roomantik. Merupakan kebanggaan tersendiri bagi saya manakala berhasil membuat blog dengan tampilan unik dan elegan. Blog itu mempunyai tampilan pada halaman posting berbeda dengan halaman utama blog.

Ternyata rahasianya adalah terletak pada teknik menghilangkan sidebar. Artinya pada blog tiga kolom dengan susunan sidebar-posting-sidebar, dapat dihilangkan sidebarnya sehingga halaman posting menjadi lebih lebar. Ketika berada di home, tiga kolom sedangkan setelah masuk halaman posting menjadi 2 kolom, unik bukan..?

Teknik menghilangkan sidebar blogger ada beberapa pilihan, silahkan dicoba barangkali script ini dapat membantu anda untuk menghilangkan sidebarnya. Tapi perlu diketahui pula bahwa setiap template memiliki koding yang berbeda. Dalam hal ini saya memakai template bawaan blogger, dan umumnya blogger template designer memiliki kode seperti yang saya tulis di bawah ini.

Cara untuk menghilangkan sidebar yaitu dengan mengkopi paste script berikut ini lalu pasangkan tepat di bawah kode ]]> </b:template-skin> dan jangan lupa disimpan. Eit hampir lupa, sebelum mengedit html sebaiknya dibackup dulu templatenya demi keamanan.

Menghilangkan Sidebar Kanan dan kiri
<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Menghilangkan Sidebar Kanan
<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-right-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Menghilangkan Sidebar Kiri
<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .column-left-outer {
display: none !important;
}
</style>
</b:if>

3 comments:

  1. dimana di pastekan scrip nya bg?

    ReplyDelete
  2. @bayu Putra My Blog , di bawah kode ]]> </b:template-skin>

    ReplyDelete
  3. kalau tepalte dari luar gak sama ya scriptnya?

    ReplyDelete

Note: Only a member of this blog may post a comment.