Add A CSS Animated Share Button on Blogger
Monday, February 17, 2014
Blog Design
social media
Widgets
Title : Add A CSS Animated Share Button on Blogger
link : Add A CSS Animated Share Button on Blogger
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.
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 {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:
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 want to change the icons, replace the URLs in 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/AVvXsEjTjnlymn2KgDFzYHcZkhDtdrACLmi37jgB-UaehaBDYGWMttLr5qHA3jIBFZHVFAJyURpQSOsqCAT0K7Pi2o1J3fun0dKEJMrcSvVdJku4sHo6kCmm9iGvaGLuN0bZl7royOK9wUr1MZ4c/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/AVvXsEiaiU27VaM1yTFmzv7e3l07B5p1uEaKYQlAr8tffVqkKpkxVbsFOpzznYph4oku_9wxxHxuTR2KKPFbT69Zyx1xbyoDYYJlqn17gPUkY_I1AkmzKjzumXXITykQm9SXvVAqM6YPba2FBe61/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/AVvXsEhOKPtHylINqCQ2qLpWhEISPgH6bibR9iBtk6TaKhozgSgftG0t6LFdyqRHzX3SwzEW_RXGi1V88b_qCbGVugs5iIs-Wvyg6iSMhVtPFmmRYHFDnSajETwwEHmmZ30vt3_d11UnujQh0SY7/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/AVvXsEgD6ZxJDW6fj2cSQQj9KbxNozFNcajr7P2tqaqkYZ-zKa_rq6Vpe2fppHZhxT3J1PRIceVQPsgzU0m5bRNw72k3dNOYF4MFsVUbA3XmDwvDceWSn1n7V87mrnR4RfNj3obs92tNB6d1PPki/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>
Step 5. Click on the "Save template" button and we're done! Enjoy ;)
Thus the article Add A CSS Animated Share Button on Blogger
That's the article Add A CSS Animated Share Button on Blogger this time, hopefully it can be of benefit to all of you. well, see you in another article post.
You are now reading the article Add A CSS Animated Share Button on Blogger with the link address https://poccoll.blogspot.com/2014/02/add-css-animated-share-button-on-blogger.html
No comments: