ازرار المواقع الاجتماعيه باللون الوردي البناتي جميل جداً

السلام عليكم!

سوف اشرح في هذه التدوينيه كيفية اضافة ازرار المواق الاجتماعية

ذات الاستايل الوردي البناتي مع تأثير الاستدارة بالـ CSS

تم اقتباس كود التأثير من مدونه بلوجر تيراكس

الان اترككم مع كيفية التركيب:

1. اذهب للوحة تحكم مدونتك .
2. تخطيط.
3. اضف اداة HTML/JavaScript'
4.  الصق الكود التالي بداخلها:

<<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="www.youtube.com" target="_blank"><img border="0" src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Active-YouTube-icon.png" /></a>    
<a href="www.googleplus.com" target="_blank"><img border="0" src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Active-Google-Plus-icon.png" /></a>    
<a href="https://www.twitter.com/Username" target="_blank"><img border="0" src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Active-Twitter-2-icon.png" /></a>    
<a href="www.facebook.com/" target="_blank"><img border="0" src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Active-Facebook-icon.png" /></a></p></center>

العدل ماهو ملون في الكود بالمطلوب :)

واضغط حفظ.

و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر

و الاشتراك في المدونه 

تحياتي..