Cara Membuat Template Tidak Responsive Menjadi Responsive

ads here
Cara Mengubah Template Tidak Responsive menjadi Responsive - Arti dari kata Responsive disini adalah dapat menyasuaikan diri terhadap perubahan serta dapat mengatur letaknya sesuai dengan ukuran atau resolusi layar dimana blog itu di review. Responsive dapat juga diartikan sebagai halaman blog fleksibel yang maksudnya apabila blog dibuka pada perangkat yang mempunyai resolusi atau lebar layar yang kecil maka secara otomatis halaman blog akan ikut mengecil sesuai dengan resolusi layar pada perangkat. Inilah yang dimaksud dengan Responsive Page.

Mengapa harus Responsive?
Di Era Digital seperti saat ini berbagai macam bentuk dan ukuran perangkat tersebar luas. Hadirnya SmartPhone dengan berbagai ukuran mengakibatkan tidak menentunya jenis serta ukuran resolusi browser yang digunakan pengunjung atau visitor blog kita untuk meriview isi halaman blog kita. Dan sebagai penyedia konten yang mementingkan kepuasan para pengunjung yang hadir, sudah sepatutnya kita menyesuaikan diri untuk menyambut kehadiran mereka. salah satu cara membuat pengunjung merasa nyaman untuk mereview blog kita adalah dengan mengubah tampilan template blog agar menjadi Responsive. Sehingga berapapun resolusi layar yang digunakan pengunjung dalam mereview blog kita maka tampilan halaman yang mereka lihat tetap bagus dan menarik sesuai dengan design yang kita persembahkan.

RESPONSIVE TEMPLATE


mengubah template menjadi responsive


Jika anda memiliki template yang belum responsive namun sangat anda sayangi sehingga tidak mau untuk menggantinya dengan template lain yang responsive. Maka artikel ini sangat membantu anda untuk mengubah template kesayangan anda yang belum reponsive agar menjadi template kesayangan yang responsive.


Lalu bagaimana membuat template yang belum responsive agar menjadi responsive. ?

Dalam Artikel kali ini Expert Blogger akan menjelaskan langkah- langkah yang harus anda lakukan dalam merubah tampilan template blog anda supaya menjadi responsive. Untuk membuat template Responsive cukup dengan menambahkan kede @media-screen. contohnya seperti dibawah ini:

//halaman hanya akan tampil dengan lebar maksimal 800 piksel
@media only screen and (max-width:800px) {

//pengaturan halaman full (1, 2 atau 3 kolom)
#outer-wrapper {width:750px; margin:0 auto;} 

//halaman posting (jika pada mobile phone akan tampil individu)
#main-wrapper {width:750px;} 
//layout sidebar
#sidebar-wrapper {width:750px;} 
//layout kolom footer
#footer {width:750px;} 
}

Dengan pengaturan @media-layout diatas, maka jika halaman blog terbuka pada resolusi layar yang kurang dari 800px, halaman akan secara otomatis berubah tampilan menjadi 1 kolom full, contohnya pada layar tablet atau mobile phone yang memiliki ukuran layar yang cukup kecil, sehingga tampilan halaman akan menempatkan kolom sidebar dibawah setelah halaman posting secara sejajar dalam 1 kolom.

Cara Mengatur Halaman Blog Agar menjadi Template yang Responsive

#Langkah Pertama

Login terlebih dahulu keblog anda menggunakan akun gmail yang anda gunakan sebagai administrator blog. Lalu pada dashbord blog klik Menu Template -> Edit HTML


#Langkah Kedua

Temukan (ctr+f) kode <head> pada template anda, lalu letakkan kode ini dibawahnya:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

#Langkah Ketiga

Kemudian letakkan kode CSS dibawah ini pada emplate anda. 

<style type='text/css'>
@media only screen and (min-width:768px) and (max-width:999px){
   #outer-wrapper{width:754px}
   #main-wrapper{width:60%}
   #sidebar-wrapper{width:40%}
   #headnya{max-width:260px;min-width:250px}
   #head-ads .widget{margin:15px 0}
   #header h1,#header p{padding:15px 0 0;font-size:240%}
   #header .description{padding:0 0 10px}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:767px){
   #outer-wrapper{width:440px}
   #sidebar-wrapper,#main-wrapper,#isifooternya{width:100%}
   #isifooternya .footer-wrap{width:100%}
   #nav{...}
   #search-result-container{width:100%}
   //tambahkan elemen id lainnya disini...  
}

@media only screen and (max-width:479px){
   #outer-wrapper{width:310px}
   #header h1,#header p{font-size:230%}
   //tambahkan elemen id lainnya disini...  
}

@media only screen and (min-width:768px) and (max-width:999px){
   #slides ul{height:200px}
   #slides h4{font-size:15px}
   #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
   .post-outer{width:100%}
   .post{width:370px}
   .blog-posts.hfeed::before{left:27px}
   .post-body p{overflow:visible}
   .post h2.post-title{height:auto;}
   //tambahkan elemen id lainnya disini...  
}

@media only screen and (max-width:479px){
   #slides ul{height:450px}
   .post{width:228px}
   .post h2.post-title{max-height:200px;}
   .post-body p{font-size:11px;padding:0}
   //tambahkan elemen id lainnya disini...  
}

@media only screen and (max-width:479px){
   #social-side2{padding:0}
   #social-side2::before{content:""}
   //tambahkan elemen id lainnya disini...  
}
</style>

Catatan: silahkan anda ganti ID masing-masing element diatas sesuai dengan ID element yang terdapat pada template anda. Karena setiap template mungkin tidak memiliki Id yang sama tergantung pembuat template tersebut.

Yang di maksud dengan ID pada catatan diatas adalah kode seperti conton dibawah ini:

#outer-wrapper
#main-wrapper
#sidebar-wrapper

Nah sekian Tutorial singkat yang Expert Blogger Persembahkan. Semoga bisa membantu anda dan silahkan FOLLOW  blog ini jika anda tertarik untuk mendapatkan artikel-artikel menarik berikutnya.


FOLLOW NOW