Menambah 4 Kolom/Elemen Halaman di Atas Footer

Untuk menepati janji saya pada postingan sebelumnya dengan tema Menambah 3 Kolom/Elemen Halaman di Atas Footer, saya insyaAllah akan mengetengahkan tutorial menambahkan halaman baru diatas footer sesuai dengan janji saya kepada Rizki2009 Sahabat Blogger.

Elemen Halaman selain memprcantik dan menambah berbagai asesoris di blog kita, juga merupakan fasilitas untuk memperkaya wawasan dan penampilan blog itu sendiri. seperti pemasangan label, arsip, shoubox, daftar link, photo, video dan lain-lain.

Sebelumnya saya sudah pernah membahas tutorial serupa tapi tak sama, karena elemen yang ditambahkan pada postingan terdahulu hanya tiga kolom, sekarang kita akan belajar bagaimana menambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut:



1. Seperti biasa Login ke blogger dengan id Sobat
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Selanjutnya tambahkan kode CCS berikut di atas ]]></b:skin>

/* --- LOWER --- */
/* --- CSS modified by: Kang Fatur --- */
#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://www.coretan-guru-komputer.co.cc--*/
/* --- End Lower--- */



6. Selanjutnya cari kode berikut <div id='footer-wrapper'>
7. Kemudian 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 -->


8. 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.

PENTING
Silahkan edit kode CSS di atas, untuk menyesuaikan tampilan kolom dengan template sobat.

Perhatikan tulisan yang berwarna merah pada lower wrapper, widht (lebar) 960px ganti dengan lebar footer sobat.

Untuk mengganti kode warna silahkan lihat tabel kode warna disini.


Selamat mencoba semoga berhasil dan bermanfaat. Amiin.
Previous
Next Post »

9 komentar

Click here for komentar
nas
admin
9 November 2010 at 06:16 ×

mampir..berkunjung.. mantap

Reply
avatar
9 November 2010 at 06:50 ×

visit back and follow you

Reply
avatar
Rizky2009
admin
10 November 2010 at 06:32 ×

sebelumnya saya ucapkan terima kasih atas request post saya tentang 4 kolom footer dan ini yang saya cari, sekali lagi saya ucapkan terima kasih banyak kang

Reply
avatar
Kang Fatur
admin
10 November 2010 at 06:40 ×

@Rizky2009Sama sama kawan, makasih juga. semua ini berkat doa kita semua

Reply
avatar
16 February 2011 at 03:45 ×

saya sudah coba tp,,,
elemenya ga rapi.......

Reply
avatar
16 February 2011 at 05:22 ×

kk..........
tlong edit blog sya ea??please...
sy gk bsa....
riski.1727@gmail.com
pass:riskicyanksella

makasih....

Reply
avatar
Kang Fatur
admin
16 February 2011 at 16:35 ×

@PMC COMMUNITY Apanya yang diedit. saya udah lihat bagus kok blognya tinggal mengisi postingan

Reply
avatar
StoneBazooka
admin
11 April 2011 at 12:07 ×

TerimaKasih bang ,, langsung tak coba , langsung bisa .. maksihh BAng

Reply
avatar
22 April 2011 at 21:30 ×

Wah kang, blog abi malah main-nya mepet ke kiri. header and footer tetep center

Reply
avatar
Thanks for your comment