Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review
Beranda / Blogger Widget / Tutorial

Cara Mengedit Blogger Template Mobile

Oleh admin
Ada beberapa berita bagus dari Tim Blogger pada Blogger Code Blog. Jika anda sudah mengaktifkan Mobile Templates, anda juga bisa mengatur sendiri Blogger Mobile Template dengan menggunakan CSS definitions. Anda juga bisa mengontrol widget yang mana yang ditampilkan dan yang tidak. Anda juga bisa mengkonfigurasi widget untuk menunjukkan perubahan koneten pada tampilan mobile.

Meski terlihat menjanjikan, Saya belum bisa menguji semua fitur-fitur ini.

Pengaturan struktur dari Mobile Template anda.

Blogger Templates di buat dengan menggunakan Widgets. Blogger sudah menambahkan sebuah properti baru (mobile) untuk tag <b:widget/> . Properti ini bisa memiliki nilai ‘default', ‘ya', ‘tidak' atau ‘saja'. Dan properti ini akan menentukan  bagaimana widget akan ditampilkan di dalam sebuah tampilan mobile.
Widgets yang tampil pada mobile secara default adalah sebagai berikut:
  • Header
  • Blog
  • Profile
  • PageList
  • AdSense
  • Attribution
Jika anda ingin menyembunyikan beberapa dari mereka, gunakan properti mobile='no' dalam Widget tag, dan bahwa widget tidak akan muncul lagi di dlaam tampilan mobile.
Sebagai contoh Saya bisa menyembunyikan Attribution Gadget di dalam tampilan Mobile jika saya menggunakan kode 

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
Jika anda ingin menampilkan non-default widgets di dalam tampilan Mobile anda, anda hanya perlu mengatur mobile property ke yes.
Contoh: ini adlaah normal tag untuk Blog Archive Widget

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
Sekarang atur saja mobile property sebagai 



<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>



, selanjutnya anda akan melihat archive widget pada tampilan Mobile anda.

Jika anda ingin sebuah widget hanya muncul dalam tampilan mobile, anda bisa mengatur mobile property ke 'only'



<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>



Jika asaya menggunakan tag ini, attribution gadget akan menghilang dari tampilan desktop, dan hanya akan muncul pada tampilan mobile.

Perubahan kode ini akan membuat attribution widget menghilang dari tampilan Mobile anda.










Pengaturan Tampilan dan  Rasa pada Mobile Template anda



Sekarang anda bisa sepenuhnya mengatur tampilan dari mobile template anda. Elemen body dari mobile template akan menjadi styled  dari mobile class



<body class='loading mobile'>






Pastikan bahwa template anda memiliki:



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



Maka jika anda ahli dengan CSS, anda bisa menggunakan class name untuk style mobile template anda.



.mobile .date-header {
  text-decoration:underline;
}

 


Sumber