Friday, 4 July 2014


here is a tutorial for making an entry with welcome wallpaper for your blog.

The entry page comes with these features :

1.welcome wallpaper with type message window.
2.visitor need to click enter button to continue viewing your blog.
3.entry welcome page is fully widgetized,so it can be removed by simply removing the two gadgets.
   watch demo

Adding HTML/Javascript and text gadgets

follow this step:-
1. Login to your to your Blogger account.

2. Back up your template.

3. At Dashboard go to Design > Edit HTML.

4. Make sure the Expand Widget Templates check box on top right of the HTML 
   window is unticked.

5. Find this code in your template HTML: 

  <body> -if you are using Layout templates, or 

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

   -if you are using Template Designer’s template. 

6. Copy the code below and paste it immediately after the code in step 5:

<!-- Welcome page Start -->
<div id='welcome-wrapper'>
<b:section class='welcome' id='welcome' showaddelement='no'>
<b:widget id='Text99' locked='false' title='' type='Text'/>
<b:widget id='HTML99' locked='false' title='' type='HTML'/>
</b:section> </div>
<!-- Welcome page End -->

Adding contents to the gadgets

1. Go to Design > Page Elements. You should see the newly added widgets     above the header. 

2. Click Edit on the Text gadget and enter your welcome message or greeting.
    Remember this entry page adds an extra step before your readers could reach
    your blog content. So make it short and worth their wile reading it. 

3. Then proceed with the HTML/Javascript gadget  (HTML99). Add the code
    below in the content  box:

Configuring the welcome page

<!-- Welcome page Start (c) 2014 99trickzone. Original code by Please do not remove this credit and the “Get this widget” link at the bottom of the widget.

<!-- HTML part --><div id="ch1"><script type="text/javascript">( function() {
  if (window.CHITIKA === undefined) { window.CHITIKA = { 'units':[] };};
  var unit = {"calltype":"async[2]","publisher":"hitarth88","width":468,
"height":60,"sid":"Chitika Default"};
  var placement_id = window.CHITIKA.units.length;
  document.write('<div id="chitikaAdBlock-' + placement_id + '"></div>');}());
</script><br /><script async="" src="//" type="text/javascript"></script></div><div style="padding-top: 15px;"><a id="EPEntryButton" onclick="document.getElementById(&quot;HTML99&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text99&quot;).style.display=&quot;none&quot;">ENTER</a></div><br /><div id="cc"><a href="" rel="license"><img alt="Creative Commons License" src="" style="border-width: 0;"/></a></div><div id="EPGrab"><a href="" target="_blank">Get this widget</a></div><br /><div id="EPDarkLayer"></div><br /><!-- CSS part --><br /><style>
#welcome-wrapper{width:55%;margin:0 auto;height:0px;text-align:center;}

/* welcome message widget */

#Text99, #ch1, #EPEntryButton, #EPGrab, #cc {position:relative;z-index:510;top:100px;}

#Text99 {background: url(" ") #fff; border:solid 10px orange;color:#222; display:none; padding:15px;}

#HTML99 {z-index:499;display:none;}

/* DarkLayer div */

#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;/*bs-aewp*/z-index:500;position:fixed;}

/* Entry button */

#EPEntryButton {background-color:lawngreen;border:solid 2px #fff;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}

#EPGrab {color:white;padding-top:10px;}

#cc {background: url("")style="border-width: 0;"}

#ch1 {background: url("")style="border-width: 0;"}

</style><br /><!--[if IE 6]>


#EPDarkLayer {position:absolute;}


<![endif]--><br /><!-- Javascript part --><br /><script type="text/javascript">

YourBlogUrl=""; //enter your blog url here; //check come from where




if (fromInternal == -1)

{ //if visitor comes from external page

getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width
getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height
getHTML99.display="block"; //show DarkLayer
getText99.display="block"; //show message}

{ //if visitor comes from internal page
getHTML99.display="none"; //hide HTML gadget
getText99.display="none"; //hide message}
 </script><br /><!-- Welcome page End -->


1.  When editing code in a HTML/Javascript gadget, never click the Rich Text 
     link. Doing so will add forced line breaks <br/> in your code, thus ruining it.

2. YourBlogUrl –this is your blog url, replace  
    (in code line 27) with your own blog url.

3. only change CODE LINE 9(width), 12(text background-welcome wallpaper),
     27(your blog url)  in  green colour.


Post a Comment