Tutorial Blog

Cara Membuat Widget Footer Keren Responsive di Blogger

Cara Membuat memasang Widget Footer Keren dan Responsive di Blogger. widget footer yang akan kita buat ini terdiri dari 4 kolom dan 3 kolom. Widget footer yang kali ini aka kit buat berupa teks atau tulisan.tentunya anda juga dapat menyesuaikan dengan keinginan anda masing masing. Mungkin anda sudah tau fungsi dari sebuah widget footer bagi blog. banyak sekali keuntungan yang didapat jika kita memasang Widget Footer Keren Responsive di Blogger.

Footer sendiri terletak pada bagian bawah dari tata letak sebuah blog. kita dapat memasukan link blog lain , atau meletakan iklan atau meletakan link link lain yang kita inginkan di footer itu. tentu saja meletakan widget footer didalam blog merupakan stategi yang sangat bagus sekali.

Kali ini kita akan membuat widget footer yang super responsive agar footer yang kita buat tidak mengganggu kinerja dari blog tersebut. banyak sekali widget widget yang dibuat akhirnya memberatkan blog, dan kemudian berdampak pada lambatnya kecepatan loading blog tersebut. hal ini tentulah menghasilkan seo yang kurang bagus.

Oke teman teman sekalian tanpa memperpanjang waktu silahkan anda simak tahap pembuatan widget footer keren dan responsive ini

Kita akan coba dulu memulai membuat Widget Footer Keren Responsive 3 kolom di Blogger langsung saja simak :

Cara Membuat Widget Footer 3 kolom di Blogger

Widget footer 3 kolom banyak sekali digunakan oleh blogger di indonesia khususnya,

Berikut penampakan dari widget footer 3 kolom tersebut

cara membuat widget footer

Oke sekarang mari kita simak langkah pembuatannya

1. Silahkan masuk ke menu dashboard blogger anda
2. setelah itu masuk ke menu EDIT HTML
3. Copy kode dibawah ini letakan tepat diatas kode ]]></b:skin> atau </style>

#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}}


4. Oke Jika seudah sekarang copy kode dibawah dan letakan tepat diatas 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'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div>
</div>


5. Jangan lupa SAVE TEMPLATE

Anda dapat memodifikasi kode warna tata letak dan apa apa saja yang terdapat didalam footer sesuai keinginan anda sendiri, diatas merupakan cara membuat widget footer 3 kolom nah untuk widget footer 4 kolom silahkan simak caranya dibawah ini.

Cara Membuat Widget Footer 4 kolom di Blogger

Widget Footer 4 kolom sendiri sangat jarang dipasang di blog, widget footer 4 kolom ini biasanya sering kita jumpai di web web besar.

Nah bagi anda yang ingin memasang widget 4 kolom berikut screen shot penampakannya.

Cara Membuat Widget Footer 4 kolom  Keren Responsive di Blogger

Untuk cara pemasangannya silahkan ikuti langkahnya berikut ini :

1. Silahkan masuk kemenu dashboard blogger anda
2. LAngsung saja buka menu EDIT HTML
3. Copy kode dibawah ini letakan tepat diatas 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}}


4. Oke Jika sudah sekarang copy kode dibawah dan letakan tepat diatas 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>


5. Sekarang SAVE TEMPLATE dan Lihat hasilnya 😀

Oke jika kalian ingin style yang berbeda dari widget Footer responsive blogger kalian bisa mecoba caranya seperti berikut :

Widget Footer 4 kolom Responsive Style di Blogger

Jika kalian ingin sekali membuat footer dengan tampilan sederhana maka ikuti cara berikut ini

Berikut screenshot dari footer sederhana dan responsive

Cara Membuat Widget Footer 4 kolom sederhana Keren Responsive di Blogger

Oke untuk cara pemasangannya langsung saja ikuti :

1. Sekarang masuk kedalam dashboard blogger anda
2. Langsung masuk ke menu EDIT HTML
3. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>

#footer-wrapper {clear: both;width: 100%; height:4px; background: #CF4227;}
/*----- jagoankodeblog Multi Column Widget (Red Border) START -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
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;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
/*----- Jagoankodeblog Multi Column Widget (Red Border) END-----*/


4. Oke lalu copy kode sibawah ini dan letakan diatas kode </body>

<!-- Jagoankode Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
</div>
<!-- Jagoankode Footer border End-->
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div>
</div>


5. oke sekarang footer kolom sudah muncul
6. Pergi ke bagian menu TATALETAK/LAYOUT
7. Kini anda dapat mengatur footer tersebut sesuai keinginan anda

Nah begitulah cara Membuat Widget Footer Keren Responsive di Blogger bagaimana mudah bukan ?? Demikianlah tutorial kali ini semoga membantu 😀

About the author

Mohammad Kahfi

Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.

Leave a Comment