Sunday

kotak mesej beranimasi

TUTORIAL FOR BLOG


Login ke Blogger
Dashboard  pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML 

<b:if cond='data:blog.pagetype == &quot;item&quot;'>
<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #B22222;
background-color: #F0E68C;
background-image: url('http://i208.photobucket.com/albums/bb138/robbie_9000/little%20stuff/icon_warning_32x.gif');
}
</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://1.bp.blogspot.com/_rKG-ziTSNUQ/TL29UxFwn0I/AAAAAAAABz4/CN7abEjuuw0/s1600/close+message.png" /></a>
<center><b>Mesej:</b> - WELCOME TO MY SAJE SAJE BLOG.<br />Klik pangkah untuk memadam mesej</center></div>
</b:if>
...............

kod biru : url image anda
kod merah : mesej anda

then 'SAVE'
................................................

info :
meletak mesej di bawah tajuk post

Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

<div class='post-header-line-1'/>

dan paste kan kod tadi di bawah nya.


SELAMAT MENCUBA


6 comments: