SEO Kraken Premium Blogger Template

CSS Media Queries untuk Desktop, Tablet dan Mobile

Taqabbalallahu Minna wa Minkum. Minna wa Minkum Taqabbalallah. Saya atas nama Arief Ghozaly, Penulis sekaligus Pemilik SEO Killer Tips, Mengucapkan Selamat Hari Raya Idul Fitri, 1 Syawal 1349 H. Minal Aidzin wal Faidzin. Mohon Maaf Lahir & Bathin.
Loading...
Kode Template Blogger Mobile Friendly dan Responsive: CSS Media Queries untuk Desktop, Tablet dan Mobile

CSS Media Queries merupakan kumpulan kode CSS yang akan mengatur Mobile Friendly dan Responsive sebuah template blogger.

Kode-kode ini bisa sobat gunakan dan berfungsi untuk memodifikasi berbagai tata letak (elemen) dari tampilan situs agar terlihat Mobile Friendly dan Responsive ketika di akses melalui smartphone, tablet dan komputer (laptop).

CSS Media Queries untuk Desktop, Tablet dan Mobile

CSS Media Queries ini sudah lama saya dapatkan melalui situs Github oleh Gokul Krish. Sengaja tidak saya bagikan di blog ini karena sedang dalam masa membuat dan mengembangkan template blogger SEO Kraken.

CSS Media Queries untuk Desktop, Tablet dan Mobile


Berikut kode-kode CSS yang mengatur tampilan blog Mobile Friendly (Responsive/Adaptif) template blogger:

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  //CSS
}
/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
  //CSS
}
/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
  //CSS
}
/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  //CSS
}
/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  //CSS
}
/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
  //CSS
}

Jika ada bagian kode CSS yang kurang atau belum lengkap, silakan lengkapi di kolom komentar yang telah disediakan.

Tapi sih yaaa... saya rasa, kode CSS di atas sudah cukup lengkap.

Perlu sobat ketahui, hampir semua template blogger premium menggunakan kode CSS Media Queries di atas. Ok semoga berguna dan selamat memodifikasi template blogger.*
Loading...

Labels: SEO, Tips Blogging

Thanks for reading CSS Media Queries untuk Desktop, Tablet dan Mobile. Please share this article.
0 Komentar untuk "CSS Media Queries untuk Desktop, Tablet dan Mobile"

Banyak gambar yang error karena situs sedang dimodifikasi. Komentar spam (Link Aktif) tidak akan dipublikasikan, terima kasih.

SEO Kraken Premium Blogger Template