May 11, 2011

Adding animated notice box


ဘေလာ့မွာ အေရးႀကီးတဲ့ အပိုင္းတစ္ခုခုျပင္ေနရင္ပဲျဖစ္ျဖစ္၊ reader ေတြကို သိေစလိုတာရွိရင္ျဖစ္ျဖစ္ ဒီနည္းေလးကေတာ့ အဆင္ေျပပါတယ္။လုပ္ရတာလည္းလြယ္သလို အျမင္အားျဖင့္လည္း ၾကည့္လို႕ေကာင္းပါတယ္



အသံုးျပဳမယ္ဆိုရင္ေတာ့ Design - Page Elements က Add a Gadget ကိုႏွိပ္ၿပီး HTML/JavaScript မွာ ေအာက္က code ေတြကိုထည့္ေပးလိုက္ပါ။


<style type="text/css">
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #DB9D9A;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 3px ridge #fff;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow: #58FA58 0 2px 15px;
-moz-box-shadow: #58FA58 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .butang {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .butang button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #DB9D9A;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#DB9D9A));
background: -moz-linear-gradient(top, red, #DB9D9A);
}
#topbar .isi_iklan {
background-color:#81F7BE;
margin:0;
padding:4px;
width: 468px;
border: 2px groove #FF8000;
}
</style>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/iklanpopup.js?attredirects=0&d=1" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="butang">
<a href="" onclick="closebar(); return false" style="text-decoration: none;"><text><b>[X]</b></text></a></div>
<div class="isi_iklan">
YOUR MESSAGE HERE
</div>
</div>

YOUR MESSAGE HERE ေနရာမွာ ကိုယ္တင္လိုတဲ့ စာေလးေျပာင္းေပးလိုက္ပါ။


မွတ္ခ်က္မရွိေသးပါ...

 
©2013 by Way To Professional | Blogger Help