Cara mudah merubah blogger template 2 kolom menjadi 3 kolom agar tampilan blog lebih menarik dan 100% responsive, mobile friendly.
Kalian yang terbiasa otak-atik di blogspot mungkin telah fasih menjadikan tampilan template 2 kolom menjadi betul-betul responsive, yang bisa dinikmati dalam tampilan mobile maupun website. Namun saya yakin juga, masih banyak dari kalian yang mengalami kendala untuk menjadikan blogger template ini menjadi tema dengan tampilan 3 kolom yang bukan hanya bisa dinikmati dalam tampilan web tapi juga harus bisa dinikmati di perangkat mobile alias responsive mobile friendly.
Pada tutorial ini saya akan berbagi tips cara merubah template blogspot 2 kolom menjadi 3 kolom menjadi tema yang responsive, seperti template yang digunakan oleh blog ini. Caranya mungkin tidak jauh berbeda dengan cara membuat template blogger responsive, yang biasa ditampilkan oleh banyak dari rekan-rekan blogger dari blognya saat kita googling (searching). Hanya code css saja yang membedakan, karena 3 kolom sudah tentu kode css-nya pun mengalami sedikit perubahan.
Baiklah... ini kode css untuk mrnjadikan template blogsot 2 kolom menjadi template 3 kolom yang betul-betul mobile responsive agar bisa dinikmati di perangkat laptop maupun mobil ponsel. Dalam tutorial ini saya menggunakan template : simply simple. Berikut code css nya yang diletakkan diatas tag </head> :
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width:800px){
.sidebar .widget,.sidebar .widget img {width:100%; height:100%}
#menu {width: 95%;}
.main-inner .columns {padding-left: 0px;padding-right: 240px;}
.main-inner .fauxcolumn-right-outer {width: 720px;}
.main-inner .column-center-inner {padding: 0;}
.main-inner .column-right-outer {width: 250px;margin-right: -250px;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .columns {padding-left: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
.main-inner .column-left-outer {width: 100%!important;margin-left: 350px!important;}
.content {position: relative;word-wrap: break-word;width: 97%;margin: 0 5px;}
body {background:#fff}
}
@media screen and (max-width:400px){
.main-inner .column-center-inner {padding: 0 15px 0 0;}
.sidebar {margin:10px 0 5px}
}
</style>
Oh ya... jangan lupa mengganti tag viewport yang posisinya tepat di bawah tag head.
<meta content='width=device-width, initial-scale=1' name='viewport'/>
Dan jangan lupa pula untuk menambahkan css image agar image dapat dibaca menyesuaikan dengan perangkat yang dipakai baik perangkat pc ataupun mobile.
padding: 0;
max-width: 100%;
height: auto;
}
Kode css untuk image bisa anda pasang di bawah css: .post-body , tentunya dengan tidak menyertakan tag style pembuka dan penutup. Sedangkan untuk lebar kolom, sobat bisa merubahnya sesuai dengan keinginan sobat. Di blog ini saya mengatur lebar kolom utama 1280px dan 230px untuk masing-masing kolom sisinya. Selamat Mencoba...!
Komentar