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.
TambahanSebelum 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…
Al Bani HR Saturday, November 19, 2016 Blogging
Berlangganan via Email
Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.
Post a Comment