اضافه ايقونات المشاركات الاجتماعيه بشكل جديد !

بسم الله الرحمن الرحيم

اقدم لكم اخوانى اضافه جديدة من اضافات المشاركات الاجتماعيه وتكون بشكل جديد 

وتأثير اكثر من رائع

معاينة الاضافة

خطوات التطبيق : قم بالبحث عن
 ]]></b:skin>

 وضع فوقه الكود التالى :

.so {
width:87px;
height:119px;
background:#f7f7f7;
border:1px solid #e2e2e2;
float:left;
margin-left:8px;
}
.so:first-child{ margin:0;}
.so .so-content{
width:81px;
height:113px;
margin:3px;
}
.so a{ text-decoration:none;}
.so .so-content img{ margin:15px 20px 9px;}
.so .so-content span{ font:18px tahoma; color:#4a4a4a; }
.so .so-content p{ font:13px DroidKufi-Bold; color:#7b7b7b; margin:0;}
.so .so-content:hover{background:#fff;}

ثم قم بفتح اداة html وضع بها هذا الكود :

<div class="so">
  <a href="#">
  <div class="so-content">
    <center>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0K-syacEhEPMWKFcFR3B76KxZHQzazaySiaTFfK42x4-x84KeA4HG6ayaJcoRYTqyj6x2t_3CaPQpSpJMFul4XsGwDH8bbLoq93l9L8TUIDL5Q0BqqQK9GA6IPYwiQQAEltJtyu7vNiY/s1600/feeds.feedburner.png" />
    <span>5000</span>
    <p>مشارك</p>
    </center>
 </div>
 </a>
</div>

<div class="so">
  <a href="#">
  <div class="so-content">
    <center>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4vD-jhjIxihTpyE3oe4GWUu2LdqW8px_ekzp3YVcaQIMmt3yNnq2cbEDrh4V2xa_Cd5OYqt7VLR2ktFcZrU42yRfDfeYpsGSwuXDIE5FDgCXsA-WEPwRy8wdach6Sh-54ezmZkGK6EGE/s1600/Lioit.png" />
    <span>500</span>
    <p>متابع</p>
    </center>
 </div>
 </a>
</div>

<div class="so">
  <a href="#">
  <div class="so-content">
    <center>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVqF98xeXTqbKKx5uUbDyf5L7252PVkF65lT9B7fYeICmZ42_yYMqY6tklbIYqQd4nteSbJdremXLT35EZ_fgk_zAJqoMR2WhYS-9i6bj0mkROuhyyO7ITZG74-zNYJa0GG2ooReClDc/s1600/161633160519240.png" />
    <span>10,000</span>
    <p>معجب</p>
    </center>
 </div>
 </a>
</div></div>