Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer

Sekarang kita akan belajar bagaimana menambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut:

menembahkan 4 kolom tambah gadget diatas footer
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://alizzahfirtibatilummah.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.
Sebagai sedikit tambahan pengenalan property CSS diatas, lihat gambar berikut:
menembahkan 4 kolom tambah gadget diatas footer
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.
NB :
Semoga bermanfaat! oya senang sekali kalau sobat mau menyediakan sedikit waktu untuk meninggalkan comment dibawan sini,...selamat berkarya..!!!



Category:

0 komentar:

Post a Comment

"Komentar anda sangat bermanfaat untuk perkembangan blog ini. Jangan lupa adab berkomentar, dan jangan buang waktu untuk spam. Terima Kasih!!!."