Cara Menciptakan Template Default Blogger Menjadi Responsive

Baca Juga

Kali ini ingin menyebarkan 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 biar 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 biar 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 akhirnya dapat pribadi 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 aba-aba 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 aba-aba di bawah ini.

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

2. Hapus aba-aba 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 sajian 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 aba-aba 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 aba-aba berikut, letakkan saja di bawah aba-aba 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 dilarang melebihi 100% (kurang boleh lebih jangan). Untuk memilih nilai left dan right ialah dengan cara 100% dikurangi nilai width (main inner).

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

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

Kode ini berfungsi biar tampilan gambar tidak melebar kesamping.

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

Untuk Template Simple dan Template Perjalanan gunakan aba-aba 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 aba-aba 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 aba-aba nomor 9 (sembilan) kemudian ganti dengan aba-aba 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 aba-aba 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.