Memodifikasi Tampilan Post Di Homepage Menjadi Berbeda-beda

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/16/2017

Kadang kita sebagai pemilik blog merasa bosan melihat tampilan blog, salah satunya tampilan post di homepage. Nah, kita bisa menyingkirkan kebosanan ini dengan memodifikasi tampilan post di homepage menjadi berbeda-beda.

Kita bisa bebas memodifikasi tampilan post homepage berbeda-beda, misal menggabungkan tampilan grid dan list, atau kita modifikasi tampilan post pertama berbeda dengan post lainnya.

Trik ini sudah saya terapkan pada beberapa template Kompi. Jika Anda ingin mencobanya, silahkan ikuti caranya di bawah ini.

Silahkan cari kode di bawah ini

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

Gulir ke bawah sedikit, kemudian silahkan hapus kode berikut:

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

Kemudian gulir lagi ke bawah, lalu hapus juga kode berikut:

      <b:if cond='data:numPosts != 0'>

        &lt;/div&gt;&lt;/div&gt;

      </b:if>

Nah sekarang kita tinggal membuat style untuk mengatur tampilan post dengan menggunakan .post-outer:nth-child()

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 {

..............

..............

}

Bagaimana, mudah bukan? Selamat mencoba...