Membuat & Menambahkan Kolom Widget Footer Responsive 3 Kolom

Membuat & Menambahkan Kolom Widget Footer Responsive 3 Kolom - Kolom dalam sebuah blog sangat penting keberadaannya, namun terlalu banyak kolom juga kurang baik untuk keberadaan blog itu sendiri

Daftar isi

Baca Juga

Membuat & Menambahkan Kolom Widget Footer Responsive 3 Kolom - Kolom dalam sebuah blog sangat penting keberadaannya, namun terlalu banyak kolom juga kurang baik untuk keberadaan blog itu sendiri, apalagi jika semua kolom-kolom yang ada disini oleh elemen seperti teks, gambar, video dan sebagainya. Lebih baik gunakan kolom yang sudah ada, atau kolom bawaan dari template blog tersebut. Karena kolom-kolom ini fungsi sangat flexible, 1 kolom bisa diisi dengan berbagai elemen sehingga tidak membuat performa blog terganggu.

Namun jika didalam blog Anda belum ada kolom, Anda bisa mengetahuinya dengan Cara Melihat Jumlah Kolom (Widget) Blog. Jika didalam blog Anda belum ada kolom widget, maka Anda bisa menambahkan kolom tersebut dengan menggunakan kode CSS dan HTML yang kami bagikan dibawah ini.

Kolom atau Widget Blog?
Penyebutan sebuah elemen baru yang dipasang dalam sebuah blog, terkadang menimbulkan kerancuan. Begitu juga dengan penyebutan kolom blog atau widget blog. Kedua elemen ini sebenarnya sama, hanya untuk memudahkan saja, banyak yang lebih nyaman menyebut dengan kolom daripada widget, namun jika dilihat didalam menu Tata Letak, pihak Blogger malah memberi nama dengan Gadget, kolom Gadget. Nah sekarang tergantung dari Anda mana yang lebih mudah digunakan dan mudah dimengerti.

Kolom widget atau gadget di Blogger, tidak hanya berada di bagian-bagian tertentu saja, tapi semua bagian di blog bisa ditambahkan kolom sendiri jika kolom yang telah ada kurang memenuhi kebutuhan. Kolom widget ini bisa da di bagian Header, Sidebar, Footer dan bagian utama blog yang lainnya. Lantas bagaimana cara menambahkan kolom widget?

Bagaimana Cara Membuat & Menambahkan Kolom Widget Footer Responsive 3 Kolom

Dalam artikel ini kami hanya memberikan contoh membuat atau menambahkan kolom pada bagian footer saja, atau pada bagian bawah blog. Untuk bagian header dan sidebar bisa menggunakan kode yang kami bagikan dibawah ini, hanya mengganti nama ID yang digunakan, footer diganti header atau sidebar yang menyesuaikan dengan kode template blog yang Anda gunakan. Atau jika dibutuhkan kami akan membagikannya di artikel yang lainnya :)

Berikut cara membuat atau menambahkan 3 kolom footer dan dengan tampilan responsive yaitu menyesuaikan dengan tampilan saat menggunakan ponsel:

1. Log in ke akun Blogger, dihalaman dashboard pilih menu Tema >> Edit HTML
2. Salin kode CSS di bawah ini, dan masukkan kedalam kode template blog Anda, tempatkan dibagian kode CSS footer
   

   #footer-wrapper{background:#ffffff;margin:0 auto 20px;padding:20px;color:#757575;overflow:hidden;}
   #footer-wrapper .left{float:left;width:34%}
   #footer-wrapper .center{float:left;width:34%}
   #footer-wrapper .right{float:right;width:32%}
   #footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
   #footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
   #footer-wrapper h3{margin:0 0 10px 0;padding:0 0 5px;color:#757575;border-bottom:3px solid #555555;text-transform:uppercase:position:relative;}
   #footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
   #footer-wrapper li{margin:5px 0;padding:0 0 0 0}
   #footer-wrapper a{color:#dddddd}
   #footer-wrapper a:hover{color:#ffffff}
   @media screen and (max-width:768px){
   #footer-wrapper .left{float:none;width:100%}
   #footer-wrapper .center{float:none;width:100%}
   #footer-wrapper .right{float:none;width:100%}
   #footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}}

3. Salin kode HTML ini berikut ini dan tempatkan dibagian kode HTML footer dalam kode template blog Anda:
   

   <footer id='footer-wrapper'>
     <b:section class='left section' id='Kolom Kiri' preferred='yes'/>
     <b:section class='center section' id='Kolom Tengah' preferred='yes'/>
     <b:section class='right section' id='Kolom Kanan' preferred='yes'/>
   </footer>
   

4. Simpan Tema.
5. Kode Layout
   Agar tampilan 3 kolom widget ini tampil di menu Layout atau menu Tata Letak, silahkan tambakan kode CSS Layout ini kedalam kode template blog:
   

   body#layout #footer-wrapper {width:100%;display:inline-block;left:inherit;position:relative;}
   body#layout #footer-wrapper .left{float:left;width:23%}
   body#layout #footer-wrapper .center{float:left;width:23%}
   body#layout #footer-wrapper .right{float:right;width:23%}
   

Untuk melihat hasilnya, kami tampilkan dalam bentuk gambar dibawah ini, termasuk tampilan layout di menu Tata Letak:

Layout belum ada kolom dibagian footer

Layout ada kolom dibagian footer

Homepage blog belum ada kolom dibagian footer

Homepage blog ada kolom dibagian footer
Untuk demonya silahkan Lihat dibagian footer Halaman Statis

Nah semoga sedikit tutorial tentang membuat dan menambahkan kolom widget dibagian footer ini bisa digunakan. Dan yang perlu diperhatikan setiap menambahkan kode kedalam template blog, perhatikan penempatannya serta kode ID yang digunakan, apakah sudah digunakan pada kode sebelumnya atau belum, jika sudah digunakan ganti kode tersebut agar berbeda dengan kode ID yang lainnya.

Baca Juga Belajar Kode CSS, HTML Terlengkap dan JavaScript Dasar