Memodifikasi Tampilan Post Di Homepage Menjadi Berbeda-Beda

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

Kita dapat 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 aku terapkan pada beberapa template Kompi. Jika Anda ingin mencobanya, silahkan ikuti caranya di bawah ini.

Silahkan cari arahan di bawah ini

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

Gulir ke bawah sedikit, kemudian silahkan hapus arahan 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, kemudian hapus juga arahan berikut:

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

Nah kini kita tinggal menciptakan style untuk mengatur tampilan post dengan memakai .post-outer:nth-child()

Jika kita ingin merubah tampilan post pertama, maka semua style yg berafiliasi dengan post pertama memakai .post-outer:nth-child(1) ibarat 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 kalau ingin merubah tampilan post lainnya juga maka tambahkan style ibarat ini, misal untuk post kedua, ketiga, dan keempat (agar mempunyai 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 ibarat biasa, ibarat berikut

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

Bagaimana, gampang bukan? Selamat mencoba...


Sumber https://www.kompiajaib.com/

Share this post