Cara Membuat Widget Footer Responsive di Blogger

Baca Juga

CARA Menampilkan atau Membuat Widget Footer Responsive di Blogger ini merupakan update posting sebelumnya tentang Cara Membuat Footer di Bawah Halaman Blog.

Bedanya dengan tips membuat footer sebelumnya, yang ini masih empat kolom, namun RESPONSIVE. Sumbernya juga tetap sama, namun ditambah kode responsivenya. Sehingga menjadi  Widget Footer Responsive di Blogger.

Kodenynya juga sudah dimodifikasi sedikit sehingga lebih rapi. Ini penampakannya.

Fungsi Widget Footer adalah menampilkan link atau menu navigasi ke posting lain, label, tautan luar, form kontak, atau apa saja, seperti fungsi sidebar widget.

Cara Membuat Widget Footer Responsive 4 Kolom

Berikut ini cara memasang kodenya. Cukup mudah dan kodenya cuma dua jenis, yakni CSS dan HTML.

Langkah Pertama: Masuk ke HML Template
Silakan masuk ke kode template blog Anda: Klik "Template" > klik "Edit HTML"

Langkah Kedua: Memasang Kode
1. KODE CSS

Copy & Paste kode berikut ini di atas kode ]]></b:skin> atau </style>

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
max-width: 950px;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 950px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
text-align: left;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
@media only screen and (max-width:768px) {
#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}
#lowerbar-wrapper{overflow:hidden!important;width:90%!important;padding:20px}
#credits p{text-align:center!important}
}

Catatan: 
- Angka 950 adalah lebar template. Silakan sesuaikan dengan lebar template Anda. Jika mau full width, ubah menjadi 100%.
- Kode #333333 adalah kode background warna hitam. Jika ingin mengubahnya dengan warana gelap lain, silakan ganti dengan Kode Warna HTML.

2. KODE HTML
Simpan kode berikut ini di atas kode </body> atau <div class='footer id='footer'>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
 </b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> </div>

Save Template!

Langkah Ketiga: Memasang Widget
Kini widget footer area sudah terpasang di template blog Anda. Berikutnya tinggal memasang widget yang akan ditampilkan.

Klik "Layout" (Tata Letak). Jika Footer Widget Area belum muncul, refresh dengan menekan tombol F5 di keyboard komputer Anda.

Jika sudah muncul: Layout > Add A Gadget > Pilih Widget yang akan ditampilkan.

Cara Membuat Widget Footer Responsive 3 Kolom

Jika hanya ingin menampilkan footer widget responsive tiga kolom saja, berikut ini penamapakan, link demo, dan kodenya:

Widget Footer Responsive 3 Kolom

LIVE DEMO

KODE CSS

#lower {margin:auto;padding: 0px 0px 10px 0px;width: 100%;max-width: 1000px;background:#333333;}
#lower-wrapper {background:#333333;margin:auto;padding: 20px 0px 20px 0px;width:1000px;border:0;}
#lowerbar-wrapper {background:#333333;float: left;margin: 0px 5px auto;padding-bottom: 20px;width: 32%;text-align:left;color:#ddd;font: bold 12px Arial, Tahoma, Verdana;line-height: 1.6em;word-wrap: break-word;overflow: hidden;}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {margin: 0px 0px 10px 0px;padding: 3px 0px 3px 0px;text-align: left;border:0;color:#ddd;text-transform:uppercase;font: bold 14px Arial, Tahoma, Verdana;}
.lowerbar ul {color:#fff;margin: 0 auto;padding: 0;list-style-type: none;}
.lowerbar li {display:block;color:#fff;line-height: 1.6em;margin-left: 0 !important;padding: 6px;border-bottom: 1px solid #222;border-top: 1px solid #444;list-style-type: none;text-align: left;}
.lowerbar li a {text-decoration:none; color: #DBDBDB;}
.lowerbar li a:hover {text-decoration:underline;}
.lowerbar li:hover {display:block;background: #222;}
@media only screen and (max-width:768px) {
#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}
#lowerbar-wrapper{overflow:hidden!important;width:95%!important;padding:5px}
#credits p{text-align:center!important}
}

KODE HTML

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Teks warna merah bisa Anda ubah menjadi Footer-Left, Footer-Middle, Footer-Right atau Footer1, Footer2, dan Footer3.

Cara memasangnya sama dengan membuat footer widget empat kolom di atas.  Jika jadinya "acak-acakan", Anda tinggal sesuaikan kode-kode width (lebar), margin, dan padding sesuai dengan template blog Anda.

Demikian Cara Membuat Widget Footer Responsive di Blogger. Good Luck & Happy Blogging! (http://www.contohblog.com).*