Cara Membuat Template Blogger Menjadi 2 / 3 Kolom Versi Grid
Tutorial ini kami buatkan untuk para pembaca setia di blog kami ini, dimana sebelumnya trik ini banyak kami dapatkan lewat pertanyaan sahabat setia dari pesan email.
Jadi perlu Anda ketahui, jika setiap element ukuran template yang ada di blogger itu berbeda-beda dan semuanya tidak pernah sama.
Maka sangat disarankan kamu sudah mengenali kode class yang ada di template kamu.
Cara Membuat Template Blogger Menjadi 2 / 3 Kolom
Karena setiap id class nya berbeda-beda setiap template, maka untuk mengetahuinya kita harus menggunakan dengan cara mudah yaitu inspect element.
Caranya, buka halaman beranda blog kamu > pilih id class yang ingin kamu modifikasi > klik kanan mouse > inspect element
Contoh gambar bisa kamu lihat dibawah ini.
Sudah dapat id class kodenya, selanjutnya adalah membuat kode CSS nya agar tampilannya bisa di modifikasi.
NOTE:
jika kode misalnya .post diawali tanda titik ( . ) maka kode pemanggilnya menggunakan <div class
.Apabila kode pemanggilnya diawali tanda pagar ( # ) contohnya #post
maka kode pemanggilnya diawali<div id
Puyeng kepala kau nak? Iya namanya juga kode HTML kaya cewe, pasti banyak yang perlu dipahami.
Langkah berikutnya, membuat kode CSS untuk bagian kolom post agar bisa terbagi menjadi 2 / 3 kolom.
Sebagai contoh, kode yang kami gunakan disini kode pemanggilnya adalah <div class="post> maka kami membuat kode CSS nya dalam penulisan diawali tanda ( . ).
Contoh kode CSS nya seperti dibawah ini.
.post { width:50%; Lebar Kotak Post height:200px; Tinggi Kotak Post float:left; Kotak Berada di Kiri display:inline-block; Konten Mengalir ke Samping }
Penjelasan:
Kode CSS diatas masih bersifat pengaturan standar, kamu bisa atur atau desain sesuai keinginan sendiri.
width
pada bagian selektor CSS adalah ukuran lebar kotak post, bisa atur sesuai dengan lebar tema yang kamu gunakan.height
selesktor CSS bagian tinggi dan rendahnya kotak post yang ingin kamu mudifikasi.
Pengaturan selanjutnya, tampilan kotak post diatas sana mungkin sudah berubah menjadi 2 kolom, tetapi jika dibuka artikel kotak post diatas maka tampilanya di single post akan menjadi terpotong atau tidak tampil lebar secara bagus.
Sebagai contoh gambar bisa kamu lihat dibawah ini.
![]() |
Images by @rian_seo |
Sebabnya kenapa? karena seleksi CSS post yang kamu buat diatas tadi akan menyeleksi tag HTML post secara keseluruhan yang ada didalam template kamu.
Maka kita perlu menambahkan kode tag conditional agar CSS hanya berlaku di halaman utama saja tidak ikut mengatur kedalam single post.
Kode tag conditional nya kurang lebih seperti berikut ini.
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
-------- CSS-KUSUS-KOTAK-KOLOM-POST--------
</style>
</b:if>
</b:if>
Masih enak otaknya? Jika iya mari kita lanjutkan, ada 2 bagian CSS selektor kotak post yang harus kamu buat.- CSS post yang akan mewakili lebar tampilan template kamu secara keseluruhan, Tanpa terbagi menjadi 2 kolom. Contoh kode CSS nya .post {width:100%;}
- CSS post yang hanya berlaku ditampilan beranda / halaman awal template kamu, dan akan membagi menjadi beberapa kolom. Contoh CSS nya .post {width:50%;}
Maka untuk kode contoh CSS nya secara keseluruhan kurang lebih seperti contoh dibawah ini.
Kode CSS post dibawah ini berlaku sebagai pondasi lebar single-post .post { width:100%; height:auto; margin:0; padding:0; float:left; display:inline-block; } Kode CSS post dibawah ini hanya aktif ketika dihalaman utama saja <b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.pageType != "static_page"'> <style> .post { width:50%; height:200px; margin:0; padding:0; float:left; display:inline-block; } </style> </b:if> </b:if>Untuk peletakan kode CSS diatas, kamu bisa letakan dibagian atas kode
</head>
untuk kode CSS yang hanya aktif dihalaman beranda saja.Dan untuk kode CSS sebagai tampilan single-post bisa kamu letakan di atas kode
]]><b/bskin>
atau </style>
Sampai tahap ini, cara membuat template blogger menjadi 2 kolom untuk bagian post berjalan normal tanpa eror dibagian single-post nya.
Penutup
Demikian tutorial yang dapat kami sampaikan di pertemuan kali ini tentang belajar membuat template blogger menjadi versi grid, Jika ada pertanyaan atau langkah yang kami jelaskan diatas kurang dipahami, jangan ragu untuk bertanya dikolom komentar.
2 komentar untuk "Cara Membuat Template Blogger Menjadi 2 / 3 Kolom Versi Grid"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini
Kalau gridnya hanya di pasang di versi dekstop gimana bro? Kaya di blog ini
BalasHapusPakai CSS Responsive @media screen
Hapus