Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Membuat Template Blogger Menjadi 2 / 3 Kolom Versi Grid

Cara Membuat Template Blogger Menjadi 2 / 3 Kolom Versi Grid Images @rian_seo
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.

Cara Membuat Template Blogger Menjadi 2 / 3 Kolom Versi Grid
Image by @rian_seo

Cara Membuat Template Blogger Menjadi 2 / 3 Kolom Versi Grid
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.

    Cara Membuat Template Blogger Menjadi 2 / 3 Kolom Versi Grid
    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.
    Bagaimana reaksi Anda tentang artikel ini?
    Previous article
    Next article

    Komentar (0)

    Post a Comment

    Kami memiliki kebijakan dalam berkomentar di blog ini :

    - Dilarang promosi suatu barang
    - Dilarang memasang link aktif di komentar
    - Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
    - Dilarang menulis komentar yang berisi sara atau cemuhan

    Kebijakan komentar yang bisa Anda temukan selengkapnya disini

    Dukungan :

    Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    Subscribe now

    Signup now to my exclusive newsletter