Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Sticky Social Media Bar using HTML and CSS
Utilizing social media helps your internet business attract more clients. Any website can benefit greatly from social media buttons, which enable users to receive updates directly from the website. Additionally, a sticky social bar helps to boost visitors to your website and grows your social media following. In this article we will discuss how to use CSS to make a sticky social media bar without affecting the look and feel of your website.
Several jQuery plugins are available for floating sidebars, however they could affect the speed and appearance of your website. We'll use CSS code to add an animated sticky social bar on the left or right side of your website in order to get around this problem. Using CSS, we can build the social media floating sidebar with a smooth hover over animation.
Example
In the following example, we are going to create a sticky social media bar on the right side using CSS. Where we are going to add popular social media like Google+, LinkedIn, and YouTube.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial-container {
position: fixed;
right: -130px;
width: 209px;
}
.tutorial li {
background-color: #E5E8E8;
color: #efefef;
height: 45px;
transition: all 0.25s ease-in-out;
cursor: pointer;
}
.tutorial li:hover {
margin-left: -120px;
}
.tutorial li img {
float: left;
margin: 4px 3px;
}
.tutorial li p {
margin: 0px;
font-size: 12px;
}
.tutorial li p a {
text-decoration: none;
color: #8E44AD;
}
.tutorial li p a:hover {
text-decoration: underline;
}
</style>
</head>
<body style="background-color:#D5F5E3">
<h2 style="font-family:verdana; text-align:center; color:#DE3163">TutorialsPoint</h2>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. <br>
<br>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.
</p>
<div class="tutorial-container">
<ul class="tutorial">
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSrNW5VdEv_P0zc9mR1ooJzvMzAFNe2USrKA&usqp=CAU" width="33" height="33">
<p>
<a href="https://www.tutorialspoint.com/index.htm" target="_blank">Visit Our <br>Site </a>
</p>
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCuio9jEqxTntTove9RPgAasVVN4f2QQHxCw&usqp=CAU" width="33" height="33">
<p>
<a href="https://www.linkedin.com/authwall?trk=bf&trkInfo=AQEkqX2eckF__gAAAX-wMwEYvrsjBVbEtWQd4pgEdVSzkL22Nik1KEpY_ECWLKDGc41z8IOZWr2Bb0fvJplT60NPBtSw87J6QCpc7wD4qQ3iU13n6xJtBxME5o05Wmpg5JPm5YY=&originalReferer=&sessionRedirect=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2Ftutorialspoint" target="_blank">Vist <br>LinkedIn Page </a>
</p>
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1oZOhTDRZfZ9IwTnZe7AGcny2DxCX1J7tTg&usqp=CAU" width="33" height="33">
<p>
<a href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg" target="_blank">Subscribe <br>YouYube Channel </a>
</p>
</li>
</ul>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of text along with a social media bar on the webpage. The sticky social media bar contains links to the site that are related to webpages on different social media sites like LinkedIn and YouTube.
19 Views
