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 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]--> 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; } 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 Ahmad Suyadi, Aug 1, 2014 #1 debays Active Member Joined: Jul 18, 2014 Messages: 1,409 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. debays, Aug 1, 2014 #2 davidrahman Member Joined: Jun 4, 2014 Messages: 899 Likes Received: 32 Trophy Points: 28 itu utk yg versi mobil ya ?? kalau yg versi desktop gmn caranya ?? davidrahman, Aug 1, 2014 #3 infohotelmurah Guest dari dulu saya utak atik point ke 2 dan 3 salah mulu..hehehe infohotelmurah, Aug 2, 2014 #4 Dhozhu Member Joined: Jul 18, 2014 Messages: 20 Likes Received: 1 Trophy Points: 8 template responsive maksudnya gimana ya? Dhozhu, Aug 4, 2014 #5 infohotelmurah Guest template yang bisa diakses oleh berbagai macam devices - smartphone, tablet, ipad gan.. infohotelmurah, Aug 4, 2014 #6 ncang Super Level Joined: Feb 7, 2013 Messages: 4,655 Likes Received: 761 Trophy Points: 113 Google+: Author 5 menit untuk yang biasa coding bagi awan bisa 5 jam atau 5 hari mungkin ncang, Aug 4, 2014 #7 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 MULTI AJAIB, Aug 10, 2014 #8 blonk New Member Joined: Aug 6, 2014 Messages: 5 Likes Received: 0 Trophy Points: 1 Google+: Author Itu template yang bisa menyesuaikan layout nya sendiri sesuai dengan resolusi layar perangkat yang digunakan untuk akses situs. blonk, Aug 12, 2014 #9 Fatahillah Member Joined: Jun 27, 2014 Messages: 460 Likes Received: 20 Trophy Points: 18 Google+: Author bagi ane bisa 5 bulan untuk memahami koding seperti itu, wkwkwk. mending beli yang sudah jadi deh . But aen kasih 10 jempol deh buat share yang bermanfaat ini Fatahillah, Aug 12, 2014 #10 simopunkc Member Joined: Aug 6, 2014 Messages: 298 Likes Received: 10 Trophy Points: 18 Google+: Author template blog versi desktop n versi mobile punya ane dah responsive... simopunkc, Aug 13, 2014 #11 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. devstart, Aug 31, 2014 #12 Arif Rachman Hakim Member Joined: May 4, 2014 Messages: 391 Likes Received: 29 Trophy Points: 28 Google+: Author Alhamdulilah sudah responsif berkat bantuan masyadi.. Arif Rachman Hakim, Sep 2, 2014 #13 arya New Member Joined: Aug 25, 2014 Messages: 12 Likes Received: 0 Trophy Points: 1 Keren banget bro, izin coba praktek ah arya, Sep 2, 2014 #14 angga89 New Member Joined: Aug 22, 2014 Messages: 48 Likes Received: 0 Trophy Points: 6 keren nih gan, ijin praktek ya angga89, Sep 3, 2014 #15 firman Member Joined: Aug 31, 2014 Messages: 335 Likes Received: 14 Trophy Points: 18 mantap gan infonya. patut di coba neh. syukron den firman, Sep 4, 2014 #16 iwansetiawan Member Joined: Sep 7, 2014 Messages: 55 Likes Received: 1 Trophy Points: 8 Google+: Author Boleh juga nih dicoba, trims sharingnya iwansetiawan, Sep 7, 2014 #17 Devita Active Member Joined: Oct 11, 2014 Messages: 1,196 Likes Received: 43 Trophy Points: 48 Google+: Author Keren juga, bisa dicoba nie Devita, Dec 20, 2014 #18 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 dzeko, Dec 25, 2014 #19 bespe Member Joined: Oct 30, 2014 Messages: 957 Likes Received: 51 Trophy Points: 28 ini yang dicari responsif,..tes dulu ah bespe, Dec 25, 2014 #20 (You must log in or sign up to reply here.) Show Ignored Content Page 1 of 2 1 2 Next > Loading... Similar Threads - menit Membuat Design Pentingnya Membuat Desain Website Terlebih Dahulu Alexandromeo Lawrence, Mar 28, 2021, in forum: HTML & Website Design Replies: 3 Views: 3,754 Blackboo Jun 29, 2021 Cara Mudah Membuat Website Sederhana dengan WordPress lalakana, Jul 10, 2020, in forum: HTML & Website Design Replies: 0 Views: 5,278 lalakana Jul 10, 2020 Tips Desain Grafis yang akan Membuat Anda Seorang Desainer Pro dalam Semalam Goenawan2211, Mar 6, 2020, in forum: HTML & Website Design Replies: 0 Views: 5,705 Goenawan2211 Mar 6, 2020 Meta Tag Ini Bisa Membuat Blog Tidak Terindeks Google? cyberx1408, Apr 5, 2019, in forum: HTML & Website Design Replies: 11 Views: 6,577 khezo Apr 12, 2019 Perlukah Membuat Halaman AMP ? KangAndre, Feb 11, 2019, in forum: HTML & Website Design Replies: 49 Views: 39,774 Yandiahmadgandasaputra Sep 16, 2020 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
patut di coba nih, template punya saya ga responsive khususnya versi mobile. cuma masih bingung poin 2 dan 3.
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
Itu template yang bisa menyesuaikan layout nya sendiri sesuai dengan resolusi layar perangkat yang digunakan untuk akses situs.
bagi ane bisa 5 bulan untuk memahami koding seperti itu, wkwkwk. mending beli yang sudah jadi deh . But aen kasih 10 jempol deh buat share yang bermanfaat ini
Gampang juga ternyata ya, sayang ane gak paham per-koding-an. Tetep gak ngerti gimana masukin itu kode di atas.
kalau target kita selain IE berarti cukup pakai tag </head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ya ? thanks