How To Create A Floating Social Bar Widget

Hi Guys, as you all know that almost every application uses Social Media Widgets to engage more customers, also it helps user to directly get the latest updates. So, we can say that Social Media Widgets plays a major role in any applications. Normally we see that many applications uses social media icons in their header and footer section, which is not visible all the time.

To overcome this we will create a floating Social Media Widget bar. We can easily find many jquery plugins for these kind of social widgets. Why to use these plugins? When we can create our very own custom social media widget bar with the help of HTML and CSS, also it helps in increasing our application speed as compare to the plugins, As plugin will loads their complete libraries which can reduce our application speed. Also if we want to modify those plugins they’ll took time. So we will use our custom Social Bar.

We will start by creating the HTML structure

Now we will write some css to provide some look and feel to our widget, here I’m using very basic ones. But the same can be modified as per the requirement

        .bar {
            width: 100px;
            position: fixed;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .bar ul li {
            width: 100%;
            list-style: none;
            float: left;
            padding: 10px;
            background: #ccc;
            border-bottom: 1px solid #000;
            -webkit-transition: all ease-in 0.2s;
            -moz-transition: all ease-in 0.2s;
            -ms-transition: all ease-in 0.2s;
            transition: all ease-in 0.2s;
        }

        .bar ul li:hover {
            width: 150px;
        }  
        

By simply following the above steps we can easily create our custom social media widget. In this case the widget will appear everytime. But we can also toggle the same with the help of jquery or Javascript as per the requirement.