Subcribe to our RSS feeds Join Us on Facebook Join Us on Facebook Join Us on Facebook Follow us on Twitter Add to Circles

اضافة ايقونات المشاركات الأجتماعية متحركة بشكل دائرى جذاب

كينج نت ملك النت | 8/30/2013 |
اضافة الايقونات للمشاركات الأجتماعية بشكل دائرى متحرك اكثر من رائع فالأيقونات ثابتة فعند وضع مؤشر الماوس يتم تحرك الأيقونات بشكل دائرى مميز فقمت بتجربة الاضافة قبل ان اضعها لكم لكى اتأكد من انها تعمل بدون اى مشاكل فالأيقونات الأجتماعية تحتوى على اهم المواقع الأجتماعية كالفيسبوك وتويتر وجوجل بلس واليوتيوب وفيد بارنر الخدمة المميزة الذى تعمل على اشهار المدونة بسرعة البرق الاضافة مفيدة للغاية وبالأخص لمن يعانون من قلة اشهار المدونة فمن خلال هذه الأضافة البسيطة ستساعدك على اشهار المدونة وعمل ترابط بمواقع التواصل اسف على الاطالة والأن جاء دور تركيب الأضافة .






شرح تركيب اضافة ايقونات المشاركات الأجتماعية :

 اذهب لوحة التحكم ثم الى التخطيط وقم بأضافة اداء جديدة واختار HTML/Java Script


اضف الكود التالى داخل الأداء :
<style>p#hb_socialicons img {
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 
p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
</style>   
 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/اضف حسابك/">
<img border="0" src="https://lh5.googleusercontent.com/-fjDt7QMC1Y4/Uh_qt-P6nFI/AAAAAAAAB1k/VdJz_BmQ81I/h120/facebook.png" /></a>
    <a href="http://www.twitter.com/اضف حسابك/">
<img border="0" src="https://lh5.googleusercontent.com/-rVWgrTwx2hc/Uh_q6xnWUEI/AAAAAAAAB1s/IWUBZ9Qh8iw/h120/twitter.png" /></a>
    <a href="اضف رابط حسابك">
<img border="0" src="https://lh4.googleusercontent.com/-GbJ_Y4UgyfQ/Uh_rLy_BroI/AAAAAAAAB10/VxlyWD_eLSU/h120/google-plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/اضف حسابك/">
<img border="0" src="https://lh4.googleusercontent.com/--UQf5-bY3h8/Uh_rbi1WMuI/AAAAAAAAB18/PXxSgpQD_vk/h120/rss.png" /></a>
    <a href="http://www.youtube.com/اضف حسابك/">
<img border="0" src="https://lh3.googleusercontent.com/-ikxN1KDJjwk/Uh_rm5IYlaI/AAAAAAAAB2E/u7jnMSun6Jw/h120/youtube.png" /></a>
</p></center>
قبل حفظ الأداء يجب ان تضع هذه التغيرات :
1- كلمة اضف حسابك المحددة باللون الأصفر خاص بحسابك لكل موقع .
2- كلمة اضف رابط حسابك المحدد باللون الاخضر خاص برابط حسابك على جوجل بلس .

بالاخير اضغط حفظ وانتهى التركيب .

صورة توضح لشكل الاضافة :


ملحوظة : هذه الصورة ثابتة لكن الاضافة نفسها بعد التركيب وعند وضع مؤشر الماوس سيتم تحريك الايقونات بشكل دائرى كما ذكرت .
انتهى الدرس وارجو بأن هذه الأضافة اعجبتكم وانتظرونى بأضافة اخرى جديدة 

هناك تعليق واحد :

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

الأرشيف