Jika ingin blog kalian menjadi full responsive seperti blog
Shizenku
Blogspot ini, jangan meninggalkan halaman artikel ini sebelum selesai
membaca tulisan yang ada di postingan Cara membuat blog jadi responsive
ini. Sebelum saya mulai membahas cara agar blog jadi responsive kalian
cek terlebih dahulu url blog ini http://
shizenku.blogspot.com
sudah responsive apa belum dengan cara mengecilkan ukuran lebar
browser, bisa juga dengan mengganti resolusi layar pc kalian menjadi
resolusi yang lebih kecil atau di bawah resolusi asli monitor pc kalian.
Cek juga menggunakan handphone atau perangkat mobile seperti :
smartphone, tablet, atau hp dengan resolusi kecil.
Bagaimana sobat sudah dicek belum. Ini cuma sebagai bukti saja, bahwa
trik yang akan saya bagikan ini sudah saya terapkan pada blog ini yang
alhamdulillah sekarang sudah responsive.
Ok, kita lanjut posting.
Kalau ditanya susah atau gampang membuat blog jadi responsive jawabannya
adalah sangat mudah kawan asalkan kalian sudah paham tentang pemasangan
kode-kode css.
Inilah beberapa hal yang harus diperhatikan untuk membuat blog kalian jadi responsive :
- Lebar kolom atau Column
- Gambar atau Image
- Font atau Teks
1. Lebar Kolom
Pertama kita akan membahas tentang lebar kolom. Kenapa blog tidak
responsive itu karena lebar kolom melebihi lebar layar perangkat
hardware yang digunakan. sebagai contoh jika lebar outer-wrapper blog
kalian berukuran 900px. ketika kita membuka blog tersebut menggunakan hp
yang mempunyai lebar hanya 320px, 176px, atau lebih kecil lagi maka
kalian pasti sudah tahukan apa yang terjadi. ya yang terjadi adalah blog
kalian tidak sepenuhnya terlihat dan yang terlihat hanya beberapa
bagian saja yang sebelah kiri, sedangkan jika kita ingin melihat bagian
lainnya yang sebelah kanan maka kita harus menggeser scroll bagian bawah
layar. inilah yang dinamakan blog tidak responsive sedangkan blog
responsive adalah blog yang bisa menyesuaikan lebar secara otomatis
mengikuti lebar perangkat yang digunakan, dan blog responsive tidak
mempunyai scroll bagian bawah.
Supaya kolom blog jadi responsive kalian bisa menggunakan bantuan
media-query untuk mengatur kolom header, main, footer, atau sidebar.
Caranya :
tambahkan kode di bawah ini dan taruh di atasnya kode ]]></b:skin> atau </style>
@media screen and (max-width:1024px) {
kode css
}
@media screen and (max-width:940px) {
kode css
}
@media screen and (max-width:820px) {
kode css
}
@media screen and (max-width:370px){
kode css
}
Kode media-query di atas bisa ditambah atau dikurangi. Kode berwarna merah bisa diganti sesuka kalian.
Cara pengaturan media-query :
kalian ganti teks "kode css" yang berwarna merah di atas dengan kode css.
Contohnya :
#outer-wrapper {width:900px;}
#main-wrapper, #sidebar-wrapper {width:510px;margin:0 10px 0 0;float:left;}
@media screen and (max-width:330px){
#outer-wrapper {width:95%;}
#main-wrapper, #sidebar-wrapper {width:100%;margin:0 auto;float:none;}
}
</style>
Kode di atas dibaca :
"Jika di resolusi layar di bawah 330px maka outer-wrapper mempunyai
lebar 95% dari ukuran layar perangkat hardware. sedangkan jika di atas
330px outer-wrapper mempunyai lebar 900px.""Jika di resolusi layar di bawah 330px maka main dan sidebar
mempunyai lebar 100% atau memenuhi outer-wrapper, margin:0 auto,
float:none. sedangkan jika di atas 330px main dan sidebar mempunyai
lebar 510px, margin:0 10px 0 0, float:left.""Mungkin ada yang masih bingung di resolusi pas 330px ukuran lebar
outer-wrapper nya 900px atau 95%. Jawabannya adalah 900px. karena
media-query mengatur resolusi di bawah 330px.
kode margin:0 auto;float:none; digunakan di resolusi kecil supaya
menjadi satu kolom. Sedangkan di resolusi besar seperti 800px tidak
perlu dipakai.
yang di atas hanya contoh untuk outer, main, sidebar wrapper sedangkan
untuk pengaturan yang lainnya seperti header, menu navigasi, post,
comment, footer, dll. Kalian atur sendiri sesuai template masing-masing.
Agar di resolusi kecil bisa menyesuaikan lebar kolom otomatis. Gunakan
pengaturan width: menggunakan % bukan px. Sedangkan untuk resolusi besar
gunakan px saja soalnya kalau menggunakan % takutnya nanti tampilan
blog jadi berantakan. Jadi % sangat cocok digunakan untuk single column.
2. Gambar
Perbedaan gambar responsive dan tidak responsive :
Gambar tidak responsive :
Dari gambar di atas terlihat bahwa gambar melewati batas outer-wrapper sehingga muncul scroll di bagian bawah.
Gambar responsive :
Dari gambar di atas terlihat bahwa gambar tidak melewati batas
outer-wrapper dan tidak muncul scroll di bagian bawah. dan ketika lebar
browser dikecilkan ataupun dibesarkan, gambar bisa menyesuaikan lebar
secara otomatis.
Supaya gambar atau image bisa jadi responsive, tambahkan kode di bawah ini kedalam kode css :
img,object,embed{border:none;vertical-align:middle;margin:0 auto;max-width:100%;width:auto;height:auto;}
kode css di atas fungsinya supaya img atau gambar postingan menjadi responsive.
sedangkan gambar iklan dan iframe tidak bisa responsive, maka dari itu
di resolusi kecil gambar iklan dan iframe tidak perlu ditampilkan.
Caranya : kalian harus tahu dulu kode div id htmlnya.
ketika kalian menambahkan iklan di sidebar cari kodenya di edit html bagian sidebar.
Contoh kode div di iklan-nya seperti ini :
<b:widget id='HTML1' locked='false' title='Advertisement' type='HTML'>
Maka supaya tidak tampil di resolusi 320px kalian setting media-querynya menjadi seperti ini :
@media screen and (max-width:330px){
#html1 {display:none;}
}
Kalau hanya memakai kode css saja gambar tidak akan bisa responsive
karena ada faktor lain yang menyebabkan gambar tidak responsive yaitu di
dalam kode html artikel. maka dari itu kalian juga harus melakukan edit
artikel yang ada gambarnya dalam mode html. biasanya kode image itu
seperti ini :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCxz0h-zslrHIas1kx4NW8sd1aONBKkb-wGYIJiQmnVT_pTv4nVHX-Jy5GTX1hI4djKhRY8eGs2EyaZh6zMrgBh2q8BHwYUUSo8PP1mMu8Dpxg5zGFh45PwmZIcGZKvbOLMoRfz46rdc/s1600/image+tidak+responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCxz0h-zslrHIas1kx4NW8sd1aONBKkb-wGYIJiQmnVT_pTv4nVHX-Jy5GTX1hI4djKhRY8eGs2EyaZh6zMrgBh2q8BHwYUUSo8PP1mMu8Dpxg5zGFh45PwmZIcGZKvbOLMoRfz46rdc/s320/image+tidak+responsive.jpg"
width="277" /></a></div>
Kalian hapus saja kode yang berwarna merah. Sehingga hasilnya seperti berikut ini :
<div class="separator" style="clear: both; text-align: center;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCxz0h-zslrHIas1kx4NW8sd1aONBKkb-wGYIJiQmnVT_pTv4nVHX-Jy5GTX1hI4djKhRY8eGs2EyaZh6zMrgBh2q8BHwYUUSo8PP1mMu8Dpxg5zGFh45PwmZIcGZKvbOLMoRfz46rdc/s1600/image+tidak+responsive.jpg"><img height="320"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCxz0h-zslrHIas1kx4NW8sd1aONBKkb-wGYIJiQmnVT_pTv4nVHX-Jy5GTX1hI4djKhRY8eGs2EyaZh6zMrgBh2q8BHwYUUSo8PP1mMu8Dpxg5zGFh45PwmZIcGZKvbOLMoRfz46rdc/s320/image+tidak+responsive.jpg"
width="277" /></a></div>
Setelah kalian menerapkan tips di atas saya jamin gambar postingan akan
menjadi responsive. fungsi menghapus kode di atas selain agar bisa
responsive keuntungan lainnya agar gambar jadi valid html5 kalian hanya
perlu menambahkan title dan alt-nya.
3. Font
Inilah gambar teks yang tidak responsive :
Dari gambar di atas terlihat ada teks yang panjang dan tanpa spasi
sehingga teks tersebut melewati batas outer-wrapper sehingga muncul
scroll di bawahnya.
Supaya font atau text menjadi responsive kalian harus menambahkan kode
css di bawah ini ke dalam kode css tepatnya satu grup dengan kode
font-family.
Ini dia kode css-nya :
word-wrap:break-word;
Jadi ketika berada dalam mode edit html template tekan ctrl + f lalu
cari kode font-family lalu tambahkan kode word-wrap di belakang kode
font-family.
Contoh kode css di bagian header :
#header {font-family:Arial, san-serief;}
Setelah ditambahkan kode word-wrap sekarang menjadi seperti ini :
#header {font-family:Arial, san-serief;word-wrap:break-word;}
Jadi jika di blog kalian ada banyak kode font-family maka semakin banyak juga kalian harus menambahkan kode word-wrapnya.
Jika menggunakan kode word-wrap : Maka jika ada teks yang panjangnya
melebihi lebar outer-wrapper dan tanpa spasi maka teks tersebut tidak
akan melewati batas kolom post sehingga kelebihan teks yang panjang akan
terpotong dan akan berada di bawahnya dan hasilnya responsive.
Seperti gambar di bawah ini :
UPDATE : kalian hanya perlu menambahkan kode
word-wrap:break-word; sekali saja di bagian
body.
contoh :
body {word-wrap:break-word;}
Sekarang kita menuju tahap akhir.
Tips dan trik di atas digunakan agar responsive di dekstop. Sekarang
kita akan membahas supaya blog bisa responsive di mobile version.
Walaupun kalian sudah memasang media-query. Saya yakin blog kalian belum
responsive di mobile version. Itu karena saat kita membuka salah satu
postingan di dekstop dengan url : "http://
shizenku.blogspot.com/2013/11/cara-uninstall-driver-vga-amd-radeon.html"
Maka jika kita buka melalui perangkat mobile. Url tersebut akan mendapat
tambahan kode ?m=1 di belakang url-nya sehingga menjadi seperti ini :
"http://
shizenku.blogspot.com/2013/11/cara-uninstall-driver-vga-amd-radeon.html?m=1"
Supaya blog bisa responsive di mobile version ikuti panduannya di bawah ini :
1. Login ke Blogger lalu pilih Template lalu klik tombol pengaturan template seluler.
Ubahlah pengaturan template mobile version kalian yang semula berada di Default sekarang kalian ubah menjadi Khusus.
2. Kalian harus menambahkan kode di bawah ini dan taruh di bawahnya
kode ]]></b:skin> atau </style>. berikut ini kodenya :
@media screen and (max-width:370px){
kode css
}
</style>
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
#header h1, #header p, #header h1 a:link, #header
h1 a:visited, #comments h4, #comments-block .comment-footer,
#comments-block .comment-author, #comments h5, #footer h6,
#comments-block .comment-body, .owner-Body, #nav ul li {font-size:100%;}
#nav ul li a:link, #nav ul li a:visited {padding:2px 4px;}
#main, #sidebar {width:100%;margin:0 auto;float:none;}
.post blockquote, .post-body blockquote {margin:0 auto;font-size:90%;}
.post, .post-body, #comments {font-size:100%;padding:5px;}
.comment-timestamp {font-size:65%;}
#sidebar {display:none;}
</style>
</b:if>
Kode berwarna merah adalah kode yang harus ditambahkan. sedangkan kode
berwarna orange adalah kode pengaturan css yang saya gunakan pada blog
shizenku ini di versi mobile. jadi untuk kode yang berwarna orange ini hanya sebagai contoh saja dan kalian harus mengaturnya sendiri.
Untuk cara pengaturannya sama saja dengan mengatur media-query, saya
rekomendasikan agar disamakan saja dengan media-query resolusi 330px
atau resolusi di bawahnya.
Supaya responsive di Internet Explorer tambahkan script di bawah ini :
<!--[if IE]><script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
Semoga artikel ini membawa manfaat. Amin.
Selesai.
