Add CSS Animation Share Button إضافة CSS الرسوم المتحركة

البحث عن

==================
]]></b:skin>==================
فوقه مباشر اضع الكود التالي
==================
.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);
} 

==================
وتقوم ببحث عن
==================
<div class='post-footer'>==================
وتضع الكود فوقه مباشر
==================
<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/AVvXsEi2Hk6NnwgrICJm5ERF0Kpi1agJqR9zcozHUbQgDDSsJAqX8YraYylVhRSLD9lIQmWSUAcBcrWfwZ1Sz7Ey7XHIONZjOYYI1-aITvhYMb_hUQBcckrFYL0QwAXbOYpxxZi4Kn6ktgZPz5S5/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/AVvXsEjhM8wprgfQFQ2bBFqP6qHG73yqmfU04l1he-dXoPxqfgcU5VMcpqzySR_psls54ZKtdNufQfnv7DKFi0dQlwBVLdK1DB4kAEAikiidg0AMFja6DrTIL-w5LvkuCUzA53BRyNLJ5vGCsath/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/AVvXsEiBuOT-a1YDMEX1G7E_desUveuWWCj_yXRVw0pIxjQZZWmY0u1E20atAggllupzH3SuzFer5guSAu3SwRbVNK-3-45CpZUrTon6V2GvOqGsjel22nk4bYai_NEPEan0e0SEXxOzqI0ZYN0v/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/AVvXsEjTg-TriYBKXLVizEQSKTsqWGj_yanwoD4pAM50ykiOzwrRwRjiRWnC5iDWLJ8DMMgth7IYUBXZV4pxovXWbvOzLxZfX9LFubblwcjIJRAKG9_DmeY8pELQlixITnu9W4ekdKa8-Je104QF/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul> 
</div>