• Admin
  • Receive an Update




    Add A CSS Animated Share Button on Blogger




    I saw this on Paulund, a highly recommended site with a good collection of snippets, i.e., a collection of different codes that develop small utilities, all of these being applicable to web design.

    In this tutorial we will see how we can add as similar button with a really cool hover effect and four social media icons on Blogger with links to share the current page on Facebook, Twitter, Google+ and Pinterest. However, we can replace these social networks later with any other just by changing the links below.

    Demo

    Creating A CSS Animated Share Button


    Step 1. From your Blogger dashboard > go to Template > click on the Edit HTML button.

    Step 2. Click anywhere inside the code area and press the Ctrl + F keys to open the blogger search box. Type or paste the ]]></b:skin> tag and hit Enter to find it. Step 3. Just above ]]></b:skin> add this CSS:
    .share_button {
    width: 300px;
    height: 50px;
    margin: 10px auto;
    }
    .share_button ul {
    width: 50%;
    height: inherit;
    float: left;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    }
    .share_button ul h1 {
    margin-top: 9%;
    overflow: hidden;
    width: 100%;
    color: #4889F0;
    font-size: 18px;
    text-shadow:2px 2px 2px #fff;
    }
    .share_button ul li {
    position: absolute;
    height: inherit;
    width: 150px;
    margin: 0 !important;
    padding: 0 !important;
    background: #EEEEEE;
    -webkit-transition: all 600ms;
    -moz-transition: all 600ms;
    -o-transition: all 600ms;
    -ms-transition: all 600ms;
    transition: all 600ms;
    text-align: center;
    }
    .share_button ul li h2 {
    display: inline-block;
    width: 32%;
    height: 40px;
    overflow: hidden;
    margin-top: 5%;
    cursor: pointer;
    border: 0 !important;
    }
    .share_button ul:first-child li:first-child{
    text-align: right;
    }
    .share_button ul:last-child li:first-child{
    text-align: left;
    }
    .share_button ul:first-child li:last-child,
    .share_button:hover ul:first-child li:first-child {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
    }
    .share_button ul:last-child li:last-child,
    .share_button:hover ul:last-child li:first-child {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -o-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    }
    .share_button:hover ul:first-child li:last-child,
    .share_button:hover ul:last-child li:last-child {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    }

    Step 5. And now let's go ahead and insert the HTML button in the template. The most common place would be just after <div class='post-footer'> - find the second <div class='post-footer'> and paste the following code just above it:
    <div class='share_button'>

    <ul>
    <li><h1>
    Share t
    </h1></li>

    <li><h2>
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="http://2.bp.blogspot.com/-UK3OEVM0cVw/UwJfjtO-exI/AAAAAAAAGPA/CqQmlIlNJAE/s1600/Facebook.png"/></a></h2>

    <h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="http://4.bp.blogspot.com/-XyPHPVsfdz4/UwJfkJmI3JI/AAAAAAAAGPQ/QRGykJJtGow/s1600/Twitter.png"/></a></h2>
    </li>
    </ul>
    <ul>
    <li><h1>his page</h1></li>

    <li>
    <h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="http://3.bp.blogspot.com/-_YGvQ_Nrw10/UwJfjhXOGGI/AAAAAAAAGPU/tv1WNfkHdgg/s1600/Google-plus.png"/></a></h2>

    <h2>
    <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="http://4.bp.blogspot.com/-oZgH_AD169o/UwJfjl3ON0I/AAAAAAAAGPE/BLj5lWbsZyE/s1600/Pinterest.png"/></a>
    </h2>
    </li>
    </ul>

    </div>
    Note: if you want to change the icons, replace the URLs in blue.

    Step 5. Click on the Save template button and we're done! Enjoy ;)

    More Articles


    Make use of Smilleys Codes

    Quick Help!

    Having issues? Need quick fix? simply email me or call me

    Learn more

    Write For Us

    Submit a guest post and see it get published real quick

    Learn more

    Advertise Here

    Place relevant banners, links, and sponsored posts at affordable rate.

    Learn more

    Get notified on FB