Show/Display/Add Popup Message In Blogger Blog

Do you want your reader to read a special message. Well then you are reading the right article. 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. You might have seen this type of widget in some Blogs or websites, that shows the Pop message when you click on some text or button. You can use it in your sidebar , post and also in your footer widgets. Now this tutorial will show you How to show/display/add popup message in blogger. You can use the widget anywhere on your blog.

Pop up Message Demo

How To Show/Display/Add Popup Message In Blogger Blog

• 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.yourpcgenie.blogspot.com for more blogger widgets'); return true">
</form>
</center>
<!-- End of Message Alert -->

Customization

• Replace Message it with your button name.
• Replace Visit www.yourpcgenie.blogspot.com for more blogger widgets with your message

Any Help ? 

If you find any trouble in adding this to your blog use the comment box below .Sonu and I will always be there for you.
Happy BLogging Guys !! Peace :)

This article was written by Tanmay Kapse of Genie Land

Like it? Share it.