Merubah Tampilan Post Di Homepage Menjadi Berbeda Beda

Selamat pagi sobat blogger, setelah kemarin saya membagikan template gratis yang yang berjudul Coba Desain Blogger Template AMP HTML, Pada kesempatan kali ini saya akan mencoba membagikan artikel dengan judul Merubah Tampilan Post Di Homepage Menjadi Berbeda Beda.

Masih ingat dengan postingan mas Adhy Suryadi yang berjudul Mengatur Letak Iklan Adsense Di Antara Postingan Homepage Blogspot..? Nah dengan tag cond tersebut maka kita juga bisa modifikasi untuk menjadikan tampilan di homepage menjadi berbeda beda.

Seperti biasanya ketika kita ingin  mengatur bentuk postingan di homepage, baik bentuk list maupun grid, background post dan lain sebagainya kita akan menggunakan class post ( .post ).

Jadi disini untuk membuat tampilan post di homepage menjadi berbeda beda, silahkan tambahkan kode index='x' pada kode di bawah ini

<b:loop values='data:posts' var='post'>

Sehingga kodenya menjadi seperti di bawah ini

<b:loop values='data:posts' var='post' index='x' >

Setelah itu, scrol sedikit kebawah, Anda akan menemukan kode seperti dibawah ini.

<b:include data='post' name='post'/>

Silahkan Anda hapus kode tersebut, dan ganti dengan kode dibawah ini.


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:x==0'>
<div class='box-post0'><b:include cond='data:x==0' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==1'>
<div class='box-post1'><b:include cond='data:x==1' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==2'>
<div class='box-post2'><b:include cond='data:x==2' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==3'>
<div class='box-post3'><b:include cond='data:x==3' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==4'>
<div class='box-post4'><b:include cond='data:x==4' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==5'>
<div class='box-post5'><b:include cond='data:x==5' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==6'>
<div class='box-post6'><b:include cond='data:x==6' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==7'>
<div class='box-post7'><b:include cond='data:x==7' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==8'>
<div class='box-post8'><b:include cond='data:x==8' data='post' name='post'/></div>
        </b:if>
<b:if cond='data:x==9'>
<div class='box-post9'><b:include cond='data:x==9' data='post' name='post'/></div>
        </b:if>
          <b:else/>
        <b:include data='post' name='post'/>
        </b:if>

Nah sekarang kita tinggal membuat style untuk mengatur tampilan post dengan menggunakan .box-post seperti di bawah ini.

.box-post0 .post {
..............
..............
}
.box-post0 .post-thumbnail {
..............
..............
}
.box-post0 .post h2 {
..............
..............
}
.box-post0 .post-body {
..............
..............
}


.box-post1 .post {
..............
..............
}
.box-post1 .post-thumbnail {
..............
..............
}
.box-post1 .post h2 {
..............
..............
}
.box-post1 .post-body {
..............
..............
}

Dan seterusnya.

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

.box-post2 .post,
.box-post3 .post {
..............
..............
}
.box-post2 .post-thumbnail,
.box-post3 .post-thumbnail {
..............
..............
}
.box-post2 .post h2,
.box-post3 .post h2 {
..............
..............
}
.box-post2 .post-body,
.box-post3 .post-body {
..............
..............
}

Dan seterusnya.

Dan untuk post lainnya, buatkan style seperti pada biasanya, seperti dibawah ini.
.post {
..............
..............
}
.post-thumbnail {
..............
..............
}
.post h2 {
..............
..............
}
.post-body {
..............
..............
}

Nah, mungkin hanya itu saja yang bisa saya bagikan tentang Merubah Tampilan Post Di Homepage Menjadi Berbeda Beda. Selamat mencoba.

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser