banyak
blogger yang mengutamakan tampilan blognya agar terlihat nyaman bagi para visitor. salah satunya dengan membuat
Template Responsive yang bisa diakses dengan tampilan rapi untuk
resolusi layar yang berubah-ubah (ex. HP, Ipad, Android, BB, Tablet). jadi, hari ini saya akan menerangkan
cara custom template untuk mobile devices.
jika kamu punya
mobile template dan ingin menampilkannya di
mobile browser, click "template" tab di dashboardmu, lalu click icon gear dibawah
mobile preview.
lalu pilih "
custom/tersesuai" pada bagian "pilih template seluler"
sebelum menyimpan template, ada baiknya melihat hasilnya dengan click "preview/pratinjau" , jika sudah yakin, silahkan tekan tombol "save/simpan".
jika kamu memiliki widget pada
dekstop templatemu, kamu dapat mengontrol tampil atau tidaknya widget tersebut di
mobile template. kamu bisa menggunakan atribut mobile di <b:widget/> dengan tag "default" , "yes" , "no" dan "only" .
sebagai contoh, code widget dibawah ini, tidak akan tampil di mobile template karena menggunakan tag "no".
<b:widget id="HTML1" locked="false" mobile="no" title="" type="HTML"/>
widget dibawah ini, akan tampil di mobile template karena menggunakan tag "yes".
<b:widget id="HTML1" locked="false" mobile="yes" title="" type="HTML"/>
widget dibawah ini, hanya akan tampil di mobile template karena menggunakan tag "only".
<b:widget id="HTML1" locked="false" mobile="only" title="" type="HTML"/>
secara default, widget dibawah ini akan otomatis tampil di mobile template meskipun belum kita kasih tag "yes".
- Header
- Blog
- Profile
- PageList
- AdSense
- Attribution
kamu juga bisa memberikan CSS antara
dekstop and mobile template. pertama-tama, kamu harus memastikan tag <body> templatemu sama seperti dibawah ini.
<body expr:class='"loading" + data:blog.mobileClass'>
lalu, kamu bisa berikan CSS antara dekstop dan mobile template. seperti contoh dibawah ini:
/* For desktop view */
#main-wrapper {margin-left: 10px;overflow: hidden;width: 468px;padding-left: 23px;}
/* For mobile view */
.mobile #main-wrapper {margin:0 auto !important; width:auto !important; max-width:540px !important; padding-left: 5px; padding-right: 5px;}
ya, cukup berikan .mobile didepan id dan class CSS untuk mobile, dan tak usah .mobile didepan id dan class CSS untuk dekstop.
That's All Tutorial About How To Custom Blogger Mobile Template
