Recommend For You:
Live Demo
How To Add Social Subscription Widget to Blogger:
- Go to Blogger Dashboard » Layout
- Click On Add a Gadget
- Choose HTML/JavaScript and Paste The Below Code In It.
<style type="text/css">
/*<!CDATA[*/
#soc-mega{width:320px;margin:auto;padding:0;}
.soc-googleplus {height: 57px;width:320px;margin-top:-2px;}
.soc-facebook {background:#ffffff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.soc-gplusone {background-color: #ffffff;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.soc-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 14px;font-family: "Arial","Helvetica",sans-serif; font-weight: bold;}
.soc-twitter {background-color: #ffffff;border: 1px solid #c7dbe2;border-top: 0;}
.soc-twitter a.twitter-follow-button {display: block;}
.soc-twitter iframe {margin: 9px 11px;}
.soc-email{
background:#444444 ;
width:100%;
padding:10px 0 10px 0;
float:left;
font-size:18px;
text-align:center;
font-weight:bold;
margin:0 0 20px 0;
color:#ffffff;
}
.soc-emailsubmit{
background:#E98313;
border:1px solid #E98313;
cursor:pointer;
color:#fff;
padding:3px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:14px sans-serif;
}
.soc-emailsubmit:hover{
background:#686B6C;
border:1px solid #686B6C;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
.social-widget
{
width:318px;
border:1px solid #d7d7d7;
}
.social-widget img
{
padding:0px 15px 2px 2px;
}
/*]]>*/
</style>
<div id="soc-mega">
<div class="soc-email">
Get free tutorials via email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="BlogsDaddy" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="soc-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<div class="social-widget" align="center">
<a href='http://feeds.feedburner.com/BlogsDaddy' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzC7lepB8ajWJi23Q6eO8G1YHZOdiZju94XNW2xeO48pfEDVLXrwvf9XjVnxmWVrW22_3ltm7v03DjVAJ54mB0Gzc7ETvoPgeU58z332X8WaG8c4kZZKjbrwzlAGNkPXVktEPLggxZrWd-/s1600/rss.png" alt="Subcribe to our RSS feeds" /></a>
<a href='http://www.facebook.com/BlogsDaddy' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQEP02VeH68ImIo5Kg5tkPIdEb9YrNJ05AIvYseQZxLBI37ysWp0zzd9cVAffZFacvoR2VYBQgMsT1IvsO3grr76i0yWetJmMleQNG2TkV4Z7XCQqoiDhy0OEoz__ku7Z6WSGWjQrLfJj/s1600/fbook.png" alt="Join Us on Facebook" /></a>
<a href='https://twitter.com/BlogsDaddy' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmFyxshJ_4woWRuUX_ibTzPjGiEoVMlrkK9FXsP49uSa_iHVwfvSRC70imMDfnG73IQs8NmqqhsrDJSyVBRAhtBagHPN4rIUQkHKIk4y8APjuOzoKVr2OPmYtRnD3T5Ubg5raF4F_-85P/s1600/twit.png" alt="Follow us on Twitter" /></a>
<a href='https://plus.google.com/117100549673033253859' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ_9y1AgfeIoyfhQzFZAlL8yPkBPzbbCr4rXZFn57R5Zxw4sWFh1VBzaw1HQAE90K79qQRxSpuTbBj9K015D7oED6apyddB7h-q_5dNQDCkSIBiCHA6y97rDSu0U_NNr5RLvCOsfbtCec1/s1600/gplus.png" alt="Add to Circles" /></a>
<a href='http://www.youtube.com/user/5abiRaag' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnhXo0yj2cA7x_sKybeVA-mM1kP909v8Y_z2DxFrlVrGcZYNlyW9p6_6I3oW1z2ptPRhe9_E2K36KMlBKgjXh0qvWUCyNXcAzolElT6OC7eCphq4UYnghFj0Kk-GAgT0XJ7ft8bGzWhawv/s1600/ytube.png" alt="Watch us on Youtube"/></a>
</div>
<div class="soc-twitter">
<a href="https://twitter.com/BlogsDaddy" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @BlogsDaddy</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>
<br/>
</div>
<div class="soc-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/106217413057730068740" data-width="320" data-height="69" data-theme="light"></div>
</div>
<div class="soc-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>
<span>Recommend On Google</span> <div class="g-plusone" data-size="large" data-href="http://www.blogsdaddy.com/"></div>
</div>
<div class="soc-facebook">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBlogsDaddy&width=300&height=200&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=136993703047102" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:155px;" allowTransparency="true"></iframe>
</div>
<div class="soc-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/117100549673033253859" data-width="320" data-height="69" data-theme="light"></div>
<span style=" float:right; padding:15px; margin-right:-10px;"><a href="http://www.blogsdaddy.com/2012/07/how-to-add-social-subscribe-with-css3.html" rel='nofollow'>Grab It</a></span>
</div>
</div>
Customization
- Replace Red Color Highlighted URL's & Username With Your Own URL's & Usernames.
- Replace Green Color Highlighted Text With Your RSS Feed Username.
- All Done! Now, Press Save Button. :)
Very nice widget. Thanks for sharing.
ReplyDeleteBloggerDevelopers.Com
Hello Hammad,
DeleteThanks bro to like this widget. Make use of this widget to promote your blog. :)
Awesome widget ! Keep up the good work
ReplyDeleteFlat Style Floating Subscribe Bar For Blogger
Thanks @Tanmay for comment :)
DeleteOH MY GOD ! WHAT A BEAUTY
ReplyDeleteIts the best social widget on the net i have ever seen
Very creative One , Gagan
Regards,
Rizwan @ Blogger Kid
Thanks For Your Feedback Rizwan. Keep Visiting For More Cool Articles
DeleteHello Gagan Masoun
ReplyDeleteIts Really Nice Widget In This Widget We Will Get All Widget Its Really Awesome Widget Thank You For Sharing
Regards
Akhil Swatantra
I am so happy to see your comment here @Akhil. Stay tuned brother. :)
DeleteGod Bless..!!!