Cara Membuat Template Default Blogger Jadi Responsive - Blogger Bandung

Cara Membuat Template Bawaan Blogger Menjadi Responsive.

TEMPLATE bawaan Blogger (default blogger template) tidak responsive.

Namun, blogger menyediakan fasilitas mobile devices di setting template.

Bagi Anda yang selama ini nyaman dengan template default blogger, dan ingin templatenya menjadi responsive, berikut langkah-langkah mudah untuk mengubah template bawaan blogger ini menjadi responsive (mobile friendly).

Dengan menjadikannya responsive, maka optimisasi lainnya tidak akan sia-sia alias tetap berfungsi saat blog dibuka di HP.

Cara Menjadikan Responsive Template Bawaan Blogger

1. Nonaktifkan Navbar Blogger

Klik Layout/Tata Letak > edit gadget Navbar. Pilih option OFF

Langkah berikutnya klik Tema > Klik Edit HHML

2. Cari (Ctrl+F) kode di bawah ini.

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

Hapus dan ganti dengan kode di bawah ini

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

3.  Cari kode berikut ini (ada di bagian atas kode template)

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

Hapus dan ganti dengan kode di bawah ini

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

4. Pasang Kode CSS Responsive

Saatnya memasang kode CSS untuk membuat template bawaan blogger ini jadi responsive mobile friendly di HP ataupun Tab.

Copas kode berikut ini di atas kode </head>

<style>
@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 only screen and (max-width:800px) {
.main-inner .columns {padding-left: 0px;padding-right: 300px;}
.main-inner .column-right-outer {width: 300px;margin-right: -300px;}
.main-inner .fauxcolumn-right-outer {width: 300px;}
.sidebar .widget,.sidebar .widget img {width:100%}
.main-inner .columns {padding-left: 0px;padding-right: 300px;}
.socials {display:none}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 95%;margin: 15px}
.content-inner {padding:15px 0;background-color: #ffffff;}
.post-thumbnails {margin: 0 15px 5px 0;width:72px;height:72px;}
.post h2 {font-size: 17px;}
}
@media only screen and (max-width:480px){
body {padding: 10px;}
main-inner .column-center-inner {padding: 0;}
.main-inner .column-center-inner .section, .main-inner .column-left-inner .section, .main-inner .column-right-inner .section {margin:15px;}
.post h2 {font-size:16px;}
.post {margin: 0 0 10px 0;padding: 0 0 5px 0;height: auto;}
}
@media only screen and (max-width:320px){
.post h2 {font-size:14px;}
}
</style>

Selesai.

Karena template bawaan blogger sudah responsive, jangan lupa nonaktifkan template mobile bawaan blogger di Setting Template:

Demikian Cara Membuat Responsive Template Default Blogger sebagaimana dishare Kompi Ajaib.

Anda tinggal melanjutkan dengan menampilkan Auto Readmore, menambah widget Related Post, dan Breadcrumbs yang tidak ada di template bawaan blogger.

1. Cara Menampilkan Auto Readmore
2. Cara Menampilkan Related Post
3. Cara Menambahkan Breadcrumbs