Sidebar Kanan (Lanjutan)

Baca Juga

Lanjutan untuk template Sidebar Kanan

3. Cari aba-aba menyerupai di bawah ini (letaknya ada di dalam <b:template-skin>)

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

Ubah atau ganti menjadi menyerupai di bawah ini

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

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

.main-inner .column-center-outer{ float: left; 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)

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 semoga tampilan gambar tidak melebar kesamping.

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

Untuk Template Simple / Sederhana dan Template Perjalanan gunakan css berikut 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-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}         .footer-inner, .main-inner .column-center-inner, .main-inner .column-right-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-center-inner .section, .main-inner .column-right-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-center-inner .section, .main-inner .column-right-inner .section{margin:0;}       }

Untuk Template PT Keren Sekali 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-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}         .main-inner .column-right-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-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}         .main-inner .column-center-inner, .main-inner .column-right-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 8 (delapan), kemudian ganti dengan aba-aba berikut

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

6. Simpan Tema / 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.

Sekarang Anda juga dapat mendapat template default Blogger yang sudah aku modifikasi menjadi responsive dan fleksibel Sidebar (gratis). Silahkan lihat di sini.

Selanjutnya
Cara Mengubah Tampilan Halaman Utama dari post body menjadi post snippet.