Tutorial Blogger, Wordpress, Blogspot, dan free template blog

Cara Membuat Template Blog Responsive dengan Mudah

Cara Membuat Template Blog Responsive dengan Mudah

Responsive template


apa itu arti dari template yang responsive... Responsive template merupakan sebuah template yang bisa menyesuaikan ukuran template tersebut di berbagai ukuran device. Bedanya responsive template dengan mobile version yaitu kalau mobile version biasanya template menyesuaikan ukurannya pada versi mobile, biasanya pada mobile version ini memiliki ciri penambahan ?m=1 pada url blogspot. Kalau responsive, bukan hanya untuk versi mobile tetapi juga menyesuaikan ukuran pada semua ukuran device dan tidak memiliki penambahan url ?m=1 pada blogspot. Cara membuatnya pun berbeda, lebih mudah untuk membuat versi mobile seperti yang pernah saya share di blog ini. Kali ini saya akan memberikan sebuah tutorial cara untuk membuat template blog responsive dengan mudah dan dengan pengandaian agar lebih mudah dimengerti. Dalam situs untuk melihat hasil responsive ada 12 ukuran kondisi device. Namun, kali ini saya akan memberikan tutorial dengan untuk ukuran 320px. Untuk yang master silahkan tinggalkan sampai sini.

Pengenalan dan Pengandaian Template


Disini kita akan mulai mengenali dan memahami elemen-elemen pada template yang digunakan. Dalam hal ini saya akan mengandai-andai kan template yang digunakan. Andaikan anda menggunakan template yang memiliki spesifikasi sebagai berikut.

  • Elemen tempat dimana sidebar dan post diletakkan disebut #outer-wrapper dengan style='width:920px;', 
  • tempat diletakkan post disebut #main-wrapper dengan style='width:700px;float:left;'
  • dan sidebar berada di kanan main-wrapper dengan style='width:220px;float:right;'.

Jika dengan gambar seperti berikut

Cara Membuat Template Blog Responsive dengan Mudah
Klik Untuk Memperbesar Gambar

Pengenalan CSS Responsive


CSS biasa dengan CSS reponsive tidak lah berbeda, hanya saja pada CSS reponsive awalnya memiliki pengkondisian ukuran width dengan kode @media screen and (max-width:ukuranwidth){#CSS{}}. Pada ukuranwidth diisi dengan ukuran width device yang akan diatur dan #CSS diisi dengan CSS yang akan diatur jika pengkondisian benar terjadi. CSS Responsive ini bisa diletakkan di bawah kode penutup CSS biasa </b:skin> dengan diawali dengan <style> dan ditutup dengan </style> contoh.

</b:skin>
<style>
@media screen and (max-width:ukuranwidth){#CSS{}}
</style>

Buat Responsive


Seperti yang saya janjikan, tutorial ini akan dimulai dengan pengkondisian device dengan ukuran width 320px. Sebelumnya buat terlebih dahulu rumus umumnya di bawah kode </b:skin>. 

@media screen and (max-width:ukuranwidth){#CSS{}}

Setelah itu, kita buat kondisi pada maksimal width 320px

@media screen and (max-width:320px){#CSS{}}

Buatlah CSS #outer-wrapper jika pada ukuran device 320px, ukuran widthnya menjadi 318px. Masukkan ke rumus umum, wkwk 'rumus umum'

@media screen and (max-width:320px){#outer-wrapper{width:318px;}}

Tambahkan lagi kondisi #main-wrapper jika pada ukuran device 320px, ukuran widthnya menjadi 316px dan float value nya menjadi none. Value none pada float akan membuat elemen tersebut tidak akan berhimpit lagi dengan elemen lain.

@media screen and (max-width:320px){#outer-wrapper{width:318px;}#main-wrapper{width:316px;float:none;}}


Yang terakhir kemudian CSS #sidebar akan dibuat kebawah dengan Value float nya none dan ukuran width penuh di layar yaitu width:316px sama seperti #main-wrapper

@media screen and (max-width:320px){#outer-wrapper{width:318px;}#main-wrapper{width:316px;float:none;}#sidebar{width:316px;float:none;}}

Setelah itu bisa disave, dan dapat dicoba dengan melihat hasil di situs responsivetest.com

Hasilnya kurang lebih akan seperti ini

Responsive Template

Elemen yang lain bisa anda atur sendiri dan kondisi ukuran width yang berbeda bisa anda tambahkan. Kalau semua sudah siap, anda bisa menonaktifkan mobile version pada template blog anda. Kalau ada pertanyaan bisa ditanyakan lewat komentar, dan bagi master yang sedang membaca ini tolong diralat kalau ada yang salah dalam postingan tutorial saya ini. Hack4rt menerima kritikan dan saran yang mendukung hack4rt :)

Tambahan dari mastah Kang Kapuk, yang pertama kali membuat tempe ini:

"Kl menurut ane. Lebih baik diurutkan dr mediaquery yang paling besar terlebih dahulu, karena mediaquery dibawahnya biasanya akan mengikuti mediaquery yg ada diatasnya kl mediaquery dibawahnya tidak ada pengaturan khusus pada CSS nya."

Share on Facebook
Share on Twitter
Share on Google+

Related : Cara Membuat Template Blog Responsive dengan Mudah