Minggu, 24 April 2011

Membuat Tiga Kolom Tambahan Di bawah Posting /Footer

Assalamualaikum.wr.wb
Halo Sobat Sharelikers sekalian,Malam ini sepertinya malam ini saya lagi mood untuk buat Tutorial,so kali ini saya akan menshare tentang cara membuat footer tiga kolom dibawah kolom postingan.Malam yang sedikit dingin ini tak menghalangi saya untuk berbagi ilmu yang tak seberapa ini.Oh ya,sebelumnya,saya mau tanya,blog sobat udah ada footer belum?kalau sudah ,tutorial ini juga berguna loh,sehingga footer sobat menjadi lebih banyak tentunya.



Nah bagi yang blognya belum ada footer,tutorial ini tentu sedikit membantu sobat dalam mengelola dan mengatur tata ruang blog sobat.Sehingga gadget-gadget yang banyak bisa diatur sedemikian rupa.Apalagi sobat memasang gagdet yang berat,seperti efek bintang berjatuhan pada cursor,nah sobat bisa letakkan di bagian footer.Kenapa?karena bagian footer adalah bagian terakhir yang diload oleh server saat visitor atau sobat saat mengakses blog sobat.Nah itu salah satu keuntungannya ada footer.Hem,Mungkin bagi para Blogmaster nih info udah jadul banget,Tapi yang namanya ilmu,tidak ada salahnya diulang,iyakan?supaya ilmunya lebih mantap.Hehehe.


Nah sekarang ikuti langkah-langkah berikut bila sobat tertarik untuk membuatnya
1.Loggin dulu ke Blogger mu yah sob,
2.Lalu pas Masuk Dasboard,klik RANCANGAN
3.Klik EDIT HTML
4.Tidak Usah centang EXPAND WIDGET TEMPLATE,sobat langsung cari kode
]]></b:skin>
5.Lalu Copy paste kode berikut dan Save diatas kode ]]></b:skin>

/* bottom
---------------------------- */ #bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#0b0b0b;
padding: 15px 0 15px 0;left top repeat-x;-moz-border-radius:15px 0 15px 0;
-khtml-border-radius:15px 0 15px 0;-webkit-border-radius:15px 0 15px 0;
border-radius:15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}


#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}


#left-bottom { /* kolom kiri http://ypsrandy.blogspot.com */
width: 205px;
float: left;
padding-left:10px;
}
#center-bottom { /* Kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}
#right-bottom { /* kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}

6.Lalu cari  </body> Kemudian cari kode dibagian  </body> Yang agak-agak mirip dengan kode berikut (cari dengan bantuan F3 atau CTRL + F bila kesulitan)
 </body><div id='footer-wrapper'><b:section class='footer' id='footer'/></div>
7.Nah setelah ditemukan copy paste Kode Pemanggil ID footer berikut Ini diatas kode di langkah ke 6 diatas

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

8.Kemudian terakhir,Save Template sobat


Nah sekarang lihat tampilan template sobat,Lalu aturlah lagi blog sobat seperti yang sobat kehendaki.Sekarang Blog sobat sudah memilki Ruang-ruang baru yang siap diisi dengan gadget 

~~~~~~~~~~SELAMAT MENCOBA~~~~~~~~

0 komentar:

Posting Komentar