Add A Css Animated Portion Push On Blogger

I saw this on Paulund, a highly recommended site amongst a adept collection of snippets, i.e. a collection of dissimilar codes that prepare small-scale utilities, all of these beingness applicable to spider web design.

In this tutorial, nosotros volition come across how nosotros tin add together a like percentage push clit on Blogger amongst a actually cool hover final result too four social media icons amongst links to percentage the electrical current page on Facebook, Twitter, Google+ too Pinterest. However, nosotros tin supercede these social networks afterwards amongst whatever other simply past times changing the links below.

Demo:

Share t

his page

Creating Influenza A virus subtype H5N1 CSS Animated Share Button

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

Step 2. Click anywhere within the code expanse too press the Ctrl + F keys to opened upward the blogger search box. Type or glue the ]]></b:skin> tag too striking Enter to honour it.

Step 3. Just inwards a higher identify ]]></b:skin> add together 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. Now let's larn ahead too insert the HTML push clit inwards the template. The nearly mutual identify would live simply after <div class='post-footer'> - honour the minute <div class='post-footer'> too glue the next code simply inwards a higher identify it:

<div class='share_button'>

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

<li><h2>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqkaqSi3klkLpdXBNJpIPGtpO9EGigiOcqEszGJ-nmj1Sh2p_lNCjeAN4wp_b-W4ddOlHAH-AJdnkrvvZJXHvLHDuJMfJForTD83gMqwhtyUPIW8iWo6MJ_sztN66plzP6-QqGfYuNIVV/s1600/Facebook.png"/></a></h2>

<h2><a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbiu1aOrmfuWmnCSBuiy1DTiJ3EJUvLdiZlMdLjKAYlUa2EKjdTXMxHcZebsmQNgr_5CPTnT1UQdT005UusCVP5dpEnQrHp2IL83U-MJ5YGjls9U-F63JsJCggr6D86jraEOsds1rNsYIE/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1>his page</h1></li>

<li>
<h2><a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcCt0b1yGKvxx4JjOUf5xzShOYJXo33mCY_z2aLIzuPbE4j_qKdgOpbXLel6GaVDOHpbMt3Tg6PuE5oGBbAn36RUfua8FcdnSRnfs4dK0PrahXJSZ2t-8Hul0vXHtd9xMVe_G9ggCZxz6f/s1600/Google-plus.png"/></a></h2>

<h2>
<a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzu4j0gFTptGCXlcS4_fOTbGkWAL57MCtbXo2fn0Tjwb_Iaz2mSzJf9afew2wYxmDstPPIsl-uSTdAd_EuCPCw1l3GyLdn7-dyV4PYpJ3tKIu6T-XqzqzToUbY0WPL537pBgus9cND_CDD/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>