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 gres (mobile) untuk tag <b:widget/>.. Properti ini sanggup mengambil nilai berikut: 'default', 'yes', 'no', 'only'.Seperti sanggup 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 sanggup menyembunyikan Gadget Attribution dalam pandangan Mobile kalau 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 ialah sebuah contoh:
Ini ialah 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 sanggup melaksanakan hal ini dan harus menyetel properti Mobile untuk 'only':
<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>Jika Anda memakai 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 arahan berikut:
<body expr:class='"loading" + data:blog.mobileClass'>Jika Anda mempunyai pengalaman bekerja dengan CSS, Anda sanggup memakai 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 sanggup 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=" Bagaimana untuk menyesuaikan struktur Template Mobile Cara Edit Template mobile blogspot"/>
</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 dipakai untuk menilik apakah pengunjung yang melihat blog Anda dalam mobile browser atau tidak. Anda sanggup memakai conditional check creatively dan menunjukkan tampilan yang sama sekali berbeda dengan versi mobile dari blog. Selamat tweaking!