Followers

15 November 2010

November 15, 2010 - No comments

Tutorial:Kotak Mesej Animasi





Klik sini untuk Demo

Langkah-langkah

1:Pergi ke dashboard--->Design/Layout--->Klik Add A Gadget

2:Pilih Html/Javascript

3.Pastekan kod mesej ni didalamnya:

<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: #00529B;

background-color: #BDE5F8;

background-image: url('http://2.bp.blogspot.com/_P7J-V68xQZ4/TOCGWam3UAI/AAAAAAAADeE/cs7a8F2dhlw/s1600/119409_36995_48_blogger_computer_icon.png');

}

</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> - Selamat Datang Ke Demo Blog Aideal.<br />Klik pangkah untuk memadam mesej</center></div>
</b:if>

Ubah kod hijau ikut suka hati korang.Save dan lihat blog korang.

Ok,yang ni pula kalau nak letak mesej kat bawah tajuk pos

Langkah 1:Pergi ke dashboard--->Design/Layout---> 'Edit Html' >Tandakan pada kotak 'Expand Widget Templates'.

Langkah 2. Cari kod merah ni kat dlm edit HTML : (Klik Ctrl dan F utk kotak search bg memudahkan pencarian)

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

Langkah 3. Paste kod mesej korang di bawahnya

Save template.



0 ulasan:

Catat Ulasan