Pada pertemuan sebelumnya kita membahas theme blogger 3 column dengan Bootstrap. Kuncinya ada pada <div class="col"> yang terdiri atas 3 tempat. Satu column untuk sidebar sebelah kiri, satu lagi untuk sebelah kanan dan yang paling lebar untuk area postingan dan berada di tengah-tengah.
Dari pelajaran tersebut kita juga mengetahui contoh praktek penggunaan row dan container. Dimana, container ini menampung class=row yang didalamnya terdapat 3 column. Sehingga, dengan pengetahuan yang sama kita bisa juga membuat theme blogger 2 column maupun landing page.
Adapun untuk theme blogger 2 colum tentu dengan <div class='col'> yang terdiri atas 2 bagian. Tinggal atur saja lebar masing-masingnya. Dan yang pasti, untuk area posting pasti jauh lebih lebar jika dibandingkan dengan columns untuk bilah sisi yang bisa diatur di kanan atau kiri.
Cara Membuat Template Blogger 2 Lajur dengan Bootstrap
Template blogger dengan 2 kolom termasuk umum digunakan oleh banyak blogger. Saya sendiri termasuk penggunanya untuk saat ini. Meskipun kedepannya ada kemungkinan bisa berubah selera. Dan salah satu yang menarik yang saya pelajari saat ini yaitu theme blogger 3 column.
Namun untuk mendapatkan pemahaman yang lebih baik lagi tidak mengapa sedikit mengulang. Bedanya, theme blogger yang akan kita pelajari kali ini yaitu 2 column. Dengan demikian, teman-teman semua bisa membedakan faktor yang paling mendasar ketika membuat theme blogger sendiri dari nol.
Untuk lebih jelasnya, berikut ini langkah-langkah yang perlu dilakukan untuk membuat template blogger 2 columns. Cara ini masih menggunakan Bootstrap agar lebih cepat menghasilkan template.
1. Masuk ke dashboard Blogger, hapus template default dan gunakan template blogger dasar yang sudah terpasang cdn Bootstrap berikut ini.
2. Karena akan membuat theme blogger 2 column maka kita bagi dua dengan kode, misalnya berikut ini yang ditempatkan setelah tag <body>:
3. Perhatian! Jumlah seluruh kolom sistem grid yang digunakan oleh Bootstrap yaitu 12 column. Sehingga, untuk menghasilkan dua column bisa kombinasi 3 dan 9, atau 4 dan 8 atau sesuai selera Anda asalkan totalnya tidak lebih dari 12. Dan untuk penempatannya, bilah sisi biasanya diatur dengan lebar yang lebih kecil. Bilah sisi ini bisa Anda tempatkan di sebelah kiri maupun kanan. Pada contoh di bawah ini misalkan membagi column menjadi 8 (area posting) dan 4 (untuk sidebar).
4. Untuk class yang lebih lebar isi dengan section "article" atau "main" yang sudah ada sebelumnya pada template dasar nomor 1 di atas. Silahkan cut kode tersebut dan paste atau pindahkan setelah tag <div class=col-lg-8'> dan sebelum tag penutup </div>.
di dalam section tersebut isi dengan widget "blog post" agar tersambung dengan dashboard Blogger. Masukan kode di bawah ini sebelum "</b:section>" dari class 'article' di atas.
5. Untuk kolom yang diperuntukan sebagai sidebar, yaitu 'class=col-lg-4', masukan section berikut.
Jika menggunakan sidebar sebelah kiri bisa ganti dengan class='right-sidebar' di atas dengan class='left-sidebar'.
7. Kode seluruhnya akan tampak seperti berikut jika menggunakan perbandingan column 3 dan 9.
8. Atau seperti berikut jika menggunakan perbandingan 4 untuk sidebar dan 8 untuk area posting.
9. Klik "Save", kode akan bartambah banyak secara otomatis menjadi sekitar 800-an baris.
10. Silahkan buat sebuah postingan sehingga akan tampak seperti tangkapan layar berikut ini.
Kesimpulan
Theme Blogger 2 columns adalah pilihan yang menarik untuk banyak blogger yang mengutamakan tampilan yang sederhana. Dan dengan menggabungkan Bootstrap untuk membuat tata letaknya, ini pilihan yang tepat bagi siapapun yang ingin membuat template sendiri dari nol.
Apalagi jika dihadapkan dengan tantangan zaman yang mengharuskan tampilan yang mobile responsive. Tentu, dengan kemampuan Bootstrap selama ini sudah tidak diragukan lagi pasti responsif. Kecuali pada widget "area posting" yang mengharuskan penggunaan fitur dari Blogger.
Namun hal tersebut juga tidak terlalu masalah karena cukup dengan sedikit kode CSS untuk membuat tampilan gambar postingan menjadi responsif. Dengan demikian, para pengguna blogger yang ingin membuat theme sendiri dari nol tidak perlu ragu untuk mencobanya.
Selamat membuat theme Anda sendiri dari nol.
Tidak ada komentar:
Posting Komentar