Elegant All In One Social Sharing Widget For Blogger

Elegant All In One Social Sharing Widget For Blogger

About The Widget

These days there are a lot of blog's being created and also a competition is emerging o getting better traffic so everyone is in a hurry of sharing and promoting their blog.The best way of promoting blog is social networking sites.Now again a time wasting task is required,of searching a good looking social sharing widget.So i will make this task easier for you.Follow the steps below for adding elegant social sharing widget to your blog.

Steps To Add It:-

• Go to layout tab of your blog

• Click on Add A Gadget wherever you want to add the widget

• Select HTML/Javascript From the list that appears

• Add the below code in content tab and leave the title empty.

<style> .Twittco { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzWGOq720hEdFaijdcFR-MZ3mBJ3gqkbGiCfpR-rTdAG-NoPeNCvIj-BDiuA-jo3M7RupLmURqZUUG-uGXsFlexACn-h1DGtJqjjHkxiv_XESKMvWvH1yJeaDPHBKfaGo5Gtozfdz2rQ/s1600/twitter_bird.png) 0 0 no-repeat; padding: 0 15px 0 20px; margin-left: 5px; height: 45px; } .Twitterocfollow { background-color: #fff; width: 294px; height: 70px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-top: 1px solid #ddd; } .iframeoftwi { margin-left: 55px; margin-top: -31px; } .Socialiconsoc { background-color: #fff; width: 294px; height: 70px; background-repeat: no-repeat; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-top: 1px solid #ddd; } .Facebookox { background-color: #fff; width: 294px; height: 40px; margin-top: -6px; background-repeat: no-repeat; border-right: 1px solid #ddd; border-left: 1px solid #ddd; } .Feedburneroc { background-color: #fff; background-repeat: no-repeat; margin-top: -19px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; width: 294px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; } #subboxs { border: 1px solid #d2d2d2; padding: 5px 26px 5px 10px; color: #838383; font-size: .7rem; height: 28px; font-family: "Rancho", cursive; outline: none; width: 50%; margin: 0 5px 0 0; } #subbuttons { background-color: #f90; border: 3px solid #f90; cursor: pointer; color: white; width: 30%; height: 38px; margin: 0; font-size: .7rem; margin-right: 4px; float: right; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #subbutton:hover { background-color: #292929; border: 3px solid #292929; } </style> <div class="Socialiconsoc"> <table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px"> <tbody><tr valign="top"> <td style="padding-top: 12px; padding-left: 12px" width="60px"> <a href="http://feeds.feedburner.com/your-feedburner-id" target="_blank" title="Subscribe via RSS"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/rss.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td> <td style="padding-top: 12px" width="60px"> <a href="http://twitter.com/username" target="_blank" title="Follow on Twitter"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td> <td style="padding-top: 12px" width="60x"> <a href="http://www.facebook.com/your-facebook-ID" target="_blank" title="Follow on Facebook"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/facebook.png" alt="Facebook" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td><link href='http://googledrive.com/host/0B52nnG4Ig6FzVHQyUWtnV2FjZ0U' /> <td style="padding-top: 12px" width="60x"> <a href="http://pinterest.com/Your-pinterest-ID" target="_blank" title="Follow on Pinterest"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td> <td style="padding-top: 12px" width="60px"> <a href="http://www.youtube.com/Your-Youtube-ID" target="_blank" title="Subscribe on YouTube"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/youtube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a> </td></tr></tbody></table> </div> <div class="google+ss"> <!-- Place this tag where you want the widget to render. --> <div class="g-person" data-width="296" data-href="//plus.google.com/Your G+ Id Code" data-layout="landscape" data-rel="author"></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/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div align="left" class="Facebookox"> <div style="padding:8px 0px 5px 10px"> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYour FB Id Code&width=284&height=35&colorscheme=light&layout=standard&action=like&show_faces=false&send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:284px; height:35px;" allowtransparency="true"></iframe> </div> </div> <div class="Twitterocfollow"> <div class="Twittco"></div> <div class="iframeoftwi"> <a href="https://twitter.com/TechnoPcArea" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @Twiiter-Page-Name</a> <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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div></div> <div class="Feedburneroc"> <div style="padding:14px 0 11px 7px"> <form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Your-feed-burner-id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input id="subboxs" name="email" onblur="if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" type="text" value="Enter your email address..." /> <input name="uri" type="hidden" value="Your-feed-burner-id" /> <input name="loc" type="hidden" value="en_US" /> <input id="subbuttons" type="submit" value="Subscribe!" /> </form></div></div>

• Replace my twitter,facebook,google+,youtube and feedburner url with your own.

Final words

This widget is amazing and contains iframe so it can affect your seo about 0.10% but no worry this will not affect your blog's loading time.I myself use this widget on my blog and it's really affective and attractive.