Friday 25 October 2013

Mengatur Template Responsive Blogger untuk Mobile Device


Template responsive yang anda telah gunakan mungkin sudah terlihat baik dan sempurna pada dekstop anda, namun pada saat anda coba pada smartphone atau mobile phone anda maka terjadi kesalahan yaitu penampakan blogger anda terlihat tidak sesuai dengan yang anda inginkan.

Oleh karena itu, anda perlu melakukan beberapa pengaturan lebih lanjut. Pertama yang harus dilakukan yaitu melakukan Edit HTML pada template anda melalui pengaturan template dan sisipkan kode dibawah ini diatas kode <Head>

<meta content='width=device-width, initial-scale=1.0' name='viewport'/>

Kedua kita membutuhkan properti css untuk <Body>, sisipkan kode dibawah ini dalam tag tersebut.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Selanjutnya kita bisa melakukan pengaturan pada widget, yaitu memilih widget yang akan ditampilkan pada tampilan browser pada smartphone atau mobile phone anda.

<b:widget id='ID-type' locked='true' title='Widget-Title'/

/*Hanya menambahkan properti ini untuk menentukan apakah widget ini yang akan ditampilkan pada tampilan mobile*/

<b:widget id='ID-type' locked='true' mobile='yes' title='Widget-Title'/>

Berikut dibawah ini adalah fungsi dari penggunaan propeti 'mobile'.

Properti Mobile Tag Keterangan
mobile=‘yes’ Terlihat pada mobile device
mobile=‘no’ Tidak Terlihat pada mobile device
mobile=‘only’ Hanya terlihat pada mobile device

Terakhir simpanlah dan liat hasilnya pada smartphone atau mobile phone anda.

No comments:

Berikan Komentar