
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!
No comments Post Yours!
Post a Comment