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
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>
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.
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>
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
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 😀
Mas, biar background widgetnya lebarnya full layar seperti yang atasnya gimana ya?
Keren mas. Insya Allah bermanfaat,
Mas Kahfie, saya punya blog di blogspot.com, saya mau tambahkan kolom / template khusus untuk memposting vidio Youtube, dimana posting vidio ini ada category/Labelnya, sehingga setiap di posting vidio youtube dgn pilih Category/Label nya maka vidio akan ada terposting di bagian label tersebut. Bagaimana caranya mas? Jadi ada 2 Mas; yaitu Cara buat kolom/template tempat posting vidio dan terkoneksi dengan category/label ?
mohon bantuan, saya sudah capek search google belum ketemu.
Saya sudah buat 4 kolom footer seperti yg diajarkan diatas, dan berhasil. namun jika saya masukkan kode embed youtube di ke 4 kolom footer tersebut, malah gak responsif jika blog dibuka di HP.
tinggal dipasang aja css media query nya untuk width nya kasi 100%
bang, klo mau bikin cuman 1 kolom, tapi full width, itu gmna yah?
Ambil salah satu sample diatas, gunakan satu class saja, class lain di hapus, cssnya juga, terus width nya pakai 100%
Saya mau tanya mas, saya sudah ikuti tutorialnya dan berhasil, tetapi kok tetap ndakresponsive ya?
kalau saya buka blog saya dari hp footernya tetap ndak responsive, harus do mode desktop dulu browsernya biar responsive. atau memang begitu mas, terimakasih
saya rasa ada salah satu css bentrok dengan css mas yang dulu, coba diperhatikan kembali