Selamat siang sob, pada kesempatan kali ini saya akan posting sebuah artikel tentang Desain Blog Menjadi Responsive, Apa sih sebenarnya Responsive itu sob? Arti dari responsive sendiri adalah, menyesuaikan tampilan website atau blog
terhadapa gadget yang kita gunakan, misalnya Laptop, Tablet, Smart Phone
dengan resolusi layar yang berbeda-beda.Disini kita hanya menambahkan kode @media only screen and (max-width:800px) { yang artinya ukuran tampilan website/blog tidak boleh lebih dari 800 pixel.Sebenarnya untuk membuat desain blog kita menjadi responsive itu mudah saja, yang sulit itu cuma merapikan model keresponsivean nya saja.
Contoh saya meresponsivekan template yang sedang saya pakai ini Share Pengetahuan hanya dengan code ini
<style> @media only screen and (min-width:768px) and (max-width:989px) { #outer-wrapper{width:730px;margin:0 auto} #header_title{width:100%} #email_subscribe h3,#btn_share h4,.breadcrumbs,.datetime,.postag,nav{display:none} #btn_share{padding-left:5px} .searchform{width:100%} } @media only screen and (max-width:767px) { #outer-wrapper{width:540px;margin:0 auto} #header_title,#main-wrapper,.searchform{width:100%} #sidebar-wrapper,#email_subscribe h3,#btn_share h4,.datetime,.breadcrumbs,.postag,nav{display:none} #email_subscribe,#btn_share{padding-left:5px} } @media only screen and (max-width: 580px) { #outer-wrapper{width:500px} #header_title,#main-wrapper,.searchform{width:100%} #sidebar-wrapper,#email_subscribe h3,#comments h3 span,.datetime,.breadcrumbs,nav{display:none} #comments h3{padding-left:10px} } @media only screen and (max-width:490px) { #outer-wrapper{width:430px} #header_title,#main-wrapper,.searchform,.bt-grup{width:100%} #sidebar-wrapper,#email_subscribe h3,#btn_share a span,#comments h3 span,.datetime,.breadcrumbs,.posthome,.taglabel,nav{display:none} #btn_share a{padding:7px} #comments h3{padding-left:10px} } @media only screen and (max-width:479px) { #outer-wrapper{width:280px} #header_title,#main-wrapper,.searchform,.bt-grup,#email_subscribe .submit,.kontak{width:100%} #email_subscribe .input{width:95%} #sidebar-wrapper,#email_subscribe h3,#btn_share a span,#comments h3 span,.datetime,.breadcrumbs,.postdate,.postag,.posthome,.taglabel,.comment_admin .comment_author_flag,.Header h1 span,.Header h1 span:before,.Header h1 span:after,nav{display:none} #btn_share a{padding:7px} .thum-wrap{width:93.5%;margin-top:10px;text-align:center} #comments h3{padding-left:10px} .kontak{float:left;border:none;box-shadow:none} } @media screen and (max-width: 260px) { #outer-wrapper{width:210px} #header_title,#main-wrapper,.searchform,.kontak{width:100%} #sidebar-wrapper,#email_subscribe,#comments h3 span,#topline,.datetime,.breadcrumbs,.postdate,.postag,.taglabel,.posthome,.comment_admin .comment_author_flag,.Header h1 span,.Header h1 span:before,.Header h1 span:after,nav{display:none} #comments h3{padding-left:10px} #btn_share{padding-left:0} #btn_share a{display:block} .thum-wrap{width:93.5%;margin-top:10px;text-align:center} .kontak{float:left;border:none;box-shadow:none} } @media print{ #header-wrapper,#sidebar-wrapper,#footer-wrapper,#topline,.breadcrumbs,.postdate,.post-footer,#comments,#btn_share,#email_subscribe,blockquote.atas:after,blockquote.bawah:after,.post-body .center:before{display:none} #main-wrapper{width:100%} blockquote,pre{margin:1em 2em;font-family:'monospace',consolas} .post-body .center{border:none;background:none} .post-body{text-align:justify} .post{margin:3em 2em} } </style>
Di situ sidebar dan box post saya buat 100%, itu berarti kalau sobat membuka blog saya dengan resolusi layar kurang dari 800 pixel. Maka sidebar dan box post akan bentrok, dan jadi nya box post akan ada di atas dan sidebar akan ada di bawahnya. Demikian juga dengan bagian yang lainnya.
Berikut cara untuk membuat tampilan website/blog menjadi responsive:
1. Copy code berikut ini dan letakkan dibawah kode <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
2. Kemudian Copy code berikut ini dan letakkan dibawah kode ]]></b:skin>
<style> @media only screen and (min-width:768px) and (max-width:989px) { #outer-wrapper {width:730px; margin:0 auto } Kode CSS lainya } @media only screen and (max-width:767px) { #outer-wrapper {width:540px; margin:0 auto } Kode CSS lainya } @media only screen and (max-width: 580px) { #outer-wrapper { width: 500px } Kode CSS lainya } @media only screen and (max-width: 490px) { #outer-wrapper { width: 430px } Kode CSS lainya } @media only screen and (max-width: 479px) { #outer-wrapper { width: 280px } Kode CSS lainya } @media screen and (max-width: 260px) { #outer-wrapper { width: 210px } Kode CSS lainya } </style>
Ooke deh sob, Sekian dulu dari saya tentang Desain Blog Menjadi Responsive, semoga dapat berguna dan bermanfaat untuk sobat semua,. Trimakasih
wihhh keren gan.. ^_^
ReplyDeletebisa uik uik blog lagi nih saya..
nicepost gan. ^_^
itu biar caranya postinganya lurus kebawah kaya punya agan gimana ?
ReplyDeleteTidak mengefek sama sekali gan :)
ReplyDelete