Untuk tutorial hari ini, sy ingin berkongsi notice box animasi untuk diletakkan di blog anda. Animasi mcm mana 2? nk tahu? acu,cuba,try,test tengok di http://syoknyerbloggingtesting.blogspot.com/ . Berminat? jom sama2 kita belajar. Hehe..

1 Pergi ke Dashboard > Design > Add a Gadget

2 Pilih Html/Javascript

3 Salin koding dibawah dan pastekan pada gadget td.

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGZeTshbHKj3GZKN4nEz2xOvlr908mTdmSVrO_fAwRtXgDbBcZ8Y9n8HohY46Xx2s-i6qF4mMo4KTvm1mt6nX5pPDF6DwXQMkmmJ8m3_cIhLB6ktSdvordehWgyTbzLTDWPzddeKatJfz/s1600/images.jpg" /></a>
Ini adalah mesej anda. Tekan pangkah untuk tutup box ini</div>

4 Tukarkan mesej anda sendiri.

5 Save.

6 Untuk menukarkan icon tanda seru cari http://i46.tinypic.com/jzf8tk.jpg dan tukar pada url icon pilihan anda.

7 Selamat Mencuba ya. (^^,)

---

Blog
Gadget

Jika anda sukakan article ini,linkkan kembali...

<a href="http://syoknyerblogging.blogspot.com/2010/12/notice-box-animasi-untuk-blog.html">Notice Box Animasi Untuk Blog</a>