Add all in one social subscription box on your blog

The main aim of the social sharing widget is to promote any site or post to everyone and get increased traffic. It always creates a great opportunity to connect with the visitor. Sharing site makes a connection between blog and visitor. Social site users get summaries of every last post. If they like tropic then visit it to know about tropic. So that webmasters use social sharing widget on their site or blog. A good widget can make sure success. What will be happened if you get all social sharing tools in one widget? This widget contains almost everything like- email subscription box, flowing buttons, social share box, facebook like box. What do you think is it amazing or not? I think this widget is awesome for webmasters. See the picture of this widget on my blog.

The main aim of the social sharing widget is to promote any site or post to everyone and get increased traffic. It always creates a great opportunity to connect with the visitor. Sharing site makes a connection between blog and visitor. Social site users get summaries of every last post. If they like tropic then visit it to know about tropic. So that webmasters use social sharing widget on their site or blog. A good widget can make sure success. What will be happened if you get all social sharing tools in one widget? This widget contains almost everything like- email subscription box, flowing buttons, social share box, facebook like box. What do you think is it amazing or not? I think this widget is awesome for webmasters. See the picture of this widget on my blog.

LIVE DEMO

Features:

1. Email subscription box.
2. Follow us buttons to follow social sites
3. Social sites sharing button box.
4. Facebook like box with image.

You will get all these features in a widget just in around 10kb.

How to add it? 

I think you are so excited to add it on your blog. It will be so useful for your blog or site. Just follow the following.

          1. At first login your blog
          2. View your dashboard.
          3. Go to template tab.
               i. Create a backup with the current template.
          4. Click on edit and press proceed.
          5. Mark on Expand widget.
          6. Search <data:post.body/>
          7. Now copy the following code and paste just after the following code. 

<!--All In One Social Subscription Widget Box--> <b:if cond='data:blog.pageType == "item"'> <style> .tbibox { background: #fff; border: 1px solid #ddd; height: 360px; margin: 10px auto; padding: 10px; width: 572px; -webkit-border-radius: 10px; border-radius: 10px; } .tbisubscribe { border: 1px solid #D3D3D3; padding: 8px; width: 300px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbisubscribe:hover { -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); } .tbimailbox { border: 1px solid #D3D3D3; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset; -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; color: #666; font: 14px "trebuchet ms", sans-serif; padding: 7px 15px; width: 160px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbimailbox:hover { -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbisubmit { font: bold 12px Tahoma, Geneva, sans-serif; font-style: normal; color: #ffffff; background: #ff5714; border: 0px solid #ffffff; text-shadow: 0px -1px 1px #222222; box-shadow: 2px 2px 5px #000000; -moz-box-shadow: 2px 2px 5px #000000; -webkit-box-shadow: 2px 2px 5px #000000; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; padding: 8px 15px; cursor: pointer; margin: 0 auto; } .tbisubmit:active { cursor: pointer; position: relative; top: 2px; } .tbisubmit::-moz-focus-inner { border: 0; padding: 0; margin: 0; } .tbisharebox { border: 1px solid #D3D3D3; margin: -157px 0 0 330px; padding: 8px; width: 225px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbisharebox:hover { -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } </style> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> <div class='tbibox'> <div class='tbisubscribe'> <div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'> Get Free Updates in your Inbox</div> <div style='margin: 10px 0 0 6px;'> <form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=tipsworldbd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='tipsworldbd' /> <input name='loc' type='hidden' value='en_US' /> <input class='tbimailbox' 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='tbisubmit' title='' type='submit' value='Subscribe'/> </form> </div> <div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'> Follow us on:</div> <div style='margin: -32px 0 0 120px;'> <a href='http://www.facebook.com/tipsworldbd' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit59nI01LaV4f7XO-tBUdCLU20vDzR36oHZqynxvB_kfpknDeQ61p0mk9x6lSthZtbc2f45y2g96__I97c705PVY18xzNvSXuf9Ur7fkM01jhhC70GD7qhivViXdt03UvEubnSVrvVuQo/s32/facebook500.png' alt='facebook'/></a> <a href='TWITTER URL' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB0XNxYkPbj2MjeHqlSsEYRJjWh5IMaON_hDS-7rz9elPZ-aodc5q8pzmJZ9wAULvbcl2HzN88KXs29utuoHqek5Uy-2qJpwy7DFDXRuWYSMod63nlFo5keI0XEkW75UMX1y70B6BZar8/s32/twitter.png' alt='twitter'/></a> <a href='GOOGLE+ URL' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Xt22hUVBjrPM__PJ8jRXY-Wmt1jodYgo1LS1WlJS2V05G9I4HKItQrjcyK8mOc9vV-aQn4UNUs6OOks8u3lxSfVLg6uChOzgXzqYPv349di_1qKgruATybsru248X1GsCERWmCEQOLI/s32/googleplus-revised.png' alt='gplus'/></a> <a href='PINTEREST URL' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTbxnZO4gachAnR14vU53XCNHJvITiPhMWUIaurdJpFIuB13xTNbed8RUYlCOgOwkY-dGcYawqrvk_hVQnV75aYy4WUIAhyphenhyphenvknA6bCgSxiaWyoHLjA6LdlZ6m4RKqOeXtlhSjOkUa0jtU/s32/pinterest.png' alt='pinterest'/></a> <a href='RSS URL' rel='nofollow' target='_blank' title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt80M2X1VJNzzt2LH3gjWEWBtrx_P_cjAGtBZGgwm7TgnRe1_EUEzRAHbdHO6biDaE1Rbcs6vNnfumAJaeDjzqN15H2PUcTjrtPd9heyLwa41nDzEjAeIHzmXTBnrXdokHvd1H-NFildg/s32/rss.png' alt='rss'/></a> </div> </div> <div class='tbisharebox'> <script type='text/javascript'> var switchTo5x = true; </script> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'> stLight.options({ onhover: false }); </script> <div style='margin: 5px 5px;'> <span class='st_fblike_hcount' displaytext=''></span> </div> <div style='margin: -30px -20px 0 0; float: right;'> <a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-count='horizontal' data-lang='en'></a> <b:if cond='data:post.isFirstPost'> <script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script> </b:if> </div> <div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'> <a class='addthis_counter'></a> <script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script> </div> <div style='margin: 5px 5px;'> <su:badge layout='1'></su:badge> <script type='text/javascript'> (function () { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script> </div> </div> <div style='float: right; margin: -40px -5px 0 0;'> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'> </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='margin-top: 20px;'> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftipsworldbd&width=570&colorscheme=light& show_faces=true&stream=false&header=false&height=180' style='border:none; overflow:hidden; width:570px; height:180px;' /> </iframe></div> </div> </b:if> <!--All In One Social Subscription Widget Box-->
        8. Press Ctrl+F key from your keyboard. 
        9. At first type “feed burner url” and replace with your feed burner url. 
       10. Type 'FACEBOOK URL' and replace with your fan page url link. 
       11. Type 'TWITTER URL’ replace it with your twitter link. 
       12. Type 'GOOGLE+ URL' in the search box and replace with your Google plus page url. 
       13. Search 'PINTEREST URL' and replace with your pinterest url. 
       14. 'RSS URL' replace with your rss url link. 
      15. Now you have to change some Facebook code. 
                i. Search “facebookfunpage” and replace with your funpage’s user name. 
               ii. If you don’t have funpage username then copy your fun page url without “http://” from 
                  address bar and replace it with www.facebook.com%2Ffacebookfunpage. 
                  Just replace /=%2F.  
       16. Now save the template.