Tutorial : Float Amaran dalam blog

12:11:00 AM


Embedded image permalink

Assalamualaikum and hello korang. Wassup ? Iman sihat ? XD


Hari tu blogger jaja ada request macam mana nak buat amaran dekat blog. Sorry lah lambat post tutorial ni. Fafa tak perasan langsung ada orang request. Slide amaran ni ialah bila kita click je keluar slide amaran. Macam kat bawah ni :

KLIK IMAGE UNTUK TUMBESARAN SIHAT

  • Blogskins/ Classic template : Paste bawah code </style>
  • Simple/Designer Template : Paste dalam Add a Gadget > HTML/JavaScript

<!--amaran-->
<style type="text/css">
#at{
position:fixed;
right:350px;
z-index:+1000;
top:6;
}
* html #at{position:relative;}
.attab{
height:500px;
width:30px;
float:right;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
background:url(http://i.imgur.com/XAYzOJi.png?3)
no-repeat 0 0 transparent;
width:800px;
height:700px;center scroll ;
padding:56px 0 20px 5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
<center><div id="author">
<a href="javascript:void(0);" onclick="showHideAT()">
</a></div></center></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-500-at.offsetWidth).toString() + "px";
</script>
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:100px; right:3px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/>
<img src="http://i.imgur.com/UDKbpk2.gif?1"
alt="PUSH" title="KLIK SINI" /></a>
</div></div></div>
</div>
ABC : jarak hover drop down
ABC : image
ABC : tukar dengan ayat korang

Korang boleh try. Dah try tu jangan lupa comment tau.


Assalamualaikum
Blog Author : Fafa Kyraa

You Might Also Like

1 Commentor(s)

  1. hehe dah jumpa tadi. Menjadi ;) Tapi tak jadi buat sebab blog sara nampak full sangat. hehehe
    http://sarahhijabista.blogspot.com/

    ReplyDelete

Assalamualaikum
Feel free to put your thoughts here XD