14.12.12

Tutorial : Hover - Over Banner Giveaway

Author : Nabila Medan Time : 12/14/2012 04:00:00 PM Total Comment : 4 Label :

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ Dan Selamat Petang

Preview

1.Blogger Dashboard > Layout > Add a Gadget > HTML/Javascript
2.Paste code bawah ni dekat HTML/Javascript
<style>
#bannerdiv {
    z-index: 9999;
    position: fixed;
    bottom: -300px;
    right: 20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    background-color: #000000;
padding: 5px;
margin: 4px;
border-radius: 10px 10px 0px 0px;
}
#bannerdiv:hover {
    bottom: -5px;
}
#bannertitle {
    text-align: center;
    font-size: 11px;
    font-family: verdana;
    letter-spacing: 1px;
    color: #ffffff;
    padding: 3px 5px 15px 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
 </style>

<br />
<div id="bannerdiv">
<div id="bannertitle">
GIVEAWAY</div>
<center>
<a href="LINK ANDA"><img height="70" src="URL GAMBAR" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="URL GAMBAR" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="URL GAMBAR" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="URL GAMBAR" width="70" /></a></center>
</div>
3.Kalau dah okay semuanya, save
       Amaran!
  • Yang warna merah tu korang boleh tukar ikut suka korang
  • Yang warna ungu tu , height dan width gambar harap korang takpayah tukar sebab kalau korang tukar nanti kedudukan dia jadi lain.
  • Kalau rasa-rasa kedudukan dia agak takbetul sikit korang boleh adjust code warna oren tu.
  • Letak 4 gambar/banner sahaja , kalau kurang/tambah banner.. kedudukan dia akan berubah nanti
  • Senang kata , korang just ambil code yang nabila bagi dan tukar yang warna merah je..
credit : cocorini

4 comments

Friday, December 14, 2012 5:41:00 PM Delete! [Reply Comment]

anda di'tag' :)

http://afrinaaaa.blogspot.com/2012/12/cik-lyeens-giveaway.html

Friday, December 14, 2012 7:17:00 PM Delete! [Reply Comment]

Nabilla , entry ga saya jadi schedule laa . Cam ner nak publish balik rr ?? Please ajar :(

Sunday, December 23, 2012 7:20:00 AM Delete! [Reply Comment]

Akak menjadi thanks tau.Saya buat tutor ni untuk blogskins

Thursday, May 09, 2013 1:51:00 AM Delete! [Reply Comment]

nak gune :D thankss :)

Post a Comment
Related Posts Plugin for WordPress, Blogger...