Cara Membuat Template Menjadi Responsive

Saat ini sudah banyak desainer yang membuat template menggunakan fitur responsive. Kenapa fitur responsive saat ini sangat penting? jawabannya sudah saya jelaskan di artikel saya yang berjudul Template Blogger Responsive Rekomendasi 2013.

Bagaimana template yang belum menggunakan fitur responsive? Bagi yang menggunakan template blog yang bukan responsive, tentu saja bisa di buat menjadi responsive. Bagaimana caranya? ikuti langkah-langkah di bawah ini.


Cara Membuat Template Menjadi Responsive

Yang perlu kamu lakukan hanya menambahkan kode CSS di dalam template kamu. Meletakkan kodenya didalam ]]></b:skin> Kodenya seperti ini:
@media only screen and (max-width: 480px){
#outer-wrapper {width: 100%;}
#header-wrapper {width: 100%; padding: 0; margin: 0;}

}
Maksud kode diatas adalah pada layar ukuran 480px, outer-wrapper diatur lebar 100% agar ukurannya dapat menyesuaikan ukuran layar gadget, dan header-wrapper di atur lebarnya 100% memiliki batas dalam 0px dan batas luar 0px.

Cara Membuat Template Menjadi Responsive
Yang perlu kamu lakukan adalah mencari ID Class dari struktur menyusun template kamu. Seperti yang sudah saya jelaskan di artikel saya yang berjudul 6 Element Tags Menyusun Layout Template Blogger.

Tidak semua struktur template susunannya sama, beda template beda struktur. Karena itu saya juga sedikit susah mejelaskannya disini. Tapi akan saya berikan ID Class yang umum di pakai:
#outer-wrapper
#main-wrapper
#sidebar-wrapper
#header
#footer
 Kode di atas adalah umum di pakai dan kamu hanya menambahkan kodenya di dalam @media only screen seperti diatas. Lihat contoh
@media only screen and (max-width: 480px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
@media only screen and (max-width:768px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
@media only screen and (max-width: 800px){#outer-wrapper { . . . }
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header { . . . }
#footer { . . . }
}
Kode diatas adalah ukuran dari berbagai screen yang bisa kamu terapkan untuk membuatnya menjadi responsive. Dan yang harus kamu lakukan adalah mengisi CSS dari masing-masing ID Css di atas. Kamu bisa menonton video tutorial saya bagaimana mencari setiap ID Class menggunakan browser Google Chrome. Video: Tutorial Cara Mudah Mengedit Template Blogger Part 1.

Jangan lupa tambahkan kode <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> di bawah <head>

Semoga artikel Cara Membuat Template Menjadi Responsive ini bisa di pahami dan bermanfaat untuk teman-teman semua. Terima kasih

BERLANGGANAN VIA EMAIL

Seorang Lelaki yang Mendedikasikan Hidup di Online Marketing. Blogger, Youtuber, Tukang Review, Tukang Jalan jalan. Hubungi kami untuk Kerjasama

35 Responses to "Cara Membuat Template Menjadi Responsive"

Admin said...

masih belum jelas gan, terutama tentang CSS yang mau di pakai, udah nyoba di buat 100% seperti contoh di atas, tetap saja di buka di layar 3 inc yang keluar sama kayak di pc..

bagus prehan said...

kemungkinan ID Class yangg di gunakan tidak sama pada contoh diatas. Karena beda template pasti beda ID Class yang di gunakan.
Yang saya berikan contoh diatas adalah yang umum di pakai belum di modifikasi.

Haikal Sulaiman said...

Ane kira yg dimaksud dgn responsive itu adalah yg cepat loading-nya. Sedangkan yg di maksud dgn "TEMPLATE valid HTML5" itu adalah template yg bisa menyesuaikan tampilannya dengan kompi dan HP

bagus prehan said...

Template yg bisa menyesuaikan tampilannya dengan kompi dan HP itu di sebut Responsive. Sedangkan Template valid HTML5 itu sebuah template yang sudah menerapkan kode HTML5 dan sudah sesuai dengan aturan di W3C, maka di sebut Valid HTML5.

Untuk mengeceknya bisa di www.validator.w3.org

Dedi Ariko said...

Informasi yang sangat berguna. Saya bookmarks dulu, soalnya butuh waktu cukup panjang + Kopi Panas dan Rokok, buat bergadang untuk edit template responsive. He... he.... Oya.... tips agar tampilan video dan gambar juga responsive, gimana tuch broo...

Bagus Prehan said...

Oke bro. Good Luck.
Kalau gambar, caranya sama seperti yang sudah di jelaskan diatas. Tinggal kmu mencari css yg mengatur gambarnya.

Dedi Ariko said...

Tararengkiw mas broo

Bagus Prehan said...

Sama-sama mas bro

Felix Young said...

Info bermanfaat mas, kebetulan sedang mencari cara meresponsivekan template blog.saya coba dulu ya.

Bagus Prehan said...

Silahkan dicoba. Semoga berhasil.

Anonymous said...

Selain media query di atas jangan lupa menambahkan kode ini:

body{overflow-x:hidden}

supaya pada saat blog kita dibuka pada ukuran layar yang kecil tidak terdapat scroll horizontal. :D

Bagus Prehan said...

Terima kasih udah di tambahin
:)

Crusader 12 said...

Saya sudah nyoba tapi tidak ada perubahan

bisa mbantu saya gk?

Bagus Prehan said...

kode diatas hanya kode umum yang biasa di pake di sebagian template gan...
beda template beda ID Class yang di pakai gan.. coba cari ID Class yang cocok dengan template kamu

Gandhi said...
This comment has been removed by the author.
Maftuhi Jore said...

wah harus banyak belajar lagi nih ke agan
salam kenal lagi yah ka

-blogwalking -> maftuhi.com

Bagus Prehan said...

hehe.. salam kenal juga.
Selamat berblogwalking ria :)

lulus utami said...

Masih bingung saya, tolong di bantu dong mas.

Bagus Prehan said...

coba kamu tonton di video saya, cara mencari ID Classnya http://aikonmedia.blogspot.com/2013/08/tutorial-cara-mudah-mengedit-template-blogger.html

ferdian syah said...

wah puyeng saya mas... cssnya ribet banget

Bagus Prehan said...

ya dipelajari dikit-dikit nanti juga gak puyeng :)

Anugroho bin Harso Martono said...

Sob, cari ngilangin garis di background blogku gimana ya? dah muter-muter gak nemu.
jawigo.blogspot.com

Bagus Prehan said...

saya cek gak ada

Anugroho bin Harso Martono said...

terima kasih sob udah coba membantu.
sudah teratasi tadi.

Bagus Prehan said...

owh ya udah. selamat. Terima kasih :)

Moch Adnan said...

mantab tutornya sob,izin praktek ya

Bagus Prehan said...

Oke. semoga tutorialnya mudah di pahami. :)

Wiki Puisi said...

keren, cuma begitu sajakah untuk membuat template responsive? lalu bagaimana dengan html 5? yang katanya bisa membuat blog jg responsive?

Bagus Prehan said...

HTML5 adalah versi terbaru dari html sebelumnya.
Untuk membuat template responsive adalah lebih ke pengaturan CSS.
Berapapun versi HTMLnya tetap bisa di buat responsive.

Kang Ucup said...

halaman tidak ditemukan :(

Bagus Prehan said...
This comment has been removed by a blog administrator.
abu maryana said...

bisa di review abumaryana.blogspot.com gimana itu gan ? udah coba sana sini ribet bener cssnya -_-"

Bagus Prehan said...

nanti saya cek gan

Yuzki El-Bantury said...

Sederhana dan mengena... tidak bertele-tele dan saya langsung paham serta berhasil, tentunya untuk level pemula. hehe Thanks, Gan.....

Apotek Herbal ACE MAXS said...
This comment has been removed by a blog administrator.