Membuat Template Blogger Dengan Footer 3 Kolom Jadi Responsive

Cara mudah merubah template simple blogger dengan tampilan widget footer 3 kolom menjadi responsive mobile friendly.

Saya yakin setiap blogger pernah mengalami hal ini, yaitu membuat responsive simple template bogger yang menggunakan atau menambah widget footer 2, 3 atau 4 kolom agar bisa dilihat pada tampilan mobile terlihat lebih selaras.

Maksudnya, widget footer dengan 2, 3 atau 4 kolom  dapat dilihat pada tampilan mobile dengan posisi 1 kolom dengan 2, 3 atau 4 baris membentang ke bawah. Dengan kata lain bahwa jika dilihat pada perangakat mobile, widget footer dengan 2, 3, atau 4 kolom tidak terlihat sama seperti tampilan pada perangkat pc atau laptop, membentang ke samping, 2, 3 atau 4 kolom dalam satu baris. 

Sebelum sampai pada masalah utama "Bagaimana cara mudah merubah template simple blogger dengan tampilan footer 2, 3 atau 4 kolom menjadi responsive mobile friendly", saya akan sedikit bercerita tentang asal mula  mendapatkan tips ini.

Semua saran dan tips dari hasil googling aku terapkan, namun hasilnya tidak seperti yang aku harapkan. Ada juga saran atau tips lain dimana terlalu banyak melibatkan script css, html ataupun js yang terlalu banyak yang pada akhirnya membuat malas untuk mempratekannya.

Akhirnya saya mencoba untuk berasumsi dengan pendekatan seputar "property: display". Wow... ternyata hasilnya seperti apa yang kuharapakan, hingga kuputuskan untuk saya buat sebuah artikel web yang sedang kalian baca ini.

Dari apa yang telah saya paparkan di atas, dapat diambil kesimpulan bahwa artikel ini saya dapat dari hasil pengalaman dan bukan dari hasil dari copy paste alias copas, hehehe... 😃😃😃. Oleh karena itu, kalian jangan ragu-ragu untuk menerapkan tips ini ke website kalian.

Baiklah... kita langsung ke pokok permasalahan, cukup pasang css dibawah ini dan letakkan di antara tag head atau di atas ]]></b:skin>  :

<style>
@media screen and (max-width:768px){
td.columns-cell {
 width: 100%;
 display: inline;  
}
}
</style>

Kemudian lihat hasilnya pada perangkat mobile, dan jika tidak ada kesalahan seperti kesalahan dalam pengetikan misalnya, hasilnya pasti akan seperti pada gambar di atas.

Cukup mudah bukan..., Semoga artikel tentang "Membuat Template Blogger Dengan Footer 3 Kolom Jadi Responsive" bermanfaat bagi pengembangan web, khususnya bagi pemula seperti penulis artukel ini.

Facebook

Baca Juga