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...
https://tutorialcarapintar.blogspot.com/2019/11/tips-tutorial-dua-sidebar-lanjutan.html
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.Cara Mengubah Tampilan Halaman Utama dari post body menjadi post snippet.