bloggerarchive
247125322047940
تحميل

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




http://icons.iconarchive.com/icons/designbolts/pink-girly-social/256/Active-Blogger-icon.png


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

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

ذات الاستايل الوردي البناتي مع تأثير الاستدارة بالـ 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>
العدل ماهو ملون في الكود بالمطلوب :)

واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر
و الاشتراك في المدونه 

تحياتي..






ما رأيك: 
الاضافات الاجتماعيه 2486615138286626824

إرسال تعليق تعليقات الموقع

لاضافة صورة او فيديو في التعليق ضع رابط الفيديو بين الوسمين كالتالي:
[video] رابط الفيديو [/video]
[img ]ربط الصور [/img]
للتعليق اضغط على مربع التعليق ياسم و اختر : الاسم / عنوان URL ثم اكتب اسمك فقط اذا اردت واضغط الاستمرار.

emo-but-icon

الصفحة الرئيسية item

اشترك ليصلك جديد الموقع.

تابعنا على تويتر

أنضم للموقع!