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&send=false&layout=standard&width=280&show_faces=true&action=like&colorscheme=light&font=arial&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
