Today, I will teach you how to add a floating sharing widget for blogger blogs. This floating sharing gadget contains the best social buttons like Facebook Share/Like and Twitter button. This widget has been tested to be compatible with all major browsers. Social share buttons gadget is no doubt is the best gadget that can help you to increase your blog's content sharing on social media sites like Facebook and Twitter. It bring you more and more traffic for your blog. You provide quality content and your readers don't share them because you have not added any social share widget in your blog.
That's why this widget is mostly used by many blogger. One of the best way to get more shares from your readers is to add social sharing widget below post title because place below the post title is the most viewed area by the blog readers. Today I come with anothers very popular gadget that is floating share buttons gadget for blogger (blogspot) which includes buttons of top social networking and social media sites like Facebook, Twitter and Pinterest. This gadgeted is very famous among the top bloggers because it float with the scroll bar and hence better chances to get more shares from the readers. Now please see how to add this floating social media share buttons widget into blogger (blogspot) blog.
How To add floating social media sharing button to blogger
Adding Floating Sharing Gadget:Below are somes very easy steps you have to follow to add this gadgets into your blogspot blog.
Step 1. Go to your Blogger dashboard.
Step 2. Go to Template.
Step 3. Now backup your blog template.
Step 4. Now navigate to Edit HTML >> Tick Expand Widget Template.
Step 5. Press CTRL+F and find the given below code.
<b:includable id='post' var='post'>
Step 6. Now paste the below code just after it.
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><style>.mbt_social_floating{ position:fixed; bottom:10%; margin-left:-60px; float:left; width:60px; background-color:#f7f7f7; padding: 5px 0 0px 0px; border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #ddd;z-index:9999px !important;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}.mbt_social_floating .mbt_side_social_button{ margin-bottom:5px; float:none; height:auto; width:60px;}.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ margin-left:5px;}.mbt_social_floating .st_fblike_vcount{ margin-left:5px;}.mbt_social_floating .stButton_gradient{ background:none !important; height:21px !important; padding-left:0 !important;}.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPigOhKSGo07SuI1LBlDY_hGHMMHYH1El6vcfUoLayKhngsTXtz8pmrN8QhpKdwEEjCRdHuILKYMp5W0B-CbT5ek4MsUJKB17y7v3TC_zMto7sbuLdMT7RcZYcL-Pv1Hbi3oiCYpkZxvg-/s400/gc_social_sprite.gif') no-repeat !important; height:19px !important; width:45px !important; padding:0 !important;}.st_email .chicklets{ background-position:0 -77px !important; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPigOhKSGo07SuI1LBlDY_hGHMMHYH1El6vcfUoLayKhngsTXtz8pmrN8QhpKdwEEjCRdHuILKYMp5W0B-CbT5ek4MsUJKB17y7v3TC_zMto7sbuLdMT7RcZYcL-Pv1Hbi3oiCYpkZxvg-/s400/gc_social_sprite.gif') !important;}.mbt_social_floating .st_twitter_vcount .st-twitter-counter{ background-position:0 -58px !important;}.mbt_social_floating .stButton_gradient{ border:none !important;}.mbt_social_floating .stBubble_count{ width:44px !important; font-size: 15px !important; font-weight: normal !important; padding-top:7px !important; height:23px !important; background:none !important;}.mbt_social_floating .st_twitter_vcount .stBubble_count{ color:#00a6df; background-color:#f8fbfc !important;}.st_fblike_vcount{ margin-bottom: 0px; display: block;}.st_twitter_vcount{ margin-bottom: 3px; display: block;}.st_email{ margin-bottom: 5px; margin-top: 3px; display: block;}.mbt_social_floating .stBubble{ background-position: 21px 31px !important; height:35px !important;}.mbt_social_floating .st_pinterest_vcount{ margin-left:5px;}.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{ background-position:0 -19px !important;}.mbt_social_floating .st_pinterest_vcount .stBubble_count{ color:#FF0505; background-color:#fbf8f8 !important;}.mbt_social_floating .st_pinterest_vcount .stBubble{ background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3SPCtdBiyNQ-eSUQZr5EhuimvXdNBqW2JjQSEGqLyzy8wH_JxhQ2AiL8onF0ciJeQpV8xR_eEoOERMllVUEIxAG3Z2-3BWWikoWuONwTMyIHh0joQoip30rLIwkiNUsXAFSS3hMRQzEdl/s400/bubble_arrow_pinterest.png') !important;}.st_pinterest_vcount{ margin-bottom: 0px; display: block;}</style><div class='mbt_social_floating'> <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, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script> <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>--><div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div> <span class='st_twitter_vcount' displaytext='' st_via='SEOBLOGGINGTRICK'/><span class='st_pinterest_vcount' displaytext=''/><div style='margin:0px 0 0 5px;'> <span class='st_plusone_vcount' displaytext=''/></div> <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'><a class='addthis_counter'/></div><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/><script type='text/javascript'>var addthis_config = { ui_cobrand: "MY BLOGGER TRICKS",ui_header_color: "#ffffff", ui_header_background: "#0080FF"}</script><span class='st_email' displaytext=''/><p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a rel="nofollow" href='http://www.bloggertipstricks.com/2013/03/floating-share-buttons-gadget.html' style='color:#CAC8C8;'>Widgets</a></p></div></b:if></b:if>
Click on save template button, You are done.
Customization Steps:
Replace SEOBLOGGINGTRICK with your twitter username.
By default this gadget will float on left side, if you want it to right side then change left to right from the red line in the code. You can even changes its background colors from there itself.
Note: If you feel that facebook like button is not working then add below code just after <body>
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
My Name is Zubair Alam i am From Karachi and i am Part Time Blogger also love to learn about SEO and Sharing Seo and Blogging Tips And Tricks with Other to Help them to Grow their Blogs to Next Level. 
Here Are The 51 Best Cool Gadgets That You Can Buy This Year
ReplyDelete