Cara menampilkan Related Posts berdasarkan label tertentu berbeda beda dengan Gambar di Blog

Diposkan: 07 September, 2014
Ilustrasi related post berdasarkan label

Pernah lihat..? Atau pernah menjumpai sebuah blog blogspot yang menampilkan artikel terkait yang berbeda beda gayanya. Tentu jarang bukan hanya tak terkecuali. Mungkin bagi yang tidak paham dengan judul post tersebut akan merasa bingung, namun yang sudah paham mungkin tidak.

Tapi pelu di ketahui terlebih dahulu bahwa disini tidak berbagi javascript, Hanya berbagi trik.

Maksud dari menampilkan related post yang berbeda beda itu begini : 

Katakanlah blog anda memiliki label post tiga, misalnya
1. Tips Trik
2. Tutorial
3. Makanan Enak
Namun anda menginginkan label post Makanan Enak dengan gambar. Dan label post tips trik dan tutorial tidak dengan gambar. Atau unsur kebalikannya.

Mengapa label post Makanan Enak di tampilkan dengan gambar dan label yang tidak terlalu penting yang dua tidak dengan gambar?? 

Alasan yang mendasari hal tersebut di antaranya adalah kecepatan loading blog dan minat pengunjung.

Coba kita cerna secara luas:

  • Ketika label post Makanan Enak ditampilkan dengan gambar, kemungkinan pengunjung akan mengklik karena ada pratijau gambar, Dan akan memberi guna untuk informasi gambar tersebut.
  • Namun ketika hanya label post tip trik dan tutorial tersebut ditampilkan dengan gambar, jika menurut pendapat kita secara pribadi, hanya akan memberatkan loading blog.

Umumnya post dengan dengan label tips trik atau tutorial gambarnya hanya croping atau oret aret tak terkecuali, berbeda dengan dengan label post Makanan Enak yang gambarnya jepretan langsung dari kamera.

Bisakah kita menampilkan related post dengan gambar hanya pada label tertentu. Kebalikannya yaitu related post tidak dengan gambar pada label tertentu.
Bila pertanyaan tersebut di lontarkan pada kita, secara singkat kita akan menjawab bisa dan bahkan tidak hanya itu, model related post yang bermacam model dan gaya bisa di tampilkan dengan label tertentu.
Bagaimana teknik atau trik menampilkannya..?,

Berikut trik menampilkan artikel terkait berbeda beda sesuai label post yang anda inginkan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;Makanan Enak&quot;'>
<style type='text/css'>
CSSnya dengan Gambar letakkan disini..
</style>
<script type='text/javascript'>
Javascriptnya related post dengan Gambar & Callbacknya..
</script>
<b:else/>

<style type='text/css'>
CSSnya tanpa Gambar letakkan disini..
</style>
<script type='text/javascript'>
Javascriptnya related post tanpa Gambar & Callbacknya..
</script>
</b:if>

</b:loop>
</b:if>
</b:if>

Lebih jauh apabila suatu saat ingin menambah lagi label tertentu dengan gambar atau sebaliknya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;Label Posts Dengan Gambar1&quot;'>
<!-- Related post disertai Gambar MODEL1 -->
<b:else/>
<b:if cond='data:label.name == &quot;Label Posts Dengan Gambar2&quot;'>
<!-- Related post disertai Gambar MODEL2 -->
<b:else/>
<b:if cond='data:label.name == &quot;Label Posts Dengan Gambar3&quot;'>
<!-- Related post disertai Gambar MODEL3 -->
<b:else/>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<!-- Related post tidak disertai Gambar ambil Nama Label yang terakhir -->
</b:if>
</b:if>
</b:if>
</b:if>

</b:loop>
</b:if>
</b:if>

Namun akan terasa aneh atau lucu apabila satu post di labeli lebih dari satu label.

Sehingga Konsepnya, satu post satu label, atau post label tertentu hanya satu label.


#Enjoy...:-)

2 komentar