-->
Home » » Membuat Footer Melayang atau Strip Footer

Membuat Footer Melayang atau Strip Footer

Salah satu tips untuk memikat pengunjung bukan hanya pada artikel anda tapi penampilan blog anda merupakan pandangan pertama yang dapat memikat mereka. Jika anda merasa blog anda belum tampil menarik maka trik yang satu ini akan membuatnya lebih menarik. Pada kesempatan ini saya akan mengajarkan trik untuk membuat footer bar yang statis. Footer bar akan selalu muncul walaupun anda mengscroll ke bawah halaman. Pada footer bar atau strip footer ini anda dapat memasang iklan atau pun pesan kepada pengunjung. Tentunya pengunjung akan mudah melihat pesan tersebut apabila mereka mendatangi blog anda.

Jika anda tertarik untuk membuatnya. Maka perhatikan langkah berikut ini:
1. Login ke blogger
2. Pilih Rancangan -- Edit HTML
3. Centang Expand widget template
4. Cari kode ]]></b:skin> dan paste kode dibawah sebelum kode ]]></b:skin>

/* Footer Melayang by www.ko2.blogspot.com */

#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;
}
5. Kemudian paste kode berikut sebelum kode </body>
<div id='navbar-footer'>
<p>
Agar <a href='url_blog_anda'>Nama Blog Anda</a> lebih bermanfaat dan menarik lagi,<br/> diharap anda dapat meninggalkan komentar....
</p>
<p class='info'>Created by <a href='url_blog_anda'>Nama Blog Anda</a> | Widget by <a href='http://www.blogtrikdantips.blogspot.com'>Blog Trik dan Tips</a><br/>Copyright 2008 - 2009 All Rights Reserved: <a href='url_blog_anda'>Nama Blog Anda</a>
<br/>
</p>
</div>
6. Simpan template anda dan lihat hasilnya...

Semoga trik ini bermanfaat...selamat mencoba!!

0 comment:

Post a Comment

Back To Top