• 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


    6 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

    3. شركة نقل عفش من الرياض الى سلطنة عمان شركة نقل عفش من الرياض الى سلطنة عمان
      شركة تركيب جبس بورد بالرياض شركة تركيب جبس بورد بالرياض
      معلم دهانات بالرياض معلم دهانات بالرياض

      ReplyDelete