gvghv

 <style type='text/css'>

@media only screen and (min-width:768px) and (max-width:999px){
   #outer-wrapper{width:754px}
   #main-wrapper{width:60%}
   #sidebar-wrapper{width:40%}
   #headnya{max-width:260px;min-width:250px}
   #head-ads .widget{margin:15px 0}
   #header h1,#header p{padding:15px 0 0;font-size:240%}
   #header .description{padding:0 0 10px}
   //tambahkan elemen id lainnya disini...
}

@media only screen and (max-width:767px){
   #outer-wrapper{width:440px}
   #sidebar-wrapper,#main-wrapper,#isifooternya{width:100%}
   #isifooternya .footer-wrap{width:100%}
   #nav{...}
   #search-result-container{width:100%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #outer-wrapper{width:310px}
   #header h1,#header p{font-size:230%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (min-width:768px) and (max-width:999px){
   #slides ul{height:200px}
   #slides h4{font-size:15px}
   #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
   .post-outer{width:100%}
   .post{width:370px}
   .blog-posts.hfeed::before{left:27px}
   .post-body p{overflow:visible}
   .post h2.post-title{height:auto;}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #slides ul{height:450px}
   .post{width:228px}
   .post h2.post-title{max-height:200px;}
   .post-body p{font-size:11px;padding:0}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #social-side2{padding:0}
   #social-side2::before{content:""}
   //tambahkan elemen id lainnya disini... 
}
</style>

2. Penyesuaian Kode
Pengaturan kode ini saya ambil langsung untuk mengatur halaman blog ini agar responsive, bahkan letak menu navigasi, kolom pencarian dan tombol share semua sudah saya atur agar responsive yang artinya elemen ID untuk halaman yang saya gunakan belum tentu sama seperti yang Anda gunakan, jadi silahkan Anda sesuaikan terlebih dahulu ID apa yang Anda gunakan untuk mengatur letak halaman pada Template Anda. Contoh seperti kode ini:

#outer-wrapper
#main-wrapper
#sidebar-wrapper

Nah jika sudah ketemu, Anda bisa tambahkan pada pengaturan media-screen pada masing-masing area pada CSS diatas, mudah bukan..!!! hehe.... semoga artikel ini dapat membantu sahabat semua pecinta SAHABAT BLOGGER 77 dalam mengatur halam

Baca Selanjutnya