Bagaimana cara membuat atau menambahkan kolom baru di blogspot? Pada tutorial ringan ini saya akan coba sedikit memberikan konsep yang sangat sederhana bagaimana cara membuat atau menambahkan kolom baru di blogspot, Cara Membuat atau Menambahkan Kolom Baru di Blogspot
baik itu membuat 2 kolom menjadi 3 kolom maupun 4 kolom atau bahkan lebih, jadi saya harapkan sobat blogger bisa berkreasi sendiri dengan panduan Cara Membuat atau Menambahkan Kolom Baru di Blogspot
konsep dasar membuat kolom baru di blogspot. Saya akan berikan contoh dan ilustrasi sederhana dengan template 2 kolom, Cara Membuat atau Menambahkan Kolom Baru di Blogspot
di mana sobat blogger ingin mengubah layout template 2 kolom ini menjadi 3 kolom. Seperti biasa saya menggunakan contoh dengan template minima.
Konsep dasar untuk membuat kolom baru :Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Mengubah nilai ukuran width main-wrapper, sidebar-wrapper, dan outer-wrapper, biasanya header-wrapper, dan footer-wrapper mengikuti width outer-wrapper
Membuat definisi kolom baru pada section 2 (CSS)
Peletakan tag div baru pada section 3 (HTML) yang sudah dideklarasikan di bagian section 2 (CSS)
Simpan dan lihat hasilnyaCara Membuat atau Menambahkan Kolom Baru di Blogspot
Saya akan memberikan penjelasan pada masing-masing poin di atas, saya harapkan sobat blogger dapat mengikuti dengan seksama, baca perlahan-lahan dan pahami setiap petunjuknya. Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Cara Membuat atau Menambahkan Kolom Baru di Blogspot Mengubah template 2 kolom menjadi 3 kolom Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Poin pertama dilakukan adalah mengubah nilai outer-wrapper, main-wrapper dan sidebar-wrapper, pada contoh ini saya menggunakan template minima standart dengan kode CSS defaultnya :Cara Membuat atau Menambahkan Kolom Baru di Blogspot
#main-wrapper { width: 410px; float: $startSide; 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-wrapper { width: 220px; float: $endSide; 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 */ }
Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Perhatikan nilai yang di cetak tebal yang nantinya nilai tersebut akan kita rubah. Dapat dilihat pada kode tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Poin kedua adalah menambahkan elemen kolom baru dengan membuat nilai CSSnya, dan ubah juga nilai width outer-wrapper, main-wrapper dan sidebar-wrappernya sehingga akan seperti ini kode yang baru :
Cara Membuat atau Menambahkan Kolom Baru di Blogspot
#main-wrapper { width: 400px; margin-left: 20px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ }
#sidebar-wrapper { width: 150px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ }
#sidebar-wrapper2 { width: 150px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ }
Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Perhatikan juga nilai width yang di cetak tebal , yang pada umumnya penjumlahan main-wrapper dan sidebar-wrapper tidak melebihi nilai outer-wrapper ( Width Outer > Main + Sidebar), sisa kekurangan nilai widthnya umumnya di gunakan untuk margin dan padding agar nantinya tidak berdempetan masing-masing container. Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Sedangkan untuk container baru di tandai dengan warna biru. Nilai 750px tidak harus mutlak, sobat bisa mengubah nilai tersebut dan sesuaikan dengan kebutuhan sobat dan jangan lupa juga mengubah nilai width main dan sidebarnya. Cara Membuat atau Menambahkan Kolom Baru di Blogspot
NB : Biasanya saya mencopy kode #sidebar-wrapper dan mengubah id nya menjadi id baru con: #sidebar-wrapper2 kemudian mengubah nilai floatnya menjadi left
Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Poin yang ketiga membuat tag div sidebar baru di bagian section 3 (HTML), sebelumnya saya akan kasih lihat default kode template minima 2 kolom (no expand widget templates) : Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Perhatikan text yang berwarna biru yang merupakan tag div sidebar barunya, sedangkan untuk yang di highlight hijau adalah nilai section class yang mempunyai arti tampillan maupun widget yang di dalam container baru tersebut mengikuti aturan class sidebar seperti nilai background, h2, text dan lain-lain yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .sidebar2 {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='sidebar2' id='sidebar2'>, Cara Membuat atau Menambahkan Kolom Baru di Blogspot
sedangkan untuk text yang di highlight merahmerupakan id yang harus unik atau berbeda dengan id lainnya.
Pada poin ini sebenarnya sobat blogger bisa merubah layout template yang nantinya akan saya bahas lebih dalam lagi pada tutorial berikutnya.Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Poin yang keempat adalah simpan hasil pekerjaan sobat dan lihat hasilnya jika terdapat kesalahan pada layoutnya seperti misalnya sidebar baru posisinya jatuh ke bawah, yang perlu di lakukan adalah mengatur nilai width ataupun nilai margin dan paddingnya. Cara Membuat atau Menambahkan Kolom Baru di Blogspot
Gunakan prinsip trial and error! Semoga berhasil mengubah layout 2 kolom template sobat blogger menjadi 3 kolom atau lebih dengan konsep dasar di atas.
NB : Jangan lupa mengubah nilai width header dan footernya umumnya mengikuti nilai width outer Cara Membuat atau Menambahkan Kolom Baru di Blogspot
:.