Add Feedburner, Follow Us and Social Sharing Buttons in One Widget

In my previous article, I posted about how to add stylish follow us buttons widget. That widget will be helpful if you want to increase followers and fans to your pages. Today I will share awesome widget to all blogger users. This is 4 in 1 widget. I am sure you haven't seen this type of widget upto now. There are several widgets available for blogger users in internet but I always share new type of widgets for you. This widget helps you to increase subscribers and followers to your social networking sites. You can easily add this widget and also you can customize this widget according to your wish. This widget is created with lot of hardwork by me topbloggingideas.

Also See : Add Related Posts Widget To Blogger

What is there in this widget :

•  Feedburner Subscription

•  Social Follow Us Buttons

•  Social Media Sharing buttons.

•  Facebook Fan Page Like Box.

How to Add this Stylish Widget in Blogger :

Step 1: Goto your Blogger Account. Then Template >> Edit HTML

Step 2: Now Search for below code.

<data:post.body/>

Step 3: Now copy the following code and paste it below  <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <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 rgbaundefined249, 215, 126, 1); -webkit-box-shadow: inset 1px 1px 10px 1px rgbaundefined249, 215, 126, 1); box-shadow: inset 1px 1px 10px 1px rgbaundefined249, 215, 126, 1); } .tbimailbox { border: 1px solid #D3D3D3; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 1px 1px rgbaundefined255, 172, 84, 0.4) inset; -webkit-box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset; box-shadow: 1px 1px 1px 1px rgbaundefined0, 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 rgbaundefined249, 215, 126, 1); box-shadow: inset 1px 1px 55px 1px rgbaundefined249, 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.openundefined&apos;http://feedburner.google.com/fb/a/mailverify?uri=BloggingMind&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='BloggingMind' /> <input name='loc' type='hidden' value='en_US' /> <input class='tbimailbox' name='email' onblur='if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if undefinedthis.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 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/BloggingMind' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9DCSuMnbuS3PWCpoHLMOftsPXOTwCPVl9nv9o_sWz8ICOxdO3qsYYgkl9wsPPz1o649JTI7BG927A2xnp29D4T0WcexEJelvfZlWYIN1Geqn2uIeetQoz80bRxrAg3YvL194IgAtVA8w/s32/facebook500.png' alt='facebook'/></a> <a href='http://twitter.com/BloggingMindCom' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJTV_yjU7Uu_MOgbjxRiFd66DAfolCfHBm-RFysgDl2ynMeRca8g3RjTx-IYK43WrXx6NY4bhDRpM_3knI941bItJoqRPFAS5lzBFs91J52mN-4wk55cufh9v3NQEm5VQtzKvKI3yIp3k/s32/twitter.png' alt='twitter'/></a> <a href='http://plus.google.com/113964985667203507430' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4YIibrN_Ax1KISM8df6sclDqW0GphpcQ-VElC95AYgTphxcl_FnZ-EKwtNotB5gW8-e9LC-VHRBlYilLop0AO_-0PnXosTJuSO6N0Lwcm2VMbSlbcYzMIo184bs4zyC_hSaYgznSBA6U/s32/googleplus-revised.png' alt='gplus'/></a> <a href='http://pinterest.com/BloggingMind' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDIZ4k3UWPfGP4vfR4HHuzJx4BUEVX49KTEtR7rWc_rPyI7wexWzJMrGJcu5XECgvpvvNdyUNgzdq7A08IzsxFT_LX5QJYPx8wWF40Ca-35l383uzV-hki3mmDartQi2PuTMNqFBS43uc/s32/pinterest.png' alt='pinterest'/></a> <a href='http://feeds.feedburner.com/BloggingMindTips' rel='nofollow' target='_blank' title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcTjNCVELh9cO701D4lMooubxD12DdZ-eMIqu5HUuutUvuSWNYoZJRMTImKnvsUDcjrogkUtlLa1op9WyL9qgJV7ZdXla0g9BEionIFyl4j0N6YRVsJQs6vjo1KTYoI04HGpz86FtsS0/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.optionsundefined{ 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-related='topbloggingidea:Get latest Blogger Widgets, Blogging Tips, Blogging Ideas, Blogger Gadgets, Free Blogger Templates, Plugins and SEO tips to Optimize Your Blogs.' data-count='horizontal' data-via='topbloggingidea' 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'> undefinedfunction undefined) { var li = document.createElementundefined'script'); li.type = 'text/javascript'; li.async = true; li.src = undefined'https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedli, s); })undefined); </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'> undefinedfunction undefined) { var po = document.createElementundefined'script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined); </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%2FBloggingMind&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:570px; height:180px;' /> </div> </div> </b:if>

Customization : 

•  Replace BloggingMind with your feedburner uri.

•  Replace highlighted Blue Links with your Links.

•  Replace BloggingMind with your Facebook username.

 Step 4: Now Save Template. Now you have added this widget successfully in your blog. If you want any help for customizing this template, comment below.

If you like this widget and my blog, Subscribe using your Email below.

See : Add Vertical Floating Social Media Sharing Buttons

Subscribe Today And Discover All Tips And Tricks !

Note : Don't forget to click the confirmation link in youe email inbox!