Lorem Ipsum 123

Sudah mulai mabok dengan penjelasan sebelumnya, saya disini akan memberikan tutorialnya dengan singkat padat dan mudah-mudahan mudah untuk dimengerti. Konsepnya yaitu, jika ada ukuran device yang lebih kecil dari ukuran template harus diberikan media query agar template dapat menyesuaikan.

Contoh masalah: template saya terlihat lebih besar dan keluar dari ukuran device saya yang berukuran 480. Misal element yang keluar dari ukuran device yaitu #wrapper-utama. Maka saya ingin pada ukuran device 480, #wrapper-utama menyesuaikan menjadi ukuran 100%. Maka media query yang dipakai yaitu

@media screen and (max-width:480px){

#wrapper-utama{

width:100%;

}

}

Kode di atas seperti biasa diletakkan di bawah css lainnya atau di atas */ ]]></b:skin>

Nah, sebelumnya pada template yang sebelumnya saya berikan di tutorial ini saya ingin membuat beberapa hal

1. Pada ukuran 1040px (PC), saya ingin #wrapper-utama menjadi ukuran 100%, dan .post maksimal ketinggian 115px

2. Pada ukuran 865px, saya ingin .post tidak ada jarak ke dalam maupun keluar antara element, .post-body memiliki jarak kedalam kanan 5px dan .footer agar responsive menjadi ukuran 31.5%

3. Pada ukuran 600px, saya ingin #artikel-wrapper, #sidebar-wrapper, .footer, #footer-1, #footer-2, #footer-3 berbaris ke bawah dan berukuran penuh (100%) 

4. Pada kondisi artikel dan ukuran 600px, saya ingin .post-body berjarak ke dalam 5px

Maka penyelesaiannya yaitu

untuk masalah 1,2,3 berikan css berikut tepat di atas */ ]]></b:skin>

@media screen and (max-width:1040px){

#wrapper-utama{width:100%;}.post{max-height:115px;}

}

@media screen and (max-width: 865px){

.post{width:100%;padding:0px;margin-left:0px;border:0px solid #eaeaea;border-top:2px solid #00a3ff;}.post-body{padding-right:5px;}.footer{width:31.5%;}

}

@media screen and (max-width: 600px){

#artikel-wrapper, #sidebar-wrapper, .footer, #footer-1, #footer-2, #footer-3{float:none;clear:both;width:100%;}.post{border-top:2px solid #00a3ff;}#header1, #header2{width:100%;float:none;clear:both;text-align:center;padding:0px;max-width:100%;}.footer{padding:0px;}.comments .avatar-image-container{display:none;}

.comments .comment-block{margin-left:0px;}

}

Dan untuk masalah ke 4 harus memakai tag conditional, berikan css berikut tepat di bawah */]]></b:skin>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <style type='text/css'>

 @media screen and (max-width: 600px){

.post{float:none;margin:0px;}.post-body{padding:5px;}#artikel-wrapper{border-top:2px solid #00a3ff;}}

  </style>

  </b:if>

Silahkan cek template anda :) atau bisa lihat template blog ini

Ditulis oleh: Unknown - Sabtu, 14 September 2013

SJUTA IT
Published: 2013-09-14T05:59:00-07:00
Title:Lorem Ipsum 123
Rating: 5 On 221210 reviews

Share to

Facebook Google+ Twitter Digg Reddit

Terimakasih telah membaca artikel Lorem Ipsum 123. Anda bisa bookmark halaman ini dengan URL https://sadsaddssa.blogspot.com/2013/09/lorem-ipsum-123.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.