Merubah Template Blogspot Standar Menjadi Responsif

Aan Satriya

Memiliki sebuah blog yang dapat diakses melalui berbagai jenis gadget dengan berbagai ukuran layar tentu sangat menyenangkan. Apalagi jika tampilan blog tidak jauh berbeda saat dibuka melalui PC maupun Handphone.

Bagi sebagian blogger yang masih setia menggunakan template standar blogger, hal ini bukanlah suatu masalah yang berarti. Pasalnya template blogspot default pada dasarnya sudah mobile friendly dan dapat diakses melalui handphone dengan mudah, meskipun tampilannya sangat minimalis dan jauh dari tampilan aslinya saat di buka dari PC desktop atau laptop.

Seiring perkembangan teknologi handphone dengan ukuran layar yang bervariasi, ditambah lagi alogaritma google yang baru yang diberi nama mobilegeddon yang lebih berfokus pada blog ramah seluler, Membuat para webmaster khususnya yang blognya "bermesin" blogspot berusaha untuk dapat mengikuti perkembangan alogaritma google yang baru ini, dengan membuat blognya menjadi responsif.

Untuk merubah template blogspot standar menjadi responsif sebenarnya cukup mudah dan ada beberapa jalan yang dapat ditempuh. Salah satu-nya adalah dengan mengganti template standar blogspot dengan template yang sudah responsif. Tapi konon katanya langkah ini akan beresiko mempengaruhi index blog yang selama ini telah baik di mata mesin pencari khususnya google.

Untuk itu bagi anda yang ingin merubah template blogspot standar menjadi responsif tapi masih setia dengan template blog bawaan blogspot entah karena tampilannya yang sederhana atau sangat sederhana sekali sehingga merasa enggan untuk menggantinya. Ada cara mudah untuk merubah template blogspot standar menjadi responsif.

Langsung saja kita simak bersama langkah-langkahnya. Sebenarnya ini bukan tutorial tapi hanya share pengalaman saat merubah template blog capuraca.blogspot.com yang masih menggunakan template standar blogspot menjadi responsive yang panduannya mengikuti langsung dari blog Kompiajaib  milik Mas Adhy Suryadi. Semoga bisa menjadi referensi.

Pertama-tama pastikan anda telah login di akun blog blogspot. Non aktifkan Navbar Blogger, tapi sepertinya rata-rata semua blogger sudah menonaktifkan fitur ini sejak awal.

Kemudian langsung saja masuk ke menu Template dan edit HTML. INGAT!! BACKUP terlebih dahulu template anda sebelum melakukan perubahan, untuk antisipasi jika terjadi kesalahan saat anda mengedit template blog anda. Kalau sudah di backup langsung saja kita lakukan "operasi" merubah template blog blogspot standar menjadi responsif.

1. Cari kode berikut 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>

Jika pada template anda tidak ada kode seperti diatas karena mungkin bentuknya seperti ini

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

Ganti dengan kode berikut

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

2. Kemudian cari kode seperti ini, untuk meresponsif kan gambar yang ada diblog anda.

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

Ganti dengan kode ini.

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

Mungkin anda juga tidak menemukan kode tersebut pada template blogspot anda. Seperti pada template blog ini, kode tersebut tidak ditemukan atau saya yang tidak bisa menemukannya, jadi langkah ini saya lompati.

Akibatnya ada beberapa artikel bergambar tidak mampu tampil sempurna pada tampilan handphone, seperti gambar yang melebar keluar batas pinggir kanan blog (“apa yaa namanya?”).

Mungkin gambar yang tidak tampil sempurna tersebut merupakan gambar yang ukurannya telah di rubah manual dari html editor di posting. Karena beberapa gambar di artikel lainnya yang tidak mengalami perubahan ukuran, tampil cukup manis saat di buka melalui ponsel.

Untuk mengatasi hal tersebut, anda bisa mencoba menambahkan kode berikut ini tepat diatas ]]></b:skin> atau bisa juga dipasang diatas </style> , mana yang sekiranya cocok untuk template anda.

.separator a{margin-left:0px !important;margin-right:0px !important;}
.post img{max-width:100%;height:auto;}

Ternyata berhasil membuat gambar yang ada di postingan blog menjadi responsif. Yang tadinya keluar arena, berhasil duduk manis pada tempatnya.

3. Kemudian tambahkan kode berikut ini 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>

4. Simpan template anda dan lihat hasilnya.

Bagaimana mudah bukan merubah template blogspot standar menjadi responsif. Untuk mengecek responsif-abilitynya anda bisa lihat di Quirktools atau di troy.labs.daum.net 

Meskipun hasil preview nya tidak sama persis dengan saat blog benar-benar dibuka melalui handphone tapi setidaknya anda mendapatkan gambaran bagaimana hasil ubahan blog anda setelah diresponsifkan.

Cek kembali hasil perubahan anda dengan membuka blog langsung melalui handphone. Apakah telah benar-benar tampil sempurna? jika yaa, maka misi anda meresponsifkan blog telah berhasil.

Cara ini sudah di coba dan berhasil pada template blog ini waktu masih menggunakan template standar bawaan blogspot, namun sekarang template blog ini telah diganti dengan yang sudah responsive biar lebih gaya dan tidak ribet. Semoga anda juga dapat menerapkannya pada blog blogspot anda yang masih standar dan masih belum berminat untuk menggantinya dengan template responsif yang banyak beredar di dunia maya.

Demikianlah sedikit share cara merubah template blogspot standar menjadi responsif. Jika anda masih penasaran dan belum yakin kalau template blogspot standar bisa diresponsifkan, silahkan berkunjung ke blognya Mas Adhy Suryadi untuk informasi lebih detail perihal meresponsifkan template blog blogspot standar. Semoga bermanfaat.


sumber: http://www.capuraca.com/2015/04/merubah-template-blogspot-standar.html