Cara mudah edit template blogger menjadi renponsive di mobile (Handphone)
Dalam posting ini saya akan menunjukkan bagaimana Anda dapat mengedit template mobile blog Blogger Anda. Jika Anda telah mengaktifkan mobile Template (bawah Pengaturan -> Email dan Mobile version lama dari Blogger, di bawah Template dalam tata letak baru), Anda akan dapat menyesuaikan Template Blogger Mobile dengan bantuan definisi CSS.
Anda juga akan dapat mengontrol widget yang akan ditampilkan dan yang tidak. Anda bahkan dapat mengkonfigurasi widget untuk menampilkan konten alternatif kepada pengunjung ponsel Anda.
Secara default, widget yang akan ditampilkan pada ponsel adalah:
Misalnya, Anda dapat menyembunyikan Gadget Attribution dalam pandangan Mobile jika Anda menggunakan:
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:
Bila Anda mengatur properti mobile sebagai
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':
Jika Anda menggunakan tag ini, gadget atribution akan hilang dari tampilan desktop, dan hanya akan muncul pada tampilan mobile.
Pastikan bahwa template Anda berisi baris kode berikut:
Jika Anda memiliki pengalaman bekerja dengan CSS, Anda dapat menggunakan nama kelas untuk template gaya mobile Anda.
Jika mau, Anda dapat menyediakan konten alternatif di dalam widget.
Sebagai contoh:
Kode ini akan menampilkan Powered by Link teks Blogger on the Mobile dan Powered by Blogger gambar pada tampilan desktop biasa.
Kondisi
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!
Anda juga akan dapat mengontrol widget yang akan ditampilkan dan yang tidak. Anda bahkan dapat mengkonfigurasi widget untuk menampilkan konten alternatif kepada pengunjung ponsel Anda.
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!
Post a Comment