[SHARE] Cara Mudah Membuat Tampilan Website Responsive

Discussion in 'HTML & Website Design' started by iska, Mar 14, 2014.

Page 1 of 2
  1. iska

    iska New Member

    Joined:
    Mar 13, 2014
    Messages:
    28
    Likes Received:
    0
    Trophy Points:
    6
    Google+:
    Mungkin buat temen-temen yang pengen tahu gimana caranya membuat tampilan responsive, cara ini menurut saya adalah cara yang paling mudah.

    Tidak seperti yang dibayangkan beberapa orang bahwa membuat tampilan responsive itu sulit. Sebenarnya membuat tampilan responsive itu mudah, yang sulit adalah karena mendesain banyak tampilannya. Jadi tiap ukuran lebar layar, ada beberapa tampilan yang dihilangkan atau ditambahkan.

    Langsung saja, berikut ini tutorialnya.

    Cara Membuat Tampilan Responsive

    Pada bagian
    Code:
    <head></head>
    sematkan kode di bawah ini. Fungsinya kode ini adalah agar kalo di Android bisa responsive. Normalnya kalo iPhone, ga pake kode ini pun bisa tetep responsive.


    Code:
    <meta content='width=device-width, initial-scale=1' name='viewport'>

    Lalu, setelah itu tambahkan kueri media di bagian CSS-nya, letakkan kode di bawah ini di antara kode
    Code:
    <style rel='stylesheet' type='text/css'></style>
    atau di dalam file .css kamu.


    Code:
    @media screen and (max-width: 720px) and (min-width: 480px) {
/*-- isi dengan kode CSS kamu */
}

    Sesuaikan max-width dan min-width-nya sesuai dengan tampilan responsive yang akan kamu buat.

    Mudah bukan?

    Sumber: Cara Membuat Tampilan Blog Responsif
     
    iska, Mar 14, 2014
    #1
  2. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    661
    Likes Received:
    27
    Trophy Points:
    28
    ini mah gak mudah namanya....

    ini mah gak mudah namanya....

    coba kalau orang awam yang baca pasti kebingungan kayak saya,, terus CSS yang diisi itu apa aja ?? *berkeringat*
     
    cayun, Mar 14, 2014
    #2
  3. ncang

    ncang Super Level

    Joined:
    Feb 7, 2013
    Messages:
    4,653
    Likes Received:
    761
    Trophy Points:
    113
    Google+:
    mirip dengan TTS isinya

    mirip dengan TTS isinya *ketawa2* ,, satu mendatar, dua menurun
     
    ncang, Mar 14, 2014
    #3
  4. iska

    iska New Member

    Joined:
    Mar 13, 2014
    Messages:
    28
    Likes Received:
    0
    Trophy Points:
    6
    Google+:
    cayun wrote:

    hehe, mudah untuk orang yang udah familiar dengan CSS *bingung*
    CSS nya diisi dengan yang dibutuhkan om
    misal:

    Code:
    #wrapper {
width: 1000px;
}
@media screen and (max-width: 640px;) {
#wrapper {
width: 100%;
}
}

    hehe, maaf kalo terlalu singkat dan kurang jelas *merana*
     
    iska, Mar 14, 2014
    #4
  5. pram

    pram Well-Known Member

    Joined:
    Sep 23, 2013
    Messages:
    3,099
    Likes Received:
    161
    Trophy Points:
    63
    Google+:
    makasih tutornya...

    makasih tutornya...

    tapi ada cara yang lebih mudah. >>> khusus untuk platform blogger/blogspot.
    aktifkan tampilan mobile saja *jail*
     
    pram, Mar 14, 2014
    #5
  6. iska

    iska New Member

    Joined:
    Mar 13, 2014
    Messages:
    28
    Likes Received:
    0
    Trophy Points:
    6
    Google+:
    pram wrote:

    hehe, itulah yang saya lakukan di kedua blog saya mas @pram :D
     
    iska, Mar 14, 2014
    #6
  7. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    wah mantap nih perlu di pelajari..

    saya coba sedikit menambahkan Bos Iska manatau berguna..
    soalnya saya belajar sedikit sedikit jadi mungkin ada kekurangan mohon dimaklumi...

    Untuk media Queries pada CSS ada beberapa yang saya ketahui dibawah ini file lengkapnya..


    Code:
    
<style type='text/css' scope>
@media screen and (max-width: 3000px){
isi CSS
}
@media screen and (max-width: 1920px){
isi CSS
}
@media screen and (max-width: 1680px){
isi CSS
}
@media screen and (max-width: 1600px){
isi CSS
}
@media screen and (max-width: 1440px){
isi CSS
}
@media screen and (max-width: 1366px){
isi CSS
}
@media screen and (max-width: 1300px){
isi CSS
}
@media screen and (max-width:1023px) {
isi CSS
}
@media screen and (max-width:767px) {
isi CSS
}
@media screen and (max-width:480px) {
isi CSS
}
@media screen and (max-width:320px) { 
isi CSS
}
</style>

    Global Media Queries diatas sudah saya pakai dan menurut pendapat saya sedikit melelahkan untuk desainnya hehehh maklum masih belajar coding..
    ( scope Global Media Queries diatas merupakan CSS resolusi pada semua screen yang sudah ditentukan " Yang saya pernah Tau " )
     
    Rivaiblog, Mar 14, 2014
    #7
  8. iska

    iska New Member

    Joined:
    Mar 13, 2014
    Messages:
    28
    Likes Received:
    0
    Trophy Points:
    6
    Google+:
    wah lengkap sekali mas

    wah lengkap sekali mas @rivaiblog :)
    terima kasih tambahannya
    kalo saya sih saya ambil kueri media yang sekiranya perlu
    lagian tidak harus semuanya dipake kalo kita gunakan %
    kalo gunain px yah cape banget *berkeringat*
     
    iska, Mar 14, 2014
    #8
  9. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    iska wrote:

    iyalah gan, apa yang dapat kita pasang dengan keperluan kita sendiri itu yang dipasang *smile*
     
    Rivaiblog, Mar 14, 2014
    #9
  10. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,243
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    iska wrote:

    Iya gan terlalu singkat. Sebenernya masih ada lagi yg perlu dijelasin jika visitor kita itu orang awam, seperti @cayun.
    *pahlawan*
     
    Ardilas, Mar 14, 2014
    #10
  11. Samehadaku

    Samehadaku Guest

    ncang wrote:

    wkwkwk suka ngisi tts ya... yg gambarnya hot-hot itu *jail*
     
    Samehadaku, Mar 14, 2014
    #11
  12. Otongdotcom

    Otongdotcom Member

    Joined:
    Jul 1, 2013
    Messages:
    85
    Likes Received:
    4
    Trophy Points:
    8
    Keren

    Ini yang lagi ane cari cari thanks infonya bro.
     
    Otongdotcom, Mar 14, 2014
    #12
  13. iska

    iska New Member

    Joined:
    Mar 13, 2014
    Messages:
    28
    Likes Received:
    0
    Trophy Points:
    6
    Google+:
    D-dig wrote:

    iya gan, penjelasan yang panjang butuh waktu yang panjang buat nulis, yang baca pun makin bingung cz saya ga pintar menjelaskan

    wow, ane merasa terharu gan bisa berguna bagi orang lain *akhirnya*

    gimana yah gan jelasinnya biar mudah dimengerti *kesepian*
     
    iska, Mar 14, 2014
    #13
  14. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,243
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Quote:

    Yauda gpp. Mungkin ini adalah takdir dari Tuhan, kita ikhlasin aja.
    *nangis1*
     
    Ardilas, Mar 15, 2014
    #14
  15. iska

    iska New Member

    Joined:
    Mar 13, 2014
    Messages:
    28
    Likes Received:
    0
    Trophy Points:
    6
    Google+:
    D-dig wrote:

    berasa ikut acara termehek mehek gan *bingung*
     
    iska, Mar 15, 2014
    #15
  16. ayahnyanadia

    ayahnyanadia Well-Known Member

    Joined:
    Apr 4, 2013
    Messages:
    1,369
    Likes Received:
    153
    Trophy Points:
    63
    Google+:
    cara pragmatisnya ada gak?

    cara pragmatisnya ada gak?
     
    ayahnyanadia, Mar 16, 2014
    #16
  17. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    ayahnyanadia wrote:

    Gampang :D buka ini http://www.bootstrapcdn.com/ tinggal load :


    Code:
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

    Pelajari markupnya disini :D http://getbootstrap.com/getting-started/#examples
     
    Fahmi, Mar 19, 2014
    #17
  18. jualabon

    jualabon New Member

    Joined:
    Feb 19, 2014
    Messages:
    81
    Likes Received:
    0
    Trophy Points:
    6
    Google+:
    Habis smester ini mungkin ane

    Habis smester ini mungkin ane bakal mudeng Gan Hehehee *belajar*
     
    jualabon, Mar 25, 2014
    #18
  19. Devita

    Devita Active Member

    Joined:
    Oct 11, 2014
    Messages:
    1,196
    Likes Received:
    43
    Trophy Points:
    48
    Google+:
    Trima kasih triknya den, nyoba dikembangkan nie
     
    Devita, Jan 22, 2015
    #19
  20. Damar

    Damar Well-Known Member

    Joined:
    Jun 22, 2014
    Messages:
    1,472
    Likes Received:
    216
    Trophy Points:
    63
    Google+:
    Menarik...
    Setidaknya tahu konsepnya kenapa sebuah template bisa menyesuaikan dengan ukuran layar *malu2*
     
    Damar, Feb 13, 2015
    #20
Page 1 of 2
Loading...
Similar Threads - [SHARE] Cara Mudah
  1. wrep17

    [SHARE] Cara Membuat Redirect Via Banner di Blog

    wrep17, Apr 9, 2016, in forum: HTML & Website Design
    Replies:
    8
    Views:
    2,967
    yakub
    Mar 11, 2017
  2. mohammad aziz

    [Share] Themes Superspeed Blogspot Seadanya dilengkapi defer Adsense, youtube dll

    mohammad aziz, Oct 27, 2016, in forum: HTML & Website Design
    Replies:
    17
    Views:
    3,824
    idjayacom
    Mar 10, 2017
  3. tonbad

    [SHARE] Langkah-Langkah Dalam Membuat Website

    tonbad, Feb 15, 2015, in forum: HTML & Website Design
    Replies:
    43
    Views:
    12,324
    Si Raja
    May 16, 2016
  4. Amet Suramet

    [Share] Blog untuk belajar HTML

    Amet Suramet, Nov 25, 2014, in forum: HTML & Website Design
    Replies:
    7
    Views:
    2,686
    Zerki Juliandri
    Nov 11, 2016
  5. exabytes-id

    [Share]free resource video, imageHD & icon

    exabytes-id, Oct 23, 2014, in forum: HTML & Website Design
    Replies:
    2
    Views:
    1,642
    Yusuf.S
    Oct 23, 2014

Share This Page