• Social share buttons for Blogger in 9 styles


    Social sharing is one of the big assets for driving traffic. The recent studies show that more than 83.5% of the population spend time online and that too on Social Media. So daily activity of a user is more on social media compared to other online activities. That is why adding social sharing buttons to blogger or any other blog platform is very important. By adding these buttons a user can easily share a post on behalf of us on different platforms. It is to be remembered that social media also plays an important role alongside SEO and Backlinking.

    social sharing buttons for blogger

    So there nothing to be wondered that at least 30% traffic to a website can be increased through Social Media. Now we shall see a different style of presenting social share buttons. I am only adding code for each style. If you know how to edit a blogger template then it will be easy to add these share buttons. If you do not know then you can ping me.


    1. Colored rectangle - share buttons with shadow

    a. Normal

    colored rectangle sharing buttons with shadow

    b. On hover

    colored rectangle on hover sharing buttons with shadow

    CODE:

    <html>
    <head>
     <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
    <style>
    .share-title{color:#010101;display:inline-block;padding-bottom:10px;font-size:13px;font-weight:700;position:relative;top:5px;text-transform:uppercase}
    .share-art{float:center;padding:0;padding-top:0;font-size:13px;font-weight:400;text-transform:capitalize}
    .share-art a{color:#fff;padding:3px 8px;margin-left:4px;border-radius:2px;display:inline-block;margin-right:0}
    .share-art a:hover{color:#fff}
    .share-art .fac-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#3b5998;
    border-width: 3px;
    border-radius: 5px;
    color:#3b5998;
    box-shadow: 2px 2px 6px 1.5px #3b5998;
    }
    .share-art .fac-art:hover
    {
    border-color:white;
    background: #3b5998;
    color:white;
    }
    .share-art .twi-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#00acee;
    border-width: 3px;
    border-radius: 5px;
    color:#00acee;
    box-shadow: 2px 2px 6px 1.5px #00acee;
    }
    .share-art .twi-art:hover
    {
    border-color:white;
    background: #00acee;
    color:white;
    }
    .share-art .goo-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#db4a39;
    border-width: 3px;
    border-radius: 5px;
    color:#db4a39;
    box-shadow: 2px 2px 6px 1.5px #db4a39;
    }
    .share-art .goo-art:hover
    {
    border-color:white;
    background: #db4a39;
    color:white;
    }
    .share-art .pin-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#CA2127;
    border-width: 3px;
    border-radius: 5px;
    color:#CA2127;
    box-shadow: 2px 2px 6px 1.5px #CA2127;
    }
    .share-art .pin-art:hover
    {
    border-color:white;
    background: #CA2127;
    color:white;
    }
    .share-art .lin-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#0077B5;
    border-width: 3px;
    border-radius: 5px;
    color:#0077B5;
    box-shadow: 2px 2px 6px 1.5px #0077B5;
    }
    .share-art .lin-art:hover
    {
    border-color:white;
    background: #0077B5;
    color:white;
    }
    </style>
    </head>
    <body>
    <div class='share-box'>
    <h3 class='share-title'>Share This:</h3>
    <div class='share-art'>
    <a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'><strong> Facebook</strong></span></a>

    <a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> <strong>Twitter</strong></span></a>

    <a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> <strong>Google+</strong></span></a>

    <a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> <strong>Pinterest</strong></span></a>

    <a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> <strong>Linkedin</strong></span></a>
    </div></div>
    </body>
    </html>

    Copy Code

    2. Colored rectangle - share buttons without shadow

    a. Normal

    colored rectangle sharing buttons without shadow

    b. On hover

    colored rectangle on hover sharing buttons without shadow

    CODE:

    <html>
    <head>
    <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
    <style>
    .share-title{color:#010101;display:inline-block;padding-bottom:10px;font-size:13px;font-weight:700;position:relative;top:5px;text-transform:uppercase}
    .share-art{float:center;padding:0;padding-top:0;font-size:13px;font-weight:400;text-transform:capitalize}
    .share-art a{color:#fff;padding:3px 8px;margin-left:4px;border-radius:2px;display:inline-block;margin-right:0}
    .share-art a:hover{color:#fff}
    .share-art .fac-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#3b5998;
    border-width: 3px;
    border-radius: 5px;
    color:#3b5998;
    }
    .share-art .fac-art:hover
    {
    border-color:white;
    background: #3b5998;
    color:white;
    }
    .share-art .twi-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#00acee;
    border-width: 3px;
    border-radius: 5px;
    color:#00acee;
    }
    .share-art .twi-art:hover
    {
    border-color:white;
    background: #00acee;
    color:white;
    }
    .share-art .goo-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#db4a39;
    border-width: 3px;
    border-radius: 5px;
    color:#db4a39;
    }
    .share-art .goo-art:hover
    {
    border-color:white;
    background: #db4a39;
    color:white;
    }
    .share-art .pin-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#CA2127;
    border-width: 3px;
    border-radius: 5px;
    color:#CA2127;
    }
    .share-art .pin-art:hover
    {
    border-color:white;
    background: #CA2127;
    color:white;
    }
    .share-art .lin-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#0077B5;
    border-width: 3px;
    border-radius: 5px;
    color:#0077B5;
    }
    .share-art .lin-art:hover
    {
    border-color:white;
    background: #0077B5;
    color:white;
    }
    </style>
    </head>
    <body>
    <div class='share-box'>
    <h3 class='share-title'>Share This:</h3>
    <div class='share-art'>
    <a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'><strong> Facebook</strong></span></a>

    <a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> <strong>Twitter</strong></span></a>

    <a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> <strong>Google+</strong></span></a>

    <a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> <strong>Pinterest</strong></span></a>

    <a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> <strong>Linkedin</strong></span></a>
    </div>
    </div>
    </body>
    </html>
    Copy Code

    3. Black and White - rectangle share buttons

    a. Normal

    black and white sharing buttons without shadow

    b. On hover

    black and white on hover sharing buttons without shadow

    CODE:

    <html>
    <head>
    <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
    <style>
    .share-title{color:#010101;display:inline-block;padding-bottom:10px;font-size:13px;font-weight:700;position:relative;top:5px;text-transform:uppercase}
    .share-art{float:center;padding:0;padding-top:0;font-size:13px;font-weight:400;text-transform:capitalize}
    .share-art a{color:#fff;padding:3px 8px;margin-left:4px;border-radius:2px;display:inline-block;margin-right:0}
    .share-art a:hover{color:#fff}
    .share-art .fac-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#000000;
    border-width: 3px;
    border-radius: 5px;
    color:#000000;
    }
    .share-art .fac-art:hover
    {
    border-color:white;
    background: #000000;
    color:white;
    }
    .share-art .twi-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#000000;
    border-width: 3px;
    border-radius: 5px;
    color:#000000;
    }
    .share-art .twi-art:hover
    {
    border-color:white;
    background: #000000;
    color:white;
    }
    .share-art .goo-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#000000;
    border-width: 3px;
    border-radius: 5px;
    color:#000000;
    }
    .share-art .goo-art:hover
    {
    border-color:white;
    background: #000000;
    color:white;
    }
    .share-art .pin-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#000000;
    border-width: 3px;
    border-radius: 5px;
    color:#000000;
    }
    .share-art .pin-art:hover
    {
    border-color:white;
    background: #000000;
    color:white;
    }
    .share-art .lin-art
    {
    background: #ffffff;
    border-style:solid;
    border-color:#000000;
    border-width: 3px;
    border-radius: 5px;
    color:#000000;
    }
    .share-art .lin-art:hover
    {
    border-color:white;
    background: #000000;
    color:white;
    }
    </style>
    </head>
    <body>
    <div class='share-box'>
    <h3 class='share-title'>Share This:</h3>
    <div class='share-art'>
    <a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'><strong> Facebook</strong></span></a>

    <a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> <strong>Twitter</strong></span></a>

    <a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> <strong>Google+</strong></span></a>

    <a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> <strong>Pinterest</strong></span></a>

    <a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> <strong>Linkedin</strong></span></a>
    </div>
    </div>
    </body>
    </html>
    Copy Code

    4. Dissolve - share buttons

    a. Normal


    dissolve social sharing buttons

    b. On hover

    dissolve on hover social sharing buttons

    CODE:

    <html>
    <head>
    <style>
    /* Buttons */
    .social-btns {
        text-align: center;
    }
    .social-btns li {
        margin: 8px;
        display: inline-block;
        vertical-align: top;
    }
    @media (min-width: 768px) {

        .social-btns li {
            margin: 15px;
        }
    }
    /* Dissolve Button */
    .social-btn-dissolve {
        width: 42px;
        height: 42px;
        text-align: center;
        color: #fff;
        line-height: 42px;
        border-radius: 50%;
        display: block;
        position: relative;
    }
    .social-btn-dissolve:hover {
        color: #fff;
    }
    .social-btn-dissolve:hover:before {
        opacity: 0;
        -webkit-transform: scale(1.35);
        transform: scale(1.35);
        -webkit-transition: all 0.5s linear;
        transition: all 0.5s linear;
    }
    .social-btn-dissolve:before {
        background: inherit;
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.75;
        border-radius: 50%;
        -webkit-transition: none;
        transition: none;
    }
    .social-btn-dissolve.twitter {
        background: #4cc4f2;
    }
    .social-btn-dissolve.facebook {
        background: #3b5998;
    }
    .social-btn-dissolve.google {
        background: #dd4b39;
    }
    .social-btn-dissolve.pinterest {
        background: #cb2027;
    }
    .social-btn-dissolve.instagram {
        background: #9b6954;
    }
    .social-btn-dissolve.tumblr {
        background: #32506d;
    }
    </style>
    </head>
    <body>
    <div class='social-btns'>
    <div class='sa-title'>
    <strong>SHARE THIS</strong>
    </div>
    <ul class="social-btns">
    <li>
    <a class="social-btn-dissolve twitter" expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-twitter"></i>
    </a>
    </li>
    <li>
    <a class="social-btn-dissolve facebook" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-facebook"></i>
    </a>
    </li>
    <li>
    <a class="social-btn-dissolve google" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-google"></i>
    </a>
    </li>
    <li>
    <a class="social-btn-dissolve pinterest" expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-pinterest-p"></i>
    </a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    Copy Code

    5. Circle Flip - share buttons

    a. Normal

    circle flip social sharing buttons

    b. On hover

    circle flip on hover social sharing buttons

    CODE:

    <html>
    <head>
    <style>
    /*Button*/
    .social-btns {
        text-align: center;
    }
    .social-btns li {
        margin: 8px;
        display: inline-block;
        vertical-align: top;
    }
    @media (min-width: 768px) {

        .social-btns li {
            margin: 15px;
        }
    }
    /*Title*/
    .sa-title
    {
    display:block;float:left;height:30px;line-height:30px;margin:8px 15px 8px 0;padding:0
    }
    .sa-title strong
    {
    font-size:16px;display:block
    }
    /*flip*/
    .social-btn-flip {
        display: inline-block;
        -webkit-perspective: 700;
        perspective: 700;
    }
    .social-btn-flip:hover .social-btn-cube {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }
    .social-btn-cube {
        width: 40px;
        height: 40px;
        position: relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: transform 0.4s ease;
        transition: transform 0.4s ease;
        -webkit-transform-origin: 20px 20px -20px;
        transform-origin: 20px 20px -20px;
    }
    .social-btn-face {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        line-height: 40px;
        text-align: center;
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }
    .social-btn-face.default {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    .social-btn-face.active {
        box-shadow: inset 40px 40px 0 rgba(0, 0, 0, 0.1);
        left: 40px;
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
    .social-btn-face.twitter {
        background: #4cc4f2;
    }
    .social-btn-face.facebook {
        background: #3b5998;
    }
    .social-btn-face.google {
        background: #dd4b39;
    }
    .social-btn-face.pinterest {
        background: #cb2027;
    }
    .social-btn-face.instagram {
        background: #9b6954;
    }
    .social-btn-face.tumblr {
        background: #32506d;
    }
    </style>
    </head>
    <body>
    <div class='social-btns'>
    <div class='sa-title'>
    <strong>SHARE THIS</strong>
    </div>
    <ul class="social-btns">
    <li>
    <a class="social-btn-flip" expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <div class="social-btn-cube">
    i class="social-btn-face default fa fa-lg fa-twitter twitter"></i>
    <i class="social-btn-face active fa fa-lg fa-twitter twitter"></i>
    </div>
    </a>
    </li>
    <li>
    <a class="social-btn-flip" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <div class="social-btn-cube">

    <i class="social-btn-face default fa fa-lg fa-facebook facebook"></i>
    <i class="social-btn-face active fa fa-lg fa-facebook facebook"></i>
    </div>
    </a>
    </li>
    <li>
    <a class="social-btn-flip" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <div class="social-btn-cube">
    <i class="social-btn-face default fa fa-lg fa-google-plus google"></i>
    <i class="social-btn-face active fa fa-lg fa-google-plus google"></i>
    </div>
    </a>
    </li>
    <li>
    <a class="social-btn-flip" expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <div class="social-btn-cube">
    <i class="social-btn-face default fa fa-lg fa-pinterest-p pinterest"></i>
    <i class="social-btn-face active fa fa-lg fa-pinterest-p pinterest"></i>
    </div>
    </a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    Copy Code

    6. Heart - share buttons

    a. Normal

    Heart social sharing buttons

    CODE:

    <html>
    <head>
    <style>
    /* Buttons */
    .social-btns {
        text-align: center;
    }
    .social-btns li {
        margin: 8px;
        display: inline-block;
        vertical-align: top;
    }
    @media (min-width: 768px) {

        .social-btns li {
            margin: 15px;
        }
    }
    /* Heart Beat Button */
    .social-btn-heart:hover .social-btn-heart-bg {
        -webkit-animation: beat 2s infinite;
        animation: beat 2s infinite;
    }
    .social-btn-heart-icon {
        font-size: 16px;
        color: #fff;
    }
    .social-btn-heart:hover .social-btn-heart-icon {
        color: #fff;
    }
    @-webkit-keyframes beat {
        0% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        20% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        40% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        60% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes beat {
        0% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        20% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        40% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        60% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    .social-btn-heart-bg.twitter {
        color: #4cc4f2;
    }
    .social-btn-heart-bg.facebook {
        color: #3b5998;
    }
    .social-btn-heart-bg.google {
        color: #dd4b39;
    }
    .social-btn-heart-bg.pinterest {
        color: #cb2027;
    }
    .social-btn-heart-bg.instagram {
        color: #9b6954;
    }
    .social-btn-heart-bg.tumblr {
        color: #32506d;
    }
    </style>
    </head>
    <body>
    <div class='social-btns'>
    <div class='sa-title'>
    <strong>SHARE THIS</strong>
    </div>
    <ul class="social-btns">
    <li>
    <a class="social-btn-heart fa-stack fa-lg" expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>

    <i class="social-btn-heart-bg fa fa-heart fa-stack-2x twitter"></i>
    <i class="social-btn-heart-icon fa fa-twitter fa-stack-1x"></i>
    </a>
    </li>
    <li>
    <a class="social-btn-heart fa-stack fa-lg" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="social-btn-heart-bg fa fa-heart fa-stack-2x facebook"></i>
    <i class="social-btn-heart-icon fa fa-facebook fa-stack-1x"></i>
    </a>
    </li>
    <li>
    <a class="social-btn-heart fa-stack fa-lg" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="social-btn-heart-bg fa fa-heart fa-stack-2x google"></i>
    <i class="social-btn-heart-icon fa fa-google fa-stack-1x"></i>
    </a></li>
    <li>
    <a class="social-btn-heart fa-stack fa-lg" expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="social-btn-heart-bg fa fa-heart fa-stack-2x pinterest"></i>
    <i class="social-btn-heart-icon fa fa-pinterest-p fa-stack-1x"></i>
    </a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    Copy Code

    7. Partitioning - share buttons

    a. Normal

    partitioning social sharing buttons

    b. On hover

    partitioning on hover social sharing buttons

    CODE:

    <html>
    <head>
    <style>
    /* Buttons */
    .social-btns {
        text-align: center;
    }
    .social-btns li {
        margin: 8px;
        display: inline-block;
        vertical-align: top;
    }
    @media (min-width: 768px) {

        .social-btns li {
            margin: 15px;
        }
    }
    /* Parting Button */
    .social-btn-part {
        width: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        display: block;
        position: relative;
    }
    .social-btn-part:after,
    .social-btn-part:before {
        content: " ";
        background: rgba(255, 255, 255, 0.3);
        width: 100%;
        position: absolute;
        left: 0;
        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }
    .social-btn-part:after {
        top: 0;
        bottom: 50%;
    }
    .social-btn-part:before {
        top: 50%;
        bottom: 0;
    }
    .social-btn-part:hover {
        color: #fff;
    }
    .social-btn-part:hover:after {
        bottom: 100%;
    }
    .social-btn-part:hover:before {
        top: 100%;
    }
    .social-btn-part.twitter {
        background: #4cc4f2;
    }
    .social-btn-part.facebook {
        background: #3b5998;
    }
    .social-btn-part.google {
        background: #dd4b39;
    }
    .social-btn-part.pinterest {
        background: #cb2027;
    }
    .social-btn-part.instagram {
        background: #9b6954;
    }
    .social-btn-part.tumblr {
        background: #32506d;
    }
    </style>
    </head>
    <body>
    <div class='social-btns'>
    <div class='sa-title'>
    <strong>SHARE THIS</strong>
    </div>
    <ul class="social-btns">
    <li>
    <a class="social-btn-part twitter" expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-lg fa-twitter"></i>
    </a>
    </li>
    <li>
    <a  class="social-btn-part facebook" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-lg fa-facebook"></i>
    </a>
    </li>
    <li>
    <a  class="social-btn-part google" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-lg fa-google"></i>
    </a>
    </li>
    <li>
    <a  class="social-btn-part pinterest" expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-lg fa-pinterest-p"></i></a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    Copy Code

    8. Box Press - share buttons

    a. Normal

    box press social sharing buttons

    b. On hover

    box press on hover social sharing buttons

    CODE:

    <html>
    <head>
    <style>
    /* Buttons */
    .social-btns {
        text-align: center;
    }
    .social-btns li {
        margin: 8px;
        display: inline-block;
        vertical-align: top;
    }
    @media (min-width: 768px) {

        .social-btns li {
            margin: 15px;
        }
    }
    /* Press Button */
    .social-btn-press {
        width: 40px;
        margin-right: 6px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        display: block;
        position: relative;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .social-btn-press:before,
    .social-btn-press:after {
        content: " ";
        position: absolute;
        -webkit-transform-origin: top;
        transform-origin: top;
    }
    .social-btn-press:after {
        background: inherit;
        width: 40px;
        height: 6px;
        box-shadow: inset 40px 6px 0 rgba(0, 0, 0, 0.4);
        bottom: -6px;
        left: 0;
        -webkit-transform: skew(45deg);
        transform: skew(45deg);
    }
    .social-btn-press:before {
        background: inherit;
        width: 6px;
        height: 40px;
        box-shadow: inset 6px 40px 0 rgba(0, 0, 0, 0.2);
        top: 3px;
        right: -6px;
        -webkit-transform: skewY(45deg);
        transform: skewY(45deg);
    }
    .social-btn-press:hover {
        top: 2px;
        left: 2px;
        color: #fff;
    }
    .social-btn-press:hover:after {
        height: 4px;
        bottom: -4px;
    }
    .social-btn-press:hover:before {
        top: 2px;
        width: 4px;
        right: -4px;
    }
    .social-btn-press.twitter {
        background: #4cc4f2;
    }
    .social-btn-press.facebook {
        background: #3b5998;
    }
    .social-btn-press.google {
        background: #dd4b39;
    }
    .social-btn-press.pinterest {
        background: #cb2027;
    }
    .social-btn-press.instagram {
        background: #9b6954;
    }
    .social-btn-press.tumblr {
        background: #32506d;
    }
    </style>
    </head>
    <body>
    <div class='social-btns'>
    <div class='sa-title'>
    <strong>SHARE THIS</strong>
    </div>
    <ul class="social-btns">
    <li>
    <a  class="social-btn-press twitter" expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-twitter"></i>
    </a>
    </li>
    <li>
    <a  class="social-btn-press facebook" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-facebook"></i>
    </a>
    </li>
    <li>
    <a  class="social-btn-press google" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-google-plus"></i>
    </a>
    </li>
    <li>
    <a  class="social-btn-press pinterest" expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class="fa fa-pinterest-p"></i>
    </a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    Copy Code

    9. Circle Roll - share buttons

    a. Normal 

    circle roll social sharing buttons

    b. On hover

    circle roll on hover social sharing buttons

    CODE:

    <html>
    <head>
    <style>
    /* Buttons */
    .social-btns {
        text-align: center;
    }
    .social-btns li {
        margin: 8px;
        display: inline-block;
        vertical-align: top;
    }
    @media (min-width: 768px) {

        .social-btns li {
            margin: 15px;
        }
    }
    /*Title*/
    .sa-title{display:block;float:left;height:30px;line-height:30px;margin:8px 15px 8px 0;padding:0}
    .sa-title strong{font-size:16px;display:block}
    /* Roll Button */
    .social-btn-roll {
        background: #fff;
        width: 40px;
        height: 40px;
        border: 1px solid #3b5998;
        border-radius: 50%;
        overflow: hidden;
        display: block;
        -webkit-transition: background 0.5s;
        transition: background 0.5s;
    }
    .social-btn-roll:hover .social-btn-roll-icons {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    .social-btn-roll:hover .social-btn-roll-icon {
        color: #fff;
    }
    .social-btn-roll-icons {
        width: 200%;
        -webkit-transition: transform 0.5s ease;
        transition: transform 0.5s ease;
    }
    .social-btn-roll-icons:after {
        content: " ";
        display: table;
        clear: both;
    }
    .social-btn-roll-icon {
        width: 50%;
        line-height: 40px;
        text-align: center;
        display: block;
        float: left;
        -webkit-transition: color 0.5s;
        transition: color 0.5s;
    }
    .social-btn-roll.twitter {
        border-color: #4cc4f2;
        color: #4cc4f2;
    }
    .social-btn-roll.twitter:hover {
        background: #4cc4f2;
    }
    .social-btn-roll.facebook {
        border-color: #3b5998;
        color: #3b5998;
    }
    .social-btn-roll.facebook:hover {
        background: #3b5998;
    }
    .social-btn-roll.google {
        border-color: #dd4b39;
        color: #dd4b39;
    }
    .social-btn-roll.google:hover {
        background: #dd4b39;
    }
    .social-btn-roll.pinterest {
        border-color: #cb2027;
        color: #cb2027;
    }
    .social-btn-roll.pinterest:hover {
        background: #cb2027;
    }
    .social-btn-roll.instagram {
        border-color: #9b6954;
        color: #9b6954;
    }
    .social-btn-roll.instagram:hover {
        background: #9b6954;
    }
    .social-btn-roll.tumblr {
        border-color: #32506d;
        color: #32506d;
    }
    .social-btn-roll.tumblr:hover {
        background: #32506d;
    }
    </style>
    </head>
    <body>
    <div class='social-btns'>
    <div class='sa-title'>
    <strong>SHARE THIS</strong>
    </div>
    <ul class="social-btns">
    <li>
    <a class="social-btn-roll twitter" expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <div class="social-btn-roll-icons">
    <i class="social-btn-roll-icon fa fa-twitter"></i>
    <i class="social-btn-roll-icon fa fa-twitter"></i>
    </div>
    </a>
    </li>
    <li>
    <a  class="social-btn-roll facebook" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <div class="social-btn-roll-icons">
    <i class="social-btn-roll-icon fa fa-facebook"></i>
    <i class="social-btn-roll-icon fa fa-facebook"></i>
    </div>
    </a>
    </li>
    <li>
    <a  class="social-btn-roll google" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <div class="social-btn-roll-icons">
    <i class="social-btn-roll-icon fa fa-google-plus"></i>
    <i class="social-btn-roll-icon fa fa-google-plus"></i>
    </div>
    </a>
    </li>
    <li>
    <a  class="social-btn-roll pinterest" expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <div class="social-btn-roll-icons">
    <i class="social-btn-roll-icon fa fa-pinterest-p"></i>
    <i class="social-btn-roll-icon fa fa-pinterest-p"></i>
    </div>
    </a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    Copy Code


    Those are few styles in social sharing buttons and there are more, I only shared a few. If you want any help you can contact me I can help in editing the HTML part of your template. I have 40+ responsive templates without footer credits. If you do not have a template, then also you can contact me. I'll share them through a different medium. Adding template to blogger brings more life to Blogger and customization is not that much touch, adding widgets and other becomes easy. Once if you can understand how to edit the HTML code then it does not take much time and you'll love to add, create and share.
  • 2 comments:

    1. Here's a link to our share buttons: https://shareaholic.com/pub...
      You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
      For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
      http://www.thesocialmediaha...
      Of course, you can customize your buttons in a variety of ways in your Settings.
      If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.

      ReplyDelete
      Replies
      1. Thank You for your suggestion. But sharing links through comments is not good idea. Share them in my Social media. I will go through them. I know about those but I preferred my own ones.

        Delete