Getcond Blogger, Bagaimana cara membuat post grid dengan HTML dan CSS di Blogger.
Berikut ini adalah langkah-langkah untuk membuat grid post di halaman beranda Blogger:
Cari Kode HTML dengan id='post'
- Buka Blogger dan masuk ke Dasbor.
- Pilih blog yang ingin Anda edit.
- Pergi ke "Tata Letak" atau "Layout", tergantung pada versi Blogger yang Anda gunakan.
- Pilih elemen (id='post') untuk mengeditnya.
- Atau Tekan (Ctrl + F) Hasilnya pencariannya <b:includable id='post' var='post'>
- Ini kode HTML yang mengatur post grid dan Hapus lalu tambahkan kode berikut.
<b:includable class='g3-row-padding' id='post' var='post'>
<!-- Post Grid Homepage -->
<b:if cond='data:view.isHomepage or data:blog.searchQuery or data:blog.url'>
<article class='g3-col s12 m6 l4 g3-padding'>
<div class='g3-container g3-margin-bottom'>
<!-- Image -->
<div class='g3-content g3-hover-opacity'>
<b:if cond='data:post.firstImageUrl'>
<img class='g3-hover-opacity g3-image g3-main' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' style='width:326px;height:201px'/>
</b:if>
</div>
<!-- Heading -->
<div class='g3-container g3-white g3-padding'>
<p>
<b><a expr:href='data:post.url' expr:title='data:post.title' style='text-decoration:none'>
<data:post.title/></a></b>
</p>
<!-- Date -->
<p>
<span class='g3-text-grey' expr:href='data:post.url' rel='bookmark' style='text-decoration:none;padding:10px 0' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished' style='text-decoration:none!important'><data:post.timestamp/></abbr></span>
</p>
</div>
</div>
<section class='clear'/>
</article>
</b:if>
</b:includable>
Tambahkan CSS
Tambahkan kode CSS berikut untuk mengatur tata letak grid:
<style>
*, ::before, ::after {
box-sizing: inherit;
}
section, nav, article, aside, hgroup, header, footer {
display: block;
}
.g3-padding {
padding: 8px 16px !important;
}
.g3-col {
float: left;
width: 100%;
}
.g3-col.s12 {
width: 99.99999%;
}
@media (min-width: 601px) {
.g3-col.m6 {
width: 49.99999%;
}
}
@media (min-width: 993px) {
.g3-col.l4 {
width: 33.33333%;
}
}
.g3-container::after, .g3-container::before, .g3-clear::before {
content: "";
display: table;
clear: both;
}
g3-margin-bottom {
margin-bottom: 16px !important;
}
.g3-container, .g3-panel {
padding: 0.01em 16px;
}
.g3-content {
max-width: 980px;
}
.g3-content, .g3-auto {
margin-left: auto;
margin-right: auto;
}
.g3-main, #main {
transition: margin-left .4s;
}
.g3-image {
max-width: 100%;
height: auto;
}
img {
vertical-align: middle;
}
img {
border-style: none;
}
.g3-text-grey, .g3-hover-text-grey:hover, .g3-text-gray, .g3-hover-text-gray:hover {
color: #757575 !important;
}
</style>
Sesuaikan gaya CSS dan struktur HTML sesuai dengan desain dan preferensi Anda. Anda juga bisa menambahkan fitur tambahan seperti tombol "Muat Lebih Banyak" untuk memuat lebih banyak posting secara dinamis saat pengguna menggulir halaman dengan penggunaan javascript.
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat grid posting di halaman beranda Blogger Anda. Semoga tutorial ini membantu!