All You Need To Know About Earning First $100 from Google Adsense Visit Post

Beautifully Customized Mashable like Subscription Widget For Blogs and Websites

Posted By : Satyendra Maurya | Last Update : 1:57 PM | Category :
Hello Everyone and welcome to TGZ, Today I am going to share a Subscription widget i.e. Mashable like subscription widget which you can use on your blogs as well as websites.One good thing about this widget is that people who are using boring feedburner widget or blogger subscription widget they can also use it because it's subscription widget is coded on feedburner i.e. it is totally a feedburner subscription widget with different look. Here is picture of the widget : 


Here is the code which you can use to show this widget in your template:

<style type="text/css">
/*<!CDATA[*/
#w2b-mashable{width:300px;margin:auto;padding:0;}
.w2b-googleplus {height: 107px;}
.w2b-facebook {background:#ffffff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-sociallinks {background-color: #eef9fd;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.w2b-sociallinks a {text-shadow: 1px 1px white;}
.w2b-sociallinks .w2b-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.w2b-sociallinks .w2b-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(http://4.bp.blogspot.com/-WpJR2Qq0Sqw/Tx_4RZNGNuI/AAAAAAAABb0/WbNVkzuBexQ/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.w2b-sociallinks .w2b-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.w2b-sociallinks .w2b-social li a:hover {text-decoration: underline;}
.w2b-sociallinks .w2b-social li.facebook {background-position: 0 -450px !important;}
.w2b-sociallinks .w2b-social li.twitter {background-position: 0 -150px !important;}
.w2b-sociallinks .w2b-social li.youtube {background-position: 0 -90px !important;}
.w2b-emailbox {background-color: #43A3E6;border: 0px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="w2b-mashable">
<div class="w2b-googleplus">
   <script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'en'};
(function(){
   var po = document.createElement("script");
   po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(po, s);
})();
/*]]>*/
   </script>
   <div class="g-plus" data-href="https://plus.google.com/103825130297081178772" data-width="300" data-height="69" data-theme="light"></div>
</div>
<div class="w2b-facebook">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Ftechnogeekzone&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="w2b-gplusone">
   <script type="text/javascript">/*<![CDATA[*/
     (function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
     })();/*]]>*/
   </script>
   <div class="g-plusone" data-size="medium" data-href="http://www.technogeekzone.com/"></div>
   <span>Recommend on Google</span>
</div>
<div class="w2b-twitter">
   <a href="https://twitter.com/technogeekzone" class="twitter-follow-button" data-show-count="true">Follow @technogeekzone</a>
   <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="w2b-sociallinks">
   <ul class="w2b-social">
<li class="facebook"><a href="https://www.facebook.com/TechnoGeekZone">Facebook</a></li>
<li class="twitter"><a href="https://twitter.com/TechnoGeekZone">Twitter</a></li>
<li class="youtube"><a href="https://www.youtube.com/user/tgzInc">Youtube</a></li>
   </ul>
</div>
<div class="w2b-emailbox">
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=technogeekzone', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
   <tr>
<td>
   <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
   <input class="submitu w2bDefault" type="submit" value="Subscribe"/>
</td>
   </tr>
</table>
<input name="uri" type="hidden" value="technogeekzone"/>
<input name="loc" type="hidden" value="en_US"/>
   </form>
</div>
    </div>

Things to be changed in the code:

300px : set according to your widget width
103825130297081178772 : change it with your google plus page id

www.technogeekzone.com  : change it with your website address

technogeekzone : change it with your twitter username

TechnoGeekZone : change it with your facebook page username

tgzInc : change it with your youtube username

technogeekzone : change it with your feedburner id or username

No comments:

Post a Comment

Although every comment is appreciated, Keep in mind that any link or keyword in the comments may be the reason for deletion of your comment. Thanks for understanding!

#Techno Geek Network

#Proudly Hosted on Blogger


DMCA.com Protection Status

©2014-2016 Techno Geek Network | Technology and Science is What You Make It! | Designed by Satyendra