Thursday, September 5, 2013

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

Related Posts

Cara Membuat Template Menjadi Responsive
4/ 5
Oleh

35 komentar

October 30, 2013 at 6:46 PM delete

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..

Reply
avatar
October 30, 2013 at 9:25 PM delete

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.

Reply
avatar
November 6, 2013 at 6:59 PM delete

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

Reply
avatar
November 6, 2013 at 7:26 PM delete

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

Reply
avatar
November 11, 2013 at 10:35 AM delete

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...

Reply
avatar
November 11, 2013 at 10:55 AM delete

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

Reply
avatar
December 3, 2013 at 10:03 PM delete

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

Reply
avatar
December 3, 2013 at 11:03 PM delete

Silahkan dicoba. Semoga berhasil.

Reply
avatar
December 19, 2013 at 10:05 PM delete

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

Reply
avatar
December 24, 2013 at 1:23 PM delete

Saya sudah nyoba tapi tidak ada perubahan

bisa mbantu saya gk?

Reply
avatar
December 24, 2013 at 4:48 PM delete

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

Reply
avatar
December 29, 2013 at 8:30 PM delete This comment has been removed by the author.
avatar
January 6, 2014 at 8:06 AM delete

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

-blogwalking -> maftuhi.com

Reply
avatar
January 6, 2014 at 3:06 PM delete

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

Reply
avatar
January 18, 2014 at 10:50 PM delete

Masih bingung saya, tolong di bantu dong mas.

Reply
avatar
January 19, 2014 at 10:46 AM delete

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

Reply
avatar
January 23, 2014 at 10:56 PM delete

wah puyeng saya mas... cssnya ribet banget

Reply
avatar
January 24, 2014 at 1:24 PM delete

ya dipelajari dikit-dikit nanti juga gak puyeng :)

Reply
avatar
January 30, 2014 at 11:32 PM delete

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

Reply
avatar
January 31, 2014 at 6:05 PM delete

terima kasih sob udah coba membantu.
sudah teratasi tadi.

Reply
avatar
February 1, 2014 at 1:10 PM delete

owh ya udah. selamat. Terima kasih :)

Reply
avatar
February 10, 2014 at 7:34 PM delete

mantab tutornya sob,izin praktek ya

Reply
avatar
February 10, 2014 at 10:13 PM delete

Oke. semoga tutorialnya mudah di pahami. :)

Reply
avatar
February 11, 2014 at 2:02 PM delete

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

Reply
avatar
February 11, 2014 at 3:09 PM delete

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

Reply
avatar
April 23, 2014 at 11:34 PM delete This comment has been removed by a blog administrator.
avatar
July 14, 2014 at 9:37 PM delete

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

Reply
avatar
December 21, 2014 at 9:01 PM delete

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

Reply
avatar
April 10, 2015 at 8:28 PM delete This comment has been removed by a blog administrator.
avatar

Berkomentarlah dengan Bijaksana, spamming tidak akan pernah di publish