Memasang 'Footer NavBar'.


1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

Panduan Percuma Untuk Blogspot

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.


#navbar-footer p.info {

float: right;

padding-right:40px;

line-height: 1.2;

height: 100%;

vertical-align: bottom;

}



#navbar-footer p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

vertical-align: bottom;

line-height: 1.2;

}



#navbar-footer a {

color: #333;

}



#navbar-footer {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 10px solid #f5f5f5;

background-color: #f5f5f5;

width: 100%;

left: 0px;

text-align: left;

color: #888;

font-family: Verdana;

font-size: 11px;

z-index:10000;

opacity: 0.9;

filter: alpha(opacity: 90);

bottom:0;

}


7. Cari kod ini.

</body>

8. Kemudian Copy kod di bawah dan letakkan di atas kod tadi.

<div id="navbar-footer">

<p>

<img height='30' src="http://URLPHOTOANDA.JPG"/>&#160;&#160;<a href="http://NAMABLOGANDA.blogspot.com/index.html">SyamZone™</a>&#160;&#169;&#160;2008-2009 </p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> | Created and Maintained by <a href="http://www.twitter.com/syamzone" target="_blank">SyamZone™</a><br/>Best viewed in Firefox 1.5+ at 1024x768 or higher resolution

<br/>

</p>

</div>

Perhatian !!! Gantikan text/kod yang berwarna merah.

9. Untuk melihat hasilnya pilih PREVIEW.

10. Sekiranya anda berpuas hati SAVE TEMPLATE.

Sumber Anang's Blog..

10 comments:

Eldy Voon said...

I'm loving it !!

Meryl (proud pinay) said...

thanks for sharing footer nav bar. ^)^
btw, happy father's day to your dad ^_^

SyamZone™ said...

Thank's Meryl.

EviLSouL said...

salam syam..bleh ajar tak mcm mana nak buat ruang 3 column mcm kat bwh blog syam nie?? lagi satu mcm mana nak buat pembahagian ruang 3 column cam syam buat nie .. syukur lew dapat menimba ilmu kat sini ;p maceh syam moga2 rezeki syam melimpah ruah dengan berkat ilmu yang diajar ;p

EviLSouL said...

trimas syam dgn guide ;p

Anonymous said...

Salam'alaik, syamzone T.Q so much, suka sgt, banyak sangat ilmu yang boleh belajar dekat sini...moga suksess

Achmadvm said...

Thanks Bro TutorialNya....salam kenal'-'

mohdisa said...

bro, ini satu column je ke?

SyamZone™ said...

@mohdisa Footer Navbar,lebih kurang 'Stripe Ad'.

noe3304 said...

love ur code !! makaseh ek.

Post a Comment