June 30, 2016

Cara Membuat Widget Footer Responsive di Blogger

June 30, 2016

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
Widget Footer Responsive 3 Kolom


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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

12 comments on Cara Membuat Widget Footer Responsive di Blogger

  1. gan maaf oot..cara buat tulisan Thanks for reading kaya punya ente gimana?

    ReplyDelete
    Replies
    1. Pasang kode di bawah < data : post body / >
      < small >< i class = " fa fa-thumbs-o-up " > < / i > Thanks for reading < strong > < data : post . title /> < / strong> (RAPATKAN!)

      Delete
  2. mantap sekali tutorialnya, work gan

    ReplyDelete
  3. Terimakasih gan sukses dipasang di tamplate blog saya...

    ReplyDelete
  4. Cara memperkecil jarak antara widget dan footernya sih gimana gan??

    ReplyDelete
    Replies
    1. Ubah angkanya, perkecil, di kode margin atau padding

      Delete
  5. gan cara buat footernya kaya punya agan gimana ? di pasang di blog saya gak rapih

    ReplyDelete
  6. gan saya tidak muncul sama sekali kendalanya dimana gan?

    ReplyDelete
  7. gan.di menu tata letak ane tu widget nimpah di widget sebelumnya gan.
    mohon pencerahannya gan

    ReplyDelete
  8. punya saya dipasangin itu kok widget temanya ilang semua, yang ada cuma widget footer ini dan yang lain kabur kemana ya:( help mas.

    ReplyDelete
  9. Hai ka saya pakai templet bawaan blogspot yang terbaru tapi tidak ada widget footer buat pasang menu about kontak dan pricacy apakah pakai CSS dan HTML ini bisa terima kasih

    ReplyDelete

Contact Form

Name

Email *

Message *