Menu

Social Sharing and Follow Floating Widget

Social Icons On Keyboard 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!
  1. Go to your Blogger Dashboard >> Template
  2. Click Edit HTML
  3. Search for the following code (Need Help?)
  4. <head>
  5. Just above it paste the following Stylesheet link:
  6. <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Adding CSS

  1. Go to Blogger Dashboard > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for the following code ( Need Help? )
  5. </b:skin>
  6. Just above it paste the following lines:
  7. #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


  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for the following code ( Need Help? )
  5. <b:includable id='post' var='post'>
  6. Just below the above code paste the following lines:
  7. <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! :)

No comments Post Yours! Blog Comment Policy ▼
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment. To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.

PLEASE NOTE: We have Zero Tolerance to Spam. We reserve the rights to remove any comment from the Blog. Please leave comments that are respectful and useful. Comments with spamy links and solely promotional in nature will be deleted immediately upon our review.

Post a Comment