content top

2010-06-14

ඔබේ අඩවියට Animated Notice Box එකක්

බ්ලොගට එකක් Animated Notice Box දැම්මොත් කොහොමද? මේ මගින් බ්ලොගේට පිලිගැනීමක් හරි, ඉදිරියේදී කරන්න තියෙන දෙයක්, නැත්තම් බ්ලොග ගැන ලියලා තියන්න පුළුවන්. ඉතින් මං කියලා දෙන්නම් මේ Gadget එක දාගන්න විදිය.. හරිම ලේසියි..

මුලින්ම බ්ලොගේට 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> ඔබේ සටහන


"ඔබේ සටහන" මේ වෙනුවට ඔයාගේ Note එක ලියන්න.

Background Color
වෙනස් කරගන්න ඕනි නම්
background-Color: #BDE5F8;
මෙයට අදාල Color Code එක ලබාදෙන්න.

Border Line Color වෙනස් කරගන්න ඕනි නම්
color: #00529B; මෙයට අදාල Color Code එක ලබාදෙන්න.

හොදයිද කියලා බලලා කියන්නකෝ. මාත් ඔය දාගෙන තියෙන්නේ ඔය ගැජ්ට් එක තමයි.

6 ප්‍රතිචාර:

සඳුන් නිලංක said...

ඇත්තටම මේ ලිපියත් ගොඩක් වටිනවා.

C0de BlUe said...

එල එල දිගටම ලියපං !!!

Xpress (SiS™ ) said...

එල එල
නියමායී

චමිත් said...

එල පවුසි

blog gadol said...

එලකිරි!

Shan Asanka | Admin said...

බොහොම ස්තූතියි කට්ටියගේම ප්‍රතිචාර වලට

Post a Comment

content top