Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer

Allahamdullilah akhirnya tutorial pertama sudah saya buat.Tutorial Pertama adalah Untuk menambahkan menambahkan 4 kolom tambah gadget diatas footer/Elemen Halaman Baru Diatas Footer agar terlihat lebih bagus cukuplah mudah. silahkan ikuti petunuk dibawah :
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut setelah tag atau kode  ]]></b:skin>

/* --- LOWER --- */
/* --- CSS modified by: Amatullah. Sy --- */
#lower {
     border-top:10px solid #F781F3;
     margin:0 0 10px 0;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
}

#lower-wrapper {
     margin:auto;
     padding: 0px 0px 20px 0px;
     width: 960px;
     background: #FBEFF5;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
     -webkit-border-bottom-left-radius:10px;
     -webkit-border-bottom-right-radius:10px;
}

#lowerbar-wrapper {
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
     width: 25%;
     text-align: justify;
     font-size:100%;
     color:#333;
     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 */
}

.lowerbar {
     margin: 0;
     padding: 0;
}

.lowerbar .widget {
     margin: 0;
     padding: 10px 20px 0px 20px;
}

.lowerbar h2 {
     background:#F781F3;
     -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:#fff;
     font-size:16px;
     font-weight:bold;
     text-transform:lowercase;
}

.lowerbar ul {
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     list-style-type: none;
}

.lowerbar li {
     margin: 0px 0px 2px 0px;
     padding: 0px 0px 1px 0px;
     border-bottom:1px dotted #DF0101;
}

.lowerbar a {
     color: #FA58F4;
     text-decoration: none;
}

.lowerbar a:hover {
     text-decoration: underline;
     color: #F7BE81;
}

.lowerbar a:visited {
     text-decoration: none;
     color: #5858FA;
}
/* ---Modefied: http://amatullah83.blogspot.com--- */
/* --- End Lower--- */

Catatan: Silahkan edit kode CSS diatas, untuk menyesuaikan tampilan kolom dengan template sobat.
Perhatikan tulisan yang berwarna merah pada lower wrapper, widht (lebar) 960px ganti dengan lebar footer sobat.



3. Tambahkan kode HTML berikut diatas <div id='footer-wrapper'>

<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 id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'> 
</b:section>
</div>

<div style='clear: both;'/>
</div> </div><!-- end lower-wrapper -->

4. Simpan template. Lihat hasilnya pada bagian elemen halaman, apakah sudah terdapat 4 kolom diatas footer? Jika ya, silahkan tambahkan gadget atau widget yang sobat inginkan.
Semoga bermanfaat! Jangan lupa memberi saran untuk kemajuan Blog ini.

Credit:9UCSVAVMRYXP

Categories: Totorial Blogging