Tag Kondisional dengan Media Queries

Tag Kondisional dengan Media Queries - Bagi sahabat template oprekers, tentunya sudah tidak asing lagi dengan istilah Tag Kondisional. Pengertian Tag Kondisonal kurang lebihnya, merupakan CSS untuk merubah pada kondisi tertentu.

Pada artikel terdahulu, saya sudah menjelaskan Tag kondisional Blogger dan cara penggunaannya, ini sangat bermanfaat untuk tampilan responsive, apalagi media Android atau iPhone sudah bertebaran, sehingga layout blog harus disesuaikan dengan menggunakan Media Queries. Saat ini yang akan saya jelaskan, bagaimana cara menyimpan media queries pada tag kondisional. Ini juga sekaligus sebagai catatan pribadi saya supaya tidak lupa :)

Sebagai gambaran, ketika kita akan mengedit template dengan model grid. Sebelumnya kita lihat pada area posting, akan tampak seperti ini :



Untuk menciptakan 2 kolom seperti dibawah, gunakan tag kondisional dengan sistem persentase.

Tampilan Homepage pada Nexus7

Contoh tag kondisional yang digunakan untuk membagi 2 kolom seperti di atas (untuk margin, padding dan lainnya tidak saya sertakan) :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
.post: {
    width: 48%;
}
</b:if>
</b:if>

Kode tersebut akan membagi postingan menjadi 2 kolom sampai media terkecil sekalipun. Untuk media dengan ukuran 320px seperti iPhone, tidak mungkin menampilkan 2 kolom pada homepage. Oleh karena itu, pada media 320px harus dikembalikan menjadi width: 100%. Inilah letak penulisan yang berbeda pada tag kondisional dengan media queries, contoh:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<style media='screen and (max-width : 320px)'>
@media screen (max-width : 320px){
.post {width : 100%}
}
</b:if>
</b:if>

Sehingga tampilan pada homepage akan kembali 1 kolom saja, seperti screenshoot di bawah ini :

Tampilan Homepage pada iPhone

Apabila ingin menggunakan tag kondisiona pada media tertentu, tidak digunakan pada media yang lebih besar atau kecil, tambahkan tag only pada media queries. Contoh :

@media only screen (min-width : 480px) and (max-width : 760px){
.post {width : 47%}
}

Silahkan sobat tambahkan, apabila masih ada kekurangan pada artikel saya..