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.

Catatan — Sebelum melakukan trik ini, sangat diharapakan buat kamu sudah memahai sedikit beberapa fungsi CSS dan juga memahami beberapa tag conditional blogger, dimana fungsi ini untuk memberikan kata perintah sesuai halaman tampilan yang diinginkan.

Jadi perlu Anda ketahui, jika setiap element ukuran template yang ada di blogger itu berbeda-beda dan semuanya tidak pernah sama.

Baca juga — Pelajari lebih lanjut tentang fungsi dan penggunaan tag conditonal blogger Seandainya trik ini kami buatkan secara mentah dengan kode CSS yang sudah kami sediakan, tentunya untuk kode pemanggil id class nya pasti berbeda dari punya kami.

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.

Image by @rian_seo

Image by @rian_seo

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:
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.

Kode CSS diatas masih bersifat pengaturan standar, kamu bisa atur atau desain sesuai keinginan sendiri.

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 == &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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.

1. CSS post yang akan mewakili lebar tampilan template kamu secara keseluruhan, Tanpa terbagi menjadi 2 kolom. Contoh kode CSS nya .post {width:100%;}
2. 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 == &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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.

Berbagi :