ازرار المواقع الاجتماعيه باللون الوردي البناتي جميل جداً
https://www.techpointblog.com/2013/01/pink-girly-social-icons-with-html.html
السلام عليكم!
سوف اشرح في هذه التدوينيه كيفية اضافة ازرار المواق الاجتماعية
ذات الاستايل الوردي البناتي مع تأثير الاستدارة بالـ CSS
تم اقتباس كود التأثير من مدونه بلوجر تيراكس
الان اترككم مع كيفية التركيب:
- اذهب للوحة تحكم مدونتك .
- تخطيط.
- اضف اداة 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="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>
العدل ماهو ملون في الكود بالمطلوب :)
واضغط حفظ.
واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر
و الاشتراك في المدونه
تحياتي..
الكاتب :
Salem Shami
مؤسس نقطة تقنية، مهتم بأخبار التقنية و التجارة الإلكترونية،أسعد بالتواصل معك عبر حساباتي في المواقع الإجتماعية أدناه
