Membahagi footer kepada 3 bahagian

Seperti mana yang diketahui kebanyakan template untuk blog mempunyai hanya satu columns pada  footer.Ia menyebabkan kita tidak boleh meletakkan lebih widgets pada ruangan tersebut.Dengan membuat ruangan footer kepada tiga bahagian,maka lebih  banyak widgets seperti Recent Posts, Recent Comments,Archives dan iklan dapat dimasukkan.Membuat footer sebegini pada blogspot adalah amat mudah dengan hanya mengikuti langkah dibawah ini:

Nota:sebelum anda mengedit template adalah disarankan supaya membuat salinan template terlebih dahulu dengan mengklik Download Full Template pada halaman Layout--- Edit HTML
Pindahkan widget yang ada pada footer pada mana mana side bar atau bahagian yang lain.

1.Pada Design pilih edit HTML
2.cari kod berikut

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

(Nota:pada sesetengah template selain dari footer-wrapper anda mungkin jumpa footer  atau footer-section)


1.Tukarkan kesemua bermula dari  <div> ke </div> dengan kod berikut:

<div id='footer'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

2.Kemudian save template anda.

Catat Ulasan

Letakkan komen anda disini.Segala komen adalah dihargai.Sila buat backup bila membuat perubahan pada template.Terima Kasih.

14 Comments:

uchiha berkata...
terima kasih atas kunjungan

boleh jg info'y...
akn saya cobaa... hehee :D

~~su manje~~~ berkata...
terima kasih atas kunjungan

mampir sahabat

..:akyn:.. berkata...
terima kasih atas kunjungan

kenapa xjmpe kod uh??

yahaya berkata...
terima kasih atas kunjungan

@..:akyn:..ada satu baris pada bahagian bawah template.gantikan dan preview terlebih dahulu sebelum save

cikPuanRAihah berkata...
terima kasih atas kunjungan

xbole

||aLeaSaRa|| berkata...
terima kasih atas kunjungan

salam..bro.tq kite dh bjaya buat 3 footer tp mcm mn kite nk cantikkan biar semua banner,terletak cantik dlm kotak mcm bro buat ni?skrg banner contest/award bersepah.ada banner tu tak da kod html susah kite nk adjust weight/height utk bg sama saiz.

yahaya berkata...
terima kasih atas kunjungan

@||aLeaSaRa||tgk tutorial cara susun imej pada sidebar

cikpuanhady berkata...
terima kasih atas kunjungan

tak berjayalah buat..nape yer? tak error tapi tak keluar apa2..bila drag bloglist ke, bloglist tu tak stay kat situ..

pls help..

Jom skodeng :Ada blog lebih dari satu?

:: Zanna :: berkata...
terima kasih atas kunjungan

tq~~ berjaya apply dlm blog.. ^.^

deqlis berkata...
terima kasih atas kunjungan

salam, deqlis nk buat utk blog deqlis tp tak jadi lah...cari wording footer-wrapper pun tak jumpa nie... hrp leh bantu

teng

alamindawa berkata...
terima kasih atas kunjungan

nice post, i try it now.........!

Elina berkata...
terima kasih atas kunjungan

salam,
macam mana lak nak tukar 3 colunm kepada 2 column je ? boleh tolong tak ? lg 1, my blog ada double blog post le. x caye cuba scroll bawah .. camne nak delete ??

yahaya berkata...
terima kasih atas kunjungan

@Elina
2 footer cuba guna template designer..pergi ke design--template designer--layout--footer..
masalah double posting ni ada tutorialnya..cari artikle masaalah double posting..

kinvanburton berkata...
terima kasih atas kunjungan

gan,mau nanya nich...
blog saya kok ada scrollnya di bawah halaman browser,
apa penyebabnya ya??
mohon petunjuk dan pencerahannya ya gan...
by:
http://kinvanburton.blogspot.com/

Related Posts Plugin for WordPress, Blogger...