Bani Cyber Blog – Responsive? Tahukah kamu apa itu? [Blog] Responsive adalah blog yang dapat menyesuaikan tampilan dan ukurannya dengan gadget [smartphone] yang dipakai oleh pengunjung. Jadi apakah responsive itu dapat dikatakan user friendly, kawan? Tentu.

Karena responsive termasuk fitur yang dapat memudahkan pengunjung untuk searching dan reading di blog kita di gadget [smartphone]. Coba kamu lihat blog ini dari smartphone kamu, blog ini akan menyesuaikan ukuran-nya secara otomatis dengan smartphone kamu Dan tanpa perlu zoom.

Sekarang template blog responsive sudah dianggap wajib oleh setiap blogger. Makanya blogger yang menggunakan template yang gak responsive udah jarang banget [biasanya blogger nonaktif/ tidak aktif dalam blogger].

Pertanyaan:
  • Bang, saya suka dengan template saya karena seo friendly tapi masalah nya template-nya gak responsive. Jadi gimana bikin template saya jadi responsive?
  • Saya udah optimasi seo di blog saya mas, tapi template yang saya pakai tuh gak responsive. Gimana ya bikin nya jadi responsive?
  • Dan pertanyaan sama, terus keluar dari pikiran blogger.

Untuk membuat template jadi responsive itu mudah, kamu hanya perlu mengubah pixel [px] pada ukuran dengan persen [%]. Ukuran yang mana saja yang harus diubah menjadi persen? Ukuran pada bagian yang ada teks ‘wrapper’ pada css. Contohnya:

Wrapper • Header-Wrapper • Post-Wrapper • Sidebar-Wrapper • Footer-Wrapper

Misalnya pada bagian Post Wrapper, kita ubah bagian px nya jadi persen [%]
#post-wrapper {float: left; width: 500px; margin: 12px -160px 12px 0}
Diganti menjadi:
#post-wrapper {float: left; width: 83%; margin: 12px -160px 12px 0}

Mudah kan, kawan? Kamu hanya perlu mengganti px dengan % saja. OK lah yang diatas udah kita anggap selesai, kita lanjut ke tahap yang selanjutnya. Kita langsung bahas dari yang pertama, yaitu:

Download: Template Gratis, SEO Friendly, Responsive.

1.Agar Gambar Jadi Responsive


Kamu memiliki masalah dengan gambar yang berada pada postingan blog mu. Apakah karena jika dibuka dalam versi mobile atau di smartphone gambar tersebut melebihi layar gadget? Inilah yang sering dialami para blogger.

Jadi, apa yang kamu lakukan agar gambar pada postingan blog kamu jadi responsive? Ayo kita bahas sama sama cara bikin gambar pada postingan responsive di gadget manapun.

Tambahan
Sebelum melakukan tips dibawah, jangan lupa ketika menambahkan gambar ke postingan. Gambar tersebut dikecilkan agar muat di layar ponsel.

1.Agar Gambar Pada Postingan Responsive

1.Log In ke Akun Blogger kamu dulu

2.Masuk ke bagian Template, klik Edit HTML

3.Cari ]]></b:skin> atau </style> dengan [CTRL+F]

4.Tambahkan Kode berikut sebelum kode CSS tadi
img {max-width:100%;height:auto;border:0;}

5.Save Template.

2.Agar Logo Header Responsive

Ini tips tambahan dari saya, karena sering saya lihat di blog lain kebanyakan logo atau gambar pada header blognya gak responsive. Ntah mungkin disengaja oleh yang punya blog [Admin] atau memang udah dasarnya gak tau.

Kalau kamu memang dasarnya udah gak tahu, sekarang adalah waktu yang tepat untuk mengetahuinya. Cara agar logo [gambar] header jadi responsive seperti pada header blog saya ini:

1.Log In ke Akun Blogger kamu dulu

2.Masuk ke bagian Template, klik Edit HTML

3.Cari .header img { atau #header img { dengan [CTRL+F]
Misalnya: .header img {width:300px;height:auto;}

4.Tambahkan Kode berikut sebelum kode CSS tadi
width:90%
Inilah Hasilnya
.header img {max-width:300px;width:90%;height:auto;}

5.Save Template.

3.Agar Gambar Banner Jadi Responsive

Banner biasanya digunakan untuk memasang iklan di blog, Banner biasanya diletakkan di sidebar dan juga kadang diletakkan diatas postingan.

Misalnya saya ingin memasang banner di blog saya, gimana bikin gambar nya jadi responsive.

<a href=’http://gm-garena.blogspot.com’ title=’template seo banget’ alt=’keren loh’><img>http://1.bp.blogspot.com/-9uemV09QL_4/Vc7U7WmIAyI/AAAAAAAACvU/KUAbpeL80HY/s640/Vikka%2BFast%2Band%2BResponsive%2BBlogger%2BTemplate.png</img></a>

Diatas Itu misalnya contohnya, gimana bikin gambar diatas jadi responsive? Anda hanya perlu menambahkan width dengan bilangan persen di bagian <a>. Hasilnya jadi begini

<a href=’http://gm-garena.blogspot.com’ title=‘template seo banget’ alt=’keren loh’ style=’width:95%;’><img>http://1.bp.blogspot.com/-9uemV09QL_4/Vc7U7WmIAyI/AAAAAAAACvU/KUAbpeL80HY/s640/Vikka%2BFast%2Band%2BResponsive%2BBlogger%2BTemplate.png</img></a>

2.Agar Tulisan Jadi Responsive


Setelah gambar pada blog sudah dianggap responsive, kamu perlu memeriksa apakah ada yang belum responsive dari blog dari blog kamu. Ya, benar sekali ‘tulisan/teks’ nya belum responsive.

Tulisan atau teks di artikel blog nya melewati pembatas wrapper hingga menembus layar gadget [smartphone].

Apa yang perlu dilakukan agar teks pada postingan blog jadi responsive? Tidak perlu khawatir saya juga membagikan cara bikin teks di postingan jadi responsive dalam 30 detik. 30 detik kalau kamu bisa mengikuti cara saya dengan cepat, dan kita mulai dari sekarang.

1.Anggap Aja Udah Log In Di Blogger

2.Anggap Aja Udah Buka Template Lalu Edit HTML

3.Cari #content-wrapper { atau #post-wrapper {

4.Tambahkan kode berikut Setelah kode tadi.
word-wrap:break-word

Inilah Hasilnya
#content-wrapper {color:#000;background:#fff;word-wrap:break-word}
#post-wrapper {color:#000;background:#fff;word-wrap:break-word}

5.Save Template.

Kamu juga bisa menambahkan kode tadi ke seluruh bagian yang ada teks nya. Misalnya judul header, judul Sidebar, Judul Widget di Footer dll.

3.Agar […] Jadi Responsive.

Anda bisa memberi saran dan tambahan tips blog menjadi responsive.

Itulah ringkasan singkat mengenai cara agar blog full responsive [Dijamin 100%]. Apabila ada yang kurang paham silahkan bertanya melalui komentar. Dan juga apabila anda memiliki tips atau saran tambahan bisa anda sampaikan lewat komentar ya…

Berlangganan via Email

Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.


0 Tanggapan Untuk "Cara Membuat Template Blog Jadi Responsive [Blogger.com]"

Post a Comment