Untuk template blogger default versi 2
Pada tulisan sebelumnya saya hanya memberikan contoh bagaimana mengubah tampilan template bawaan blogger "sederhana" menjadi :
- Menyembunyikan tampilan navbar
- Membuang gambar obeng atau opsi bawaan "quick edit"
- Membuat read more
- Membuat menu navigasi sederhana yang responsive dan mobile friendly (Pada tampilan desktop/laptop tampil inline, pada tampilan hape atau mobile menu navigasi akan otomatis menjadi menu dropdown.
- Memasang font awsome ke dalam blog
- Menambahkan kode css reset ke dalam setting dengan opsi melalui tambahkan css di menu Desainer Tema Blogge.
- Menambahkan widget back to top.
Namun perlu diperhatikan langakah lanjutan agar template sederhana tadi menjadi benar benar responsive dan mobile friendly kita dapat melakukan sedikit perombakan struktur template tanpa melanggar aturan kodingnya.
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>Jangan ragu, hapus saja dan ganti dengan kode dibawah ini:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
2. Di bawah kode <b:template-skin> terdapat kode dibawah ini, hapus saja!
<b:variable default='960px' name='content.width' type='length' value='960px'/> <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>Setelah kedua langkah diatas dilakukan, template akan menjadi lebih user friendly, akan tetapi sidebar pada tampilan desktop/laptop dan layar ukuran 8 inchi katas lenyap! Akan tetapi dengan perubahan ini template tidak perlu lagi memilih opsi mobile pada pengaturan, template secara otomatis dapat menyesuaikan diri baik untuk web/desktop, maupun hape/mobile.
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
Untuk mengembalikannya dengan gaya yang sangat berbeda dan lebih responsive kita dapat melakukan langkah berikut:
3.1. Sidebar kanan:
Cari kode berikut ini letaknya di dalam atau dibawah kode <b:template-skin> kita akan kesulitan mengenalinya tapi teliti saja abaikan sedikit perbedaannya.
body {Jika kita ragu merobahnya, hapus dan ganti saja kode diatas dan langsung diganri dengan kode yang sudah jadi dibawah ini:
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
body {4. Tambahkan kode dibawah dibawah kode diatas:
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: 30%;
float: right;
margin-right: -$(main.column.right.width);
}
main-inner .column-center-outer{Catatan: width:65% bisa kita robah tapi jangan sampai 100% karena mempengaruhi tampilan margin tulisan postingan.
float: left;
width:65%;
}
5. Tambahkan separator css dibawah ini ke atas ]]></:skin>:
.separator a{margin-left:0px!important;margin-right:0px!important;}6. Terakhir untuk merombak total tampilan template "Sederhana" bawaan blogger ini adalah dengan menambahkan kode css dibawah ini dan meletakannya kembali tepat di atas ]]></:skin>:
.post img{max-width:100%;height:auto;}
/*Responsive*/Setiap tema memiliki struktur berbeda, langkah langkah diatas hanya berlaku buat tema sederhana. Kami akan membuat tutorial untuk merobah tampilan dan merombak struktur tema tema bawaan blogger yang lain pada episode selanjutnya. Hanya di editblogtema.
@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;}
}
7. Dengan mengikuti langkah yang di sampaikan diatas setiap tampilan widget pada opsi desktop/laptop dapat tampil pada hape/mobile. Jika widget yang yang kita inginkan ternyata tidak tampil pada hape/mobile kita dapat melakukan langkah berikut: Masuk ke pengaturan dan langsung ke opsi "edit HTML"
gunakan ctrl+f cari widget yang kita inginkan misalnya "popular posts" jika sudah ketemu kdoe seperti dibawah:
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='popular post'Tambahkan saja mobile="yes" diantara locked="false/true" dengan title=....Mudah sekali, bukan?
LIHAT DEMO
tes mas
BalasHapus