How To Add A Popup Message In Your Blogger

This is a special post for bloggers, This post about how to create a popup message in your blogger. If you want to show some message to your readers in a Pop up , then this widget will definitely help you. In this post I will be talking about a blogger widget which will include a Button and when your readers clicks on this button, a popup will appear, that displays your message, that you want to add.

 

 

 

• Go to Blogger Dashboard --> Layout --> Add A Gadget.

 

• Select HTML/Javascript and paste the code shown below in it.

 

<style type="text/css"> .btnLogin{ -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:15px; background:#a1d8f0; background:-moz-linear-gradient(top, #badff3, #7acbed); background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')"; border:1px solid #7db0cc !important; cursor: pointer; padding:11px 16px; font:bold 11px/14px Verdana, Tahomma, Geneva; text-shadow:rgba(0,0,0,0.2) 0 1px 0px; color:#fff; -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; margin-center:12px; float:center; padding:7px 21px; } .btnLogin : hover, .btnLogin::focus, .btnLogin : active{ background:#a1d8f0; background:-moz-linear-gradient(top, #7acbed, #badff3); background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')"; } .btnLogin:active{ text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; } </style> <!-- Start of Message Alert --> <!-- Use this button in a form to pop-up a message when the user clicks it --> <center> <form> <input type="button" value="Message" class="btnLogin" onClick="alert('Visit www.masterhacksindia.blogspot.com for more blogger widgets'); return true"> </form> </center> <!-- End of Message Alert -->

 

 

• Replace Message it with your button name.

 

• Replace Visit www.masterhacksindia.blogspot.com for more blogger widgets with your message

 

 

 

Live Demo: 

 

 

 

 

 

 

Leave a comment……………….

 

Posted in: Blogs and Websites, Tricks + Hacks