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 :)

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

      Delete
  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 :)

    ReplyDelete
    Replies
    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...

      Delete
  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 :)

    ReplyDelete
    Replies
    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

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

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

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

    http://goo.gl/tyyjG2

    ReplyDelete
  7. This comment has been removed by a blog administrator.

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

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

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

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

    5 Template blog keren terbaru gratis

    ReplyDelete