[Object]
Home » » Membuat Blog Menjadi Responsive

Membuat Blog Menjadi Responsive

Membuat blog menjadi responsive boleh dibilang sangatlah mudah, yang penting  kita sudah paham tentang pemasangan kode-kode css.
Ada beberapa hal yang harus diperhatikan untuk membuat blog menjadi responsive :

Column/Lebar kolom
Image/Gambar
Teks/Font


1. Lebar Kolom

Blog tidak responsive itu dikarenakan lebar kolom melebihi lebar layar perangkat hardware yang digunakan, jika lebar outer-wrapper blog berukuran 900px, maka ketika membuka blog tersebut menggunakan hp yang mempunyai lebar hanya 320px, 176px, atau lebih kecil maka yang terjadi adalah blog tidak sepenuhnya terlihat dan yang terlihat hanya beberapa bagian saja yang sebelah kiri, sedangkan jika 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.
Agar kolom blog menjadi responsive, kita bisa menggunakan bantuan media-query untuk mengatur kolom header, main, footer, atau sidebar.
Caranya adalah sebagai berikut :
tambahkan kode css di bawah ini dan letakkan di atas 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. Dan kode yang berwarna biru bisa diganti sesuai selera.
Untuk pengaturan media-query  ganti teks "kode css" yang berwarna merah dengan kode css.
Seperti contoh di bawah ini :

    #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>


Penjelasan :
*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.
Kode margin:0 auto;float:none; digunakan di resolusi kecil supaya menjadi satu kolom. Sedangkan di resolusi besar seperti 800px tidak perlu dipakai.
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 menjadi berantakan. Jadi % sangat cocok digunakan untuk single column.


2. Gambar

Supaya gambar atau image bisa menjadi responsive, tambahkan kode yang di bawah ini ke dalam 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 bisa menjadi responsive.
Sedangkan gambar iklan dan iframe tidak bisa responsive, maka dari itu di resolusi kecil, gambar iklan dan iframe tidak perlu ditampilkan.
Supaya tidak tampil di resolusi 320px, setting media-querynya menjadi seperti yang di bawah ini :

    @media screen and (max-width:330px){
    #html1 {display:none;}
    }

Jikalau 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.
Oleh karena itu kita harus melakukan edit artikel yang ada gambarnya dalam mode html. biasanya kode imagenya seperti ini :

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://4.bp.blogspot.com/-1PI9B6xRNQI/Uk94mO3F66I/AAAAAAAABPk/Sy_9YJJj7qE/s1600/image+tidak+responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://4.bp.blogspot.com/-1PI9B6xRNQI/Uk94mO3F66I/AAAAAAAABPk/Sy_9YJJj7qE/s320/image+tidak+responsive.jpg" width="277" /></a></div>

Kode yang berwarna kuning harus dihapus. Sehingga hasilnya seperti berikut ini :

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://4.bp.blogspot.com/-1PI9B6xRNQI/Uk94mO3F66I/AAAAAAAABPk/Sy_9YJJj7qE/s1600/image+tidak+responsive.jpg"><img height="320" src="https://4.bp.blogspot.com/-1PI9B6xRNQI/Uk94mO3F66I/AAAAAAAABPk/Sy_9YJJj7qE/s320/image+tidak+responsive.jpg" width="277" /></a></div>


3. Font

Supaya font atau text menjadi responsive kita harus menambahkan kode css di bawah ini ke dalam kode css dengan cara edit html, tepatnya satu grup dengan kode font-family.
kode css-nya adalah :

    word-wrap:break-word;

Ketika berada di dalam mode edit html template  cari kode font-family lalu tambahkan kode word-wrap di belakang kode font-family.
Sebagai contoh kode css di bagian header :

    #header {font-family:Arial, san-serief;}

Setelah ditambahkan kode word-wrap nya akan menjadi seperti ini :

    #header {font-family:Arial, san-serief;word-wrap:break-word;}

Apabila di dalam htmlnya  ada banyak kode font-family, maka kode word-wrapnya harus ditambahkan.
Setelah menggunakan kode word-wrap ini, 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 pun menjadi responsive.
Sekian.





sumber :

Thanks for reading & sharing Sihaloho Sidapitu

0 komentar:

Post a Comment