When it comes to social sharing there is no one widget fits all solution. Today We are going to share a floating follow and share widget with plenty of options, sharing links, Following options and email an article to your family or friend. Say by bye to all those ugly sharing widgets that destroyed your site’s appearance and dragged down your webpage speeds and start using the gorgeous Spicy Share & Follow Buttons that look great and the loading speed is extremely fast. Share and follow buttons means that, the people can join your social pages and also can share your article with the use of floating bar. So your blog gets more traffic, and your blog look will be more professional and thus credible.
Social Sharing
Empowering visitors to share is Monarch’s keystone feature. Every website, and even the different pages and areas within those websites, have their own unique sharing needs. This is why we’ve included five distinct sharing locations with individual display settings.
The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code we developed and tested all day. Follow these friendly steps:
Setup FontAwesome Into Your Blog
Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself!- Go to your Blogger Dashboard >> Template
- Click Edit HTML
- Search for the following code (Need Help?)
- Just above it paste the following Stylesheet link:
<head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Adding CSS
- Go to Blogger Dashboard > Template
- Backup your template
- Click Edit HTML
- Search for the following code ( Need Help? )
- Just above it paste the following lines:
</b:skin>
#floating_bar { background-color: #d2d2d2; border: 1px solid #b1b1b1; position: fixed; padding: 2px 0 3px 0; bottom: 20%; margin-left: -68px; float: left; z-index: 10; } .floating_bar ul { float: right; list-style: none outside none; margin: 0; padding: 0; } .floating_bar li { width: 60px; height: 1.25em; display: block; font-size: 28px; list-style: none outside none; margin: 3px 3px; } .floating_bar li a { color: #fff; margin-left: 0.80em; line-height: 1em; height: 1em; } .fa-facebook { margin-top: 5px; } .fa-twitter { margin-top: 4px; } .fa-linkedin { margin: 3px 0 0 -3px; } .fa-pinterest { margin: 4px 0 0 -3px; } .fa-envelope { margin-top: 3px; } .fa-google-plus { margin-top: 5px; } .fa-plus-square { margin-top: 4px; } .btn-facebook { background-color: #3D5B96; color: #FFFFFF; border-radius: 2px; } .btn-google { background-color: #DD3F34; width: 61px; color: #FFFFFF; border-radius: 2px; } .btn-linkedin { background-color: #1884BB; width: 61px; color: #FFFFFF; border-radius: 2px; } .btn-twitter { background-color: #3399CC; width: 60px; color: #FFFFFF; border-radius: 2px; } .btn-pinterest { background-color: #CC1E2D; width: 60px; color: #FFFFFF; border-radius: 2px; } .btn-mail { background-color: #FFC90E; width: 60px; color: #FFFFFF; border-radius: 2px; } .btn-addthis { background-color: #f8694d; width: 60px; color: #FFFFFF; border-radius: 2px; } #floating_bar { clear: both; }
Adding HTML Code
- Go to Blogger > Template
- Backup your template
- Click Edit HTML
- Search for the following code ( Need Help? )
- Just below the above code paste the following lines:
<b:includable id='post' var='post'>
<div class='floating_bar' id='floating_bar'> <ul> <li class='btn-facebook'> <a href='#' rel='nofollow' target='_blank' title='Join Us On Facebook'> <i class='fa fa-facebook'/> </a> </li> <li class='btn-twitter'> <a href='#' rel='nofollow' target='_blank' title='Follow On Twitter'> <i class='fa fa-twitter' style='margin-left: -4px;'/> </a> </li> <li class='btn-google'> <a href='#' rel='nofollow' target='_blank' title='Follow On Google+'> <i class='fa fa-google-plus' style='margin-left: -4px;'/></a> </li> <li class='btn-linkedin '> <a href='#' rel='nofollow' target='_blank' title='Follow On Linkedin'> <i class='fa fa-linkedin'/></a> </li> <li class='btn btn-pinterest'> <a href='#' rel='nofollow' target='_blank' title='Follow On Pinterest'> <i class='fa fa-pinterest' style='margin-left: -4px;'/> </a> </li> <li class='btn btn-mail'> <a href='mailto:ishtiaqahmed.sbo@gmail.com' rel='nofollow' target='_blank' title='Email To Friend'> <i class='fa fa-envelope' style='margin-left: -6px;'/> </a> </li> <li class='btn btn-addthis'><a class='addthis_button_compact'><span><i class='fa fa-plus-square' style='margin-left: -5px;'/></span></a> </li> </ul> <script src='//s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/> <p style='line-height:10px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.spicyblogging.com/2015/05/social-sharing-and-stay-connected-floating-bar.html' rel='nofollow' style='color:#333;'> Get Widget </a></p></div>
Troubleshoot
- Just replace # with your social profile links and for the email button replace the ishtiaq.sbo@gmail.com with your email address.
- if you feel to adjust widget alignment accordion to your template layout just play with highlighted CSS code in yellow color;
- Save your template and you are all done!
Need Help?
You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves and your loved ones. Peace and blessings pals! :)
on
No comments Post Yours!
Post a Comment