Big Promotions

7.Cara Membuat 3 Kolom diatas Footer,

thumbnail




http://www.shareapic.net/content.php?gid=936463&owner=andy475





Membuat 3 Kolom/Elemen di Atas Footer
Membuat 3 Kolom/Elemen di Atas Footer

Salam blogger sepeti biasa selalu saya ucapkan di awal pembicaraan saya. Para shahabat blogger semuanya khususnya pada blogger pemula (awam) pada kesempatan ini saya akan membagikan satu buah tips sederhana namun berguna.

Kali ini saya akan bagikan (posting) tentang 'Membuat 3 Kolom di Atas Footer' pernah ada yang nanyain kepada saya gimana katanya cara membuat 3 kolom di bawah seperti yang punya Kang Fatur. Kali ini saya akan bahas tentang cara pembuatannya yang sederhana dan simpel tapi membuahkan hasil yang maksimal Kalau sobat pingin liat seperti apa itu 3 Kolom Elemen di Atas Footer di bawah ini gambarnya

Langsung aja ke Tujuan

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. Sekarang cari kode yang mirip seperti ini :


#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}



float:left;
padding-left:15px;
}
#center-bottom {
width:200px;
float:left;
padding:0 20px 0 20px;
}
#right-bottom {
width:420px;
float:right;
padding-right:15px;
}


6. Tambahkan atau copy lalu paste kode berikut di bawah kode tadi :


/* bottom
----------------------------------------------- */
#bottom {
width:900px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:1px solid #333;
}
#bottom a:link {
color:#006699;
text-decoration:none;
}
#bottom a:hover {
color:#c06000;
text-decoration:underline;
}
#bottom a:visited {
color:#045FB4;
text-decoration:none;
}
#bottom h2 {
padding:20px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}
#bottom ul {
padding:0;
margin:0;
color:#333;
}
#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
padding-left:17px;
margin-top:2px;
}
#left-bottom {
width:200px;

7. Sekarang kita membuat kode HTML untuk elemen di atas footer tersebut. Cari kode seperti ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

8. Tambahkan kode berikut di atas kode tadi :


<div id='bottom'>
<b:section class='bottom' id='left-bottom' preferred='yes'/>
<b:section class='bottom' id='center-bottom' preferred='yes'/>
<b:section class='bottom' id='right-bottom' preferred='yes'/>
</div> <!-- end bottom -->

9. Sekarang klik timbol simpan template
10. Selesai dan lihat hasilnya. sekarang Sobat mempunyai 3 elemen di atas footer


PENTING 

Sesuaikan ukuran lebar (width) footer dengan template Sobat dan lebar elemen yang akan ditambahkan sesuaikan selera Sobat dengan memperhatikan jarak marginnya.

Postingan lainnya tentang Elemen Widget adalah cara Menambah Elemen di Atas Dua Kolom. Jika Sobat ingin mencoba silahkan klik Disini

Selamat mencoba semoga berhasil! jangan lupa comennya!!

-------------------------------------------------
Dikutip dari: http://ade-tea.blogspot.com/2010/11/membuat-3-kolomelemen-di-atas-footer.html#ixzz1FbARwO8X
Share this article :
Article News =

thumbnail

Title :
Write By :
Tag :
Publisher :
Headline :
Description : Tips dan Trik Blogger 1.Cara Membuat Artikel Terkait, 2.Cara Membuat Text Area, 3.Cara Membuat Text Melayang, 4.Cara Membuat Li...
Modified Date : 4/11/2011 04:49:00 PM
Published Date :
Post hentry :

Please This Review 0 Reviews Post a Review
Posted by : Top Triks
Published On : 4/11/2011 04:49:00 PM
Average : 100%

Rating : 5 User Reviews. ★★★★★ © Vote : 87835
Reviews Based on Microformats Review Aggregate

Item Reviewed :



|
Terimakasih Atas Kunjungan Anda Jangan Lupa Berikan Tanggapan Anda Disini


Post a Comment

Silahkan Beri Komentar Anda disini,
Gunakan Bahasa yang Singkat dan Jelas,
Komentar Yang Anda Berikan Hendaknya Sesuai Topic Artikel.

Ruko Dikontrakan Disewakan DiBalikpapan di Jalan Ahmad Yani Letak Strategis di Jalan Utama, Cocok buat usaha Disekitarnya Bank, Toko, Restauran dll. Peminat Call/Sms ke 62 085654810001, 082250568492 Peta Lokasi >> Disini | Selengkapnya >> Disini
Rumah Bergaya Mediterania 3 Lantai Jalan Danau Sentarum, Pontianak Barat, Sertifikat SHM, Luas Tanah 320, Luas Banguanan 160 Selengkapnya >> Disini Dijual Ruko Murah Siap Pakai 2 Lantai Atrani Residence Wagir Malang Lokasi Atrani Residence,Wagir Malang. Luas Tanah 72 M2, Luas Bangunan 144 M2, Listrik Air PDAM tersedia. Selengkapnya >> Disini
RUMAH 2 LANTAI TERMURAH SE MALANG RAYA HANYA 200JUTAAN Dengan konsep dan gaya hunian yang kekinian, D’Park City mengusung tema Modern Minimalis dengan sentuhan gaya islami. Selengkapnya >> Disini Ruko Dikontrakan Disewakan DiBalikpapan di Jalan Ahmad Yani Letak Strategis di Jalan Utama, Cocok buat usaha Disekitarnya Bank, Toko, Restauran dll. Peminat Call/Sms ke 62 085654810001 Selengkapnya >> Disini
Sewa Rumah 2 Lantai Di Rest Area Villa bagus di Puncak Bogor dengan view panorama lembah dan pegunungan merupakan sesuatu yang spesial Daftar Sewa Villa di Puncak Untuk Rombongan dan Keluarga bisa Hubungi kami. Selengkapnya >> Disini Dijual Rumah Minimalis 2 Lantai Semarang Lokasi Rumah Sendangguwo, Kec. Tembalang, Kota Semarang Sertifikat SHM, Luas Tanah 700, Luas Banguanan 90. Selengkapnya >> Disini
Dijual Rumah Mewah Bergaya Eropa di Pondok Kelapa, Jakarta Timur, DKI Jakarta. Sertifikat SHM Luas Tanah 900 M2 Selengkapnya >> Disini TANAH DI Jual Villa Lereng Merapi Jl. Lintas Liwa No. 39 Sumber Jaya, Lampung Barat, Luas 1300 Sertifikat SHM. Selengkapnya >> Disini
Rumah Dijual Balikapapan Letak Strategis Di Jalan Utama Ahmad Yani, Sertifikat Hak Milik, Peminat bisa menghubungi di 085654810001, 082250568492 Selengkapnya >> Disini Dijual Ruko Murah Siap Pakai 2 Lantai Atrani Residence Wagir Malang Lokasi Atrani Residence,Wagir Malang. Luas Tanah 72 M2, Luas Bangunan 144 M2, Listrik Air PDAM tersedia. Selengkapnya >> Disini