2 Cara Mudah Menampilkan Widget Blog Pada Versi Seluler

2 Cara Menampilkan Widget Pada Versi Seluler. Ada dua cara yang dapat kita gunakan untuk menampilkan widget pada versi mobile, dan dua cara ini sudah saya terapkan dan berhasil. Sekarang adalah jaman nya smarphone, jadi buat kita sebagai pengelola sebuah situs blog, sangat wajib untuk memperhatikan bagaimana tampilan blog kita saat versi mobile, jangan sampai pengunjung kesulitan untuk menavigasi situs karena kurangnya widget saat mereka browsing menggunakan smarphone.

Jika sobat malas buka browser dari smartphone, sobat dapat melihat bagaimana tampilan versi mobile situs blog dari komputer langsung, cara pertama dengan memberikan ?m=1 diakhir Url dan cara kedua melalui blogger lalu Template, pada bilah kanan, klik setingan Seluler (icon gear), lalu klik Pratinjau.

Baiklah, kembali ke topik, berikut adalah dua cara tersebut.

1. Cara Menampilkan Widget Versi Seluler Dengan Menambahkan Element Mobile Pada HTML Widget.

Cara yang satu ini terbilang sangatlah mudah, kita hanya perlu menambahkan elemen baru didalam tag <b:widget>. Sebagai contoh sobat dapat mencobanya di blog saya ini, untuk widget Archive versi desktop dan versi mobile tampilanya berbeda, sebenarnya saya membuat dua widget arsip, yang satu khusus tampilan desktop, dan yang satu lagi khusus tampilan mobile. Karena jika saya menggunakan widget arsip untuk desktop yang saya seting dengan gaya hierarki akan terlihat memanjang kebawah jika pada tampilan mobile, maka saya membuat satu lagi dengan gaya daftar flat.

Untuk caranya, silahkan sobat masuk ke blogger, pada Template -> Edit HTML carilah widget yang ingin sobat tampilkan pada versi mobile, contoh BlogArchive1,

Kode nya kira-kira akan terlihat seperti dibawah ini.

1.    
2. <b:widget id='BlogArchive1' locked='false' title='Judul Widget' type='BlogArchive' version='1' visible='true'>  
3.    

Elemen yang akan kita tambahkan adalah mobile, ada tiga value yang dapat digunakan untuk elemen mobile ini, sebagai berikut

#1 Menampilkan Widget Pada Versi Seluler/Mobile

1.    
2. <b:widget id='BlogArchive1' locked='false' mobile='yes' title='Judul Widget' type='BlogArchive' version='1' visible='true'>  
3.    

mobile='yes' adalah perintah untuk menampilkan widget pada versi mobile juga, jadi selain pada versi desktop, sebuah widget yang diberi elemen ini akan tampil juga pada versi mobile.

#2 Menampilkan Widget Hanya Pada Versi Seluler/Mobile

1.    
2. <b:widget id='BlogArchive1' locked='false' mobile='only' title='Judul Widget' type='BlogArchive' version='1' visible='true'>  
3.    

Sesuai namanya mobile='only' hanya akan menampilkan widget pada versi seluler saja, widget yang diberik elemen ini tidak akan tampil pada versi desktop.

#3 Menampilkan Widget Hanya Pada Versi Desktop

1.    
2. <b:widget id='BlogArchive1' locked='false' mobile='no' title='Judul Widget' type='BlogArchive' version='1' visible='true'>  
3.    

Mungkin header sobat jadi aneh saat dilihat pada versi mobile, misalnya kebesaran atau kekecilan. Elemen mobile='no' dapat menyembunyikan widget yang tampil pada versi seluler tersebut.

2. Cara Menampilkan atau Menyembunyikan Widget Blog Versi Mobile Menggunakan Tag conditional

Dulu saya bertanya-tanya, saya sudah memiliki cara pertama, untuk apa lagi cara kedua ini yang terbilang cukup sulit untuk menghapal kode nya ketimbang cara pertama. Namun akhirnya saya tetap membutuhkan cara ini, memang bukan untuk menampilkan widget yang ditambahkan dari Gadget Tata Letak blog (tag <b:widget>), tapi untuk menyembunyikan widget yang di tanam langsung di template dengan tag lain, contoh nya pada blog ini, tombol back to up jadi menutupi beberapa tulisan postingan juga footer saat versi seluler, jadi saya menyembunyikanya, dan hanya menampilkan tombol tersebut tidak sticky berada di paling akhir situs.

berikut adalah tag conditional untuk menampilkan atau menyembunyikan widget.

1.    
2. <b:if cond='data:blog.isMobileRequest == "true"'>  
3. Konten / widget  
4. </b:if>  
5.    

Kondisi diatas adalah untuk menampilkan apapun yang dibungkus oleh tag condition tersebut hanya pada versi seluler. Sedangkan, jika sobat ingin menyembunyikan apapun, silahkan ganti true menjadi false. Terlihat seperti dibawah ini.

1.    
2. <b:if cond='data:blog.isMobileRequest == "false"'>  
3. Konten / widget  
4. </b:if>  
5.    

Catatan: Jika terjadi error, saat menyimpan template, coba ganti " menjadi &quot; Contoh &quot;true&quot; atau &quot;false&quot;.

Baca Juga Terkait conditional Tags

12 Macam Serta Kebergunaan Conditional Tags Pada HTML

2 Trik Mudah Menyembunyikan Widget Pada Halaman Tertentu Blog

Itu saja yang dapat saya bagikan kali ini, semoga dapat bermanfaat, jika masih ada yang masih bingung, silahkan komentar. Sampai Jumpa.

Info4You Info4You Update Pada: February 11, 2017