Saturday, 4 April 2015

Blogger Subscriber Widget CSS: Add a Pop-Up Professional Feedburner Widget in Blogger

Blogger Subscriber Widget CSS:

Add a Pop-Up Professional Feedburner Widget in Blogger

Do you want any professional widget for your blog to increase your feedburner members then you are here at good place because today we have a new fresh professional feedburner widget for your blog which can increase your members. As we all knows that the importance of looks is the first priority in the blogging and most of readers always gets ready only for that site who have a perfect professional look on their blog and then they concentrate at content of blog, the most important and perfect example is Tech and Info site Mashable.com, Mashable always try to change their template's feature and their designers always try to give a new and unique look to their site, and that because for the looks and unique features in the blog, and the result you can see it one the best tech and info blog since a very long time, I don't want to waste so much of time and just look at the today's professional content.





Add Pop-Up Widget in Your Blog

Follow below steps to add it successfully
  • Login to Blogger > Dashboard
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.

<script type="text/javascript">
/***Delay Timer Code © WidgetGenerators (www.widgetgenerators.com)***/
function wg_style_v4_popup(){document.getElementById('wg-style-v4-popup-main').style.display='block'}setTimeout('wg_style_v4_popup();',4000);
</script>
<style type="text/css">
* html #wgstylepopupdiv {
position:absolute;
}

#wgstylepopupdiv {
z-index:999;
display:block;
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKfB256BN7n7ONQm6vU_a2V7voRibCI4UxIhJsR6qhFvCsuLvC4XVl-R9waiQvqW7LVMUhIPfOyfWatp31wdBZhc0F5n_DiyPQD40h1GV9FjapEY3Dl-ChzAZkD91N6Zp9QHW-G67Fy-N/s1600/wgspir.png);
overflow-y:auto;
margin:0;
}

.wgstylepopup {
width:619px;
height:475px;
position:fixed;
top:50%;
left:50%;
margin-top:-237.5px;
margin-left:-309.5px;
}

#wgstylepopup {
overflow:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFifs2cgfiODeZ8Ti8gPQanKCLtFBAQBcgjEW98kxl2SLBlTri2q9A_4K2ynERjgvG-iitg1JRphYgbKGXbTMyi03Ouf2ZZFiF41A3MCspQHJCxrrmxAGDaSmyDpINUNCy6bOoxmlv4W3V/s1600/Prosubwg.png);
background-repeat:no-repeat;
}

form#wgstylepopup {
display:block;
margin:0;
}

form#wgstylepopup #wgfield {
position:absolute;
top:297px;
left:352px;
width:250px;
font-size:16px;
border:none;
background:transparent;
padding:10px;
}

form#wgstylepopup #wgbutton {
position:absolute;
left:352px;
top:350px;
width:249px;
height:42px;
border:none;
background:transparent;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="wg-style-v4-popup-main" style="display:none;">
<div id="wgstylepopupdiv">
<div id="wgstylepopup" class="wgstylepopup">
<center style="color:#000;cursor:pointer;float:right;margin-right:10px;margin-top:-20px;" onmouseup="document.getElementById('wgstylepopupdiv').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vQZWCQ99K_JN8s9EvlQUfBwkv8lpN_brIULTdK2m-4bj75fQ080_HepcW9niNnnrSu7sFLQW6SogJXUJhwkkTJUMJpheYuG7VQ4GDXtbhGIh4oghbx-tuqXyRsWblO0X_9Tp8-kc7Umo/s1600/closebtnwg.png"/>
</center>
<form id="wgstylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WidgetGenerators', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="WidgetGenerators" name="uri"/>
<input type="text" id="wgfield" name="email" value="Enter Your E-Mail Here..." />
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32dgootadW3ZQgScXZd9NRD6OQ5AnV9YXRvZatHZnbK8F-7g9jvutRbR9vi1WaVb73qVZAK84Te8IA1BBJscXQzWeqoW2qEonex-VWioTXb7-FtI0ImRgxquEfn1QWAQmybxypanLYPzS/s1600/wgtnn.gif" id="wgbutton" />
</form>
</div>
</div>
</div>

  • Finally Save Your Widget after some changes (below).


Make Changes....!

  • Replace it WidgetGenerators with your feedburner user name (2 times)
  • You can also adjust the loading time of this widget 4000 from here, 1000 = 1 sec (Optional)

Like Our Subscriber Link Is : http://feeds.feedburner.com/kosullaindia
 
http://feeds.feedburner.com/      (Your FeedBurner feed)


Final Words...!

I have some suggestion for you that don't try to change anything from above codes because all codes are very sensitive and in this widget we used some javascript for timing so please don't try to change anything in the coding section. Add this in your blog and have fun with pro effect on your blog :)

No comments:

Post a Comment