إضافة أزرار المواقع الأجتماعية على شكل علبات بتقنية Css

اليوم سوف نتكلم عن إضافة جميلة وهي طريقة لإضافة أزرار المواقع الإجتماعية بطريقة ٱحترافية متحركة بشكل أنيق .

هذه الإضافة تشمل علبة قوقل وتويتر وفيسبوك و Delicious و Pinterest بالإضافة إلى كونها تزيد من معجبيك ومتابعيك عبر المواقع الإجتماعية ..

نمر الآن مع أول شيء وهو معاينة الإضافة مباشرة :

الآن ننتقل إلى تركيب الإضافة :

#lh-social ul li{list-style:none;float:left;padding:1px}#lh-social ul li a{text-indent:-9999px;font-size:0;line-height:0;overflow:hidden;height:64px;width:42px;border:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiabGP-DqrO_gC87xb0mIE-9YWLj15V4TTfrNGatXCphl8CiP7PpqGzmT_EHQzIXuc65TrGRqV5VaTwaAmdSWEVQXGDtiYqc0jcYMZZ6XVu2oxl4glW2bar1RsTW4lhvT5TdDhqlgd3MQ/s1600/latesthack27.png) no-repeat;display:block;-webkit-transition:ease-out 850ms;-moz-transition:ease-out 850ms;-o-transition:ease-out 850ms;-ms-transition:ease-out 850ms;transition:ease-out 850ms;cursor:pointer}#lh-social ul li a:hover{transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transition-duration:850ms;-webkit-transition-duration:850ms;-o-transition-duration:850ms}#lh-social li#pin a{background-position:0 0;margin:0 1px}#lh-social li#pin a:hover{background-position:0 -71px;margin:0 1px}#lh-social li#rss a{background-position:-84px 0;margin:0 1px}#lh-social li#rss a:hover{background-position:-84px -71px;margin:0 1px}#lh-social li#twit a{background-position:-126px 0;margin:0 1px}#lh-social li#twit a:hover{background-position:-126px -71px;margin:0 1px}#lh-social li#di a{background-position:-42px 0;margin:0 1px}#lh-social li#di a:hover{background-position:-42px -71px;margin:0 1px}#lh-social li#fb a{background-position:-209px 0;margin:0 1px}#lh-social li#fb a:hover{background-position:-210px -71px;margin:0 1px}#lh-social li#g a{background-position:-250px 0;margin:0 1px}#lh-social li#g a:hover{background-position:-252px -71px;margin:0 1px}
/*--------Sawalef-b.blogspot.com Sharing Widget ------*/

</style><br>
<div id="lh-social">
<ul>
<li id="fb"><a href="https://www.facebook.com/Conputer.hot" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">facebook</a></li>
<li id="twit"><a href="http://twitter.com/ya12ine" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">Twitter</a></li>
<li id="g"><a href="https://plus.google.com/103499777490414306950" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">Google+</a> </li>
<li id="rss"><a href="http://feeds.feedburner.com/Sawalef-b" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">RSS</a></li>
<li id="pin"><a href="http://pinterest.com/Sawalef-b" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">PINTEREST</a></li>
<li id="di"><a href="http://delicious.com/Sawalef-b" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">DELICIOUS</a></li>
</ul>
</div>