Mengubah Tampilan Post Homepage Menjadi Berbeda-beda

Mengubah atau memodifikasi post pada bagian homepage menjadi berbeda - beda atau bervariasi sebenarnya saya lihat pada blog Kang Ismet, bila Anda perhatikan dengan jelas pada bagian post di homepage tersebut berbeda-beda dengan satu postingan dengan postingan yang lainnya.

Dengan ini saya membagikan tutorial memodifikasi post menjadi berbeda-beda untuk Anda bila minat untuk menerapkannya pada blog Anda. Tutorial ini saya dapatkan pada blog Kompi Ajaib dan sudah saya coba atau testing terlebih dahulu untuk menggunakannya pada blog percobaan saya.

Dengan adanya tutorial ini, saya yakin Anda dapat mencobanya pada blog Anda. Di bawah ini merupakan tutorial yang bisa Anda terapkan pada blog Anda jika ingin membuat tampilan homepage menjadi berbeda - beda.

Membuat Postingan Berbeda-beda Pada Homepage

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda cari kode <b:includable id='main' var='top'> dan jika ada kode mirip seperti di bawah ini, silakan Anda hapus kode tersebut.

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

Silakan Anda scroll sedikit kebawah, jika ada kode mirip seperti kode di bawah ini silakan Anda hapus juga kode tersebut

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

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

      </b:if>

Langkah kedua :

Jika Anda ingin merubah tampilan post homepage Anda yang pertama maka Anda pakai seperti CSS dibawah ini

.post-outer:nth-child(1) .post {

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

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

}

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

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

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

}

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

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

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

}

Jika ingin merubah tampilan post lainnya juga bisa, silakan Anda pakai CSS dibawah ini

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

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

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

}

Untuk membuat tampilan post style biasa Anda bisa menggunakan CSS di bawah ini

.post {

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

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

}

.post h2 {

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

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

}

.post-body {

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

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

}

Mungkin itu saja tutorial yang bisa saya berikan untuk hari ini, semoga bermanfaat.

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

Related Post