Build a Multipuspose Maker Widget

 

I was recently inspired by the idea of branding own projects with my identity. Isn’t it a cool to have small, non-intrusive widget which provides cool little info?


Some might say that there exist services like these. Yeah, I’m pretty sure there are lot for example MakerWidget, but they have some problems. When I tried them, I had 2 main concerns, first being slow load time and second being either paid or being linked to some referencing service. I believe these small tools should be open source and being a webperf geek I don’t wish these to add burden to my site’s load time.


Love this project? You can help by buying me a coffee.


Cool? Now let’s share the code with you. Simply add this code to your .css file.


/* Maker Widget by NutPanda */

.widget {
    text-decoration: none;
    left: 0;
    bottom: 0;
    color: #fff;
    position: fixed;
    z-index: 8;
    border-top-right-radius: 12px;
    padding-right: 1em;
    padding-left: 1em;
    padding-bottom: 0.25em;
    padding-top: 0.25em;
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef;
    background: #fff;
    color: #19191c;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
}

.widget:hover {
    background: #efefef !important;
}

.widget img {
    border-radius: 2em;
    width: 1.5em;
    vertical-align: middle;
}

.widget p {
    margin: 0;
    vertical-align: middle;
    display: inline;
    margin-left: 0.5em;
    font-weight: 600;
}
                

This code will make the widget appear on the bottom left of the webpage like this page. To make it bottom right simply change the .widget code.


.widget{
    ----
    right: 0;
    /* Use right instead of right */
    bottom: 0; 
    ----                      
}
                

Now that you are done with the CSS let's move to HTML. Simply add below code in your html pages, where you want to show your widget. Placing this code in <footer> is recommended.


<!-- link for destination -->
<a target="_blank" href="https://twitter.com/NutPandaDotCom" class="widget" rel="noreferrer">
   
    <!-- link for image needed to be shown -->
    <img src="https://www.gravatar.com/avatar/9b9c86a3f9d9e62757e5effbc23df3ed.jpg" alt="NutPanda">
    
    <!-- text to be displayed on widget -->
    <p>by Ankit</p>
    
</a>                 
                

This is free to use code provided to everyone under MIT license. In simple words you can use this with any credit or payment.


Loved it? or struck somewhere? I'll love to help you out. Feel free to reach via email or tweet. You can also click the widget 😉 to visit me on twitter.