Cara Membuat Responsive Template Default Blogger

Cara Membuat Responsive Template Default Blogger, Sobat blogger, tutorial membuat responsive template default blogger ini sangat cocok bagi anda yang ingin berkreasi untuk membangun sebuah template dari blogger yang responsive, biasnya yang ingin memodif template bawaan blogger ini sering terkendala karena templatenya tidak responsive, namun sekarang anda bisa membuat template tersebut menjadi responsive dengan mudah sekali sobat blogger, tak sesulit yang dipikir..dan untuk tutorial ini saya ambil dari blognya Mas Adhy Admin www.kompiajaib.com.

Cara Membuat Responsive Template Bawaan Blogger

Baca Juga : Cara Membuat Gambar Responsive Pada Blog

Bagi anda yang ingin membuat template default blogger ini menjadi responsive anda bisa ikuti tutorialnya disini, sekaligus kita belajar juga dan saya sudah prektekan dan hasilnya berhasil. :)
contoh template default blogger yang sudah dibuat responsive


Cara Membuat Responsive Template Default Blogger

1. Pertama, matikan fitur navbar, pilih menu tata letak > klik navbar > Pilih "OFF"
2. Sekarang cari kode di bawah ini :

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

3. Lalu ganti kode tersebut dengan kode dibawah ini.

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

4. Selanjutnya cari kode dibawah ini :

 <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>

5. Lalu ganti kode tersebut dengan kode di bawah ini : 

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>   

6. Sekarang letakan kode dibawah ini tepat diatas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

7. Klik save template dan selesai.

Selesai deh, dan anda sudah  membuat template default blogger menjadi responsive, mudah sekali bukan, silahkan di cek saja, terimakasih buat mas Adhy atas pelajarannya :) sekian tutorial "Cara Membuat Responsive Template Default Blogger"

Sumber : http://www.kompiajaib.com/2015/03/cara-mudah-membuat-responsive-template.html

16 Responses to "Cara Membuat Responsive Template Default Blogger"

  1. Trims infonya bermanfaat, sudah dicoba..semua tampilan menjadi lebih renponsive, kecuali bagian gambar header yg tetap sesuai ukuran asli, bisa dibantu untuk mengatasinya mbak..Trims sebelumnya :)

    BalasHapus
    Balasan
    1. di coba mas http://www.madamvia.web.id/2015/03/cara-membuat-gambar-responsive-pada-blog.html

      Hapus
  2. Sudah dicoba ilmu baru yg disaranin mbak Oktavia Lie, Namun gambar masih belum bisa responsive, terutama di bagian headernya mbak. Sy cek di Responsinator.com..gk tahu tampilan yg gitu itu apa sudah masuk katagori responsive atau belum :) Mohon pencerahannya mbak, Bedeway salam kenal ya mbak Oktavia, bila berkenan mampir blog saya www.wisesatravel.com. Trima kasihhh :)

    BalasHapus
    Balasan
    1. kalo pada bagian judul blog memang gak bisa di pasang gambar sepanjang itu mas kecuali menggunakan header-right... karena jika judul blog yg width nya 100%, gak mungkin menyusut terlalu kecil mengikuti gambar, kecuali mas menambahkan background pada header-wrapper, itu baru bisa, jadi yg menyusut cuma gambar... kalo boleh saya saran mending ganti template, itu blog mas loadnya berat sekali karena gambar...

      Hapus
  3. Terima kasih atas pencerahannya mba Okta, gk tahu kenapa kemaren setelah mencoba merubah blog menjadi responsive..kebanyakan gambar dalam blog berubah menjadi besar-besar sizenya mbak, jadi sy harus mengedit satu persatu gambarnya lagi..padahal sebelumnya gambar sudah sy optimizer menjadi ukuran yg lebih kecil sebelum terpasang. Kalau merubah template..sy kawatir pengunjung semakin drop mbak Okta.. Mohon tambahan ilmunya lagi mbak, Terima kasih mbak Okta :)

    BalasHapus
    Balasan
    1. ya karena menyesuaikan lagi, tapi punya saya tidak ko, saya yakin, gak bakal ada penurunan visitor, malah saya yakin pasti naik, asal templatenya memenuhi standar SEO saja. :) sama2

      Hapus
  4. Terimakasih banyak untuk tutorialnya, dari semalem nyari gak ada yang berhasil akhirnya tutorial dari madamvia.web.id berhasil....

    BalasHapus
  5. di bagian header nya masih belum responsive gan,, gimana ya biar responsive .mksh

    BalasHapus
  6. thanks buat infonya gan,, sangat bermanfaat sekali..

    http://goo.gl/tyyjG2

    BalasHapus
  7. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  8. wah tengkiu mas bro.. ini tutorial paling simpel nampaknya, mo coba ah

    BalasHapus
  9. Cara menyusutkan ukuran header, menu, dan iklan bagemana ya gan ??

    BalasHapus
  10. Wahh ini yang saya cari-cari
    Ijin nyontek buat template saya

    BalasHapus
  11. Bermanfaat sekali info nya mas (y) blog nya juga bagus =D

    5 Template blog keren terbaru gratis

    BalasHapus