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 == "item"'>
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjiq9Gfhclq3ryfEu7zpn7ebNN0RgnGP-XXYAJ4R03UtFOCMuUd6HKA-lTYiBqaYHmglbwYZfnar0jx9S8JKXjECTWSmL4MTweUfjEZJzCjHGFhkzAOfofWs7ukwZDh3pZtbmI9vBjpEan/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFOPz9rsXtWWUqtep49KuAiWbeVjvZvgK40NA2EQ1td8BI2TzacBduxTgu-ebE84VYtjCfDXMYjJ5wlJ-EYsHRNclqyEhupcVbYKlgc_OJqZDI1FSo82uJDmpCx-sadQ_ee9RjvSUghBGO/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>
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjiq9Gfhclq3ryfEu7zpn7ebNN0RgnGP-XXYAJ4R03UtFOCMuUd6HKA-lTYiBqaYHmglbwYZfnar0jx9S8JKXjECTWSmL4MTweUfjEZJzCjHGFhkzAOfofWs7ukwZDh3pZtbmI9vBjpEan/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFOPz9rsXtWWUqtep49KuAiWbeVjvZvgK40NA2EQ1td8BI2TzacBduxTgu-ebE84VYtjCfDXMYjJ5wlJ-EYsHRNclqyEhupcVbYKlgc_OJqZDI1FSo82uJDmpCx-sadQ_ee9RjvSUghBGO/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.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.