Template dan Tips Seputar Blogger

Monday, June 19, 2017

Mengatur Tampilan Mobile Dengan CSS

Mengatur Tampilan Mobile Dengan CSS - Sebenarnya saya bingung mau beri judul apa pada artikel kali ini. Yang jelas intinya, pada kesempatan 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

Pertanyaan ini mungkin akan muncul bagi kamu yang sedang melakukan modifikasi tampilan mobile atau sedang membuat atau 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.mobileClass' 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.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×