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

مرحبا بكم زوار مدونة فرتكة نيوز الكرام 

نقدم لكم اليوم كود جميل وهو عبارة عن ايقونات المواقع الاجتماعية ( فيس بوك - تويتر - جوجل بلس - 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">
<center><p id="hb_socialicons">
<رابط الصفحة على الفيس بوك">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5YRgMsKEe82eguFLKwPpdKRTj4UlHQpPu7cvGxSr1Mi5HAzBdFUagQNgdyp3Ix6FxJU934c4AU2i43degmYCiDzitqPVHpuMKvKwS3Wx3SsXvnjRV1OcbJw_T6TFja_sb-3gkd4c1eAkI/s1600/facebook.png" /></a>
<a href="رابط الصفحة على تويتر">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdno6RonmVVVdCio25hKa8tVuf9dT7AFEJvgA6XwHtl4eoBF_tahooZfmX44w1yRaG3oPtddq5VQdcPkgJCsMSWqvPekzYslOzwdlgk0xskGii3JnnZp0DOzulmeanFW_xVyGgkBBMxBb/s1600/twitter.png" /></a>
<a href="رابط جوجل بلس">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEina82HHfJMTWXg7tIiAg2Q6n5DK2tVohgI4EI63c3dB9pzTDAImbr1LpSbkkPIuGWgSpokrJVswtDn3s1Fqo1zZKG85FhFuWisEsWsxqZDJJJMqW7JFKUNYTIfNsje2hVxK9nJi0Zija79/s1600/googleplus.png" /></a>
<a href="رابط تغذية rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNdAeulLuKB63gK6inWhmS1TDsiHYHKuyCZZsCsVlKSBy_sW5KKreo0mbfwDObav3m-9paZjzWpQwsq_qrN7yIpNhq8ONY4u-j7nRqlWy4kM2ZvYhXtQ7Ik450EqQW1YaCFjkwiaanJHp/s1600/rss.png" /></a>
</p></center>

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

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