Sabtu, 04 Juni 2011

Modifikasi Template Blogspot | Personalisasi Footer Template TheGreyMac Blogger

Template TheGreyMac Blogger
Salah satu "keasyikan" dari template blogspot adalah kebebasan kita untuk melakukan modifikasi sesuai dengan keinginan dan selera kita sendiri. Seperti pada post kali ini yang personalisasi template TheGreyMac Lasanta Barbara yang default-nya memiliki tiga kolom pada footer. Bagaimana jika ingin dijadikan satu kolom?

Konsep ini sebenarnya sama dengan post sebelumnya yaitu modifikasi footer template Grunge dari sobat Ashtho. Dan post kali ini juga semoga bisa menjawab pertanyaan dari Sobat Blogger Pak Karnadi..

Konsep modifikasi selalu dilakukan dengan dua cara:
  • Pengaturan pada elemen CSS
  • Pengaturan pada <div>
Dan untuk mengubah footer template TheGreyMac menjadi satu kolom adalah:
  • Pengaturan pada elemen css,
#footer{height:325px}
#bottombar{height:265px;width:1000px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gllO0LBddK4rseO1UENQBDPXWqCL_xJCWFGSfo0e5pMaCn2t3NIwmYKOVYfiAYKhXHFTZ5bRcR2yht6M_K-vAGDASy1Wt1mc_gWvu0etoTIx99lo7AxxjAGmABsOV_jY5iYRT3fUSNLp/s1600/bottom-bg.png) no-repeat top left;margin:0 auto}
#about-wrap{float:left;width:310px;height:225px;margin:15px 0 0 40px}
#share-wrap{float:left;display:inline;height:225px;width:335px;margin-top:15px;}
#bottom-ads{width:240px;display:inline;float:left;margin-top:15px;}
Hapus kode berwarna merah dan rubah kode berwarna hijau sesuai dengan lebar footer [sekitar 920-an pixel]
  • Pengaturan pada <div>,
Hapus elemen <div> berikut ini;
<div id='share-wrap' style='margin-left:10px;'>
<b:section class='footercol' id='footerleft2' preferred='yes'/>
<div class='clear'/>
</div>

<div id='bottom-ads' style='margin-left:10px;'>
<b:section class='footercol' id='footerleft3' preferred='yes'/>
</div>
<div class='clear'/>
Demikian moga bermanfaat...dan ditunggu diskusinya kolom komentar untuk berbagi..

Happy blogging!

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Powerade Coupons