5 menit Membuat Design Template Responsive di blog

Discussion in 'HTML & Website Design' started by Ahmad Suyadi, Aug 1, 2014.

  1. Ahmad Suyadi

    Ahmad Suyadi Member

    Joined:
    Jun 27, 2014
    Messages:
    38
    Likes Received:
    1
    Trophy Points:
    8
    [​IMG]
    Membuat template blog menjadi responsive sangatlah mudah , kita perlu menambahkan meta tag media-queries.js dan mengubah ukuran pixel menjadi persen​

    Berikut Cara Membuat Design Template Responsive Sendiri di Blog
    1. Pertama pasang dulu meta tag dibawah ini diatas kode </head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      Perhatian MS Internet explorer versi 8 dan yang lebih rendah tidak support tag di atas, tapi tenang aja anda bisa menggunakan bantuan respond.js maupun media-queries.js di IE dengan meta tag berikut ini :
      Code:
      <!--[if lt IE 9]>
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <![endif]-->
    2. Yang kedua yaitu mengubah ukuran pixel menjadi ukuran persen seperti dalam contoh CSS dibawah ini:
      Code:
      .sidebar{
      width:300px;
      }
      .content{
      width:700px;
      }
      .wrap{
      width:1024px;
      }
      Diatas lebar Grid utama adalah dalam reolusi width:1024px dan untuk sidebar width:300px dan content width:700px. Disini saya coba jelaskan formula dan kalkulasi sederhana dalam mengkonversi nilai px (pixel) agar bisa diganti dengan satuan % (percent)
      target / context = result
      300px / 1024px = width: 29.296875%; /* 300 (originally 300) / 1024 */
      700px / 1024px = width: 68.359375%; /* 700 (originally 700) / 1024 */
      Dari hasil kalkulasi diatas maka bisa didapatkan nilai percent dalam koding CSS seperti dibawah ini
      Code:
      .sidebar{
      width:29.29%;
      }
      .content{
      width:68.35%;
      }
      .wrap{
      width:1024px;
      }

      Formula diatas sebenarnya bisa juga digunakan untuk menghitung ukuran text (font size), Katakanlah konteks normal untuk ukuran font dalam body adalah 16 piksel. Jika kalian ingin menetapkan bahwa H1 harus 24 pixel, maka kalian bisa mengganti dengan satuan em dengan cara menghitungnya sebagai berikut:
      24px / 16px = 1,5em
      Dengan gaya CSS akan didapat koding seperti ini:
      Code:
      h1 {
      font-size: 1.5em;
      }
    3. Kemudian yang terkahir kita atur di versi tablet , atau hp dengan menggunakan media queries caranya kita pasang media queries berikut , kemudian kita buat float none dan ukuranya menjadi 100%
      Code:
      @media screen and (max-width:768px){
      /* CSS styles */
      .sidebar, .content{
      float:none;
      display:block;
      width:auto;
      }
      }
    resource :http://www.masyadi.com/2014/08/membuat-design-template-blog-responsive.html
     
  2. debays

    debays Active Member

    Joined:
    Jul 18, 2014
    Messages:
    1,386
    Likes Received:
    58
    Trophy Points:
    48
    patut di coba nih, template punya saya ga responsive khususnya versi mobile.
    cuma masih bingung poin 2 dan 3.
     
  3. davidrahman

    davidrahman Member

    Joined:
    Jun 4, 2014
    Messages:
    891
    Likes Received:
    32
    Trophy Points:
    28
    itu utk yg versi mobil ya ?? kalau yg versi desktop gmn caranya ??
     
  4. dari dulu saya utak atik point ke 2 dan 3 salah mulu..hehehe
     
  5. Dhozhu

    Dhozhu Member

    Joined:
    Jul 18, 2014
    Messages:
    20
    Likes Received:
    1
    Trophy Points:
    8
    template responsive maksudnya gimana ya?
     
  6. template yang bisa diakses oleh berbagai macam devices - smartphone, tablet, ipad gan.. :)
     
  7. ncang

    ncang Super Level

    Joined:
    Feb 7, 2013
    Messages:
    4,641
    Likes Received:
    757
    Trophy Points:
    113
    Google+:
    5 menit untuk yang biasa coding :D bagi awan bisa 5 jam atau 5 hari mungkin :D
     
  8. MULTI AJAIB

    MULTI AJAIB New Member

    Joined:
    Jun 5, 2014
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    1
    Kayaknya ini harus dicoba deh, soalnya saya masih pusing dengan yang namanya Responsive hehe..
    ngerti utak-atik template aja enggak sobh..
    saya pahami dulu aja deh tutorialnya.. makasih banyak ya sebelumnya..

    multiajaib.comKumpulan template responsive dan seo
     
    Last edited by a moderator: Jan 26, 2015
  9. blonk

    blonk New Member

    Joined:
    Aug 6, 2014
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    1
    Google+:
    Itu template yang bisa menyesuaikan layout nya sendiri sesuai dengan resolusi layar perangkat yang digunakan untuk akses situs.
     
  10. Fatahillah

    Fatahillah Member

    Joined:
    Jun 27, 2014
    Messages:
    463
    Likes Received:
    20
    Trophy Points:
    18
    Google+:
    bagi ane bisa 5 bulan untuk memahami koding seperti itu, wkwkwk.
    mending beli yang sudah jadi deh :D:D.

    But aen kasih 10 jempol deh buat share yang bermanfaat ini
    *bagus**bagus**bagus**bagus**bagus**bagus**bagus**bagus**bagus**bagus*
     
  11. simopunkc

    simopunkc Member

    Joined:
    Aug 6, 2014
    Messages:
    298
    Likes Received:
    10
    Trophy Points:
    18
    Google+:
    template blog versi desktop n versi mobile punya ane dah responsive... *ketawa4*
     
  12. devstart

    devstart New Member

    Joined:
    Mar 26, 2014
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    1
    Gampang juga ternyata ya, sayang ane gak paham per-koding-an. Tetep gak ngerti gimana masukin itu kode di atas.
     
  13. Arif Rachman Hakim

    Arif Rachman Hakim Member

    Joined:
    May 4, 2014
    Messages:
    337
    Likes Received:
    23
    Trophy Points:
    18
    Google+:
    Alhamdulilah sudah responsif berkat bantuan masyadi..
     
  14. arya

    arya New Member

    Joined:
    Aug 25, 2014
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    1
    Keren banget bro, izin coba praktek ah
     
  15. angga89

    angga89 New Member

    Joined:
    Aug 22, 2014
    Messages:
    48
    Likes Received:
    0
    Trophy Points:
    6
  16. firman

    firman Member

    Joined:
    Aug 31, 2014
    Messages:
    335
    Likes Received:
    14
    Trophy Points:
    18
    mantap gan infonya:D. patut di coba neh. syukron den
     
  17. iwansetiawan

    iwansetiawan Member

    Joined:
    Sep 7, 2014
    Messages:
    55
    Likes Received:
    1
    Trophy Points:
    8
    Google+:
    Boleh juga nih dicoba, trims sharingnya :)
     
  18. Devita

    Devita Active Member

    Joined:
    Oct 11, 2014
    Messages:
    1,188
    Likes Received:
    42
    Trophy Points:
    48
    Google+:
    Keren juga, bisa dicoba nie
     
  19. dzeko

    dzeko New Member

    Joined:
    Feb 12, 2013
    Messages:
    60
    Likes Received:
    0
    Trophy Points:
    6
    kalau target kita selain IE berarti cukup pakai tag
    </head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    ya ?
    thanks
     
  20. bespe

    bespe Member

    Joined:
    Oct 30, 2014
    Messages:
    949
    Likes Received:
    50
    Trophy Points:
    28
Loading...

Share This Page