ايقونات المواقع الاجتماعية بشكل رائع وتاثير جميل عليها لمدونه بلوجر

السلام عليكم ورحمة الله وبركاتة 

معنا اليوم كود رائع وهو عبارة عن ايقونات المواقع الاجتماعية

( فيس بوك  - تويتر - RSS   - جوجل بلس  )

بشكل رائع وبتاثير رائع حيث تقوم الايقونه عند الوقوف فوقها بالماوس بالدوران بشكل رائع

صورة للاداة

مثال حي للأداة

طريقة اضافة الاداة

1 - قم بالدخول إلى لوحة التحكم بلوجر الخاصة بمدونتك.

2 - توجه إلى تخطيط .

3 - ثم إضافة أداة.

4 - إختر HTML/JavaScript .

5 - ثم انسخ الكود التالي والصقه بها :

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social 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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="إشترك في خلاصة المواضيع" href="رابط تغذية الار اس اس" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3A5fMqqPQ1PBltF2biEYNW16wPcg_x0no120LFErORtwub6IhAakhL3tCLPSdg7G1bXT1Hb6qjW8IjMMceHEr2w5hOHTecIB-3ZfO1o-R1o4_dGau8ca8PwRmNdELCqODap47hvkz6G68/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--><!--Start Facebook Icon--> <a rel="nofollow" title="تابعنا على الفيس بوك" href="رابط صفحة الفيس بوك" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0OWqhIGpdGJ-cLOwgyDtmTQcL0HUT2r-05BFANwAaRlqdYsIaUtLa4iq1LHWKdgeIKERKvYNijoEF3SEfPSiQJjgtXfbCRD-OwnMkfGeq0Whbg-_jxcNPsQrFI3FVzgm2ttqK0CJ9bArz/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="تابعنا على تويتر" href="رابط صفحة التويتر" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0ms2fGgsgFrYEt-QR1BoS5lm9_wy2ltL4NNCi0e2TVaNAqy0xPaRuvh46bKJAPNQN8qZACJNlLldzSQNQafxD-7I7jvsik3ZUq2mnVZ3S6aEjWZwc9irc-KZyWBJN8Hifl1sWdnkI_L1/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="تابعنا على جوجل+" rel="nofollow" href="رابط صفحة جوجل بلس" rel="nofollow" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ZbAeQx1stVBnYNC_Azwze2Smz7tSTqW_TTETeBJziJKUMlLR1YnhnCbHtmeKUVytJXHcuXk7ruDRPpyJ-dehfk-iG-LW0mVS7B2A3IZtLSH3s0eAqsBr-yGkoM5NHdugKZGVPtrZ2P13/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--></div></center>

وقم بتغيير ما باللون البني بما ترغبة

 ثم قم بتغيير مكان الأداة كما تشاء