إضافة أزرار المواقع الأجتماعيه 3

طريقة ثالث لإضافة أزرار المواقع الأجتماعيه بطريقه احترافيه متحركه بتأثيرCss

  بشكل جميل وبتاثير متحرك بطريقه دائريه يعني انه كلما تضع مؤشر الماوس على الازرار تدور 360 درجه بشكل جميل وملون وعند ازالة الموشر منها تدور بالعكس لترجع الى حالتها الطبيعيه  وتتميز

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

مثال حي للاضافه

• facebook
• Twitter
• Google+
• RSS
• PINTEREST
• DELICIOUS

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

كالعادة قم بالذهاب إلى تصميم  > عناصر الصفحة >  إضافة أداة Html/JavaScript

ننسخ كود

<style>/*--------dz-site.blogspot.com Sharing Widget ------*/ #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/AVvXsEinChssRoTKGnKpvaf6pVGcXqoJAAAjGmtNRRXmlj3_vpBJR5yyM0i7bs7PrF_C2-3pGKEFIj3CWHp1haiIkndkOhYDnNlsXRcf40INM8uKPgtz-PJIojeMprewJ5hz5x6muqQzJoiIFss/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} /*--------dz-site.blogspot.com Sharing Widget ------*/ </style><br><div id="lh-social"><ul><li id="fb"><a href="https://www.facebook.com/DZ.SITE" 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/albaadani" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">RSS</a></li><li id="pin"><a href="http://pinterest.com/DZ.SITE" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">PINTEREST</a></li><li id="di"><a href="http://delicious.com/DZ.SITE" rel="nofollow" target="_blank" style="color: rgb(97, 140, 214);">DELICIOUS</a></li></ul></div>

بتوفيق من ديزاد سيت