(isi iklan)
Cara cepat mengubah tampilan Blogger 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.
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.. https://cepuseo.blogspot.co.id/?m=1
Atau anda bisa melihat hasilnya melalui menu template > pilih template seluler pada draft blogger.
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.
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.. https://cepuseo.blogspot.co.id/?m=1
Atau anda bisa melihat hasilnya melalui menu template > pilih template seluler pada draft blogger.
"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>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'></b:widget>
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. 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..
<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. 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..
| Judul | Cara cepat mengubah tampilan Blogger mobile |
| Deskripsi | Cara cepat mengubah tampilan Blogger mobile Alasan dari beberapa blogger yang masih mempertahankan tema default untuk tema blognya adalah t... |
| Author | Unknown |
| Author Rating |
89,99%/
100% Suara Dari 9999 Ulasan
|
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di IDCEPU
0 Komentar untuk "Cara cepat mengubah tampilan Blogger mobile"
Silahkan tinggalkan komentar anda di bawah ini,
Adapun peraturan berkomentar di blog ini:
1.Tidak komentar SPAM
2.Tidak komentar PROMOSI
3.Tidak komentar yang mengadung unsur SARA
4.Berkomentar dengan SOPAN
Salam IDCEPU