Float Sponsor Banner untuk Blogger

Labels:
Float Sponsor Banner kurang lebih berarti spanduk sponsor terapung. Kali ini kita akan menyediakan space (ruang) bagi mereka yang ingin beriklan di blog kita. Banyak tempat yang bisa kita sediakan untuk memberikan kesempatan kepada para sponsor blog kita, salah satunya dengan membuat Float Sponsor Banner yang posisinya bisa kita atur dibawah atau diatas pada halaman blog kita. Sesuai namanya float (terapung) maka banner ini posisinya terapung pada blog kita, tidak terpengaruh dengan gerakan scrollbar. Teknik ini memang sangat sederhana, dan mudah diaplikasikan. Sebagai contoh perhatikan banner pada blog ini yang berada dibawah...
Float Sponsor Banner untuk Blogger

Langkah Integrasi Float Sponsor Banner pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
#sponsorbanner {
display:block;
background:#000;
color:#fff;
position:fixed;
bottom:0px;
left:0px;
width:100%;
text-align:center;
height:40px;
z-index:999;
}
#sponsorbanner a {
margin:0 auto;
}
#sponsorbanner img {
border:none;
}
Langkah 5
Cari kode dibawah ini:
<body>
Langkah 6
Masukan (copy paste) kode dibawah ini dibawah kode pada langkah 5:
<div id="sponsorbanner">
<a href="http://bonprog.blogspot.com/" target="_blank"><img src="banner.png"/></a>
</div>
Langkah 7
Simpan Template dan baca keterangan sebelum Preview blog

Keterangan:
Perhatikan Langkah 4!
  • background:#000; ubah nilai 000 untuk mengubah warna background
  • bottom:0px; bottom berarti banner ditempatkan pada bagian bawah halaman, ubah menjadi top:0px; jika banner ingin ditempatkan pada bagian atas halaman
  • height:40px; adalah tinggi banner yang akan ditampilkan, ubahlah nilai 40 sesuai dengan tinggi banner yang akan kita gunakan, tetapi nilai 40 ini sama dengan tinggi banner yang sudah kita siapkan
Perhatikan Langkah 6!
  • http://bonprog.blogspot.com/ adalah alamat tujuan ketika pengunjung meng-klik banner, ubahlah alamat tersebut sesuai dengan tujuan blog sponsor
  • banner.png adalah URL dimana banner tersebut ditempatkan, ubahlah URL sesuai dengan dimana sponsor atau kita menempatkan banner tersebut
Selamat mencoba dan semoga berhasil. Happy Blogging... :)