Cara Membuat Template Default Blogger menjadi Responsive

Ada banyak motif beberapa orang masih setia dengan template bawaan (default) blogger. Selain simpel dan unik, juga recomended (katanya) saat dipakai untuk mendaftar adsense. Namun sayangnya, template default blogger hampir semua tidak responsive. Oleh karena itu, perlu terobosan agar template bawaan blogger tersebut bisa responsive dan tetap maching dipandang di media mobile.

Mengapa Harus Responsive?

Pertanyaan di atas memang harus dijawab dan diketahui agar saat kita memiliki blog bisa menentukan dengan baik. Perlu diketahui, blog dikatakan responsive jika blog tersebut bisa dilihat di berbagai macam media, seperti desktop, gadget, tablet, dan lainnya. Sungguh sangat rugi jika blog hanya bisa dilihat di media desktop, namun tak bisa dilihat di media semisal gadget, tablet, atau sejenisnya. Mengapa demikian? Hal itu karena pada zaman sekarang hampir setiap orang telah memiliki gadget, atau handpone. Jika ini tidak disiasati dengan baik, maka jangan salahkan jika situs atau blog sahabat ditinggalkan oleh pengunjung karena tidak userfriendly.

Lo, emang blog yang tidak responsive tidak bisa dilihat di media selain desktop?

Situs atau blog yang tidak responsive memang bisa dilihat di media selain desktop. Tapi, tampilan daripada situs atau blog tersebut kurang 'renyak' dan tak seindah tampilan saat di media desktop. Biasanya bagi orang yang memiliki template yang tidak responsive menjadikan tampilannya secara default. Akibatnya, penampilannya pun tak 'secantik' tampilan saat di desktop.

Jika ini terus dibiarkan, maka jangan salahkan jika pengunjung blog sahabat akan melirik blog tetangga. Jadi berabe kan... Walau demikian, sekali lagi ini juga dikembalikan kepada pilihan sahabat sendiri. Namun saran dari Ngonline06, GUNAKANLAH TEMPLATE YANG RESPONSIVE.

"Tapi aku ingin template yang simpel aja," jawab seorang kawan. Silahkan gunakan template yang simpel, bahkan template default, tapi alangkah baiknya template tersebut dibuat responsive. Jika sahabat sudah YAKIN ingin merubah menjadi responsive, terlebih untuk sahabat yang masih mempertahankan template bawaan blogger, baik karena sudah 'jatuh cinta' atau ingin mendaftarkan blognya ke adsense, maka silahkan lakukan trik ini agar template default blogger menjadi responsive

Cara Membuat Template Default Blogger menjadi Responsive

Maka, berikut adalah langkah-langkah membuat template default blogger menjadi responsive. Cara ini adalah resep dari kang Adhy Suryadi dan sudah saya praktekkan dan berhasil 100%. Langsung saja, berikut adalah langkah-langkah membuat template default (bawaan) blogger menjadi responsive:

Langkah Pertama

Lihatlah pada rancangan (tata letak) dashbord sahabat Ngonline06 semua. Pastikan widget navbar dalam keadaan non aktif. Artinya, pilih option OFF untuk widget navbar.

Langkah Kedua

Agar gambar di postingan menjadi responsive semua, silahkan sahabat menuju dashboard lalu ke template > edit html. Cari kode berikut:

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

Ganti kode tersebut dengan kode di bawah ini:

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

Langkah Ketiga

Selanjutnya, cari kode di bawah ini pada template sahabat:

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

Ganti dengan kode berikut:

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

Langkah Keempat

Silahkan cari kode </head>, letakkan kode di bawah ini tepat di atas 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>

Langkah Kelima

Save template sahabat dan selesai. Silahkan lihat hasilnya, sekarang sahabat memiliki template default blogger yang responsive.

Demikian tutorial tentang cara membuat template default blogger manjadi responsive. Semoga berhasil dan sukses selalu. Jika ada hal yang belum jelas atau kesulitan, silahkan coret-coret saja di kotak komentar di bawah.