BlogKepo - Beberapa hari yang lalu tatkala saya
punya waktu senggang yang cukup, entah kenapa tak menyusun artikel malah
utak-atik template blog. “Mungkin sudah bosan sama tampilan yang
sebelumnya, atau sok tahu dengan ilmu html dan css yang belum pernah
dipelajarinya”. Nyatanya tampilannya masih sama saja dengan sebelumnya.
Hahaha, ketawa lagi. Yang saya edit adalah tampilan mobile blogspotnya.
Bagaimana cara edit template agar widget bisa terlihat di template
seluler blogspot. Jadi kalau diakses lewat browser ponsel widget
tersebut juga ikut terlihat.
Pertama tentu saja masuk dulu ke Dashboard blogspot. Sudah? Lanjut. Lalu pilih menu Template.
Secara default widget Pagelist, Profile, Atribusi, Header, Blog post dan Adsense akan tampil di template seluler tanpa pengaturan lebih jika sobat telah memasangnya di template desktop. Lalu bagaimana dengan widget yang lain? Edit kode dulu.
Selanjutnya kita akan menambahkan Property mobile pada tag <b:widget>.
Cari kode <b:widget id
Gunakan Crtl+F agar mudah mencarinya. Ketikkan kode diatas pada kotak pencarian.
Kode ini ada banyak dan mungkin menyebar tergantung widget dan letaknya di template. Saya contohkan kita akan mengatur widget Popular Posts agar tampil di template seluler. Maka carilah kode seperti di bawah atau setidaknya mirip dengan kode tersebut.
Aslinya seperti itu kodenya. Lalu kita tambahkan sedikit kode. Property mobile ini ada 3 nilai, yaitu Yes, No,dan Only
Pada kode yang berwarna merah, jika sobat menginginkan widget tersebut terlihat di tampilan mobile dan tampilan desktop maka isi dengan 'yes'. Jika ingin hanya tampil di template seluler saja isi dengan 'only'. Dan 'no' jika ingin hanya menampilkan di template desktop dan menyembunyikannya di tampilan mobile.
Selesai, Simpan Template lalu cek hasilnya.
Mudah bukan? Yaiya lah. Kalau sulit saya pun juga tidak bisa. Selain menambahkan widget, template seluler blogspot juga bisa dipercantik lagi dengan menambahkan kode css. Untuk yang satu ini saya belum kompeten. Mungkin sobat bisa mencari tutorilanya di blog tetangga saya. Cukup sekian cerita pendeknya. Terima kasih sudah menyimak. Kalau ada pertanyaan jangan ragu-ragu tulis di kotak komentar. Kalau langsung bisa ya saya jawab, kalau tidak ya saya coba carikan jabawannya.
Blogspot memang terus mengembangkan fiturnya agar juga mobile
friendly. Ya, melihat perkembangan pengakses internet mobile yang
semakin banyak, saya rasa sudah sepantasnya tampilan mobile sebuah blog
turut diperhatikan pula. Selain tampilan desktop yang merupakan tampang
utamanya.
Berbeda dengan tampilan di desktop yang cukup bebas menggunakan
berbagai pernak-pernik penghias blog, tampilan mobile harus lebih
sedehana. Ringan diakses itu yang paling utama. Selain agar hemat paket
data, juga agar loadingnya tak terlalu lama. Menurut saya tampilan
blogspot mobile sudah memenuhi kriteria itu, ringan dan sederhana. Tapi
itu tak berarti minim fasilitas navigasi. Nah, ini yang ingin sedikit
saya jelaskan. Yaitu cara menampilkan widget di tampilan blogspot mobile
agar tampilan mobile blog blogspot lebih hidup. Nantinya akan ada
sedikit setting yang sudah disediakan blogspot dan sedikit utak-atik
kode. Kode?? Tenang, tidak akan sulit dan rumit. Kalau sulit tentu saya
juga tak bisa melakukannya. Saya masih amatir soal begitu, coding dan
moding. Yoyoyoyoi, daripada lama-lama nanti ngelantur lagi mending
langsung saja. Cekidot.
Pertama tentu saja masuk dulu ke Dashboard blogspot. Sudah? Lanjut. Lalu pilih menu Template.
Terlebih dahulu kita akan mengaktifkan fitur custom mobile template
blogspot(jika punya sobat belum diaktifkan). Klik gambar atau icon gear
di bagian bawah template seluler.
Pilih “Ya. Tampilkan template seluler di perangkat seluler.” atau ”Yes. Show mobile template on mobile device.”
Dropdown pilihan template seluler. Pilih Tersesuai atau Custom
yang berada paling bawah. Kemudian Simpan. Dengan begini custom mobile
template blogspot sudah aktif. Template seluler akan menyesuaikan dengan
template desktop. Berikutnya adalah mengatur widget yang akan tampil di
template seluler atau tampilan mobile.
Secara default widget Pagelist, Profile, Atribusi, Header, Blog post dan Adsense akan tampil di template seluler tanpa pengaturan lebih jika sobat telah memasangnya di template desktop. Lalu bagaimana dengan widget yang lain? Edit kode dulu.
Syarat pertama dan utama widget tersebut harus sudah ada atau tambahkan
dahulu melalui menu Tata Letak. Kalau sudah ada mari kita lanjut ke
tahap berikutnya. Kembali lagi ke menu Template.
PIlih Edit HTML.
Selanjutnya kita akan menambahkan Property mobile pada tag <b:widget>.
Cari kode <b:widget id
Gunakan Crtl+F agar mudah mencarinya. Ketikkan kode diatas pada kotak pencarian.
Kode ini ada banyak dan mungkin menyebar tergantung widget dan letaknya di template. Saya contohkan kita akan mengatur widget Popular Posts agar tampil di template seluler. Maka carilah kode seperti di bawah atau setidaknya mirip dengan kode tersebut.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Aslinya seperti itu kodenya. Lalu kita tambahkan sedikit kode. Property mobile ini ada 3 nilai, yaitu Yes, No,dan Only
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'/>
Pada kode yang berwarna merah, jika sobat menginginkan widget tersebut terlihat di tampilan mobile dan tampilan desktop maka isi dengan 'yes'. Jika ingin hanya tampil di template seluler saja isi dengan 'only'. Dan 'no' jika ingin hanya menampilkan di template desktop dan menyembunyikannya di tampilan mobile.
Selesai, Simpan Template lalu cek hasilnya.
Mudah bukan? Yaiya lah. Kalau sulit saya pun juga tidak bisa. Selain menambahkan widget, template seluler blogspot juga bisa dipercantik lagi dengan menambahkan kode css. Untuk yang satu ini saya belum kompeten. Mungkin sobat bisa mencari tutorilanya di blog tetangga saya. Cukup sekian cerita pendeknya. Terima kasih sudah menyimak. Kalau ada pertanyaan jangan ragu-ragu tulis di kotak komentar. Kalau langsung bisa ya saya jawab, kalau tidak ya saya coba carikan jabawannya.
