Menampilkan Gadget Blogger di Mobile View

Pada tahun 2015 ini mobile friendly website sangat diperhatikan karena google sendiri memperhatikan Mobile SEO pada setiap blog. Pada tampilan seluler device blogger, widget tidak ditampilkan dan yang ditampilkan hanya laman (pages). Jika anda ingin menampilkan ataupun menyembunyikan gadget tertentu (semisal, kotak pencarian) pada versi seluler di blogspot caraya sangat mudah.

Tampilan Mobile


Secara otomatis blog dengan platform blogger akan memiliki kode meta tag seperti ini:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0' name='viewport'/>
Maksudnya agar blog dapat menjadi tampilan mobile apabila diakses melalui mobile, tablet atapun iphone sehingga menjadi mobile friendly (faster, padat dan ringkas). Anda dapat melihatnya pada template blogger anda sendiri. Seandainya kode diatas tidak ada maka perlu ditambahkan pada area setelah <head>

Untuk memeriksa apakah tampilan blog anda mobile friendly cukup anda tambahkan ?m=1 jadi akan seperti ini :
http://dewainside.blogspot.com/?m=1
Sebelumnya anda harus menggunakan template khusus (custom) untuk Template Seluler Blog. Pada Template --> Khusus --> Simpan


Template Khusus Seluler


  • Menampilkan Widget pada Tampilan Mobile

Ada dua cara untuk menampilkan widget pada tampilan mobile. Silahkan pilih salah satu untuk anda terapkan pada gadget yang diinginkan.
1. Tambahkan mobile='only' (hanya tampil pada mobile view dan tidak tampil pada dekstop) :
<b:widget id='HTML1' locked='false' mobile='only' title='ARTIKEL TERBARU' type='HTML'>
2. Tambahkan mobile='yes' (tampil pada versi mobile juga)
<b:widget id='HTML1' locked='false' mobile='yes' title='ARTIKEL TERBARU' type='HTML'>

  • Menyembunyikan Widget pada Tampilan Mobile

Ada dua cara untuk menyembunyikan widget blogger pada tampilan mobile device. Langsung saja berikut caranya :
1. Menambahkan mobile='no' pada kode widget yang diinginkan :
<b:widget id='HTML1' locked='false' mobile='no' title='ARTIKEL TERBARU' type='HTML'>
2. Menggunakan kode kondisi :
<b:if cond='data:blog.isMobile == &quot;false&quot;'>
//Widget yang disembunyikan
</b:if>
Jangan lupa untuk Simpan Template. Untuk memeriksa apakah kode itu berhasil. Silahkan tambahkan kode http://dewainside.blogspot.com/?m=1 pada alamat blog anda agar tampil secara seluler.

Sekian.
Semoga bermanfaat untuk sahabat blogger.

0 comments:

Posting Komentar

Setiap komentar sangat dihargai, namun karena keterbatasan waktu tidak dapat online setiap saat untuk me-reply komentar setiap orang. Komentar Spam (link aktif, o*at, p*rn*, j*di, dan sejenisnya) akan dimoderasi. Terima kasih atas perhatiannya dan Berkunjung kembali :)