Menggunakan Card Columns Bootstrap 4 pada template Blogger

Pada posting ini kita melanjutkan pemabahasan menggunakan Bootstrap pada template Blogger, setelah sebelumnya telah dibahas bagaimana menggunakan Carousel dari Bootstrap yang berisi beberapa Card. Disini kita akan melanjutkan bagaimana menggunakan Card Coulumns Bootstrap 4 dengan susunan layout seperti Masonry yang akan disesuaikan pada template Blogger ini.

Mengatur layout dengan menambahkan container dan komponen card-columns ketika kondisi index ini ditampilkan, mengambil data post dan dilakukan berulang kali dengan <b:loop> dan mengatur jumlah post yang akan ditampilkan pada pengaturan widget.

<!-- Blog Posts -->
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
<b:widget-settings>
    <b:widget-setting name='showDateHeader'>true</b:widget-setting>
</b:widget-settings>
<!-- Main Layout -->
<b:includable id='main'>
    <!-- Include Index -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <div class="container">
            <div class='card-columns'>
                <b:loop values='data:posts' var='post'>
                    <b:include data='post' name='index' />
                </b:loop>
            </div>
            <!-- Include Navigation -->
            <b:include name='nextprev' />
        </div>
    </b:if>
</b:includable>

Setelah itu mengambil data index <b:include data='post' name='index' /> menggunakan layout masonry seperti:

<!-- Index Masonry Grid Layout -->
<b:includable id='index' var='post'>
    <div class='card mb-4 border-0'>
        <div data-aos="fade-up" data-aos-duration="3000">
            <small class='text-muted'>
                <data:post.dateHeader />
            </small>
            <br/>
            <a expr:href='data:post.url' class='text-reset'>
                <h5 class='card-title hover-underline-animation'>
                    <data:post.title />
                </h5>
            </a>
            <div class="position-relative">
                <b:if cond='data:post.firstImageUrl'>
                    <img class='card-img' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' />
                <b:else/>
                    <img class='card-img' expr:alt='data:post.title' src='https://i.postimg.cc/xdBQnrSL/joeright-youtube-channel-art-black.png'/>
                </b:if>
                <div class="card-img-overlay d-flex align-items-start flex-column p-3">
                    <div class="w-100 text-right">
                        <small class='text-muted'>
                            <b:if cond='data:post.labels'>
                                <b:loop values='data:post.labels' var='label'>
                                    <span class='badge badge-secondary'>
                                        <a class='text-white' expr:href='data:label.url' rel='tag'>
                                            <i class="bi bi-tag-fill" style="font-size: .5rem;"></i> <data:label.name />
                                        </a>
                                    </span>
                                </b:loop>
                            </b:if>
                        </small>
                    </div>
                    <div class="card-item">
                        <p class='card-text'>
                            <b:eval expr='snippet(data:post.snippet, {length: 100})' />
                        </p>
                        <p class='text-right'><small class="text-muted"><a class='hover-underline-animation' expr:href='data:post.url'><i class="bi bi-book"></i> Baca</a></small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</b:includable>

Secara keseluruhan kodenya seperti ini:

<!-- Blog Posts -->
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
<b:widget-settings>
    <b:widget-setting name='showDateHeader'>true</b:widget-setting>
    <!-- Isi widget-setting lainnya -->
</b:widget-settings>

<!-- Main Layout -->
<b:includable id='main'>
    <!-- Include Index -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <div class="container">
            <div class='card-columns'>
                <b:loop values='data:posts' var='post'>
                    <b:include data='post' name='index' />
                </b:loop>
            </div>
            <!-- Include Navigation -->
            <b:include name='nextprev' />
        </div>
    </b:if>
    <!-- Include Post -->
    <b:loop values='data:posts' var='post'>
        <b:include data='post' name='post' />
    </b:loop>
</b:includable>

<!-- Index Masonry Grid Layout -->
<b:includable id='index' var='post'>
    <div class='card mb-4 border-0'>
        <div data-aos="fade-up" data-aos-duration="3000">
            <small class='text-muted'>
                <data:post.dateHeader />
            </small>
            <br/>
            <a expr:href='data:post.url' class='text-reset'>
                <h5 class='card-title hover-underline-animation'>
                    <data:post.title />
                </h5>
            </a>
            <div class="position-relative">
                <b:if cond='data:post.firstImageUrl'>
                    <img class='card-img' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' />
                <b:else/>
                    <img class='card-img' expr:alt='data:post.title' src='https://i.postimg.cc/xdBQnrSL/joeright-youtube-channel-art-black.png'/>
                </b:if>
                <div class="card-img-overlay d-flex align-items-start flex-column p-3">
                    <div class="w-100 text-right">
                        <small class='text-muted'>
                            <b:if cond='data:post.labels'>
                                <b:loop values='data:post.labels' var='label'>
                                    <span class='badge badge-secondary'>
                                        <a class='text-white' expr:href='data:label.url' rel='tag'>
                                            <i class="bi bi-tag-fill" style="font-size: .5rem;"></i> <data:label.name />
                                        </a>
                                    </span>
                                </b:loop>
                            </b:if>
                        </small>
                    </div>
                    <div class="card-item">
                        <p class='card-text'>
                            <b:eval expr='snippet(data:post.snippet, {length: 100})' />
                        </p>
                        <p class='text-right'><small class="text-muted"><a class='hover-underline-animation' expr:href='data:post.url'><i class="bi bi-book"></i> Baca</a></small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</b:includable>

Sehingga ditampilkan postingan menggunakan elemen card untuk membungkus konten yang akan ditampilkan dengan layout masonry. Card dibangun menggunakan CSS, disusun dari atas ke bawah dan dari kiri ke kanan. Bagian pada template Blogger yang digunakan pada Post Index, bagian ini berada di widget Blog atau tempat kita posting blog. Sebagai referensi kita bisa lihat dokumentasi Card Columns pada Bootstrap.