close
Social Media takes an important part of your online business to reach more customers. Social media buttons are very useful for every website and it helps the user to get updates from the website. Also, sticky social bar surely increases the social media followers of your website and helps to drive traffic to your website. In this tutorial, we are going to create a sticky social media buttons bar with CSS without impacting website design.
You can find many jQuery plugins for floating sidebar, but it may impact your site speed and design. To overcome this issue, we’ll provide a simple CSS code to add animated sticky social bar at the left/right side of your website. You can add this social media floating sidebar with smooth hover over animation using CSS.
In this example code, we’ll implement a social share button bar at the right side with pure CSS. In this social bar, some of the most popular social media links will be included – Facebook, Twitter, Google+, LinkedIn, YouTube, and Pinterest.
Placed the following HTML in the <body> element of the web page, and add your social profile links to the respective social icons.
<div class="sticky-container"> <ul class="sticky"> <li> <img src="images/facebook-circle.png" width="32" height="32"> <p><a href="https://www.facebook.com/codexworld" target="_blank">Like Us on<br>Facebook</a></p> </li> <li> <img src="images/twitter-circle.png" width="32" height="32"> <p><a href="https://twitter.com/codexworldblog" target="_blank">Follow Us on<br>Twitter</a></p> </li> <li> <img src="images/gplus-circle.png" width="32" height="32"> <p><a href="https://plus.google.com/codexworld" target="_blank">Follow Us on<br>Google+</a></p> </li> <li> <img src="images/linkedin-circle.png" width="32" height="32"> <p><a href="https://www.linkedin.com/company/codexworld" target="_blank">Follow Us on<br>LinkedIn</a></p> </li> <li> <img src="images/youtube-circle.png" width="32" height="32"> <p><a href="http://www.youtube.com/codexworld" target="_blank">Subscribe on<br>YouYube</a></p> </li> <li> <img src="images/pin-circle.png" width="32" height="32"> <p><a href="https://www.pinterest.com/codexworld" target="_blank">Follow Us on<br>Pinterest</a></p> </li> </ul> </div>
The following short CSS is enough to implement a Sticky Social Icons bar to your website. Pleace this CSS in the <head> section of the web page.
.sticky-container{ padding:0px; margin:0px; position:fixed; right:-130px; top:230px; width:210px; z-index: 1100; } .sticky li{ list-style-type:none; background-color:#fff; color:#efefef; height:43px; padding:0px; margin:0px 0px 1px 0px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; cursor:pointer; } .sticky li:hover{ margin-left:-115px; } .sticky li img{ float:left; margin:5px 4px; margin-right:5px; } .sticky li p{ padding-top:5px; margin:0px; line-height:16px; font-size:11px; } .sticky li p a{ text-decoration:none; color:#2C3539; } .sticky li p a:hover{ text-decoration:underline; }
Here we’ve added only some most popular social icons to the sticky social bar, you can add other social media icons or useful links based on your requirement.
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
Sticky Social Media Floating Sidebar Right Side ?
Great Work. Nice
Very useful for my website
Very Helpful
Thank you very much
Hi, how can we attribute the href not the text “follow us on facebook” but to the whole rectangle area ?
Thank you.
how to create a social image like this template is there any link please provide me?
Nice one. Help me a great deal! 5 Star rating