Cara Menambah 4 Kolom Gadget Dia Atas Footer

Baca Juga

Bismillah... Setelah saya posting Cara Pasang Navigasi Breadcrumb Di Blog. sekarang saya akan bepindah dulu ke tutorial blog design Template yaitu Cara Menambah 4 Kolom Gadget Dia Atas Footer, cara tidak jauh beda dengan dengan tutorial blog terdahulu yaitu cara menmbahkan 3 kolom di atas footer. oke sobat kita langsung saja ke TKP.

4 Kolom Gadget Dia Atas Footer

Langkah pertama untuk membuat 4 kolom di atas footer sobat login dulu ke blogger terus masuk Design Blog dan mausk ke edit HTML dan sobat langsung centang tanda Expand Widget template setelah itu sobat masukan kode CSS di bawah ini , letak penyimpannya di atas ]]></b:skin> silahkan cari dan masukan kode di bawah diatas kode ]]></b:skin> :

CSS 4 kolom Gadget :

#empatkolom
brder :1px solid #000000;
-moz-border-radius :10px;
margin : 0 0 10px 0;
}
#empatkolom-wrapper {
Margin : auto;
Padding : 0px 0px 20px 0px;
Width : 960px;
Background : #ffffff;
-moz-border-radius-bottomleft :10px;
-moz-border-radius-bottomright :10px;
-webkit-border-bottom-left-radius :10px;
-webkit-border-bottom-right-radius :10px;
}
#empatkolom-wrapper {
Float : left;
Margin : 0px 0px 0px 0px;
Padding : 10px 0px 0px 0px;
Width : 25%;
text-align : justify;
font-size :100%;
color : #ffffff;
line-height: 1.6em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.empatkolombar {
Margin : 0;
Padding : 0;
}
.empatkolombar .widget {
Margin : 0;
Padding : 10px 20px 0px 20px;
}
.empatkolombar h2 {
background : #ffffff;
-moz-border-radius-bottomleft : 6px;
-moz-border-radius-bottomright : 6px;
-webkit-border-bottom-left-radius : 6px;
-webkit-border-bottom-right-radius : 6px;
Margin : -10px 0px 10px 0px;
Padding : 3px 0px 3px 0px;
text-align : center;
color :#ffffff;
font-size :20px;
font-weight :bold;
text-transform :sekawancase;
}
.empatkolom bar ul {
Margin : 0px 0px 0px 0px;
Padding : 0px 0px 0px 0px;
list-style-type : none;
}
.empatkolom bar li {
Margin : 0px 0px 2px 0px;
Padding : 0px 0px 1px 0px;
border-bottom :1px dotted #000000;
}
. empatkolombar a {
Color : #0000ff;
text-decoration : none;
}
.empatkolombar a :visited {
text-decoration : none;
color : #0000ff;
}
.empatkolombar a :hover {
text-decoration : underline;
color : #ff0000;
}

Sebelum di save sobat rubah dulu CSS dan samakan dengan design blog sobat biar pool kelihatannya. jika males meubah nya langsung ku tutorial blog selanjutnya. oke setelah itu sobat cari kode <div id='footer-wrapper'>  setelah ketemu sobat copy kode di bawah ini dan letakan diatas kode tadi.

Kode empat kolom Gadget di atas footer

<div id='empatkolom'>
<div id='empatkolom-wrapper'>
<div id='empatkolom-wrapper'>
<b:section class='empatkolombar' id='empatkolombar1' preferred='yes'>
</b:section>
</div>
<div id='empatkolombar-wrapper'>
<b:section class='empatkolombar' id='empatkolombar2' preferred='yes'>
</b:section>
</div>
<div id='empatkolombar-wrapper'>
<b:section class='empatkolombar' id='empatkolombar3' preferred='yes'>
</b:section>
</div>
<div id='empatkolombar-wrapper'>
<b:section class='empatkolombar' id='empatkolombar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div><!-- end empat kolom gadget blog -->

Jika sudah silahkan sobat save template Blog nya dan lihat hasilnya di tab design Blog/Tata Letak. oke mudah mudahan berhasil dalam penerapan 4 kolom Gadget Diatas Footer. Good Luck dan Happy Blogging