Best Social Media Widget For Blogger

I will be sharing some really cool social media widget for blogger.

These social media widgets have really beautiful icons and look quite similar to those WordPress users display on their widgets.

Discover How I Earn $1,200 Monthly From Google Adsense.... And How You Can To!
Simply Confirm Your Best E-mail Address To Gain Access

Before I proceed, I want to let you understand the benefits of using a social media widget.

Benefits of Social Media Widgets

  1. Improves the relationship chain between you and your readers.
  2. Showcases your popularity on social media.
  3. Helps your website’s readers to easily connect with you.
  4. Attracts custom advertisers who are willing to pay to get their products promoted on your social media handles.
  5. Beautiful social media widgets add beauty to your blog.

The countless benefits for bloggers using social media widgets are much.

Social Media Widget For Blogger With Activation Guide

Let’s head straight to the best social media widgets for blogger.

How to add your social media links :
Just find the code <a href=”#” rel=”nofollow” , now here replace the # with your social media link, for instance, for my Facebook page it will be like <a href=”http://facebook.com/cybergeak”.

Below are the most amazing and beautiful social media widget for blogger, you can add this to HTML Widget or any section in template file.

1) Simple Elegant Social Media Icons

social media widget for blogger

COPY THE FOLLOWING CODE:

<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<br />
<div id="social-1">
    <ul class="bhero-s1-social" id="bhero-cssanime">
        <li class="bhero-s1">
            <a href="Your-Link-Here#" target="_blank"><span tooltip="Subsribe on Facebook"><img src="https://1.bp.blogspot.com/-leSBZibeu5M/WUNdh5YGaaI/AAAAAAAAPEM/w9aWDEUfVjwnMorbHd0EYuIc3wgX0wo8QCLcBGAs/s1600/facebook.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Twitter"><img src="https://3.bp.blogspot.com/-S3bv_9E4a5o/WUNdlggX6-I/AAAAAAAAPEw/2ipAApzSYCMWKIl0DsqDOYPWyWWyVSsnwCLcBGAs/s1600/twitter.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://2.bp.blogspot.com/-XzrFLmmHMDQ/WUNdiFaKbxI/AAAAAAAAPEU/dQPkhg5yC6AyZE9hrW1EecpExo4GaOo4QCLcBGAs/s320/google-plus.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://4.bp.blogspot.com/-ZXkFGtnoX00/WUNdijWzRsI/AAAAAAAAPEY/0HajV8T_XjQWD7AWT_PpEmVaET-5jGqdACLcBGAs/s1600/instagram.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Connect on Instagram"><img src="https://1.bp.blogspot.com/-i5nsxLozWAM/WUNdjnOCn3I/AAAAAAAAPEg/25E8nSqylWAIaf4CCcYRcBPKPMegR1SwQCLcBGAs/s1600/linkedin.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="
#" rel="nofollow" target="_blank"><span tooltip="Follow on Tumblr"><img src="https://1.bp.blogspot.com/-HpkZLVfvv-o/WUNdlgfywjI/AAAAAAAAPE0/3Cbfhy_AtXwRaugcolEILAYmJN8zZhzJwCLcBGAs/s1600/tumblr.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Find on Flickr"><img src="https://3.bp.blogspot.com/-WGx9AQ9LPmU/WUNdiKefccI/AAAAAAAAPEQ/cdrLAdFC2dEd8cDyo3d_3VxJkkAnjvE9gCLcBGAs/s1600/flickr.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Pinterest"><img src="https://3.bp.blogspot.com/-lKWhyuESFoY/WUNdkRVfGOI/AAAAAAAAPEo/wk9vs2hJBHwF3tqhy23Pjm93aqXwjq3iwCLcBGAs/s1600/pinterest.png" /></span></a>
        </li>
    </ul>
</div>

2) Cute Flat Social Media Icons

social media widget for blogger

COPY THE FOLLOWING CODE:

<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<div id="social-1">
    <ul class='bhero-s1-social' id='bhero-cssanime'>
        <li class='bhero-s1'>
            <a href='#' target='_blank'><span tooltip="Subsribe on Facebook"><img src="https://3.bp.blogspot.com/-v90Bvnz4vz8/WUNgFMrPeXI/AAAAAAAAPFM/foSb6BgdYQ48BbxdiXVrbqLnZDyUI1nlgCLcBGAs/s320/051-facebook.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Twitter"><img src="https://1.bp.blogspot.com/-1OzXF-K5OpA/WUNgKNd_5YI/AAAAAAAAPGY/X46T5Ac3V1Y-_5V7jPNE6cGzsosr19B5wCLcBGAs/s320/051-twitter.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Google+"><img src="https://2.bp.blogspot.com/-gr0Z__ebbWA/WUNgGBhhkbI/AAAAAAAAPFc/eLWdg_5lQiYgyoh3ZMWX0HHVIlW3wRHsQCLcBGAs/s1600/051-google-plus.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Instagram"><img src="https://2.bp.blogspot.com/-R-4rHK-mwSw/WUNgGnswGNI/AAAAAAAAPFk/1HCZz5_K9M81BylOIZJW5EDffjeXIToAgCLcBGAs/s320/051-instagram.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Connect on Instagram"><img src="https://1.bp.blogspot.com/-0hbQ9qtaPMk/WUNgHVi7uBI/AAAAAAAAPFw/RpIUFVo_1aQlDI2MblCp_p8uYXiuPGFwgCLcBGAs/s320/051-linkedin.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Tumblr"><img src="https://4.bp.blogspot.com/-uxdGeLAxwG8/WUNgJdw7A_I/AAAAAAAAPGU/JkO3jdKFWXwm4k5llUmlqJAfT_GM9qwKACLcBGAs/s320/051-tumblr.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Pinterest"><img src="https://2.bp.blogspot.com/-4dxut2dt_jA/WUNgHuQPiII/AAAAAAAAPF0/6j6Q2Du8cF8gSZuskLJdvk3TTcRRlOuwQCLcBGAs/s320/051-path.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe to RSS"><img src="https://3.bp.blogspot.com/-TTGCUMAW0U8/WUNgITj1BpI/AAAAAAAAPGA/uEIvLJXU1ys_7tff6y3Vl9VEGSlhlwtBQCLcBGAs/s320/051-rss.png" /></span></a>
        </li>

    </ul>
</div>

3) Color Line Social Media Icons

social media widget for blogger

COPY THE FOLLOWING CODE:

<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<div id="social-1">
    <ul class='bhero-s1-social' id='bhero-cssanime'>
        <li class='bhero-s1'>
            <a href='#' target='_blank'><span tooltip="Subsribe on Facebook"><img src="https://3.bp.blogspot.com/-IGNlTQAPYFY/WUNiLUwIA0I/AAAAAAAAPGs/JVd3DAy-t6UjGJWCXItC0Of686UrTcLiQCLcBGAs/s320/021-facebook.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Twitter"><img src="https://3.bp.blogspot.com/-U8Gic3xXXIU/WUNiORakl2I/AAAAAAAAPHY/YpLkfAJ8WL89TteC1OzlnRQqFMVIEbr4QCLcBGAs/s320/021-twitter.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Google+"><img src="https://4.bp.blogspot.com/-y6xjCYmaVfo/WUNiMMbTeTI/AAAAAAAAPG0/GpDjWA6B5Tc1uMQ6k9ELse-vVh3ngfuAQCLcBGAs/s320/021-google-plus.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Instagram"><img src="https://1.bp.blogspot.com/-Vr7GzDThF7E/WUNiMcKZR0I/AAAAAAAAPG8/VGDGT8FUs9Uud32wKbHttJPg5H_KImgmQCLcBGAs/s320/021-instagram.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Connect on WhatsApp"><img src="https://2.bp.blogspot.com/-6HsOUQLGyqg/WUNiOoImmNI/AAAAAAAAPHc/fUmc0a6QQIY2YPHAq6GOjZ5jyc0xCJEugCLcBGAs/s320/021-whatsapp.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Tumblr"><img src="https://4.bp.blogspot.com/-ZUFtPSWmM7w/WUNiOKMkPvI/AAAAAAAAPHU/OxGCK9Ep_ownVVwbc9IQNdvFJiJboUuWACLcBGAs/s320/021-tumblr.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe on Youtube"><img src="https://2.bp.blogspot.com/-d5qyYhcl3ro/WUNiOguBOYI/AAAAAAAAPHg/hiYOXlwcHwgcsKhEyq-3CfVonluCz8MygCLcBGAs/s320/021-youtube.png" /></span></a>
        </li>
        <li class='bhero-s1'>
            <a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe to RSS"><img src="https://4.bp.blogspot.com/-q9DAWhAAiko/WUNiM04EDvI/AAAAAAAAPHA/jp-xseTG6cIbK-yxLqAPEBnWoHWQLWFzgCLcBGAs/s320/021-rss.png" /></span></a>
        </li>

    </ul>
</div>

4) Real Social Media Icons

social media widget for blogger

COPY THE FOLLOWING CODE:

<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<br />
<div id="social-1">
    <ul class="bhero-s1-social" id="bhero-cssanime">
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://4.bp.blogspot.com/-v4tyRwEwo0w/WUOjAMlvo6I/AAAAAAAAPIU/oYeWmzJ02_g1q9TDgFlvoTne95amsd1HQCLcBGAs/s200/033-google-plus.png" /></span></a>
        </li>


        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Twitter"><img src="https://1.bp.blogspot.com/-l6v7erRZEEM/WUOi-FwoWXI/AAAAAAAAPHw/h0246d3RBrEPLMUm-5WpfyKnPMZ4a0LigCLcBGAs/s200/008-twitter.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" target="_blank"><span tooltip="Subsribe on Facebook"><img src="https://2.bp.blogspot.com/-0oizDSjz2fk/WUOjAsJNWNI/AAAAAAAAPIY/FErb5GoXYSYztsLsS61NbK-mN5yRDGA0QCLcBGAs/s200/036-facebook.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://1.bp.blogspot.com/-EgUpK6aEXBY/WUOi_0ovmXI/AAAAAAAAPIM/aVGRq6H7OyoL49JXdcNvdmKlrmpFEQDAgCLcBGAs/s200/029-instagram.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Connect on WhatsApp"><img src="https://4.bp.blogspot.com/-gKJyME6lcnk/WUOi-HNQeiI/AAAAAAAAPH0/T1wpOujWj84JV2t8B2rs8nGJKLAzUSzTQCLcBGAs/s200/005-whatsapp.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Tumblr"><img src="https://3.bp.blogspot.com/-y07UpWztmws/WUOi-rVmk-I/AAAAAAAAPH8/4eT6qhWp5hsgIDSdFaHY1ImpCTKaEwYMwCLcBGAs/s200/009-tumblr.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe on Youtube"><img src="https://2.bp.blogspot.com/-eA7WXoU1S-U/WUOi-PF_crI/AAAAAAAAPH4/dI94x1nm8sc2wsAePS98x6py8S9QW7oEwCLcBGAs/s200/001-youtube.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="#" rel="nofollow" target="_blank"><span tooltip="Connect with LinkedIn"><img src="https://4.bp.blogspot.com/-veIqXpojZBg/WUOi_qsRicI/AAAAAAAAPII/BdYKa0oUEF0YkQnNx0Jxdx6jXylWmrqkQCLcBGAs/s200/027-linkedin.png" /></span></a>
        </li>
    </ul>
</div>

5) Prism Social Media Icons

social media widget for blogger

COPY THE FOLLOWING CODE:

 

<style>
* {
    box-sizing: border-box;
}
#bhero-cssanime:hover li { opacity:0.2; }
#bhero-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#bhero-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#bhero-cssanime li:hover { opacity:1; }
#bhero-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Mobile Responsive */
@media only screen and (max-width : 900px) {
ul.bhero-s1-social {
    margin: 6% 5%;
    float: none;
    padding: 0!important;}
li.bhero-s1 {
    width: 50px;
    height: 50px;
    margin: 5px;
    list-style: none;
    display: inline-block;
}
li.bhero-s1 {
  
    width: 55px;
    height: 55px;
}
}
@media only screen and (min-width : 900px) {

li.bhero-s1 {
    list-style-type: none;
    width: 50px;
    height: 50px;
    list-style: none;
    display: inline-block;
    margin: 2px;
}
}
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 14px; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: calc(100% + 30px);
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 35px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -20px);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
</style>
<br />
<div id="social-1">
<ul class="bhero-s1-social" id="bhero-cssanime">
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Like On Facebook"><img src="https://3.bp.blogspot.com/-N4iaIYYQJPo/WUnpHL3XOQI/AAAAAAAAPJg/wr2yjB7jHuYwse4qKYalc1ReCV3sNw9VQCLcBGAs/s200/facebook.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://1.bp.blogspot.com/-1qabvZYIof4/WUnpHWJtMYI/AAAAAAAAPJk/bq4iDVtIWm8QGFb6EuoNeyz8WBMElbvlACLcBGAs/s200/google-plus.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" target="_blank"><span tooltip="Follow on Twitter"><img src="https://4.bp.blogspot.com/-0ojsrS3cXVU/WUnpIG0BoLI/AAAAAAAAPJw/vHb1HvcqKpA25DF6u3S7k5unBLQi0o7lACLcBGAs/s1600/twitter.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://3.bp.blogspot.com/-qhbBAl5m9XI/WUnpHB5YitI/AAAAAAAAPJc/08qvdaFIN6s0WFKmdw7OPH7jBJzrsQGqwCLcBGAs/s200/instagram.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect on WhatsApp"><img src="https://1.bp.blogspot.com/-R4qH70XoBQ8/WUnpIgXJfaI/AAAAAAAAPJ8/VBZUcglMcyIz39M2SqHxaOAB5AT_J_0ugCLcBGAs/s1600/whatsapp.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe on Youtube"><img src="https://2.bp.blogspot.com/-ncOY3ut362I/WUnpIYGmraI/AAAAAAAAPJ4/9NWuulvKiAwUjECKf0Jx1vd1Wv81CdYYQCLcBGAs/s1600/youtube.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect with LinkedIn"><img src="https://1.bp.blogspot.com/-oftGi2pSulg/WUnpHhJCQHI/AAAAAAAAPJo/30lSH8jigkwVh-bmhdKDPf9XU0pEFbkEQCLcBGAs/s1600/linkedin.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe to RSS"><img src="https://1.bp.blogspot.com/-ylfL7K7iZYg/WUnpH2IqWeI/AAAAAAAAPJs/PgkMMtB00Q8RBdTrUOW3CHVQ9ZgGfCY3ACLcBGAs/s1600/rss.png" /></span></a>
</li>
</ul>
</div>


Please feel free to comment if you encounter any problems while setting up any of the social media widget for blogger. Don’t forget to share this article!

Read more:

Increase Adsense Revenue

How To Make Money With Payoneer

How To Get Grammarly Premium Account For Free In 2017

11 COMMENTS

  1. I’m gonna learn to see if I can tweak it to see if I can lift that Instagram button.. Hope I am allowed sir

  2. Hi Prosperity,

    Definitely gotta have those social media widgets down cold to increase traffic and to boost your social proof.

    Nice bunch of code here.

    Whether for Blogger or WordPress, if you have no social sharing buttons you are committing blogging suicide in my eyes. I have reached out to befriend a new wave of travel bloggers over the past week. I was stunned at how many folks had no social sharing buttons at all. Insane.

    Even if you have a big email list you leave so much traffic on the table when you ignore the simple and quite easy process of just adding those social widgets to your blog.

    Thanks for sharing the key reminder Prosperity.

    Ryan

LEAVE A REPLY

Please enter your comment!
Please enter your name here