Cara menghilangkan sidebar pada halaman tertentu - sama seperti judulnya cara ini merupakan trik untuk menghilangkan sidebar pada halaman tertentu seperti page, posting dll. mungkin sobat berkepentingan kemari untuk mengetahui cara menghilangkan sidebar karena beberapa alasan mungkin ingin memghilangkan sidebar pada halaman kotak pencarian google seperti saya :p, baca juga cara membuat kotak pencarian google pada blog. trik ini hanya mengguanakan css dengan menggunakan atribut display:none; pada deklarator yang dipilih, dengan menggunakan tag pengkondisian yang mengatur sidebar akan tampil dimana dan akan di sembunyikan dimanan pada cara ini saya membagi trik menghilangkan sidebar untuk template yang berasal dari bloger design dan juga custom template(bukan berasal daari blogger)
Baca juga : Kumpulan Widget dan trik SEO depermana12
Cara penggunaan
1. login blogger
2. template >> edit html
3. cari kode </head>
4. kemudian copy paste diatas kode </head>
untuk template bawaan blogger
<b:if cond='data:blog.url == "http://depermana-share.blogspot.com/p/blog-page_15.html"'>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-left-outer {
display: none;
}
</style>
</b:if>
keterangan:
1. tulisan yang ditandai dengan warna kuning merupakan letak dari sidebar
2. tulisan yang ditandai dengan warna hijau merupakan posting/halaman yang ingin disembunyikan sidebarnnya
Untuk custom template
<b:if cond='data:blog.url == "http://depermana-share.blogspot.com/p/blog-page_15.html"'>
<style>
#sidebar-wrapper{
display: none !important;
}
#main-wrapper, .post {
width: 900px;}
</style>
</b:if>
keterangan:
1. tulisan yang ditandai dengan warna biru merupakan deklarator sidebar yang akan dihilangkan
2. tulisan yang ditandai dengan warna hijau merupakan posting/halaman yang ingin disembunyikan sidebarnnya
3. tulisan yang ditandai warna merah merupakan lebar dari halaman yang telah dihilangkan sidebarnnya,
untuk mengetahui lebar dari main wrapper dan sidebar-wraper silakan cari ditemplate, setelah ketemu jumlah kan ukuran lebar dari main-wrapper dan sidebar-wrapper, saya asumsikan saya mempunyai lebar main-wrapper sebesar 600px dan lebar sidebar-wrapper sebesar 300 px kemudian saya jumlahkan 600+300=900px
Help
mohon maaf jika penjelasan saya diatas terlalu rumit tapi saya yakin sobat pasti akan mengerti, jika ada yang merasa belum dimengerti silakan tanyakan dikotak komentar dan dengan senang hati saya akan membantu sobat sebisa mungkin. tolong ya sedikit bantuan untuk saya dengan menklik tombol like facebook fan page di bawah ini dan juga berlangganan artikel dari depermana12 dengan mensubscribe email sobat dibawah ini. semoga artikel ini dapat bermanfaat bagi sobat :D
Gan,, ni pake Read More otomatis yah,,
ReplyDeletegue ga yakin bisa sama jadinya,, nih dah gue tulis singkat,,
mybloggerenjoy.blogspot.com/
makasih banyak gan :D
DeleteKeren gan , Emang sih kalo urusan yang berhubungan sama Struktur Utama Template kyk Header ama lainnya , kita mesti main2 ama Tag Kondisional , jadi kesannya agak rumit , padahal sebenarnya kalo udah dijalani Yg namanya rumit tuh bakal Hilang , hehehe. Yah maklum Kang namanya juga Manusia , Kebanyakan "Mengeluh Sebelum Melakukan Sesuatu" , hehehe termasuk juga saya.
ReplyDeleteEntar ane terapin lah buat masang Daftar Isi Tipe Galleria , kebetulan Widget ini membutuhkan Main-Wrapper Penuh tanpa Sidebar supaya tampilannya keliatan sempurna
Thanks kang !
bener banget tuh kang, emang kebanyakan orang bilangnya rumit, tapi sebenernya bukan rumit tapi gak mau mencoba!
Deleteknpa ya codenya ga bisa di copy?
ReplyDeletesekarang sudah isa gan :D
DeletePak, aq mohon bantuan...
ReplyDeleteAq habis ganti custom template
Tapi kok "Beranda, Postingan Lama, Postingan Baru" yang itunya malah jadi ada diatas postingan.
Biasanya kan ada di paling bawah.
Aq search di gugel, tp kayaknya belum ada yang bahas ttg cara mindahinnya.
Mohon bantuannya pak, jika berkenan.
Ga nyaman banget liadnya :(
back up templatenya dulu
Deletepada template cari code yang seperi ini
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='http://imajinasi-hari.blogspot.com/' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>Posting Lebih Baru</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='http://imajinasi-hari.blogspot.com/search?updated-max=2013-05-03T09:07:00%2B08:00&max-results=2&start=2&by-date=false' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a>
</span>
<a class='home-link' href='http://imajinasi-hari.blogspot.com/'>Beranda</a>
</div>
<div class='clear'></div>
<div class='blog-feeds'>
<div class='feed-links'>
Langganan:
<a class='feed-link' href='http://imajinasi-hari.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Entri (Atom)</a>
</div>
</div>
kemudian pindahkan ke atas <div id='sidebar-wrapper'>
Hmm agak beda kodenya pak...
DeleteTapi aq udah nyoba mindahin yang mirip2
Tapi katanya :
Kesalahan menginterpretasikan template blog
Invalid data reference newerPageUrl: No dictionary named: '' in: ['blog', 'skin', 'view']
Kalo butuh liad kode template lengkapnya ada disini pak :
http://btemplates.com/2009/blogger-template-green-scrapbook-diary/demo/
cari code
ReplyDelete<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>
pindahkan dibawah <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Tetap ga berpindah tempat pak, hiks hiks...
DeleteTak apalah, maaf pak sudah merepotkan, trimakasih bantuannya :)
Terimakasih banyak infonya ya :)
ReplyDeletesama-sama kang :D
DeleteMakasih tutorialnya sob,. sangat membantu.
ReplyDelete