أضف أيقونات متحركة لمواقع التواصل الاجتماعي لمدونتك بتقنية css

جديد المواضيع

ProCyber Security إضافات بلوجر أنترنت بلوجر مقالات أضف أيقونات متحركة لمواقع التواصل الاجتماعي لمدونتك بتقنية css

أضف أيقونات متحركة لمواقع التواصل الاجتماعي لمدونتك بتقنية css

Stupid Computer 12:46:00 ص

Stupid Computer

اليوم جلبت لكم إضافة أعجبتني و هي عبارة عن أيقونات متحركة لمواقع التواصل الإجتماعي بتقنية css

لتطبيق الإضافة قم بنسخ الكود التالي و ضعه في أداة جديدة ثم Javascript ثم قم بحفظه:

<style>p#hb_socialicons img {
/* Spinning Social Icons Widget By HelperBlogger */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

p#hb_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}

/* Spinning Social Icons Widget By HelperBlogger */
</style>

<center><p id="hb_socialicons">
<a href="http://www.facebook.com/xxxxxxxx">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXrInxP4KsG7MhPwwt6BPw6brzV5qQaB3fL13SawTUSAuS8AAkXXsXum_xXlJT23mOrq6e6MXlNjYSUx-Xxvholc2a20yaVlxTBVWJ9myIn2HfOaSxKjN_ESh0Vr4LlO0_K8PMpf4E-Z8/s1600/helperblogger.com-facebook.png" /></a>
<a href="http://www.twitter.com/xxxxxxxx">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9wvdVlMZ8S8f8BP12HzNWBNsOFyNPh751a55eiWlPL8S6B1lJGonSJsNnoY9ypsHREL-SiTpizEcCGqfQOP5NxWphjotm1R0DBYOiPvTCcoryFo5b_KXWEsyLxKeWpBB_Wq1f0X0RM2A/s1600/helperblogger.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/xxxxxxxxxx">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQL0Ymx-_T7B6yDq4Vxt7oJyt_Mq74Mt4Ywk4bZod6Ig7w14GhaowjPIQww0Z33FiQkRz7nppnPx5dgmtRuIP1RHoY3hfI_lwfr1pJNlN3YjZ9h65EzGfM4jqrFhCzt5EzLXpw1c6Vrx8/s1600/helperblogger.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/xxxxxxxxx/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDsQGTTi2CXb09OTWteTtmOhxK3IBWohj5L8rbycN1a59jVdqtPK3wHTUG3H9QCkdTjlybISqpenPhdG_DCuNkhtig6v_rG5mmxDhe8vt-YdID6a_LgMQq6uhjJeR9R_DQn_hVsy9B6s/s1600/helperblogger.com-rss.png" /></a>
<a href="http://www.youtube.com/xxxxxxxxxxx">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5EHHyn6a3L_0zbqm-VwxUqyMoRFud6bfMIPlQx4OVCf9gohfYOpyhY9Yxexthp9mKGufVDpmOXUzZOOmfm7x14oFCM6HpDXIgbvYiLC_YoQmJoFD5t2zMkFHSFROYmhRYwt5-4imijI/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

ثم قم بتغيير الروابط الملونة إلى روابط مواقعك على على شبكات التواصل الإجتماعي.

إذا أردت حذف أيقونة من هذه الأيقونات يكفي أن تقوموا بحذف الكود الملون حيث قمت بتلوين كل كود على حدة مثال:

<a href="http://www.facebook.com/xxxxxxxx">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXrInxP4KsG7MhPwwt6BPw6brzV5qQaB3fL13SawTUSAuS8AAkXXsXum_xXlJT23mOrq6e6MXlNjYSUx-Xxvholc2a20yaVlxTBVWJ9myIn2HfOaSxKjN_ESh0Vr4LlO0_K8PMpf4E-Z8/s1600/helperblogger.com-facebook.png" /></a>

أما إذا أردتم التحكم في مدى دوران الأيقونات فكل ما عليكم فعله هو تغيير الأرقام الملونة باللون الأخضر إلى ما يناسبكم.

بالتوفيق.

Stupid Computer

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)