How To Add Message Box Like Wordpress With Close Button
1.Login to your blogger dashboard--> desing- -> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag.
3.Copy below code and immediately after it paste ]]></b:skin> tag.
4.Scroll down to where you see <data:post.body/> tag.
5.Copy below code and paste it just after <data:post.body/>.
Note: Replace YOUR MASSAGE HERE with your text.
6.Now click "Save template" your are done.
Cheers
1.Login to your blogger dashboard--> desing- -> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag.
3.Copy below code and immediately after it paste ]]></b:skin> tag.
<script src='https://sites.google.com/site/bloggertricksandtoolz/massegebox-jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".close").click(function(){
$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
});
blink();
});
function blink(){
$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
}
function nudge(){
$("#info").animate({left:"+=5px"},20).animate({top:"+=5px"},20).animate({top:"-=10px"},20).animate({left:"-=10px"},20)
.animate({top:"+=5px"},20).animate({left:"+=5px"},20)
.animate({left:"+=5px"},20).animate({top:"+=5px"},20).animate({top:"-=10px"},20).animate({left:"-=10px"},20)
.animate({top:"+=5px"},20).animate({left:"+=5px"},20);
}
</script>
<style type='text/css'>
#info{
border: 1px solid;
margin: 0px 0px;
padding:5px 5px 15px 5px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
</style>
4.Scroll down to where you see <data:post.body/> tag.
5.Copy below code and paste it just after <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'> <div style="" id="info"> YOUR MASSAGE HERE <a href="#" class="close"> CLOSE !</a></div> </b:if>
Note: Replace YOUR MASSAGE HERE with your text.
6.Now click "Save template" your are done.
Cheers
No comments:
Post a Comment