Add Nice Welcome Box For Blogger Blogspot

In this tutorial we are about to see how to add a welcome message or subscribe or newsletter box like pop up box with a transparent background, as shown in the image.

Step 1) Save your Template before you try something, it will help you when something goes wrong with your editing.

step 2) Goto >> Dashboard >> Design>> Edit HTML >> search for

</head>

then paste this code directly above it.

<!--Welcome--Page-Starts-->
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>
<!--Welcome-Stops-HELP-http://www.wierdwalker.blogspot.com-->

step 3) Now goto>> design >> page elements >> add a gadget >> html/javascript >> and paste this code.

<!-- Welcome page Start by http://wierdwalker.com/ -->
<style>a.lbAction {
 padding: 0 3px;
 text-decoration: none;
 float: right;
 position: absolute;
 top: -20px;
 right: -20px;
 color: #000000;
 border: 5px solid #000000;
 background: #CCCCCC;
 z-index: 102;
}
a.lbAction:hover {
 background: #FFFFFF;
}
a.lbAction:active {
 background: #999999;
}



div.leightbox {
 color: #333;
 display: none; /* toggle display to show/hide the popups when designing & previewing */
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -250px 0 0 -200px;
 width: 500px;
 height: 400px;
 padding: 0;
 border: 1em solid #000000;
 background: #FFFFFF;
 z-index: 101;
 overflow: none; 
}
div.scrollbox {
 margin: 0 auto;
 width: 100%;
 height: 100%;
 text-align: left;
 overflow: auto; 
}

.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 100;
 background-color:#000000;
 -moz-opacity: 0.80;
 opacity: .80;
 filter: alpha(opacity=80);
}

div.lightbox[id]{   position:fixed;    }
div#overlay[id]{  position:fixed;    }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">ENTER</a>
</div>
<div id="EPGrab"><a href="http://www.wierdwalker.com/2010/09/nice-welcome-box-for-blogger.html" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href="http:/wierdwalker.com">wierdwalker.com</a></p>
<a href="http://1.bp.blogspot.com/_uKSg2OevrDw/TVEQS3gOb6I/AAAAAAAAAHo/GB1-vpLBrxU/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="http://1.bp.blogspot.com/_uKSg2OevrDw/TVEQS3gOb6I/AAAAAAAAAHo/GB1-vpLBrxU/s320/WelcomeToMyPageRdFlower2.jpg" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script><!-- Welcome page End -->

Step 5) Save it.. And Try It Back.

DEMO