Facebook

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 a similar share button on Blogger with a really cool hover effect and 4 social media icons 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.

.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;

list-style:none;

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);


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. 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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiye-8HB1S-LPHTlB6lpTaAF3J-Q1Z5F2dl6H0-8BttkCzVqyafwFffxkuBpWm8QnYBdb2cIFeTAK4lCl9RdxuUK5eFkhmmCCgP23hcHovD8SBaS3AAHxwpqA_84Pbtvz4XdnBUZTI46HtI/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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLkE0SBTIhfXyMsrsIGm4xmRgoNA6yR1dbOCwIiHtpzqnB2X_VTQ_4TVNyaITNnksweIbAUk_I7iBXcBuC6EiQ9V9yRmjvPIQno3dni2AYDZqC8BNWEDUB0yfdfw4y4g7CihZIQRdKDkX/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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNyroz1hlXVp6iPrl-vIiVUEHGdoUNF2HQ9hbzMrq7TYhwNFofn1FISi12yTMcNZlJDfhNPi8F0jpJm3BunkDi7uzvX0mUNKFIVLRjF9zMOWCo6t1xARQyMQ5SUp1Iv-WPDM-neAamIlPg/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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgism0xjRCW3FP-V61mRCA0AoXuFgnTGU7Y9MbhrGQ_uYbWUUpJ76SGXfkXEcJiy6IKrqp_yfkzake3b9RaVxBft4eEofJLisc1ZDFwG109zgfhKESQypV-jUEQB82QcfzvsaJO24WURyCR/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 😉













Add A CSS Animated Share Button on Blogger Add A CSS Animated Share Button on Blogger Reviewed by TechCO on 7/26/2020 Rating: 5

No comments:

ads 728x90 B
Powered by Blogger.