Cara Menampilkan Widget HTML/JavaSsript di Blog Versi Mobile

Cara Menampilkan Widget di Blog/Website Versi Mobile - Saat hendak mengedit tata letak atau menambahkan widget, kita selalu bertanya-tanya kenapa hasil widget atau HTML/JavaScript yang dibuat tadi hanya tampil di versi desktop, pada saat mengecek versi mobile tidak ada widget atau HTML/JavaScript yang sudah dibuat tadi.


Alasan kenapa saat anda memasang Widget di template anda tidak tampil di versi mobile, dikarenakan dalam keadaan default widget widget yang di tampilkan di versi mobile hanya widget-widget berikut : Header, Blog, profil, page List, atribusi.

Pada Hakikatnya di dalam template terutama bisa anda lihat di Tata letak ada cukup banyak, selain di atas diantaranya.
  • Navbar
  • Tabs-left
  • Crossol
  • Crossol-Overlow
  • Sidebar-Left
  • Sidebar-Right
  • footer
Dari widget di atas itu tidak dalam ke adaan Default, yang artinya kita harus mengedit sendiri pada Blogkita lebih tepatnya pada Template(Tema) supaya Widget tersebut tampil baik dalam versi mobile, versi desktop, jangan tampilkan di versi mobile, jangan tampilkan di versi desktop.

Agar bila anda saat memasang widget tampilan sesuai anda kehendaki baik di versi moble ataupun desktop, berikut simak tutorialnya.

Biar anda lebih pahan, admin kasih CONTOH : admin ingin menampilkan Widget pada Sidebar-Left, admin tinggal klik tata letak,> klik tambahkan Gatget pada sidebar-left > admin ingin memasang Populer Post yang berjudul "Artikel Populer" > Simpan.

Hasil Tampilan Desktop :

Hasil Tampilan versi Mobile.

Setelah anda telah membuat witget dan menyimpat hasilnya, maka akan tampil dalam versi Desktop, bila anda ingin membuat tampilan mobilenya juga, kalian edit di Template (tema).

Artikel Terkait :

Membuat Formulir Pembelian untuk Online Shop

Cara Mengatasi Postingan Blog Hanya Muncul Google+ Share di Seach Google

Cara Membuat Widget New Post Slide

Cara Mengecek Loading Web/Blog

Cara Mudah Membuat Scroll Arsip Blog


Simak Penambahan pada template anda :

Kik Dashboard > Template (Tema) > Edit

Saat anda mencari Widget yang sebelumnya telah anda simpan, dan anda telah menamainya, klik CTRL+F (untuk mencari), > Ketikan judul widget yang telah anda buat, lalu anda akan menemuka kode seperti ini.

<b:widget id='PopularPosts3' locked='false' title='Entri Populer' type='PopularPosts'>

yang perlu anda lakukan adalah hanya tingga menambahkan atribut baru yaitu Mobile='   ' atrobut mobile ini memiliki tifa nilai yang bisa anda ini, diantaranya : Yes, No, Only.

Penerapan Mobile='Yes'

<b:widget id='PopularPosts3' locked='false' mobile='yes' title='Entri Populer' type='PopularPosts'> 

Kode di atas merupakan menampilkan widget di versi mobile dan di versi desktop, maka widget yang telah kita buat akan muncul di widget versi mobile dan versi desktop.

Penerapan Mobile='No'


<b:widget id='PopularPosts3' locked='false' mobile='no' title='Entri Populer' type='PopularPosts'>

Kode di atas merupakan menyembunyikan widget dari versi mobile, dan akan menampilkan pada versi Desktop.


Penerapan Mobile='Only'

<b:widget id='PopularPosts3' locked='false' mobile='only' title='Entri Populer' type='PopularPosts'>


Kode di atas merupakan menyembbunyikan widget dari versi desktop, dan akan menampilkan di versi Mobile.

Setelah itu coba anda cek hasilnya.
untuk melihat hasil Versi Mobile  anda tidak perlu membukanya melalui Handphone (HP) cukup di PC/komputer anda,  dengan menambahkan di akhir link ?m=1
Contoh : http://www.fathonan.xyz/?m=1

Share this

0 Comment to "Cara Menampilkan Widget HTML/JavaSsript di Blog Versi Mobile"

Posting Komentar

,