All in One Social Widget-Mashable Style
To Add This Widget In Your Blogger Follow Following Steps:
- Go To Blogger Dashboard
- Than Go To Layout
- Click On Add Gadget And Select HTML/JAVA Script
- Now Copy Following Code and Paste There.
- Before Going Further Try This: 5 Social+Subscription Box in 1 Widget
Code:
<style>
.allin1-web{width: 300px; float: left;}
.allin1-web .count{color:#a32b33; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}
.allin1-web .count span.bigcount{color:#f2f2f2; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}
.allin1-web .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}
.allin1-web .subicons a{text-decoration: none; color:#333333;}
.allin1-web .subicons a:hover{text-decoration: underline; color:#333333;}
.allin1-web .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJTvbtOkUnVzxdsIas1WQr4FKgFL8kpDjtCjZQTHqcvNEgMsbWDTnhFap029me_mfDFVV13icbdymBB7PxNxu36Tu-rf6nFqwJMLe2Nka_C9EKYkeulVKJyN4eKhnl_ua3yF0SJxQ3HSrU/s1600/tvbsprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.allin1-web .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJTvbtOkUnVzxdsIas1WQr4FKgFL8kpDjtCjZQTHqcvNEgMsbWDTnhFap029me_mfDFVV13icbdymBB7PxNxu36Tu-rf6nFqwJMLe2Nka_C9EKYkeulVKJyN4eKhnl_ua3yF0SJxQ3HSrU/s1600/tvbsprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.allin1-web .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJTvbtOkUnVzxdsIas1WQr4FKgFL8kpDjtCjZQTHqcvNEgMsbWDTnhFap029me_mfDFVV13icbdymBB7PxNxu36Tu-rf6nFqwJMLe2Nka_C9EKYkeulVKJyN4eKhnl_ua3yF0SJxQ3HSrU/s1600/tvbsprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.allin1-web .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJTvbtOkUnVzxdsIas1WQr4FKgFL8kpDjtCjZQTHqcvNEgMsbWDTnhFap029me_mfDFVV13icbdymBB7PxNxu36Tu-rf6nFqwJMLe2Nka_C9EKYkeulVKJyN4eKhnl_ua3yF0SJxQ3HSrU/s1600/tvbsprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.allin1-web .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.allin1-web .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzk9ohq3LhRXpQd4NYRZDn2-_9d3HCUsOOUN7BOzxDu0bXrbaqsRgDNQy_Qj_SN2xLKS_qGVr-WVIhUxwcbqS1gVo3GgSYTOH1W1qfMnLYBDfvW2GblJE8AYfJh-im1OONEliBxZ7svcz/s1600/email-32x32.gif) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px; line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }
.TVBstyle{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDon6qimpSsVlFjLC1V96aYNNeB-9zl6VQa10yfx6xrb7IDU9gXMuqTEFZJQjaQ1HHyzhd7NqsjcR9zxhCWv-qFGHOfx5GDd6qjLVsNoIjBH7OrMIdxJCHgDm4UGWbT-L4rQJKOoMV-XGx/s1600/email_icon.png) no-repeat scroll 4px center transparent;padding:7px 15px 7px 35px;border:1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;color:#666;font-weight:bold;text-decoration:none;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}
.TVBsubmit{color:#666;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #D3D3D3;cursor: pointer;-moz-border-radius: 4px;-webkit-border-radius: 4px;-goog-ms-border-radius: 4px;border-radius: 4px;background: #fbfbfb;background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}
<!--[if IE 9]>
<style>
.allin1-web .count span.bigcount{color:#f2f2f2; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
<![endif]-->
</style>
</head>
<body>
<div class="allin1-web">
<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/allin1-web" rel="nofollow"><img src="http://feeds.feedburner.com/~fc/allin1-web?bg=f2f2f2&fg=000000&anim=1" height="26" width="88" style="border:0" alt="" /></a>
</span>
Receive Our Free Updates.</div>
<div class="subicons">
<div class="rssicon"> <a rel="nofollow" href="http://feeds.feedburner.com/allin1-web" target="_blank"> RSS</a>
</div>
<div class="googleicon"> <a href="https://plus.google.com/118189459990645513784"
data-rel="publisher" target="_blank"> G+</a>
</div>
<div class="fbicon">  <a href="https://www.facebook.com/allin1web" target="_blank" rel="nofollow">FB</a>
</div>
<div class="twittericon"> <a href="https://twitter.com/allin1web" target="_blank" rel="nofollow">Twitter</a>
</div>
</div>
<div class="FB-class">
<div style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 69px;" class="g-plus" data-href="https://plus.google.com/118189459990645513784"></div>
<script type="text/javascript">
(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>
<script type="text/javascript">
(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>
<div style="width:300px; border-bottom:1px solid #ddd; margin:3px 3px 0px 0px; padding-bottom:7px;">
<iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 266px; height: 20px;" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1362636220.html#_=1363005723766&id=twitter-widget-1&lang=en&screen_name=allin1web&show_count=true&show_screen_name=true&size=m" allowtransparency="true" frameborder="0" scrolling="no">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
</div>
<div class="emailsub">
<div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Subscribe to the free newsletter now for daily updates. (No spam, we promise).</p>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=allin1-web', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='allin1-web'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='TVBstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' type='text/' value='Enter your email'/>
<input alt='' class='TVBsubmit' title='' type='submit' value=' Join '/>
</form>
</div>
</div>
Customization.allin1-web{width: 300px; float: left;}
.allin1-web .count{color:#a32b33; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}
.allin1-web .count span.bigcount{color:#f2f2f2; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}
.allin1-web .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}
.allin1-web .subicons a{text-decoration: none; color:#333333;}
.allin1-web .subicons a:hover{text-decoration: underline; color:#333333;}
.allin1-web .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJTvbtOkUnVzxdsIas1WQr4FKgFL8kpDjtCjZQTHqcvNEgMsbWDTnhFap029me_mfDFVV13icbdymBB7PxNxu36Tu-rf6nFqwJMLe2Nka_C9EKYkeulVKJyN4eKhnl_ua3yF0SJxQ3HSrU/s1600/tvbsprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.allin1-web .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJTvbtOkUnVzxdsIas1WQr4FKgFL8kpDjtCjZQTHqcvNEgMsbWDTnhFap029me_mfDFVV13icbdymBB7PxNxu36Tu-rf6nFqwJMLe2Nka_C9EKYkeulVKJyN4eKhnl_ua3yF0SJxQ3HSrU/s1600/tvbsprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.allin1-web .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJTvbtOkUnVzxdsIas1WQr4FKgFL8kpDjtCjZQTHqcvNEgMsbWDTnhFap029me_mfDFVV13icbdymBB7PxNxu36Tu-rf6nFqwJMLe2Nka_C9EKYkeulVKJyN4eKhnl_ua3yF0SJxQ3HSrU/s1600/tvbsprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.allin1-web .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJTvbtOkUnVzxdsIas1WQr4FKgFL8kpDjtCjZQTHqcvNEgMsbWDTnhFap029me_mfDFVV13icbdymBB7PxNxu36Tu-rf6nFqwJMLe2Nka_C9EKYkeulVKJyN4eKhnl_ua3yF0SJxQ3HSrU/s1600/tvbsprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.allin1-web .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.allin1-web .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzk9ohq3LhRXpQd4NYRZDn2-_9d3HCUsOOUN7BOzxDu0bXrbaqsRgDNQy_Qj_SN2xLKS_qGVr-WVIhUxwcbqS1gVo3GgSYTOH1W1qfMnLYBDfvW2GblJE8AYfJh-im1OONEliBxZ7svcz/s1600/email-32x32.gif) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px; line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }
.TVBstyle{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDon6qimpSsVlFjLC1V96aYNNeB-9zl6VQa10yfx6xrb7IDU9gXMuqTEFZJQjaQ1HHyzhd7NqsjcR9zxhCWv-qFGHOfx5GDd6qjLVsNoIjBH7OrMIdxJCHgDm4UGWbT-L4rQJKOoMV-XGx/s1600/email_icon.png) no-repeat scroll 4px center transparent;padding:7px 15px 7px 35px;border:1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;color:#666;font-weight:bold;text-decoration:none;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}
.TVBsubmit{color:#666;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #D3D3D3;cursor: pointer;-moz-border-radius: 4px;-webkit-border-radius: 4px;-goog-ms-border-radius: 4px;border-radius: 4px;background: #fbfbfb;background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}
<!--[if IE 9]>
<style>
.allin1-web .count span.bigcount{color:#f2f2f2; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
<![endif]-->
</style>
</head>
<body>
<div class="allin1-web">
<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/allin1-web" rel="nofollow"><img src="http://feeds.feedburner.com/~fc/allin1-web?bg=f2f2f2&fg=000000&anim=1" height="26" width="88" style="border:0" alt="" /></a>
</span>
Receive Our Free Updates.</div>
<div class="subicons">
<div class="rssicon"> <a rel="nofollow" href="http://feeds.feedburner.com/allin1-web" target="_blank"> RSS</a>
</div>
<div class="googleicon"> <a href="https://plus.google.com/118189459990645513784"
data-rel="publisher" target="_blank"> G+</a>
</div>
<div class="fbicon">  <a href="https://www.facebook.com/allin1web" target="_blank" rel="nofollow">FB</a>
</div>
<div class="twittericon"> <a href="https://twitter.com/allin1web" target="_blank" rel="nofollow">Twitter</a>
</div>
</div>
<div class="FB-class">
<div style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 69px;" class="g-plus" data-href="https://plus.google.com/118189459990645513784"></div>
<script type="text/javascript">
(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>
<script type="text/javascript">
(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>
<div style="width:300px; border-bottom:1px solid #ddd; margin:3px 3px 0px 0px; padding-bottom:7px;">
<iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 266px; height: 20px;" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1362636220.html#_=1363005723766&id=twitter-widget-1&lang=en&screen_name=allin1web&show_count=true&show_screen_name=true&size=m" allowtransparency="true" frameborder="0" scrolling="no">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
</div>
<div class="emailsub">
<div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Subscribe to the free newsletter now for daily updates. (No spam, we promise).</p>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=allin1-web', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='allin1-web'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='TVBstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' type='text/' value='Enter your email'/>
<input alt='' class='TVBsubmit' title='' type='submit' value=' Join '/>
</form>
</div>
</div>
- Change All Highlighted Text with your User Name of FeedBurner.Facebook.Twitter User Name and You Google+ ID No.
No comments:
Post a Comment
Notice: Don't add "backlink". Text with Link will automatically Removed.