Cara Membuat Template Default Blogger Menjadi Responsive

Kali ini Bakul Oreg ingin berbagi bagaimana cara membuat / mengubah template standar / default Blogger menjadi tangguh di segala medan (layar) alias responsive.

Seiring perkembangan jaman dimana ponsel khususnya smartphone sudah menjadi... apa yah? Pokoknya ngetren di masyarakat seluruh dunia. Membuat jumlah peselancar dunia maya dari perangkat seluler meningkat sangat pesat. Hal ini membuat para pemilik web atau blog dituntut untuk bisa menyesuaikan tampilan blog, baik di pc maupun seluler agar pengunjung blog dari kedua perangkat bisa merasa nyaman (user friendly).

Sebenarnya Blogger sudah menyediakan fitur untuk tampilan seluler, hanya saja tampilannya masih terlalu sederhana dan rasanya kurang mendukung dalam menampilkan iklan. Lantas bagaimana cara agar template blog / web menjadi responsive tanpa mengaktifkan tampilan seluler?

Memang sudah banyak tutorial cara membuat template blog menjadi responsive, baik cara membuat template responsive sendiri maupun cara - cara lainnya, tetapi apa yang akan saya bagikan ini termasuk cara baru membuat responsive template blog (Blogger). Yang hasilnya bisa langsung anda lihat pada blog ini (gunakan handphone / smartphone).

Sebelum mengikuti tutorial ini, sebaiknya backup / cadangkan terlebih dahulu template anda, atau buat blog baru sebagai bahan percobaan. Baca dan ikuti langkah - langkahnya dengan seksama, AWAS!!! Jangan sampai anda salah kamar ok.

Silahkan ikuti tutorial cara membuat responsive template default Blogger tanpa mengaktifkan tampilan seluler.

1. Cari kode berikut ini, letaknya ada di dalam tag head.

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

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

2. Hapus kode berikut atau yang serupa (letaknya ada di dalam <b:template-skin>).

<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

"Sekedar Mengingatkan!!!"
Setelah membuat template Blogspot responsive, ada beberapa hal yang mungkin perlu dilakukan untuk mendukung tampilan blog responsive, atau sekedar membuat template lebih SEO.

• Cara mengubah halaman utama menjadi post snippet dan thumbnail
• Cara membuat menu laman (pagelist) responsive dropdown pada tampilan seluler
• Cara membuat / mengubah tombol next page Blogspot menjadi angka
• Cara modifikasi heading tag h1 dinamis pada Blogspot
• Cara membuat video YouTube responsive di blogspot.
• Cara membuat widget gambar di tengah dan responsive

Update: Sekarang kalian bisa mendapatkan Template default / standar Blogger versi Responsive dengan posisi Sidebar yang bisa diubah (kiri, kanan, dua, atau tanpa Sidebar). Silahkan lihat daftarnya DISINI.

3. Pada tahap ke tiga dan seterusnya akan di bagi menjadi tiga kelompok
Untuk template dengan sidebar di kanan silahkan ikuti link berikut

Sidebar Kanan

Untuk template dengan 2 (dua) sidebar di kiri dan kanan silahkan ikuti link berikut

Dua Sidebar

Untuk template dengan sidebar di kiri, di sini saja
Cari kode seperti di bawah ini (letaknya ada di dalam <b:template-skin>)

body {
min-width: $(content.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}

Ubah atau ganti menjadi seperti di bawah ini

body {
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
.main-inner .column-left-outer {
width: 30%;
right: 70%;
position: absolute;
margin-left: -$(main.column.left.width);
}

Kemudian tambahkan kode berikut, letakkan saja di bawah kode kode di atas

.main-inner .column-center-outer{
left:35%;
width:65%;
}

Nilai width (main inner) di atas bisa diganti sesuai dengan selera anda, dengan catatan jumlah total tidak boleh melebihi 100% (kurang boleh lebih jangan). Untuk menentukan nilai left dan right yaitu dengan cara 100% dikurangi nilai width (main inner).

4. Copy kemudian pastekan kode css berikut tepat di atas kode ]]></b:skin>.

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

Kode ini berfungsi agar tampilan gambar tidak melebar kesamping.

5. Copy kemudian pastekan kode css berikut tepat di atas kode ]]></b:skin>, silahkan pilih kode css sesuai jenis template yang anda gunakan

Untuk Template Simple dan Template Perjalanan gunakan kode css di bawah ini

/*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
        .content-inner{overflow: hidden;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-left-outer{position:relative!important;left:0;margin:auto;width:100%!important}
        .main-inner .column-center-outer{left:0!important;width:100%!important}
        .footer-inner, .main-inner .column-left-inner, .main-inner .column-center-inner{padding:0;}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }
      @media screen and (max-width:414px){
        .footer-inner .section, .main-inner .column-left-inner .section, .main-inner .column-center-inner .section {margin:10px;}
      }
      @media screen and (max-width:320px){
        .fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}
        .fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}
        .footer-inner .section, .main-inner .column-left-inner .section, .main-inner .column-center-inner .section {margin:0;}
      }

Untuk Template PT Keren Sekali gunakan kode css di bawah ini

/*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
        .content-inner{overflow: hidden;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-left-outer{position:relative!important;left:0;margin:auto;width:100%!important}
        .main-inner .column-center-outer{left:0!important;width:100%!important}
        .main-inner .column-left-inner, .main-inner .column-center-inner{padding:0}
        .main-inner .section {margin:0 15px}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }

Untuk Template Jendela Gambar gunakan css di bawah ini

/*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
        .content-inner{overflow: hidden;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-left-outer{position:relative!important;left:0;margin:auto;width:100%!important}
        .main-inner .column-center-outer {left:0!important;width:100%!important;}
        .main-inner .column-left-inner, .main-inner .column-center-inner {padding:0}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }
      @media screen and (max-width:320px){
        .main-inner .section{margin:0 10px}
        .post-outer {padding:10px 10px;}
      }

Untuk Template Tanda Air dan Kelembutan kodenya sama seperti Template Jendela Gambar tapi hapus kode nomor 9 (sembilan) lalu ganti dengan kode berikut

.main-inner .column-center-inner{padding:0}
.main-inner column-left-inner {padding:20px}

6. Simpan Template
Setelah template tersimpan, selanjutnya klik Kembali, kemudian non aktifkan tampilan selulernya. Lihat blog anda.

Kunjungi Mobile Friendly Test - Google untuk mengetahui Apakah blog / web anda Mobile friendly tanpa harus mengaktifkan tampilan seluler?

Kunjungi pula situs responsive web checker untuk melihat tampilan blog pada tiap tiap ukuran layar.

Catatan :
Pada dasarnya kode css inti untuk semua jenis template Blogger sama, yang membedakan hanyalah pada css padding side dan margin side dari masing-masing template memiliki nilai dan lokasi yang berbeda - beda, penulis hanya melakukan percobaan pada template pertama dari masing-masing jenis template. Jika hasil tampilannya kurang sesuai (khususnya pada layar 320 pixel) silahkan utak atik sendiri saja ok.