Cara Modifikasi Tampilan Post di Home Berbeda-beda

Kita bisa membuat tampilan recent posts di homepage blogspot dengan berbeda-beda style. Misalnya menggabungkan tampilan grid dan list, atau kita modifikasi tampilan post pertama berbeda dengan post lainnya.

Silahkan cari kode di bawah ini

<b:includable id='main' var='top'>

Hapus kode seperti di bawah ini (letaknya berada di bawah kode yg atas)

        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>

        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>

Hapus juga kode ini :

      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>

Jika kita ingin merubah tampilan post pertama, maka semua style yg berhubungan dengan post pertama menggunakan .post-outer:nth-child(1) seperti di bawah ini contohnya:

.post-outer:nth-child(1) .post {
..............
..............
}
.post-outer:nth-child(1) .post h2 {
..............
..............
}
.post-outer:nth-child(1) .post-body {
..............
..............
}

Dan seterusnya.

Kemudian jika ingin merubah tampilan post lainnya juga maka tambahkan style seperti ini, misal untuk post kedua, ketiga, dan keempat (agar memiliki tampilan yang sama).

.post-outer:nth-child(2) .post,
.post-outer:nth-child(3) .post,
.post-outer:nth-child(4) .post {
..............
..............
}
.post-outer:nth-child(2) .post h2,
.post-outer:nth-child(3) .post h2,
.post-outer:nth-child(4) .post h2 {
..............
..............
}
.post-outer:nth-child(2) .post-body,
.post-outer:nth-child(3) .post-body,
.post-outer:nth-child(4) .post-body {
..............
..............
}

Dan seterusnya.

Dan untuk post lainnya, buatkan style seperti biasa, seperti berikut

.post {
..............
..............
}
.post h2 {
..............
..............
}
.post-body {
..............
..............
}

Sumber : http://www.kompiajaib.com/2017/04/memodifikasi-tampilan-post-di-homepage.html