Sunday, August 13, 2017

Cara cepat mengubah tampilan mobile

Alasan dari beberapa blogger yang masih mempertahankan tema default untuk tema blognya adalah tema default lebih user-friendly dalam meng-kustomnya.
Berbeda dengan tema modif, untuk merubah warna saja mereka harus mengeditnya melalui edit HTML dan harus bedah skrip.
Pada tema default sobat blogger ini kita cukup mengeditnya melalui menu desain template dan tanpa mengedit kode HTML-nya.
Dan menariknya, tema default blogger support untuk mobile browser.
Seperti pada tampilan responsive, tema akan menjadi satu kolom bila diakses melalui perangkat handphone.

Jadi Semua widget menu yang ditampilkan pada tampilan desktop akan ditampilkan pula pada tampilan mobile itu.
Dan juga, kita bisa menampilkan beberapa widget menu saja pada tampilan mobile sesuai kebutuhan.
Baca juga: Kumpulan tema responsive gratis untuk blogspot
Mari memulai dengan cara cepat mengubah tampilan mobile..
Setelah login di draft blogger, pilih menu Template > Pilih template seluler
Pada kotak dialog yang tampil, pilihlah Khusus / Custom pada tampilan selulernya, lalu simpan.
Pada tahap ini adalah yang terpenting, karena pada pilihan ini jika tidak dipilih khusus/custom, maka tampilan mobile custom tidak akan tampil.

"Menampilkan semua menu pada tampilan mobile."
Pilih menu template.
Lalu pilih Edit HTML.
Copy All Skrip HTML-nya.
Kemudian buka aplikasi Notepad di komputer dan paste-kan disitu.

Selanjutnya pilih menu edit, terus pilih Replace pada toolbar notepad atau untuk cara cepatnya tekan Ctrl+H.
Maka akan tampak opsi Replace.
Tulis locked='false' title pada kolom Replace.
Dan pada kolom Replace All tulis locked='false' mobile='yes' title
Lalu tekan Enter.

Pada tahap ini kita telah melakukan perubahan untuk menampilkan semua widget menu pada tampilan mobile.
Hanya dengan satu klik ("replace all" tadi) kita bisa merubah semua menu pada tampilan mobile

Langkah selanjutnya Copy-All kode HTML yang ada di notepad tadi dan pastekan pada menu edit template yang ada di draft blogger lalu simpan template.

Untuk melihat hasilnya.. tambahkan ?m=1 pada belakang url sobat
Misal.. http://romli-net.blogspot.com?m=1
Atau anda bisa melihat hasilnya melalui menu template > pilih template seluler pada draft blogger.

Cara praktis mengubah tampilan mobile


"Menampilkan beberapa widget menu saja pada tampilan mobile".
Pada kustom kali ini kita mengeditnya melalui menu edit template saja.
Pilih lompat widget pada opsi edit template.
Lalu pilih pada drop down menunya.
Misal kita akan menampilkan widget afchive pada tampilan mobile-nya,
maka kita pilih BlogArchive1
Sobat akan menemui kode sperti ini:
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'></b:widget>

Cara praktis mengubah tampilan mobile

Lalu kita tinggal menambahkan mobile='yes' diantara locked='false' dan title='Arsip Blog' dan menjadi seperti ini:
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Arsip Blog' type='BlogArchive'></b:widget>
Lakukan cara pada widget yang lainnya.
Lalu simpan template dan lihat hasilnya seperti cara di atas.
Baca juga: Cara menghapus title widget di blogger
Tampilan yang berbeda
Kita juga bisa mengkustom tampilan widget menunya.
Misal kita ingin widget tersebut hanya tampil pada tampilan mobile saja tapi tidak muncul pada tampilan desktop.
Maka kita menambah diantara kode locked='false' dan title
Dengan mobile='only'
Menjadi seperti ini:
<b:widget id='BlogArchive1' locked='false' mobile='only' title='Arsip Blog' type='BlogArchive'></b:widget>


Tambahan untuk CSS Tampilan Mobile
Pada perintah CSS ini kita hanya mengatur margin kiri dan kanannya saja.
Karena pada defaultnya widget menu-nya tidak ada margin pada kiri dan kanan teks.

Pada menu Template -> Sesuaikan ->  Tingkat lanjut -> Custom CSS lalu pastekan kode ini:
 .mobile .widget-content {margin: 0 8px}
Lalu klik Terapkan ke blog pada tombol kanan atas.

Kita telah selesai dalam mengedit kode-kode HTML ini.
Untuk selanjutnya seperti merubah warna background, ukuran font dan sebagainya kita tidak perlu merubah-rubah kode HTML ini lagi.

Mudah bukan?
Semoga cara cepat mengubah tampilan mobile ini bermanfaat untuk blogger semua..

3 komentar

Natalia Cara cepat mengubah tampilan mobile delete October 20, 2017 at 8:18 AM

kak di blog saya ini CreepyPasta Indonesia kenapa tidak ada tampilan gerigi untuk settingan mobile'a yah ?

Romli NET Cara cepat mengubah tampilan mobile delete October 20, 2017 at 2:59 PM

Kalo tampilannya sudah responsive kayak punya agan ini, gak usah diseting untuk tampilan mobilenya sudah ok.. cukup di disable..

Sellyan Kumala Cara cepat mengubah tampilan mobile delete December 20, 2017 at 6:32 AM

thanks kak, postingannya sangat membantu buat blogger baru macem saya :D

IBX59E89E6F98B8E