Add A Css Animated Percentage Push Clitoris On Blogger
I saw this on Paulund, a highly recommended site alongside a skillful collection of snippets, i.e. a collection of dissimilar codes that educate pocket-size utilities, all of these beingness applicable to spider web design.
In this tutorial, nosotros volition encounter how nosotros tin add together a like percentage push clitoris on Blogger alongside a actually cool hover resultant too iv social media icons alongside links to percentage the electrical flow page on Facebook, Twitter, Google+ too Pinterest. However, nosotros tin supercede these social networks later on alongside whatever other simply yesteryear changing the links below.
Step 2. Click anywhere within the code surface area too press the Ctrl + F keys to opened upwards the blogger search box. Type or glue the ]]></b:skin> tag too hitting Enter to detect it.
Step 3. Just inwards a higher identify ]]></b:skin> add together this CSS:
Step 5. Click on the "Save template" push clitoris too we're done! Enjoy ;)
In this tutorial, nosotros volition encounter how nosotros tin add together a like percentage push clitoris on Blogger alongside a actually cool hover resultant too iv social media icons alongside links to percentage the electrical flow page on Facebook, Twitter, Google+ too Pinterest. However, nosotros tin supercede these social networks later on alongside whatever other simply yesteryear changing the links below.
Demo:
Creating Influenza A virus subtype H5N1 CSS Animated Share Button
Step 1. From your Blogger dashboard > become to "Template" > click on the "Edit HTML" button.Step 2. Click anywhere within the code surface area too press the Ctrl + F keys to opened upwards the blogger search box. Type or glue the ]]></b:skin> tag too hitting Enter to detect it.
Step 3. Just inwards a higher identify ]]></b:skin> add together this CSS:
.share_button {Step 5. Now let's become ahead too insert the HTML push clitoris inwards the template. The about mutual identify would live simply after <div class='post-footer'> - detect the minute <div class='post-footer'> too glue the next code simply inwards a higher identify it:
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);
}
<div class='share_button'>Note: if you lot desire to modify the icons, supercede the URLs inwards blue.
<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/AVvXsEhrEiYtZT6mCi3N1q6ngr9rVCXH3_UcWeMBXNJfbK_Huzhc-W5vxxSAI5lMXNuoTOYwgWsQlrdskXtNXzn1R25W-ipe701985E1ihR5gNwBQfsaxCTh_ufSCeA-kbW6hUucGOM85iBnhp_r/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/AVvXsEi1qNTOX4zc6A17JA6PvRpWRN00jB1rNv2EUDk4xweqexe1pU1sTjxt2hi7kKaYavrqJgEGfzrHlHpBSYtg3SdLP0I3WCu6qkNNXB1DzQ8q-TU7-mV6iV8-4cVdICN02c5FUgU8s-tCukhd/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/AVvXsEgN2iFZofieAIkqGO_fbxk5q4Stov9cybx2FDX47ZwJQozI_mPof1U2sK4Vo2dMuBAHURa75PeMZN6pBr_pUJCj0IkUYlaDUUFON2Z3S91gRDCVyEhMK8vEhancvhKoHLCmPBwjvMX-mlMp/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/AVvXsEhUZpVdI5z81NCi3ij5OR9UmDyFPtP0fO9WO1LSkY629VhvREc0YxwMtzQIb7vc2UCdvRuedrVPisLbmL3Rm5kc6i_f2AhwPSFM3VK-tjwZPaOzisRulg6t-qoopmxBUF0SE3Wgsebv1qti/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>
Step 5. Click on the "Save template" push clitoris too we're done! Enjoy ;)