Cara Gampang Menciptakan Responsive Template Default Blogger

Seperti kita ketahui bahwa template default yang disediakan Blogger belum responsive, template bawaan Blogger masih memakai versi mobile untuk device-device kecil. Sedangkan Google sendiri yang notabene merupakan si empunya Blogger menganjurkan untuk memakai template yang responsive.

Nah bagi Anda yang memakai template default Blogger, saya kini akan share cara gampang menciptakan responsive template default Blogger. Hanya perlu beberapa langkah gampang yang saya yakin Anda dapat melakukannya. Silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Nonaktifkan navbar Blogger, silahkan masuk ke layout atau tata letak lalu edit gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.

Langkah Kedua

Membuat gambar postingan menjadi reponsive. Silahkan cari aba-aba di bawah ini.

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

Kemudian silahkan ganti aba-aba di atas dengan aba-aba di bawah ini

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

Langkah Ketiga

Silahkan cari aba-aba di bawah 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>

Kemudian ganti dengan aba-aba di bawah ini

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

Langkah Keempat

Silahkan simpan aba-aba di bawah ini di atas aba-aba </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>

Selesai...sekarang template default Blogger yang Anda gunakan sudah responsive, gampang bukan?

Untuk membuktikannya, saya sudah coba pada dua blog dengan template default Blogger yang berbeda. Silahkan coba dan lihat pada ke dua link di bawah ini.

DEMO 1 | DEMO 2

Sumber https://www.kompiajaib.com/

Share this post