Tips Tutorial Cara Menciptakan Template Default Blogger Menjadi Responsive

Kali ini ingin mengembangkan bagaimana cara menciptakan / 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 menciptakan para pemilik web atau blog dituntut untuk dapat menyesuaikan tampilan blog, baik di pc maupun seluler semoga pengunjung blog dari kedua perangkat dapat 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 semoga template blog / web menjadi responsive tanpa mengaktifkan tampilan seluler?

Memang sudah banyak tutorial cara menciptakan template blog menjadi responsive, baik cara menciptakan template responsive sendiri maupun cara - cara lainnya, tetapi apa yang akan saya bagikan ini termasuk cara gres menciptakan responsive template blog (Blogger). Yang risikonya dapat eksklusif anda lihat pada blog ini (gunakan handphone / smartphone).

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

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

1. Cari instruksi 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 instruksi di bawah ini.

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

2. Hapus instruksi 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 menciptakan template Blogspot responsive, ada beberapa hal yang mungkin perlu dilakukan untuk mendukung tampilan blog responsive, atau sekedar menciptakan template lebih SEO.

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

Update: Sekarang kalian dapat mendapat Template default / standar Blogger versi Responsive dengan posisi Sidebar yang dapat 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 instruksi menyerupai 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 menyerupai 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 instruksi berikut, letakkan saja di bawah instruksi kode di atas

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

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

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

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

Kode ini berfungsi semoga tampilan gambar tidak melebar kesamping.

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

Untuk Template Simple dan Template Perjalanan gunakan instruksi 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 instruksi 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 menyerupai Template Jendela Gambar tapi hapus instruksi nomor 9 (sembilan) kemudian ganti dengan instruksi 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 instruksi css inti untuk semua jenis template Blogger sama, yang membedakan hanyalah pada css padding side dan margin side dari masing-masing template mempunyai nilai dan lokasi yang berbeda - beda, penulis hanya melaksanakan 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.