Salam
NEWBIE artikel kali ini dari Firanewbie tentang Cara Membuat Design Template
Blog Menjadi Responsive . Bagaiamna cara membuat template menjadi responsive ?
Pada dasarnya membuat design blog menjadi responsive sangatlah mudah , Sobat newbie hanya perlu mengubah satuan pixel menjadi satuan persen serta memanfaatkan media queris , kali ini ada 3 cara termudah untuk mengubah template blog anda menjadi responsive , cara ini manjur lho , kalau gak percaya silahkan cek template saya , pasti template saya responsive . anda bisa lihat screenshot dibawah ini , dibawah ini merupakan demo blog saya dilihat di tablet dan di handphone , hembs tampilanya sangat menarik bukan ?
Baca juga : Cara membuat template Blog sendiri mulai dasar
Berikut Cara Membuat Design Template Responsive Sendiri di Blog
1.Tempatkan
dulu meta tag dibawah ini diatas kode </head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Perhatian
MS Internet explorer versi 8 dan yang lebih rendah tidak support tag di atas,
tapi tenang aja anda bisa menggunakan bantuan respond.js maupun
media-queries.js di IE dengan meta tag berikut ini :
<!--[if lt IE 9]>
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2.
Ubah ukuran pixel menjadi ukuran persen seperti dalam contoh CSS dibawah ini:
.sidebar{
width:300px;
}
.content{
width:700px;
}
.wrap{
width:1024px;
}
Diatas
lebar Grid utama adalah dalam reolusi width:1024px dan untuk sidebar
width:300px dan content width:700px. Disini saya coba jelaskan formula dan
kalkulasi sederhana dalam mengkonversi nilai px (pixel) agar bisa diganti
dengan satuan % (percent)
target / context = result
300px / 1024px = width: 29.296875%; /* 300
(originally 300) / 1024 */
700px / 1024px = width: 68.359375%; /* 700
(originally 700) / 1024 */
Dari hasil kalkulasi diatas maka bisa didapatkan nilai percent dalam koding CSS seperti dibawah ini
.sidebar{
width:29.29%;
}
.content{
width:68.35%;
}
.wrap{
width:1024px;
}
Formula
diatas sebenarnya bisa juga digunakan untuk menghitung ukuran text (font size),
Katakanlah konteks normal untuk ukuran font dalam body adalah 16 piksel. Jika
kalian ingin menetapkan bahwa H1 harus 24 pixel, maka kalian bisa mengganti
dengan satuan em dengan cara menghitungnya sebagai berikut:
24px / 16px = 1,5em
Dengan gaya CSS akan didapat koding seperti ini:
h1 {
font-size: 1.5em;
}
Kemudian
yang terkahir kita atur di versi tablet , atau hp dengan menggunakan media queries
caranya kita pasang media queries berikut , kemudian kita buat float none dan
ukuranya menjadi 100%
@media screen and
(max-width:768px){
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}
Begitulah sahabat newdie cara membuat template blog menjadi Responsive 100% . Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Membuat Design Template Blog Menjadi Responsive . Terima kasih dan semoga bermanfaat….