• 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


    5 comments:

    1. Remove the "--" or use single "-" within command format

      Wrong-

      Right-

      ( http://guiedjaffna.blogspot.com/
      http://alasalkal1000.blogspot.com/ )

      ReplyDelete
    2. Does not work

      http://heavybookreview.blogspot.in/

      ReplyDelete