Cara Membuat Blog Tanpa Sidebar Di Blogspot

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.

Sumber : http://www.maskolis.com/2011/03/cara-membuat-blog-tanpa-sidebar-di.html

Read more »

Tutorial,

{[['']]}

Cara Membagi Sidebar Menjadi 2 Kolom di Blogspot

Sesuai dengan judul diatas, kali ini saya akan menulis artikel tentang bagaimana cara untuk membuat sidebar menjadi 2 kolom. Membagi  sidebar 2 kolom sebenarnya bukan merupakan keharusan tiap blog. tapi mengingat untuk mempercantik blog juga dapat mempersempit ruangan blog kita. dengan maksud pengunjung tidak merasa bosan dengan blog kita. 

Baiklah, kita langsung saja pada langkah-langkah pembuatannya :

1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing-masing sidebar menjadi 117px.

Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.

5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper2 {

background-color: #f6f6f6;

width:254px;

float:$endSide;

padding:0;

color: $sidebarTextColor;

font-size: 83%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini

#sidebar-wrapper {

background-color: #f6f6f6;

width:117px;

float:$endSide;

padding:0;

color: $sidebarTextColor;

font-size: 83%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper2 {

background-color: #f6f6f6;

width:117px;

float:$endSide;

padding:0;

margin:0px 20px 0px 0px;

color: $sidebarTextColor;

font-size: 83%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

7. Setelah itu, cari kode

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='kategori' type='Label'/>

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

<b:widget id='Feed1' locked='false' title='Creating Website' type='Feed'/>

</b:section>

</div>

8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.

9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='kategori' type='Label'/>

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

<b:widget id='Feed1' locked='false' title='Creating Website' type='Feed'/>

</b:section>

</div>

<div id='sidebar-wrapper2'>

<b:section class='sidebar' id='sidebar2' preferred='yes'>

</b:section>
</div>

10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.




http://www.maskolis.com/2011/01/membagi-sidebar-menjadi-2-kolom-di.html

Read more »

Tutorial,

{[['']]}

5 Template Hasil Modifikasi

5 Template Hasil Modifikasi - Pada postingan kali ini saya hanya akan berbagi 5 template hasil modifikasi dari template saya sebelumnya, 2 dari teman blogger yaitu dari AA Sholah dan Panjz Online dan 3 lagi dari adik saya. Karena dari beberapa template yang sudah saya buat mungkin ada kekurangcocokan dalam hal warna atau fitur yang kurang. Berikut ini 5 template hasil modifikasi dari template saya sebelumnya :

1. Cara Gampang Template

Demo | Download

1. Cara pemasangan widget pada template ini hampir sama dengan Black Beauty Template, untuk lebih jelasnya silahkan buka lagi artikel 3 template paling sompret di dunia
2. Untuk mengaktifkan fungsi Reply pada komentar tinggal ganti ID ini (3553200374686839922) 
3. Untuk mengganti FansPage Facebook yang ada di bawah postingan, tinggal ganti ID ini (175220759192447) dengan ID FansPage masing-masing. 

2.  Photored Template

Demo | Download

Template ini buatan Panjz Online, untuk pemasangan templatenya langsung saja ke blog si pembuat disini http://panjz-online.blogspot.com/

3. Johny Ganteng Store With Cart

Dari beberapa komentar yang masuk pada artikel 2 Template Toko Online Semrawut, banyak yang mengingkan template Johny Ganteng Store menggunakan cart dan slider carousel. Ini sudah saya modifikasi, tapi nggak tahu cocok apa nggak.

Demo | Download

Cara pasang widget sama dengan template Johny Ganteng Store, silahkan buka lagi artikel 2 Template Toko Online Tanpa Cart. Dan untuk cartnya sendiri untuk memodifikasinya saya pakai dari Johny Blackstore template.

4. Johny Kenthir Green

Demo | Download

Pemasangan widget pada template ini sama dengan Johny Kenthir template, silahkan dibuka lagi artikelnya disini Johny Kenthir, Template Ramai Seperti Pasar Tradisional.

5. Johny Crottmag

Demo | Download

Template ini sama persisi dengan Johny Sompret Banget cuma beda warna saja, untuk pemasangannya silagkan dilihat disini 2 Template Kurang Kerjaan.

So jika ada di antara teman-teman blogger yang berkeinginan untuk membagikan template hasil karya sendiri ataupun modifikasi template yang sudah ada, silahkan kirim ke email saya disini ncmajid@gmail.com. Jika template itu sudah bebas dari bug dan layak untuk dikonsumsi, akan saya publish disini. Demikian tadi artikel singkat tentang 5 template modifikasi, bagi yang berminat silahkan dipakai. Jika ada yang kurang jelas bisa langsung ditanyakan lewat kotak komenta. Semoga bermanfaat.........

 

 

Sumber :  http://www.maskolis.com/2012/09/5-template-hasil-modifikasi.html

Read more »

Template, Tutorial,

{[['']]}