Tips Tutorial Dua Sidebar (Lanjutan)

Lanjutan untuk template Dua Sidebar

3. Cari arahan 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); } .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-left-outer { width: 20%; right: 80%; position: absolute; margin-left: -$(main.column.left.width); } .main-inner .column-right-outer { width: 20%; float: right; margin-right: -$(main.column.right.width); }

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

.main-inner .column-center-outer{ left:20%; width:60%; }

4. Copy kemudian pastekan arahan css berikut sempurna di atas arahan ]]></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 arahan css berikut sempurna di atas arahan ]]></b:skin>, silahkan pilih arahan css sesuai dengan jenis template yang anda gunakan.

Untuk Template Simple dan Template Perjalanan gunakan css di bawah ini

/*Responsive*/       @media screen and (max-width:1024px){         body{width:100%!important;padding:0;}       }       @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-right-outer{float:none;width:100%!important;}         .footer-inner, .main-inner .column-left-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-left-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-left-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;}       }       @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-right-outer {float:none;width:100%!important}         .main-inner .column-left-inner, .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;}       }       @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-right-outer {float:none;width:100%!important}         .main-inner .column-left-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: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 arahan nomor 9 (sembilan), kemudian ganti dengan arahan berikut

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

6. Simpan Tema
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 situs penyedia alat responsive checker untuk melihat tampilan blog pada setiap ukuran layar.

Catatan :
Pada dasarnya arahan css inti untuk semua jenis template Blogger sama, yang membedakakan 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.

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