Cara Edit Template mobile blogspot
Cara Edit Template Blogger Mobile
- Masuk ke Blogger, kemudian pergi ke Dashboard -> Template ( Layout lama) -> Mobile.
- Klik pada Icon Aksesoris bagian bawah Template Mobile. Dan memilih Dropdown untuk "Custom", preview template mobile, lalu simpan.
Bagaimana untuk menyesuaikan struktur Template Mobile
Blogger dibuat dengan menggunakan widget Blogger yang telah menambahkan properti baru (mobile) untuk tag <b:widget/>.. Properti ini dapat mengambil nilai berikut: 'default', 'yes', 'no', 'only'.Seperti bisa Anda tebak, properti ini akan menentukan bagaimana widget akan diberikan dalam tampilan mobile.Secara default, widget yang akan ditampilkan pada ponsel adalah:
- Header
- Blog
- Profile
- PageList
- AdSense
- Dan Attribution
Misalnya, Anda dapat menyembunyikan Gadget Attribution dalam pandangan Mobile jika Anda menggunakan:
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>b) Jika Anda ingin menampilkan widget non-default pada tampilan Mobile blog Blogger Anda, maka hanya mengatur properti untuk mobile, yes '.
Berikut ini adalah sebuah contoh:
Ini adalah tag normal untuk Widget Arsip Blog:
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>Bila Anda mengatur properti mobile sebagai
<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>Anda akan melihat Widget Arsip pada tampilan Mobile Anda.
c) Jika Anda ingin widget hanya muncul dalam tampilan mobile, Anda dapat melakukan hal ini dan harus menyetel properti Mobile untuk 'only':
<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>Jika Anda menggunakan tag ini, gadget atribution akan hilang dari tampilan desktop, dan hanya akan muncul pada tampilan mobile.
Bagaimana untuk menyesuaikan tampilan dan nuansa dari Template Mobile
Anda sepenuhnya dapat menyesuaikan tampilan dari template mobile Anda. Elemen body dari template mobile akan ditata oleh kelas mobile:<body class='loading mobile '>Pastikan bahwa template Anda berisi baris kode berikut:
<body expr:class='"loading" + data:blog.mobileClass'>Jika Anda memiliki pengalaman bekerja dengan CSS, Anda dapat menggunakan nama kelas untuk template gaya mobile Anda.
.mobile .date-header { text-decoration:underline; }Widget alternatif Konten pada View Mobile
Bila Anda beralih ke Template Mobile Custom, Anda mungkin menemukan bahwa template yang terlalu besar untuk masuk ke dalam Browser Mobile.Jika mau, Anda dapat menyediakan konten alternatif di dalam widget.
Sebagai contoh:
<div class="widget-content">
<b:if cond="data:blog.isMobile">
<a href="http://www.blogger.com"> Powered By Blogger </a>
<b:else/>
<!-- Show an image link in desktop view.-->
<a href="http://www.blogger.com">
<img expr:src="data:fullButton" alt="Powered By Blogger"/>
</a>
</b:if>
</div>Kode ini akan menampilkan Powered by Link teks Blogger on the Mobile dan Powered by Blogger gambar pada tampilan desktop biasa.
Kondisi
<b:if cond="data:blog.isMobile"/>dapat digunakan untuk memeriksa apakah pengunjung yang melihat blog Anda dalam mobile browser atau tidak. Anda dapat menggunakan conditional check creatively dan memberikan tampilan yang sama sekali berbeda dengan versi mobile dari blog. Selamat tweaking!