Cara mudah membuat design template blog responsive

Template blog responsive simple - Fungsi dari membuat template blog menjadi responsive adalah penyesuaian tampilan blog terhadap media yang di gunakan. Misal jika kita menggunakan template blog yang responsive ketika blog kita dibuka melalui handphone maka tampilan blog kita akan menyusaikan dengan layar handphone. Dan jika kita menggunakan template blog yang responsive ketika blog kita dibuka melalui tablet maka tampilan blog juga menyesuaikan layar tablet. Sebagai contoh punya saya pada gambar di bawah ini. 

Untuk membuat template blog menjadi responsive cukup mudah, hanya mengubah satuan pixels menjadi satuan persen di dalam template blog serta memanfaatkan media queris. Jadi bagi anda yang ingin membuat template blognya menjadi responsive ikuti langkah-langkah berikut :

Cara mudah membuat design template blog responsive 

• Langsung saja masuk ke menu template dan pilih edit html
• Letakkan kode dibawah ini tepat diatas kode </head>, untuk mencari kode ini tekan tombol ctrl+f.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Ubah ukuran pixel menjadi ukuran persen. Contoh kode css nya :

.sidebar{
width:300px;
}
.content{
width:700px;
}
.wrap{
width:1024px;
}

• Terlihat diatas menggunakan resolusi pixels. Wrap = 1024px, content = 700 px, sidebar = 300px. Untuk mengubah nilai px (pixels) menjadi nilai satuan % (persen), kalkulasi sederhanya seperti dibawah ini.

target / context = result

300px / 1024px = 29.29%

700px / 1024px = 68.35%

Untuk 1024px itu adalah Grid utama blog.

Jadi dari hasil kalkulasi diatas didapatkan nilai persen untuk kode css nya sebagai berikut :

.sidebar{
width:29.29%;
}
.content{
width:68.35%;
}
.wrap{
width:1024px;
}

• Sedangkan untuk ukuran text sama seperti hitungan diatas. Misal ukuran font dalam body adalah 16 px. Jika anda ingin membuat H1 menjadi 20 px, maka ubahlah menjadi satuan em dengan cara menghitung sebagai berikut :

20px / 16px = 1,25 em

Maka kode css nya menjadi seperti ini

h1 {
font-size: 1.25em;
}

• Terakhir untuk membuat di versi handphone atau tablet dengan memasang media queries. Buat float menjadi none dan ukurannya menjadi 100%. Seperti di bawah ini

@media screen and (max-width:768px){
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}

• Simpanlah perubahan template anda dan template anda sudah menjadi responsive.

Itulah cara membuat template blog menjadi responsive, semoga dengan postingan ini dapat membantu anda dalam membuat template blog anda menjadi responsive. Silahkan mencoba dan semoga berhasil. Terima kasih.