الجمعة، 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- كلمة اضف رابط حسابك المحدد باللون الاخضر خاص برابط حسابك على جوجل بلس .

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

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


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

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

1 التعليقات so far

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

الرموز التعبيريةالرموز التعبيرية