Cara Membuat Template Responsive dengan Mudah di Blog

Sobat. Dalam perkembangan desain template blogger saat ini, disebutkan salah satu prasyarat utama untuk menjaga kelangsungan sebuah blog adalah tingkat responsive ketika dibuka melalui gadget saat ini, salh satu contohnya smart phone. Hal ini sesuai dengan alotgaritma terbaru saat ini.

Jika tidak ingi "dipangkas" abis oleh pemeringkat google tersebut, maka gunakanlah template yang benar-benar super responsive dan ramah terhadap google.

Jika tidak ingin merunah tempalte bawaan sobat, maka tidak ada cara lain kecuali dengan melakukan perubahan terhadap template bawaan yang Anda gunakan.

Oleh karena itu, di sini kita ulaskan cara sederhana bagaimana cara membuat template yang kita gunakan menjadi responsive.

Langkah Membuat Design Template Responsive di Blog

1. Pertama pasang 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. Yang kedua yaitu mengubah 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 % (persen)
   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;
   }
   

3. 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;
   }
   }
   

Nah itulah cara mudah membuat template blog menjadi responsive 100% ampuh. Jika memang masih bingung untuk membuat design template responsive, tidak ada cara lain kecuali langsung menggunakan template yang siap pakai dan tentu responsive. Kalau ingin lebih mudah lagi, gunakanlah jasa pembuatan template blog responsive. Bisa hubungi contact kami Gan.