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
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("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">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
i cant save it
ReplyDeleteRemove the "--" or use single "-" within command format
ReplyDeleteWrong-
Right-
( http://guiedjaffna.blogspot.com/
http://alasalkal1000.blogspot.com/ )
Does not work
ReplyDeletehttp://heavybookreview.blogspot.in/
Doesn`t work for me...
ReplyDeletethank you so much. this was helpful
ReplyDeleteTry this HTML Tutorials http://mkmovietrailer.blogspot.com/2013/09/html-tutorials.html
ReplyDeleteشركة نقل عفش من الرياض الى سلطنة عمان شركة نقل عفش من الرياض الى سلطنة عمان
شركة تركيب جبس بورد بالرياض شركة تركيب جبس بورد بالرياض
معلم دهانات بالرياض معلم دهانات بالرياض