18.4.12

Add A Popup Subscriber Widget For Blogger


Hiii Guys. today iam going to Show you a Simple Tutorial to add A onetime Pop up Subscriber to your Blog.So wondered what is a Pop up Subscriber Widget. As Many times you visit Professional Websites or blogs.you See a Subscriber Form At the Beginning imean a Widget Box which Appears at the Beginning when a visitor lands on a Specific Blog.the Gadget Will appear only on the First Visit. so your readers or you Won't Have to See it Everytime.




So Create a Popup Subscriber Here :.


First Login to Blogger and go to Dashboard
Then Click on  Design < EDIT HTML


Now Search for ]]></b:skin> and paste the below code just before it.
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://imgboot.com/images/cybersidh/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* box popup
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #2C2D31;
font-size: 20px;
font-weight: bold;
margin: 10px 0;
text-align: center;
}
.box-tagline {
color: #999;
font-size: 14px;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
.box-side {
width: 170px;
text-align: center;
}
.box-side.left {
padding: 0 30px 0 15px;
border-right: 1px solid #ecedf3;
}
.box-side.right {
float: right;
margin-top: -223px;
margin-right: 10px;
}
.box-icon {
width: 72px;
height: 54px;
padding: 6px 0 0 0;
margin: 0 auto;
}
.box-icon a.rss{
display: block;
width: 70px;
height: 56px;
margin: 0 auto;
}
.box-icon a{
display: block;
width: 72px;
height: 54px;
}
.box-icon a.email img,
.box-icon a.rss img {
margin: -5px 0 0;
border: 0 none;
}
.box-side h4,
.box-side h4 a {
font-size: 14px;
line-height: 14px;
color: #f26535;
font-weight: bold;
}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {
font-size: 11px;
color: #5e6066;
line-height: 18px;
margin: 0 0 20px 0;
}
a.sub {
background: url("http://imgboot.com/images/cybersidh/subscribebutton.png") no-repeat scroll 0 0 transparent;
color: #996633;
display: block;
height: 44px;
line-height: 29px;
margin: 0 auto;
text-indent: -999em;
width: 130px;
}
.box-side h4 a:hover {
color: #f26535;
}
#box-or {
background: #fff;
font-size: 12px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: -115px 0 0 208px;
position: absolute;
width: 20px;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}






Now Before Adding the Below Code make sure that you've inserted the Above Code perfectly.then go to the Below Step:.


Now go to Page Elements Tab and choose HTML/JAVASCRIPT and paste the Below Code in it.



  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">  

  2. </script>  
  3. <script src="http://sidharth12.googlecode.com/files/jquery.colorbox-min.js">  

  4. </script>  
  5. <script type="text/javascript">  
  6. jQuery(document).ready(function(){  
  7.    if (document.cookie.indexOf('visited=true') == -1) {  
  8.        var fifteenDays = 1000*60*60*24*15;  
  9.        var expires = new Date((new Date()).valueOf() + fifteenDays);  
  10.        document.cookie = "visited=true;expires=" + expires.toUTCString();  
  11.    $.colorbox({width:"480px"inline:true, href:"#subscribe"});  
  12.        }  
  13. });  
  14. </script>  
  15.       
  16.  <div style="display: none;"><div id="subscribe" style="background: #fff; padding: 10px;"><h2 class="box-title">Never Miss Any Update From Us!</h2><h2 class="box-tagline">Enrich Your Inbox.[402+ Readers]</h2><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Letsenjoy', 'popupwindow', 'scrollbars=no,width=560,height=540');return true" style="border: 1px solid #ccc; padding: 3px; text-align: center;" target="popupwindow">Enter your email address:  
  17. <input name="email" style="width: 140px;" type="text">  
  18. <input name="uri" type="hidden" value="fblatest"><input name="loc" type="hidden" value="en_US"><input type="submit" value="Subscribe">  
  19. Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | Powered By <a href="http://www.technouniversityworld.blogspot.in/">Letsenjoy</a></form><h2 class="box-tagline">Subscribe And Get Latest Updates from this Blog..</h2></div></div>






Now After that Make Small changes in it.just Change the Letsenjoy in the Second Coding Area with your Feedburner id.


Tht's it Guys Now you're Done.No your Blog looks More Professional

Never Miss Any Update From Us!

Enrich Your Inbox.[402+ Readers]

Enter your email address:


Delivered by FeedBurner | Powered By Face Blog

Subscribe us today and get Quality Articles for free.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger