Teya Salat

Cara membuat Desain Responsive pada Situs Xtgem

user 16 icon Johntxt date 16 icon 2014-08-10

responsive design xtgem
Pernahkah sobat melihat tampilan wap/web/blog sobat di berbagai perangkat atau ukuran layar baik melalui hp ataupun pc?
Ya tentunya kita melihat perbedaan ketika melihat situs kita melalui beberapa perangkat. Mungkin ketika melihat situs melalui perangkat mobile atau hp situs kita terlihat begitu bagus namun ketika melihat situs kita di perangkat pc terasa ada yang kurang.

Karena kita tidak bisa memperkirakan pengunjung kita menggunakan perangkat apa, Mungkin teknik Responsive design menjadi salah satu solusinya. Teknik ini cukup sederhana hanya perlu pemahaman tentang HTML dan CSS. Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart.

Bagaimana cara membuat dan menerapkannya pada situs XtGem kita?
Langsung saja simak langkah-langkah dibawah ini.
1. Masukan Meta tag Viewport
Pertama kita memasukan sebuah meta tag viewport pada halaman XtGem sobat di bawah tag <head>

<meta name="viewport" content="width=device-width,initial-scale=1" />

Mungkin biasanya jika kita membuat halaman baru di Xtgem sudah tersedia maka kita tidak perlu memasukannya lagi. Namun jika belum ada tag di atas pada halaman XtGem sobat maka sobat harus masukan tag tersebut.
Karena tidak semua browser mendukung tag di atas maka kita perlu menambahkan juga kode di bawah ini pada file _headtags Langsung saja copypaste kodenya:
<style type="text/css">
@-wekit-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-moz-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-ms-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-o-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@viewport{width:device-width;max-zoom:2;min-zoom:0.5}
</style>


Membuat File CSS
Berikutnya kita membuat file css yang akan di jadikan Responsive. Misal isinya
.list{bakground: #fff;
color: #333;
max-width: 800px;}
.menu {margin: 3px;padding: 5px;}
.page {
border: 1px solid #333;
padding: 5px;
}
Saya rasa sobat sudah cukup paham dengan yang namanya css ini jadi saya tidak perlu menjelaskannya lagi. hehe

Langkah berikutnya menggunakan Media Queries
Dalam langkah ini menggunakan CSS3, sama seperti didalam bahasa pemograman dengan menggunakan
kondisi (if), dimana CSS3 memberikan kondisi bagaimana browser harus merender halaman untuk viewport yang telah di set lebarnya, sehingga halaman html flexibel mengikuti layar browser. contoh:
@media screen and (min-device-width:100px) and (max-device-width:130px) {.list {bakground: #fff;color: #333;padding:2px; max-width: 800px;}
.menu{margin:0;padding: 7px;}}
@media screen and (min-device-width:131px) and (max-device-width:400px) {.list {bakground: #fff;color: #333;padding:5px; max-width: 800px;}
.menu{margin:0;padding: 5px;}}
@media screen and (min-device-width:401px) and (max-device-width:1600px) {.list {bakground: #fff;color: #333;padding:2px; max-width: 800px;}
.menu{margin:3px;padding: 1px;background: #f00;}
.page{ margin: 3px;padding: 2px;}}



Catatan
- max-device-width = untuk mendeteksi ukuran lebar maximal device
- min-device-width = kebalikan dari max-device
misal: @media screen and (min-device-width:131px) and (max-device-width:400px) berarti element css berkerja di ukuran device di kurang dari atau samadengan 400piksel namun lebih dari atau samadengan 131piksel.
- max-device-width dan min-device-width ukurannya bisa di ubah sesuai kebutuhan sobat.
- perhatikan juga tanda { dan tanda }
- class atau id pada css tidak harus semuanya di buat responsive hanya beberapa saja sesuai kebutuhan dan keinginan sobat.

Demikian lah tutorial kali ini. Diatas hanyalah contoh, selebihnya Tinggal sobat kreasikan lagi. Selamat berkreasi. Semoga bermanfaat. Bila ada pertanyaan sobat langsung saja tanyakan di komentar


Komentar Untuk "Cara membuat Desain Responsive pada Situs Xtgem"

AH-SID
2014-07-22

Hm.. Jadi inti kegunaan meta viewport untuk menyesuaikan width blog sesuai ukuran layar, begitukah?
He..he.. Karena belum mengenal, biasanya saya hapus saja meta itu ;-D.

rangga
2014-07-22

Wih Keren kang Tuorialnya....

rangga
2014-07-22

Kalau Saya Lebih Paham Tutorial Hp kang Dri Pada Situs.. hehe

Author
2014-07-22

@ah.sdq iya kang, biasanya untuk browser baru kang

@rangga ya kang sip

user guest
W4rok
2014-08-10

Ilmu ane gak nyampe ke sana master, ane cuma pengguna saja,

W0w, Keren tampilan wajah baru nya master,

Hilmi-Kun
2015-09-23

makasih sob, saya coba pakek script yg kedua langsung berhasil ye ye ye

_Rims
2015-12-23

Mantap Sobat, Ane Langsung Senang Dg trik ini, Thanks sobat :)

ediy
2016-07-27

Ane kuran ngerti xtgem gan... http://urbansong.wapka.mobi

KecoaTerbang
2018-06-23

great!!
<i><a href="http://kecabang.blogspot.com">Mantap gan meski sederhana
tetapi bisa ngebantu yg belum tau</a></i>

Random Post

Tag Category

Blogroll