Fixed Social Media Sidebar Widget using HTML & CSS

Hello readers, Today in this blog you'll learn how to create Fixed Social Media Share Widget using HTML and CSS only. Previously I have shared a Pure CSS Responsive Cards Design with Hover Effect, now it's time to create a Fixed Social Media Share Widget using only HTML & CSS.

Fixed Sidebar Widget which commonly used by many websites or blogs. This is a kind of WordPress plugin that builds the same type of social sharing widget. You will see mostly that kind of sharing button on many websites because this design is the default form of several plugins.

As you can see in the image, this is a fixed sidebar social media share widget using only HTML & CSS. In the image, you can see there are some social icons and one background image.

All icons color by default their logo color, When you hover on it, the specific icon expands smoothly to show or informing which network it is.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Fixed Social Media Sidebar Widget).

Video Tutorial of Fixed Sidebar Social Media Share Widget



I hope you understood the basic codes and concepts of this design. As you have seen in the video this is a pure CSS program, which means only HTML & CSS used to create this Fixed Sidebar Social Media Share Widget.

If you like this program (Fixed Social Media Sidebar Widget) and want to get the source codes of this widget. You can easily get from the download link which is given below.

Fixed Social Media Share Widget [Source Codes]

As always, before sharing the codes of this program (Fixed Social Media Sidebar Widget). Let's a few talks about the main codes and tags of this program. I created a nav tag then and placed all other tags inside it. Then I created ul li tags to create a list of icons. I used font-awesome to show Facebook, Twitter, Instagram, Linkedin, Github, YouTube icon on the web page.

Now using CSS I have placed the element on left middle position and used CSS @import for getting a google font. Now put some values like the color on hover, show tooltip, etc. For fixing the placement I have used CSS position: fixed; command.

There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this. But, don't worry you'll understand all codes and programs after getting the source code of this Social Media Widget.

To create this program (Fixed Social Media Sidebar Widget). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


7 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. Great tutorial - having an issue as it is conflicting with current nav menu on page.

    ReplyDelete
  2. Hello, thx for your code / tutorial.
    but i run into a problem when using it.

    if i insert you css code, my whole homepage layout get's destroyed. is there a way to use it with div or something like this instead of nav?

    im new to html etc, so sorry if it's a dumb question :)

    best regards

    ReplyDelete
    Replies
    1. yes you can change the nav tag with any other tag but remember to change that tag name in css file too.

      Delete
    2. For further help you can contact me on Instagram.

      Delete
  3. Bro plz make video on responsive sticky navbar with multi-level dropdown and animation with animated search bar and buttons. Its my sincere request

    ReplyDelete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal

Don't forget to Subscribe to our YouTube Channel.

Subscribe To CodingNepal