Sunday, February 28, 2016

Mengatur Tampilan Mobile Dengan CSS

Tags

Mengatur Tampilan Mobile Dengan CSS - Sebenarnya saya bingung mau beri judul apa pada artikel kali ini. Yang jelas intinya, pada kesempatan kali ini kita akan belajar mengatur tampilan blog versi mobile dengan menggunakan CSS. Untuk template bawaan blogger mungkin ini bukan masalah.

Mengatur Tampilan Mobile Dengan CSS

Pernyataan ini mungkin akan muncul bagi kamu yang sedang melakukan modifikasi tampilan mobile atau sedang membuat, merancang tampilan mobile pada template kamu (khususnya untuk blogger).

Jika kita membongkar dan mempelajari struktur kode yang digunakan template bawaan blogger, maka kita akan mendapatkan fungsi "expr:class='"loading" + data:blog.mobile.Class" yang terletak pada tag pembuka body. Ternyata fungsi yang saya maksud itu berguna untuk mengatur tampilan blog versi mobile sesuai yang kita inginkan dengan menggunakan CSS. Untuk lebih jelasnya akan saya gambarkan berupa contoh nya sebagai berikut :

HTMLnya
<body expr:class="&quot;loading&quot; + data:blog.mobileClass">
Kode HTML yang terdapat pada template kamu gunakan
</body>

CSSnya
<style type="text/css">
/*Penggunaan fungsi '.mobile' pada CSS, agar kita dapat mengatur tampilan blog versi mobile pada area atau daerah body*/
.mobile body {bla... bla...}

/*ini untuk pengaturan tampilan blog versi desktop, tanpa perintah '.mobile'*/
body {bla... bla...}
</style>

Untuk lebih jelasnya coba kamu lihat tampilan blog ini pada versi desktop dan versi mobile. Jika di perhatikan, maka akan terlihat perbedaan yang mencolok pada kedua tampilan tersebut.