Cara uji situs / template yang mobile friendly (ramah untuk browsing mobile)

Assalamualaikum . Wr. Wb.

Saat ini dengan teknologi perangkat mobile yang cukup pesat, banyak yang mengakses situs web dengan menggunakan perangkat mobile. Dan tentunya layar mobile berbeda dengan layar desktop. Butuh penyesuaian situs untuk layar yang lebih kecil. Nah jika anda mencari template situs yang memiliki "embel-embel" mobile friendly. Tentunya harus ditest dulu dengan alat mbah google.Karena walaupun tampilan sudah mobile, tapi bisa jadi tulisan kekecilan, tautan berdempetan dsbgnya.
Tautan testnya disini:

https://www.google.com/webmasters/tools/mobile-friendly/

Isi situs yang ingin anda test, kemudian, analisis deh situs yang ingin anda cek.

Nah berikut adalah contoh hasil yang mobile friendly

Dan berikut adalah yang non mobile user friendly:

Nah jika anda pembuat template, maka lakukan perbaikan, atau cara yang paling mudah adalah menset template mobile bawaan blogger/blogspot. Seperti yang ada diartikel ini:

Cara mengatur template mobile/seluler pada blogger/blogspot

Bawaan template mobile blogspot/blogger Sudah pasti dijamin mobile friendly.

Oke itu saja.

:)

Mengelola tata letak blog pada Blogger/blogspot

Setelah mengatur bagian kolom dan post pada perancang template blogger/blogspot. Maka langkah selanjutnya adalah mengatur tataletak, yang dimaksud dengan tata letak disini adalah posisi widget atau sidebar, dan format tampilan.

Berikut adalah menu dari tata letak, yang berupa bagan-bagan yang bisa anda atur sesuai keinginan. (Dalam contoh gambar dibawah ini adalah tataletak dari template dengan 1 buah sidebar disisi kanan, dan footer dua kolom)

Pada pengaturan tata letak di blogger/blogspot ini anda bisa melakukan hal berikut:

1. Mengganti Icon Favicon pada Blogger/Blogspot

Icon yang muncul di tab browser. seperti ini:

Langkahnya: 

Pilih edit pada Favicon, lalu upload icon image, disarankan 32x32 bisa berupa png,gif,jpeg.

Simpan jika sudah terupload

2. Menghapus Nav Bar (Navigation Bar pada Blogger/blogspot)

Secara default, blog yang dipublish akan memiliki navigasi bar seperti ini dibagian atasnya.

Untuk menghilangkannya cukup mudah, pada bagan Navbar, tekan edit, maka nanti muncul jendela popup seperti ini:

Anda bisa memilih navbar jika ada yang disuka, atau off untuk menghapus / menyembunyikannya.

3. Mengganti Judul Blog, Deskripsi, dan Logo Blog pada blogspot/blogger

Selain mengganti judul blog dan deskripsi melalu setelan, anda juga dapat menggantinya di pengaturan tata letak ini. Tekan edit pada bagan "blog anda (header)" maka akan muncul popup untuk mengatur keterangan situs blog.

4. Mengatur tata letak posting

Untuk mengatur tata letak posting anda bisa edit pada "Posting Blog", berikut adalah opsi yang ada pada pengaturan tata letak posting blog.

5. Menambah widget / elemen / gadget pada sidebar/footer.

Untuk menambah gadget (istilah di blogger, di situs lain bisa bernama widget, elemen, dsb). Cukup tekan tambahkan gadget di lokasi sidebar/footer yang anda inginkan. Lalu anda bisa menambah gadget-gadget yang tersedia oleh blogger/blogspot.

Nah itu saja yang bisa anda lakukan di tata letak pada blogger/blogspot ini, sebelum menyimpan, ada baiknya dilihat dulu previewnya, tekan tombol preview/pratinjau:

Untuk pratinjau akan terlihat seperti ini:

Jika dirasa sudah cocok, tekan simpan setelan, jika ingin kembali ke default atau ke setelan yang telah tersimpan sebelumnya, tekan saja tombol hapus.

Ok itu saja tentang pengelolan template dan tata letak, untuk latihan akan dibahas dipostingan tersendiri. Untuk postingan selanjutnya adalah tentang "Posting Blog".

Cara mengatur template mobile/seluler pada blogger/blogspot

Blogspot/Blogger mendukung tampilan mobile/seluler, dan bisa diatur di pengaturan template. Secara default, template mobile/seluler blogspot/blogger akan mengikuti template utama versi desktop. Untuk menggantinya cukup mudah.

Buka menu template, lalu lihat pada bagian ini:

Lalu tekan pada logo "gear", maka akan muncul pengaturan template Seluler seperti berikut:

Di pengaturan template seluler ini anda dapat mengaktifkan/menonaktifkan template mode seluler. Jika versi seluler ini di nonaktifkan, maka pada mode seluler akan tetap menggunakan template biasa/desktop. Jika diaktifkan, secara otomatis pada saat membuka menggunakan selular/mobile tampilannya akan berubah menjadi mode seluler. Untuk memilih template seluler bisa langsung tekan drop down menu pada Default.

Untuk preview template bisa dilihat disebelah kanannya.

Jika sudah memilih template yang diinginkan jangan lupa disimpan.

Format dari Template mobile ini hanya terdiri dari Judul, Isi postingan, halaman, dan footer saja, tidak ada sidebar seperti versi desktop. Namun untuk widget bisa dimunculkan dalam mode template seluler ini dan akan dibahas di postingan tersendiri.

Mengenal Perancang template yang baru dari blogger / blogspot

Perancang template adalah fitur modifikasi template terbaru dari blogger/blogspot, dengan perancang template ini anda dapat mengatur template sesuai dengan keinginan anda. Perancang template ini ada di menu template.


Untuk memulai perancang template, buka menu template, lalu pilih sesuaikan. Pada box "Langsung di blog".

 Nanti akan muncul perancang template seperti ini:

Ada 5 Menu pada perancang template yaitu:

Template
Disini anda bisa mencoba template dan melihat preview templatenya secara langsung.

Latar Belakang
Disini anda bisa mengganti latar belakang template yang anda gunakan, fitur ini akan aktif jika template mendukung. Template sederhana warna putih tidak mendukung fitur ini, dan begitu pula template dinamis.

Sesuaikan Lebar
Disini anda bisa mengatur lebar area postingan/artikel, dan lebar sidebar.

Tata letak
Pada menu tata letak, anda bisa mengatur berapa banyak sidebar, footer, yang ingin anda munculkan atau dihilangkan pada template. Anda cukup memilih layout yang sesuai dengan anda.

 
Tingkat Lanjut
Pada menu tingkat lanjut ini anda dapat mengatur warna dasar judul, teks, widget, css,mengganti gaya huruf, ukuran huruf, dan sebagainya.

Ok itu saja tentang perancang template, untuk latihan penerapannya akan dibuat di postingan tersendiri.

Berkenalan dengan Template Blogspot / Blogger

Setelah membahas berbagai macam "setelan" yang ada di blogger / blogspot. Maka saatnya lanjut pada setelan template. Pada template bawaan blogspot / blogger ini sudah sangat customizable atau mudah untuk diedit, dan terdapat banyak bawaan template dasar. Pada postingan ini akan dipekernalkan tentang setelan template pada blogspot/blogger.


Ok langsung saja, untuk membuka template, tekan menu pada blog pilihan anda, lalu arahkan ke menu template.

Di menu template ini anda dapat melakukai editing template (perancang template), editing template mobile dan juga dapat membuat backup template yang dapat disimpan di komputer anda. Disini juga anda bisa melihat preview website anda dalam bentuk biasa maupun mobile.

Selain itu terdapat template-template bawaan blogger yang bisa langsung di terapkan di blog anda. Berikut adalah template-template yang bisa langsung diterapkan.

Template Sederhana
Pada template sederhana ini umumnya warna dasarnya polos plus tambahan background.

Template Dinamis
Pada template dinamis ini, template lebih atraktif dan dapat menyesuaikan dengan browser, namun tidak dapat diatur pada perancang template. Default sesuai yang disediakan oleh blogger/blogspot.

Template Jendela Gambar
Pada template jendela gambar, latar body post terlihat agak transparant, dan dengan background default template.

Template PT Keren Sekali
Pada template ini, terdapat banyak pilihan variasi warna, dan kombinasi warna yang cukup menarik.

 

Template Tanda Air

Ada 4 Pilihan template tanda air/watermark, cocok buat blog yang bertema anak-anak

Template Kelembutan
Hampir sama dengan tema sederhana, tapi disini warna dasarnya terasa lebih lembut. :D

Template Perjalanan
Template khusus untuk blog dengan tema perjalanan

Dan yang terakhir kembali ke template lama, disarankan tidak perlu kembali jika memang anda pengguna blogger/blogspot baru. Karena anda tidak bisa menggunakan fitur perancang template bila kembali ke fitur yang lama.

Nah itu saja yang ada pada menu template, untuk postingan selanjutnya akan berfokus pada penggunaan fitur template dari blogspot/blogger.

:)

Mengelola Setelan Pos dan Komentar di Blogspot

Ingin mengganti jumlah pos yang tertampilkan di halaman utama, mengatur template pos, mengatur komentar, menambah moderasi atau chaptcha pada komentar? Anda bisa mengaturnya di menu setelan, pos dan komentar.

Langsung saja tekan menu "Setelan" Lalu Pilih "Pos dan Komentar"

Mengatur Jumlah Pos dan Template Entri Pos

Di halaman utama anda bisa mengatur jumlah pos yang ingin ditampilkan, cukup mengganti jumlah pos yang diinginkan di menu ini:

Lalu jika anda mempunyai postingan yang identik, dan ingin menghemat waktu mengatur layout dalam pos anda bisa menambahnya di Template Entri. Misal anda ingin membuat 10 postingan yang terdiri dari :

A. Pendahuluan
B. Isi
C. Daftar Isi

Untuk setiap posnya, daripada harus mengulang mengetik untuk isi tersebut, cukup tambahkan saja di templat entri, nanti setiap membuat pos baru, apa yang ditulis di templat entri akan muncul di post baru.

Secara spesifik mengenai template entri ini akan dibahas di postingan tersendiri.

Jika sudah tekan "Simpan Setelan", untuk menyimpan setelan yang telah anda buat.

Menampilkan Gambar dengan Lightbox

Yang dimaksud lightbox disini, jika visitor melihat gambar akan muncul box tanpa berpindah url, seperti gambar berikut:

Jika anda tidak ingin menampilkan lightbox, cukup di nonaktifkan saja di menu lightbox, ubah ya menjadi tidak:

Simpan setelan agar tersimpan jika sudah mengaturnya.

Mengatur Setelan Komentar

Bagi anda yang ingin memunculkan / menyembunyikan komentar anda bisa mengaturnya di lokasi komentar, untuk pilihan tersemat komentar tersedia di bawah pos, halaman penuh: form komentar akan muncul di halaman penuh, jendela munculan: form komentar akan muncul dijendela baru, dan untuk menyembunyikan cukup pilih sembunyikan.

Untuk mengatur siapa saja yang dapat mengomentari, anda bisa mengaturnya di "Siapa yang dapat mengomentari", dan jika butuh moderasi, anda juga dapat mengaktifkannya.

Jika ingin memunculkan chaptcha, cukup aktifkan "ya" pada tampilkan verifikasi kata.

Untuk memunculkan tautan balik, anda bisa mengaktifkannya di menu "Tampilkan tautan balik", dan yang terakhir jika anda ingin menampilkan pesan di form komentar, anda bisa menambahkannya di menu "Pesan Formulir Komentar"

Simpan setelan jika sudah melakukan editing. Ok itu saja tentang setelan pos dan komentar. Untuk setelan email anda bisa membaca postingan berikutnya.