content top

2010-07-12

Animated Notice Box එකට HTML/Java Script එකක්

කලින් මම කියලා දුන්නනේ Animated Notice Box එකක් බ්ලොගයට දාගන්නේ කොහොමද කියලා. බැලුවේ නැත්තම් මෙන්න මෙතනින් බලන්නකෝ.ඉතින් මේ එකේ ලියන දේ වෙනුවට Java Script එකක් උනත් දාගන්න පුළුවන්. ඔය මම දැන්වීමක් දාගෙන තියෙන්නේ ඒ විදියට තමයි. ඉතින් මෙන්න මෙච්චරයි කරන්න තියෙන්නේ.

මුලින්ම බ්ලොගේට Log වෙන්නකෝ. ඊට පස්සේ Design>Page Elements>Add Gadget>HTML/Java Script ගන්න. දැන් මේ Code එක දාලා Save කරලා බලන්නකෝ.

<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i46.tinypic.com/jzf8tk.jpg');
}
</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">
</script>

<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
});
$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});

</script>
<div id="info">
<a class="close" href="#close" style="float: right;"><img border="0" src="http://i48.tinypic.com/3502jif.jpg" /></a>මෙතනට ඔයාගේ html Code හරි Java Script හරි දාන්නකෝ

1 ප්‍රතිචාර:

C0de BlUe said...

නියමයිනේ !!

Post a Comment

content top