Create a Fixed Social Media Sidebar Widget Using HTML & CSS

Create a Fixed Social Media Sidebar Widget Using HTML & CSS

Social media sharing is a crucial aspect of modern websites. Adding a Fixed Social Media Sidebar Widget enhances user experience and increases content reach by encouraging visitors to share your content on their favourite platforms. In this guide, I’ll walk you through creating a visually engaging and responsive Fixed Social Media Sidebar Widget using HTML and CSS.

Why Use a Fixed Social Media Sidebar Widget?

A Fixed Social Media Sidebar Widget is an excellent way to keep social sharing buttons accessible to users as they scroll through your site. This consistent visibility improves engagement and encourages users to share your content without interrupting their browsing experience.

Some of the advantages include:

  1. Improved User Engagement: Users can easily share content without searching for buttons.
  2. Enhanced Visual Appeal: A well-designed widget adds a professional look to your site.
  3. Increased Traffic: Sharing buttons encourage organic traffic from social platforms.

Key Features of the Fixed Social Media Sidebar Widget

This widget includes the following features:

  • Fixed position on the screen, visible at all times.
  • Social media icons styled with smooth hover effects.
  • Design optimized for seamless viewing across all screen sizes.

How Fixed Social Media Sidebar Widget Works

This Fixed Social Media Sidebar Widget uses pure HTML and CSS for its functionality and appearance. The widget consists of:

  • HTML for the structure, including anchor links and icons.


<!DOCTYPE html>


<!-- Created By abhikesh.com -->


<html lang="en" dir="ltr">


<head>


  <meta charset="utf-8">


  <title>Floating Icons on Left Border</title>


  <link rel="stylesheet" href="style.css">


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>


<body>


  <nav>


    <ul>


      <li><a href="#"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>


      <li><a href="#"><i class="fab fa-twitter"></i><span>Twitter</span></a></li>


      <li><a href="#"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>


      <li><a href="#"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a></li>


      <li><a href="#"><i class="fab fa-github"></i><span>Github</span></a></li>


      <li><a href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a></li>


    </ul>


  </nav>


</body>


</html>
  • CSS for styling, animations, and responsiveness.


  <style>


    @import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');


    * {


      margin: 0;


      padding: 0;


      list-style: none;


      text-decoration: none;


      box-sizing: border-box;


    }


    body {


      font-family: 'Montserrat', sans-serif;


      background: url(bg.jpeg);


      background-position: center;


      background-size: cover;


      height: 100vh;


    }


    nav {


      position: fixed;


      width: 70px;


      margin-top: 150px;


      transition: all 0.3s linear;


      box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .4);


    }


    nav li {


      height: 60px;


      position: relative;


    }


    nav li a {


      color: white;


      display: block;


      height: 100%;


      width: 100%;


      line-height: 60px;


      padding-left: 25%;


      border-bottom: 1px solid rgba(0, 0, 0, .4);


      transition: all .3s linear;


    }


    nav li:nth-child(1) a {


      background: #4267B2;


    }


    nav li:nth-child(2) a {


      background: #1DA1F2;


    }


    nav li:nth-child(3) a {


      background: #E1306C;


    }


    nav li:nth-child(4) a {


      background: #2867B2;


    }


    nav li:nth-child(5) a {


      background: #333;


    }


    nav li:nth-child(6) a {


      background: #ff0000;


    }


    nav li a i {


      position: absolute;


      top: 17px;


      left: 20px;


      font-size: 27px;


    }


    ul li a span {


      display: none;


      font-weight: bold;


      letter-spacing: 1px;


      text-transform: uppercase;


    }


    a:hover {


      z-index: 1;


      width: 200px;


      border-bottom: 1px solid rgba(0, 0, 0, .5);


      box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);


    }


    ul li:hover a span {


      padding-left: 30%;


      display: block;


    }


  </style>

No JavaScript is required, making the widget lightweight and fast.

Steps to Create the Widget

Step 1: Set Up the HTML File

Start by creating an index.html file. This file will include the structure of your widget with social media icons placed inside tags.

Step 2: Style the Widget with CSS

Create a style.css file to design the widget. Use CSS properties like position: fixed to keep the sidebar in place and hover effects to enhance user interaction.

Customizing the Design

Feel free to experiment with colours, fonts, and icon sizes to match your website’s theme. Add tooltips or modify the hover effects for a more interactive experience.

Tips for Customization:

  1. Colour Scheme: Use colours that align with your brand identity.
  2. Icons: Ensure you use high-quality, recognizable icons for social platforms.
  3. Responsiveness: Test the widget on multiple devices for compatibility.
SEO Benefits of Social Sharing Widgets

Integrating a Fixed Social Media Sidebar Widget has direct and indirect benefits for your site’s SEO:

  • Improved User Experience: Better UX can lead to lower bounce rates.
  • Increased Social Signals: Social shares contribute to traffic and may indirectly influence search engine rankings.
  • Content Visibility: Shared content gains exposure on social platforms, driving more traffic.
Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also

  1. Glassmorphism Login Form in HTML and CSS
    Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
  2. Toggle Button using HTML, CSS, and JavaScript
    Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
  3. Responsive Cards in HTML and CSS
    Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
  4. Build a Google Gemini Chatbot Using HTML, CSS, and JS
    Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.

Download the Source Code

Ready to implement this feature? Download the complete source code for the Fixed Social Media Sidebar Widget by clicking the button below.

Following this guide, you can create a professional and functional Fixed Social Media Sidebar Widget that enhances user experience and website performance. Happy coding! 🎉

Abhikesh Kumar

Total Post: 42

Hi, I am Abhikesh Kumar, a professional web designer specializing in creating visually appealing and highly functional websites for individuals. With a mix of creativity and technical know-how, I design websites that not only look beautiful but also work perfectly, all while meeting the unique needs and goals of each client. I’m skilled in WordPress, HTML, CSS, JavaScript etc. ensuring that every website I build is fully optimized, responsive, and user-friendly.

Related Article

HTML and CSS
Scroll To Top Button created with HTML and CSS for improved user navigation

HTML and CSS
Social Media Buttons with 3D Hover Effect in HTML & CSS

Leave a Reply

Your email address will not be published. Required fields are marked *