CSS Animirane Share Ikone

Neka vasi citaoci bloga podele vase postove sa prijateljima na drustvenim mrezama! U ovom tutorijalu cu objasniti kako da dodate ove CSS animirane ikone/dugmice na vas blog koji se sastoji od cetiri najpopularnijih drustvenih mreza (Facebook, Twitter, Google+ i Pinterest) sa kul efektom.

Kako da dodate CSS Animirane Ikone

• Idite na vasu Blogger kontrolnu tablu > Sablon > Izmeni HTML
• Pritisnite CTRL+F da bi aktivirali polje za pretragu i pronadjite  ]]></b:skin> tag.
• Iznad  ]]></b:skin> nalepite sledeci kod:

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

• Sledeci korak, pronadjite  <div class='post-footer'> i odmah iznad njega nalepite sledeci kod:

<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/AVvXsEgc6t6oUQelfEgXWWg41rLacuyM4W9kiR3vEvdogFE7XRmwCy2heQ6vOe22s-eU4riGbe80nS7w0-MkiAhCVvXpUoQYIQIoc1m8OAl8_HCyaNo5k1ni0HRGod9RxS7Q3ywYbw9GYi1BUsSL/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/AVvXsEhLSw5bm3X8MuaqyRmVqBzs_YZnXtdjwCKR5DUZUQAn_YNc-Lg45d2sL6sFpDyo9PTQHo06B7pgqN6GYgeAZvU3LQdb-u71HdC48t81yMH6O9nBjB4NiFouYGzblVEAs9oIU1yOEUBXMv90/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/AVvXsEgGK8bAgsv929CLhB9PBgG-szv9FI2cqkTqwnYHlOwtoX1wvlFUlbDSjpy2prAslCRI5L4IaFsMqlAd72b7d86LWGV6jLUrA_DgC4C7Xj6KZRbmMALJzvajXFp0S-UI0G1hDnuk75Z4FQse/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/AVvXsEiKx8o5fusgX0ek_Fd1XISQaVwhKv95289zRG9nVz76OLDADibaOW1-Iq3wjhTj4FmOrnTnElkkbMWqrOBrTkCvvZy-4KmfILos_JR6MBzcxLLfs5aA4pH6IGZ2Xkld3N70dY0WpW4m22Nz/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>

• Sacuvajte sablon.

To je to!