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 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 ?? cayun, Mar 14, 2014 #2 ncang Super Level Joined: Feb 7, 2013 Messages: 4,655 Likes Received: 761 Trophy Points: 113 Google+: Author mirip dengan TTS isinya mirip dengan TTS isinya ,, satu mendatar, dua menurun ncang, Mar 14, 2014 #3 iska New Member Joined: Mar 13, 2014 Messages: 28 Likes Received: 0 Trophy Points: 6 Google+: Author cayun wrote: hehe, mudah untuk orang yang udah familiar dengan CSS 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 iska, Mar 14, 2014 #4 pram Well-Known Member Joined: Sep 23, 2013 Messages: 3,099 Likes Received: 161 Trophy Points: 63 Google+: Author makasih tutornya... makasih tutornya... tapi ada cara yang lebih mudah. >>> khusus untuk platform blogger/blogspot. aktifkan tampilan mobile saja pram, Mar 14, 2014 #5 iska New Member Joined: Mar 13, 2014 Messages: 28 Likes Received: 0 Trophy Points: 6 Google+: Author pram wrote: hehe, itulah yang saya lakukan di kedua blog saya mas @pram iska, Mar 14, 2014 #6 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 iska New Member Joined: Mar 13, 2014 Messages: 28 Likes Received: 0 Trophy Points: 6 Google+: Author 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 iska, Mar 14, 2014 #8 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 Ardilas Super Level Joined: Feb 18, 2013 Messages: 4,243 Likes Received: 317 Trophy Points: 83 Google+: Author iska wrote: Iya gan terlalu singkat. Sebenernya masih ada lagi yg perlu dijelasin jika visitor kita itu orang awam, seperti @cayun. Ardilas, Mar 14, 2014 #10 Samehadaku Guest ncang wrote: wkwkwk suka ngisi tts ya... yg gambarnya hot-hot itu Samehadaku, Mar 14, 2014 #11 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 iska New Member Joined: Mar 13, 2014 Messages: 28 Likes Received: 0 Trophy Points: 6 Google+: Author 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 gimana yah gan jelasinnya biar mudah dimengerti iska, Mar 14, 2014 #13 Ardilas Super Level Joined: Feb 18, 2013 Messages: 4,243 Likes Received: 317 Trophy Points: 83 Google+: Author Quote: Yauda gpp. Mungkin ini adalah takdir dari Tuhan, kita ikhlasin aja. Ardilas, Mar 15, 2014 #14 iska New Member Joined: Mar 13, 2014 Messages: 28 Likes Received: 0 Trophy Points: 6 Google+: Author D-dig wrote: berasa ikut acara termehek mehek gan iska, Mar 15, 2014 #15 ayahnyanadia Well-Known Member Joined: Apr 4, 2013 Messages: 1,369 Likes Received: 153 Trophy Points: 63 Google+: Author cara pragmatisnya ada gak? cara pragmatisnya ada gak? ayahnyanadia, Mar 16, 2014 #16 Fahmi Newbie Joined: Dec 5, 2012 Messages: 1,719 Likes Received: 159 Trophy Points: 63 Google+: Author ayahnyanadia wrote: Gampang 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 http://getbootstrap.com/getting-started/#examples Fahmi, Mar 19, 2014 #17 jualabon New Member Joined: Feb 19, 2014 Messages: 81 Likes Received: 0 Trophy Points: 6 Google+: Author Habis smester ini mungkin ane Habis smester ini mungkin ane bakal mudeng Gan Hehehee jualabon, Mar 25, 2014 #18 Devita Active Member Joined: Oct 11, 2014 Messages: 1,196 Likes Received: 43 Trophy Points: 48 Google+: Author Trima kasih triknya den, nyoba dikembangkan nie Devita, Jan 22, 2015 #19 Damar Well-Known Member Joined: Jun 22, 2014 Messages: 1,472 Likes Received: 216 Trophy Points: 63 Google+: Author Menarik... Setidaknya tahu konsepnya kenapa sebuah template bisa menyesuaikan dengan ukuran layar Damar, Feb 13, 2015 #20 (You must log in or sign up to reply here.) Show Ignored Content Page 1 of 2 1 2 Next > Loading... Similar Threads - [SHARE] Cara Mudah [SHARE] Cara Membuat Redirect Via Banner di Blog wrep17, Apr 9, 2016, in forum: HTML & Website Design Replies: 8 Views: 2,783 yakub Mar 11, 2017 [Share] Themes Superspeed Blogspot Seadanya dilengkapi defer Adsense, youtube dll mohammad aziz, Oct 27, 2016, in forum: HTML & Website Design Replies: 17 Views: 3,600 idjayacom Mar 10, 2017 [SHARE] Langkah-Langkah Dalam Membuat Website tonbad, Feb 15, 2015, in forum: HTML & Website Design Replies: 43 Views: 11,595 Si Raja May 16, 2016 [Share] Blog untuk belajar HTML Amet Suramet, Nov 25, 2014, in forum: HTML & Website Design Replies: 7 Views: 2,557 Zerki Juliandri Nov 11, 2016 [Share]free resource video, imageHD & icon exabytes-id, Oct 23, 2014, in forum: HTML & Website Design Replies: 2 Views: 1,541 Yusuf.S Oct 23, 2014 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
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 ??
cayun wrote: hehe, mudah untuk orang yang udah familiar dengan CSS 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
makasih tutornya... makasih tutornya... tapi ada cara yang lebih mudah. >>> khusus untuk platform blogger/blogspot. aktifkan tampilan mobile saja
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 " )
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
iska wrote: iyalah gan, apa yang dapat kita pasang dengan keperluan kita sendiri itu yang dipasang *smile*
iska wrote: Iya gan terlalu singkat. Sebenernya masih ada lagi yg perlu dijelasin jika visitor kita itu orang awam, seperti @cayun.
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 gimana yah gan jelasinnya biar mudah dimengerti
ayahnyanadia wrote: Gampang 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 http://getbootstrap.com/getting-started/#examples