Ticker

6/recent/ticker-posts

Tambah Animated Notice Box



Langkah 1

1. Login ke Blogger, Klik Design :
2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #FFF;
background-color: #000000;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoYHAOWM7Dfr8SGCfb6scfeyTu1eZ8gLAXoIbC8Xw6W7C-_h99i_AZaNgu4xNV6Y9Gax8TTiNZ2nqRyaXrzRF6dY8NOmZ60anx4WKA4obFKidzUfk64ubWrY3VV-Avxb9YJ8_NQisg_iJ/h120/joy.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1qibglXV7xHCSvo214BWC87wOKiVSK9eBxv95AsDMMFK8qK8OpeYwMpqkV-GIeeTlHnPQ29bUKu1z_TenVJQW48PPzMTRCIAv1aJSfpM4ckAOsQrmWAKljIYEpqadQzJ3ahBmRhZe3hJ/s1600/images.jpg" /></a>
Hello This is test Notice...</div>



Selepas itu klik Save dan anda boleh lihat hasilnya..


Nota : Jangan lupa tukar Hello This is test Notice... mengikut kehendah anda...

Catat Ulasan

0 Ulasan