mas template

Cara Membuat Blog Tanpa Sidebar Di Blogspot

maskolis
Pernahkan teman-teman melihat ada sebuah blog atau situs web yang nggak ada sidebarnya? Tentu pernah bukan. Sebenarnya udah banyak sekali situs-situs penyedia template blogger gratis yang menawarkan template yang nggak ada sidebarnya atau 1 column. Tapi mungkin template tersebut kurang menarik atau berbahasa non-English jadi kita agak susah untuk mengerti bahasanya. Untuk itu, disini saya akan coba menjelaskan langkah-langkah untuk menghilangkan (bukan sulap) sidebar di template bawaan yang udah kita download. Untuk demonya temen-temen semua bisa lihat disini, sebenarnya template yang saya pakai untuk demo itu sama seperti template yang dipakai blog ini. Tapi karena cuma buat demo ya saya hilangkan sidebarnya biar kelihatan agak ramping. Agar lebih jelas saya terangkan dahulu bagian-bagian kode dan cara penerapannya.
Ada Dua CSS
Seperti pada postingan terdahulu, jika kita menggunakan trik ini maka akan ada 2 css untuk satu id widget atau section. Yang pertama dipanggil tanpa syarat dalam keadaan umum. Yang kedua adalah dipanggil untuk syarat tertentu saja, dalam hal ini kita memberikan syarat untuk alamat postingan yang kita tentukan. Yang perlu diperhatikan ketika kita nanti menambah css jangan hilangkan css asli.

Lebar Area Postingan
Untuk mengatur lebar area postingan Anda harus mengetahui kodenya terlebih dahulu. Pada umumnya memiliki kode main-wrapper. Nah, yang perlu Anda ketahui, main-wrapper ini berada pada bagian outer-wrapper atau bisa hanya dengan kode wrap saja yang istilahnya sebagai wadah/nampan bagian-bagian template yang terdiri dari main wrapper dan sidebar. Oleh karena itu main-wrapper tidak boleh lebih lebar dari outer-wrapper. Saya misalkan kode-kode dari template minima. Jika pada bagian css ada titik-titik itu berarti kode css lain yang tidak saya tuliskan. Dalam hal ini yang saya sertakan adalah dalam hal lebar saja (berkode: width)
CSS Outer
 #outer-wrapper {
  width: 660px;
...............................
  }
CSS Main-wrapper
#main-wrapper {
  width: 410px;
...............................
  }
Nah, pada kode di atas lebar main-wrapper adalah 410px, lebih kecil dari lebar nampannya yakni 660px. Bukankah masih ada sisa? Ya kita pastikan sisa lebar itu adalah milik sidebar. Jika kita tulis cssnya
#sidebar-wrapper {
  width: 220px;
..............................
}
Jadi lebar area sidebar (220) ditambah area postingan (410) adalah 630px, masih lebih kecil dari batas yakni 660px. Sisa 30 px adalah untuk margin, yakni jarak antara tepi kiri dengan area postingan, jarak area postingan dengan sidebar dan jarak area sidebar dengan tepi kanan.

Nah, intinya ketika nantinya Anda ingin membuat lebar area postingan penuh maka dalam penentuan css Anda tidak boleh lebih lebar dari area wadahnya. Jika misal area outer-wrapper adalah 660px, maka sebaiknya Anda memberikan angka 640px untuk lebar pada postingan tertentu. Karena untuk pengaturan warna, garis dan lain-lain dibuat sama hanya ada efek melebar saja kita hanya membuat kode css lebar nantinya untuk postingan tertentu. Id Section sama hanya penempatan yang berbeda.
Misalkan kita tulis seperti ini:
#main-wrapper {
  width: 640px;
  }
Menghilangkan Sidebar
Karena jatah area wadah yang 660 px sudah diambil 640 px oleh area postingan, otomatis maka sidebar area tidak kebagian tempat dan akan jatuh ke bawah. Sekarang tugsa Anda adalah menghilangkannya. Seperti biasa kita gunakan kode display: none untuk menghilangkan suatu item. Jika tadi kita akan menambahkan satu css lagi untuk id area postingan, maka sekarangpun akan ada satu lagi css untuk id area sidebar yang nantinya anya dipanggil untuk postingan tertentu.
Penulisan css untuk menghilangkan sidebar:
#sidebar-wrapper {
  display: none;
}
Penerapan: Pembuatan Area Postingan Penuh dan Penghilangan Sidebar
Jika Anda sudah memahami penjabaran di atas, mari ktia lakukan penerapan langsung.
1. Login ke blogger
2. Tata Letak
3. Edit HTML
4. Cari kode </head>
5. Letakkan kode berikut ini di atas </head>
 <b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>
 <style>
.sidebar{
display: none !important;
}
 #main-wrapper, .post {
width: 640px;
  }
  </style>
  </b:if>
Ganti yang berwarna merah pertama dengan alamat postingan yang ingin Anda buat penuh area postingannya dan hilangkan sidebarnya. Ganti warna merah kedua dengan lebar yang telah Anda perhitungkan. Sebenarnya teman-teman semua bisa langsung menghapus setiap ada tulisan sidebar di HTML template. Tapi itu sangat beresiko, dan mungkin nanti kalau pengin memunculkan kembali lupa kodenya, yah bisa jadi runyam malah. Oke, cukup sampai disini tutorial kali ini.

Semoga bermanfaat......
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

18 comments:

  1. mf mas q g bs comptr tp q terus ikuti infonya, trmsk bikin blok. maksudnya dg kode itu apa seperti Edit HTML
    terus Cari kode head maksdnya gmn...mas mf q g ngerti. mhn petunjuknya. buat mas tampilannya oke banget........

    ReplyDelete
  2. @Mas Akmal:
    makasih mas pertanyaanya, saya sarankan anda terlebih dahulu untuk membaca disini atau disini
    Saya juga dulu sama kayak mas Akmal belum ngerti tapi setelah berusaha terus akhirnya jadi seperti ini... (narsisss heheheheh)

    ReplyDelete
  3. MAtur tengkyu Braderrr ..

    coba ceck Blog Ane Brad ..!!!

    ReplyDelete
  4. kalau tanpa sidebar di semua postingan caranya gmn gan ?

    ReplyDelete
  5. tolong lihat blog saya http://jhrek.blogspot.com caranya masih bingung.

    ReplyDelete
  6. Kalau dibuat otomatis tanpa menyebutkan url, bisa nggak. Misalnya untuk label tertentu atau halaman statis. Terima Kasih.

    ReplyDelete
  7. Maaf nih Sob, bila diperkenankan saya ingin sedikit bertanya. Kalau misalnya diterapkan pada template standar Blogger gimana ya? Sebab kalau dalam template standar Blogger tidak ada bagian #main-wrapper atau #sidebar-wrapper seperti yang Sobat uraikan di atas.

    Sekian, terimakasih, dan salam.

    ReplyDelete
  8. thank's maskolis gara2 ente blog ane lumayan naik trafic nya http://adityawancahya.blogspot.com

    ReplyDelete
  9. Langkah-langkahnya udah cukup jelas dan tinggal dipraktekkan saja, makasih Bos..!!!Saat ini Blog bisa jadi sumber uang

    ReplyDelete
  10. mas, knapa tampilan blog saya jika dibuka tata letak atau lain2 tampilannya kecil x sperti ter potong2.???

    ReplyDelete
  11. terima kasih atas informasi yang bermanfaat ini..
    http://www.reseper.com/pumpkin-labu-dengan-saus-kayu-manis-apel-cokelat/

    ReplyDelete
  12. Mas Admin,Bagaimana cara Memperlebar #main-wrapper ,Coba Mas Liat Blog Saya
    http://toko-menynjar.blogspot.com ,Bagian "Fasilitas" Lebarnya Mau Saya Jadikan Full ,Terima Kasih atas Perhatiannya.

    ReplyDelete
  13. makasih triknya mas kolis, dengan tutorial ini ahirnya saya sedikit paham tuk ngilangin sidebar di template.

    ReplyDelete
  14. sangat bagus gan tutorialnya, kunjungi balik http://tutorial052.blogspot.com/

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger