Design A Very Simple Follow Widget For Blogger

Follow Buttons are a great way to increase your followers and instead of using services such as AddThis, or alternatives you can design your own buttons that look much better. This simple widget will allow you to technically add an unlimited amount of social networks but before you are excited, keep in mind that it is through a link. If you look to the sidebar you should see this exact widget, and the social networks that are built in are Facebook, Twitter, and Google Plus. There is also the option to subscribe via Feedburner and it takes up minimal space.

<style>
div#advancedsocialwidget,div#advancedsocialwidget ul,div#advancedsocialwidget ul li,div#advancedsocialwidget ul li img,div#advancedsocialwidget ul li span,#advancedsocialwidget ul li a{background:none;border:none;margin:0;padding:0}
div#advancedsocialwidget{font-family:inherit;background:#fefefe url() repeat-x;width:100%;border:1px solid #ddd!important;font-size:90%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:0 0 10px!important;padding:5px 2px 18px!important}
div#advancedsocialwidget h3{font-size:inherit;text-shadow:0 1px 0 rgba(255,255,255,.5);margin:0!important;padding:2px 0 5px 10px !important}
#newsletter{text-align:center;margin:0 auto 10px!important;padding:0!important}
.newsletter input{-moz-border-radius-topleft:3px!important;-moz-border-radius-topright:0!important;-webkit-border-top-left-radius:3px!important;-webkit-border-top-right-radius:0!important;-moz-border-radius-bottomleft:3px!important;-moz-border-radius-bottomright:0!important;-webkit-border-bottom-left-radius:3px!important;-webkit-border-bottom-right-radius:0!important;-webkit-font-smoothing:antialiased;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;background:0 color-stop(.25,#FFF));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',EndColorStr='#FFFFFF');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE', EndColorStr='#FFFFFF')";border:1px solid #CCC;color:#666!important;height:18px!important;font-size:11px!important;line-height:18px!important;vertical-align:top;margin:5px 0 0!important;padding:4px!important}
.newsletter input:focus,.newsletter input:active{background:#fafafa}
.newsletter button{vertical-align:top;height:28px!important;line-height:18px!important;text-align:left;width:auto;-moz-border-radius-topright:3px!important;-moz-border-radius-topleft:0!important;-webkit-border-top-right-radius:3px!important;-webkit-border-top-left-radius:0!important;-moz-border-radius-bottomright:3px!important;-moz-border-radius-bottomleft:0!important;-webkit-border-bottom-right-radius:3px!important;-webkit-border-bottom-left-radius:0!important;background:#4b88a0;background-image:0;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;font:bold 11px Arial, Helvetica!important;color:#fff;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.2);border-color:#75a1b2 #4b88a0 #38677a;border-style:solid;border-width:1px;margin:5px 0 0!important;padding:4px!important}
.newsletter button:hover{background:#75a1b2;background-image:0;cursor:pointer}
.newsletter button:active{background:#89C9E2;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}
div#advancedsocialwidget .textwidget img{border:0}
div#advancedsocialwidget .textwidget .tfsubscribelink{text-align:center!important;position:relative;margin:5px auto!important}
div#advancedsocialwidget .textwidget .rssicon{width:21px;height:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB77qmk2lS-98C7W05atkn4Wn3IajrE4juCXMwirXmwmVMiyCg26kNgEQjCGrydjLk6UERCcUWlO_M610wG-G6N8tjpsRtvMx91MGJ32JYyhOxVVpGpUK0HaS9bCr-kcAqdR_bWJkluvC8/s1600/advsoc_widget_main_24.png) no-repeat -176px 0;margin-bottom:30px;padding:5px 20px 7px 0}
div#advancedsocialwidget .textwidget .rssicon a,div#advancedsocialwidget .textwidget .rssicon a:hover{text-decoration:none}
div#advancedsocialwidget .textwidget .socialfollow{text-align:center;width:245px;margin:10px auto}
div#advancedsocialwidget .textwidget .rsssubscribelink{display:block;text-align:center;margin:0 auto 5px;padding:0}
div#advancedsocialwidget .textwidget a.rsslink{text-decoration:none;font-weight:700!important;font-family:inherit}
div#advancedsocialwidget .textwidget a.rsslink:hover{text-decoration:underline}
div#social_icons{float:left;width:100%;background:#fff;position:relative}
div#social_icons ul{clear:left;float:left;list-style:none;position:relative;left:50%;text-align:center;margin:0!important;padding:0!important}
div#social_icons ul li{display:block;float:left;list-style:none;position:relative;right:50%;margin:0 0 0 1px !important;padding:3px 10px!important}
div#social_icons ul li span{display:block;color:#444!important;font-size:8px;border:none;padding:40px 0 2px!important}
div#social_icons ul li:first-child span{margin-left:-2px}
div#social_icons ul li:last-child span{margin-left:-10px}
div#social_icons .subscribe_delicious a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB77qmk2lS-98C7W05atkn4Wn3IajrE4juCXMwirXmwmVMiyCg26kNgEQjCGrydjLk6UERCcUWlO_M610wG-G6N8tjpsRtvMx91MGJ32JYyhOxVVpGpUK0HaS9bCr-kcAqdR_bWJkluvC8/s1600/advsoc_widget_main_24.png) no-repeat -76px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_twitter a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB77qmk2lS-98C7W05atkn4Wn3IajrE4juCXMwirXmwmVMiyCg26kNgEQjCGrydjLk6UERCcUWlO_M610wG-G6N8tjpsRtvMx91MGJ32JYyhOxVVpGpUK0HaS9bCr-kcAqdR_bWJkluvC8/s1600/advsoc_widget_main_24.png) no-repeat 0 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_stumbleupon a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB77qmk2lS-98C7W05atkn4Wn3IajrE4juCXMwirXmwmVMiyCg26kNgEQjCGrydjLk6UERCcUWlO_M610wG-G6N8tjpsRtvMx91MGJ32JYyhOxVVpGpUK0HaS9bCr-kcAqdR_bWJkluvC8/s1600/advsoc_widget_main_24.png) no-repeat -101px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_google a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB77qmk2lS-98C7W05atkn4Wn3IajrE4juCXMwirXmwmVMiyCg26kNgEQjCGrydjLk6UERCcUWlO_M610wG-G6N8tjpsRtvMx91MGJ32JYyhOxVVpGpUK0HaS9bCr-kcAqdR_bWJkluvC8/s1600/advsoc_widget_main_24.png) no-repeat -50px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_facebook a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB77qmk2lS-98C7W05atkn4Wn3IajrE4juCXMwirXmwmVMiyCg26kNgEQjCGrydjLk6UERCcUWlO_M610wG-G6N8tjpsRtvMx91MGJ32JYyhOxVVpGpUK0HaS9bCr-kcAqdR_bWJkluvC8/s1600/advsoc_widget_main_24.png) no-repeat -25px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_pinterest a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB77qmk2lS-98C7W05atkn4Wn3IajrE4juCXMwirXmwmVMiyCg26kNgEQjCGrydjLk6UERCcUWlO_M610wG-G6N8tjpsRtvMx91MGJ32JYyhOxVVpGpUK0HaS9bCr-kcAqdR_bWJkluvC8/s1600/advsoc_widget_main_24.png) no-repeat -126px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_linkedin a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB77qmk2lS-98C7W05atkn4Wn3IajrE4juCXMwirXmwmVMiyCg26kNgEQjCGrydjLk6UERCcUWlO_M610wG-G6N8tjpsRtvMx91MGJ32JYyhOxVVpGpUK0HaS9bCr-kcAqdR_bWJkluvC8/s1600/advsoc_widget_main_24.png) no-repeat -151px 0;font-family:inherit;color:inherit}
.tipsy{font-size:10px;opacity:0.8;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);padding:5px}
.tipsy-inner{background-color:#000;color:#FFF;max-width:200px;text-align:center;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px}
.tipsy-north{background-position:top center}
.tipsy-south{background-position:bottom center}
.tipsy-east{background-position:right center}
.tipsy-west{background-position:left center}
.clear{clear:both}
</style>
<center>
<div id="advancedsocialwidget" style="width:270px !important">
<h3>Subscribe for latest updates</h3>
<div class="textwidget">
<div id="newsletter">
<form action="http://feedburner.google.com/fb/a/mailverify" class="newsletter" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=thedailyexposition', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" name="uri" value="thedailyexposition" />
<input type="hidden" name="loc" value="en_US" />
<input name="email" id="newsletter-text" type="text" maxlength="100" style="width:160px !important" value="" class="" /><button type="submit" id="newsletter-button">Subscribe</button>
</form>
</div><!-- End newsletter -->
<div class="rsssubscribelink">
<a title="Subscribe to RSS Feed" href="http://feeds.feedburner.com/thedailyexposition" class="rssicon"></a> &nbsp;<a class="rsslink" href="http://feeds.feedburner.com/thedailyexposition">Subscribe to RSS Feed</a>
</div>
<div class="socialfollow">
<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="none" data-height="15" data-href="//plus.google.com/u/0/105031871521912970417" data-rel="publisher"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script> <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/thedailyexposition&amp;layout=button_count&amp;show_faces=false&amp;width=40&amp;action=like&amp;font=&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowtransparency="true"></iframe> <div class="tfsubscribelink">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1340179658.html#_=1341141886240&amp;id=twitter-widget-12&amp;lang=en&amp;screen_name=DailyExposition&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 95%; height: 20px; " title="Twitter Follow Button"></iframe>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="clear" style="margin-bottom:5px;"></div>
<center><a href="">More Ways To Follow Us +<a></a></a></center>
</div>
</div>
<div class="clear"></div>
<div class="clear" style="margin-bottom:10px;"></div>
</center>

Change everything that is highlighted in yellow to your own page. Also, the more ways to follow us can be deleted or linked to a separate page with your full options to follow you.  After you have properly configured the change I recommend running the code through a compressor this will remove the unneeded bits and will improve the load time of your page. Make sure though that the code still works and if you are experiencing issues then revert to the uncompressed version.

Compression Tool: https://htmlcompressor.com/compressor/

If certain buttons are not loading make sure you have the javascript files required by checking the Google Plus and Twitter widgets.

Have any questions ask in the comments below!