3. Cara Membuat Responsive Template Blogspot

Ditulis oleh: -
Cara Membuat Responsive Template Blogspot

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

21komentar:

  1. baru tau ni ane caranya gan..
    template responsive saat ini memang lg hot2 nya diperbincangkan dikalangan blogger..
    thk atas ilmunya gan, semoga template blog ane juga bisa lebih responsive :)

    ReplyDelete
  2. baru tau saya sob kalo baut reponsive hanya mengandalkan media screen

    ReplyDelete
  3. Baru tau nih sob ..
    thanks triknya sob ...

    ReplyDelete
  4. wah mantab sob rips na,, thanks..

    ReplyDelete
  5. Tampilannya bisa jadi cepat ya mas kalau sudah responsive template.

    ReplyDelete
  6. Wahhh Infonya keren Bangett Niee Sobb (y)
    Ternyata Membuat Responsive Template Blogspot Itu Tak Sesulit yang saya Bayangkan ^_^

    ReplyDelete
  7. waduh puyeng gan kalo ngomongin kode-kode ckckck

    nice share gan :)

    ReplyDelete
  8. asik kayaknya kalo pake template responsive mantap..

    ReplyDelete
  9. sekarang template paling tidak harus memenuhi kriteria responsive, makasih buat tutorialnya mas :)

    ReplyDelete
  10. klo buat settingan apple bisa ngak

    ReplyDelete
  11. saya numpang saja miliknya blogger

    ReplyDelete
  12. Wihhh Keren Gan Info-nya Sangatt Bermanfaatt :)
    Makasih Yah Gan ^_^

    ReplyDelete
  13. Mantap gan Tutorialnya ,, bisa di praktekan nih :D

    ReplyDelete
  14. keren gan tutorialnya,
    keep posting ajah.. :D

    ReplyDelete
  15. thank berguna sekali artikelnya ..

    ReplyDelete