25 December 2012

Tutorial : Advertisement Sliding box

Assalamualaikum, Salam Sejahtera. :)
Bismillahirrahmanirrahim..



1. Dashboard > Add a Gadget > scroll bawah sikit amek HTML/JavaScript
2. Paste codes ini di ruangan HTML/JavaScript

<style>
#fqhadsbox {
background:#CABDBD;
z-index: 9999;
position: fixed;
bottom: -290px;
right: 20px;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
padding-bottom: 10px;
padding-right: 2px;
padding-left: 2px;
}
#fqhadsbox:hover {
bottom: 0px;
}
#fqhadsboxtitle {
background:#CABDBD;
color:#fff;
text-align: center;
font-family: 'lucida sans unicode';
font-size: 9px;
letter-spacing: 1px;
padding-bottom: 25px;
width:100px;
height:10px;
}
.imagee{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
margin-top:4px;
width:60px;
height:60px;
}
.imagee:hover{
-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0)
}

</style>

<div id="fqhadsbox">
<div id="fqhadsboxtitle">HELP ME :3</div>
<center><a href="URL/LINK" target="blank"><img src="URL ATAU LINK GAMBAR" width="55" height="55" class="imagee" /></a> <br /><a href="URL/LINK" target="blank"><img src="URL/LINK GAMBAR" width="55" height="55" class="imagee" /></a> <br /> <a href="URL/LINK" target="blank" ><img src="URL/LINK GAMBAR" width="55" height="55" class="imagee" /></a> <br /> <a href="URL/LINK" target="blank"><img src="URL/LINK GAMBAR" width="55" height="55" class="imagee" /></a></center>
</div>
nota
Warna : tukar kepada codes background yang anda suka. codes background boleh didapati [[DI SINI]] **Kalau nak tukar kepada gambar, tukarkan background::#CABDBD; kepada background:url(URL BACKGROUND);
Warna : Tukar kepada URL/Link Churp churp atau says atau apa-apa saja yang anda nak letak :p Kalau churp-churp cara nak ambik urlnya tengok tutoral : [[KLIK DI SINI]]
Warna : gantikan kepada url ataupun link gambar. kalau churp-churp boleh tengok tutorial : [[KLIK SINI]]
Warna : ni kalau nak gantung belah kiri, boleh tukar kepada left. kalau nak kanan, biarkan je right.

3. SAVE

NO RE-POST. TQ.

Untuk pengguna blogskins, sila tengok tutorial [[DI SINI]]

11 comments:

  1. Wah nak try la lps ne... Insyaallah

    ReplyDelete
  2. nanti nak try la. thanks kihah :d

    ReplyDelete
  3. Rasanya... dah pernah jumpa tuto ni kat blog lain. RASANYALAH. :3

    ReplyDelete
  4. @Hanani This is my own codes la.. di blog wana kot. tapi codes dia lain benor dengan qihah punya.

    ReplyDelete
  5. WAHH ! nice ! :)
    lama dah cari tuto nie.. tq2 :D

    ReplyDelete
  6. ha'ah kihah lgipun code wana untuk blogskin :D kihah untuk template designer :) btw thanks kihah lme da cri tuto nih! :D

    ReplyDelete
  7. Adik Comel Thanks :D.
    Akak Nak Sangat Tuto Nie :D.Thanks Again And Again :)

    ReplyDelete

Your words defines you