أزرار المشاركات الإجتماعية بتأثير 3D

كل الموقع لديه أزرار داخل المواضيع تخص مشاركة الموضوع على الشبكات الإجتماعية إن لم تكن تتوفر عليهم فيجب أن تضيفهم بدون تفكير على غرار التدوينة الأولى اليوم سأقدم لكم شيئ مختلف بتأثير 3D خفيفة وبتصميم Css كامل

شرح طريقة التركيب
1. من داخل القالب ابحث عن <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);
}

4. ابحث عن <div class='post-footer'> وضع الكود الأتي فوقه

* ملاحظة قد تجد الكود متكرر الأخير هو المقصود

<div class='share-box'>
<div class='share_button'>
<ul>
<li><h1>
شارك المقال 
</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/AVvXsEhGruyKC1pD3N_xtVIFgjGijNDRs4oOXUVdXSh-WZzfIp4mj4dVd7vLGTBpYBg0np1dO1CfIf3NB1-oix69x-p8dsIdpNB_SRMlhQE1jFgQIyOky_fEg6rUl3bd4wM5X7oSA0YtLgw_JzSr/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/AVvXsEhe1D3i_WojG6JqnAGEbpT5CNG8umcs2bSensDB4oD83mlbZm-_e4yFIm471bQuNXZMg7r6dgz5voUKZsZbxi7KtEpow9e4NNRJInB_aD3wwSpReKeVMVCdFHaHAXFAmYruxk_7C0VthIXi/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1></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/AVvXsEgSxq7Mw5PHCyRFWT26PVNI-b1nzgjZILX7lkj8uUpgPeCUBlA2fhVrP0yVPVoDkSmAA37Z7OdR7EQGYn9yQzwz-fDcvQyuLO7JutIp_NzLsieOcVUYSpo67Hh5zRsvMLiDZjp5bTnQNcOf/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/AVvXsEj744XAQj7R4v2JT5KxMCXuU_vKNYezpLMP275f-8N4XXP18bX6oRMT0VNbT0cvKY7f8xue7vtUu75OXIuD84gRub-pHhk4O7aGvFEelDX6sJDjOghEbHOUL7mUnxgQuy5hPXv-qcdjgoht/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>
</div>

* المحدد باللون الأحمر خاص بصور الشبكات الإجتماعية