[SHARE] Cara Mudah Membuat Tampilan Website Responsive

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

  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
     
  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*
     
  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
     
  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*
     
  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*
     
  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
     
  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 " )
     
  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*
     
  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*
     
  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*
     
  11. Samehadaku

    Samehadaku Guest

    ncang wrote:

    wkwkwk suka ngisi tts ya... yg gambarnya hot-hot itu *jail*
     
  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.
     
  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*
     
  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*
     
  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*
     
  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?
     
  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
     
  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*
     
  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
     
  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*
     
Loading...

Share This Page