Menambah 4 Kolom/Elemen Halaman di Atas Footer

11/10/2010 Blogger Dsain Template dsign template Tips Trik Blog Tutorial Blogger
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 pada postingan sebelumnya.

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 diatas, 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.

Sumber : amatullah83.blogspot.com

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

14 comments

kang fatur...
kasih tau dong caranya ..
kalo org berkomentar pada blog kita truss keliatan gambarnya
di template saya gk keliatan gambar nya
pliss kasih tu ok,..sama tulisan reply nya

Balas

Tidak ada div footer-wrapper di template saya sudah pake ctrl-f

Balas

@Aldohinje Massa SOB setau saya beberapa template ang pernah saya pakai ada SOB.

Balas

@Habil'zz™ Ada SOB caranya <a href="http://ade-tea.blogspot.com/2011/03/menampilkan-poto-avatar-pada-komentar.html>disini</a>

Balas

muncul sih muncul kak tapi pass aku kebawahkan dia kebawah terus gak ada habisnya..??


comment 10 sukses bzok aku comment lagi kalau ada trik terbaru lagi kak..?
follow blog sukses no 797 nama hisam yahya.?
like fb sukses dengan nama hisyam yahya..?
blog aku
http://his4myahya.blogspot.com/
link blog kak ade tea sudah ane pasang di http://his4myahya.blogspot.com/2012/01/tukeran-link-otomatis.html
email: hisamyahya@gmail.com
tolong kirim template oom style v 4

Balas

gak bisa yang ini diterpkan di punya saya

Balas

Akhirnya setelah googling kesana sini ketemu juga cara yang saya pingin.
Ijin bookmak dulu ya kang, sekalian ijin follownya.

Thanks dah sharing yang bagus2.
Salam kenal dari Direktori Penerjemah Indonesia.

Balas

Sudah saya coba menambahkan footer 4 kolom di blog saya, makasih ya informasinya

Balas