أخر الأخبار
recent

اضافة ازرار المشاركة الأجتماعية بتقنية CSS3

اضافة ازرار المواقع الأجتماعية بتقنية CSS3
اضافة ازرار المواقع الأجتماعية بتقنية CSS3
  

هنا اقدم لك اضافة جميلة جدا وهي ازرار متحركة تحمل روابط صفحتك علي مواقع الاجتماعية مثل فسيوك،تويتر،جوجل وغيرها . للأستخدام الإضافة تابع معي التعليمات التالية : 

اذهب إلي لوحة تحكم مدونتك > اضغط علي تخطيط > اضغط علي تحرير > ثم اختر كلمة HTML/JavaScript بعد ذلك اضف الكود التالي مع تغير الكلمات الاتية برابط صفحتك .

<style>
p#socialicons img {
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons img:hover {
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons1 img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons1 img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
p#socialicons2 img:hover {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
<center>
<p id=”socialicons”>
<a href=”http://www.facebook.com/FB_NAME” target=”_blank”><img border=”0″ src=”http://4.bp.blogspot.com/-Q7l2AIANnbI/UApzYR4CKWI/AAAAAAAABDE/g7m_rz8dW0s/s1600/latesthack.com-facebook.png” /></a>
<a href=”http://www.twitter.com/TWITTER_NAME/” target=”_blank”><img border=”0″ src=”http://4.bp.blogspot.com/-GHi-SgA9yWY/UApzaE6ooTI/AAAAAAAABDc/glSG637KE4U/s1600/latesthack.com-twitter.png” /></a>
</p>
<p id=”socialicons”>
<a href=”https://plus.google.com/u/0/1256789012345678901” target=”_blank”><img border=”0″ src=”http://3.bp.blogspot.com/-4sZkt3DbUxg/UApzY-Eda8I/AAAAAAAABDM/p8-j4asZm6Q/s1600/latesthack.com-google_plus.png” /></a>
<a href=”http://feeds.feedburner.com/FEEDBURNER_NAME/” target=”_blank”><img border=”0″ src=”http://2.bp.blogspot.com/-qxygObBRqtM/UApzZd8YQNI/AAAAAAAABDU/Pxn3uOsVjeg/s1600/latesthack.com-rss.png” /></a>
</p>
</center>
<p style=”display:none;”>Spinning icons by <a href=”http://www.latesthack.com”>Latest Hack</a></p> 

 FB_NAME قم بتغيره الي اسم صفحتك علي الفيسبوك 
TWITTER_NAME قم بتغيرة الي اسم صفحتك علي تويتر 
1256789012345678901 قم بتغيرة الي رقم صفحتك علي جوجل 
FEEDBURNER_NAME قم بتغير الي اسم صفحتك علي فيدبورنر
يتم التشغيل بواسطة Blogger.