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

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

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

 اذهب لوحة التحكم ثم الى التخطيط وقم بأضافة اداء جديدة واختار 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpK0xj4ANovwNb7wA-h1LqUxuBe6P9iwPU_eLUFk21pkJQA1Q-ULbS-KUCx3Gld88l_wTU2mOe9zHNkeiSNqwZjn_exTbbRTPCNwa1G1VpNz4Ee_2YX2pPu_9R8KNo0Fv-TX15LCNrW8/h120/facebook.png" /></a>

    <a href="http://www.twitter.com/اضف حسابك/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg70cB6ChRBlsdKVB7iwJfhJgutD-QKMfxvMouplmn9ocmrkQXcDiQdbSKNWTesQ8Up97HzlFJGc7UNBHZjxzzgLIX-AyGXaAIDBVgR_7RL_hn5tvoT3e0Hd4mkrQ3DNVXaliwZl3920wI/h120/twitter.png" /></a>

    <a href="اضف رابط حسابك">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QFfhqzYdbvCx3p8AbNl8lsaEwYE_8zV1CSOTdV_oXLRRIQYzwjonE-Umy9G5RsXTKTBDQofERbVWQCtBR40Rcq3d0VWRMJ5MzIqSO7ZW2JmR66FteN7NFBI7R3qkFifZbuqWYS4svJU/h120/google-plus.png" /></a>

    <a href="http://www.feeds.feedburner.com/اضف حسابك/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JzB0Q6RBmeqQH2k1sBM1lUueTNnSECB1oXYN6d0XTHBVKZo1w2806GYwv4oEjzG7h8u4c2Exfs20EMlsNuGbIJHbkCwaiMnuJnO6ZV3b4G4X5k7OMtwah7_Qn-9YGZklpkzTWnB4HEA/h120/rss.png" /></a>

    <a href="http://www.youtube.com/اضف حسابك/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW06RUF4z8hQ_KvSYOVAWpMm4jnpdacuXPvzQXRacP_lyVGtDpZuU5phYIhHR1JsQ9dFU_TXIetpLoeE1XsPz9rzwH9ZY0v1htpFeQNEL7kDh0OZyUxHFSXn62UAr7DrxnupxBDNgF0Dg/h120/youtube.png" /></a>

</p></center>

قبل حفظ الأداء يجب ان تضع هذه التغيرات :

1- كلمة اضف حسابك المحددة باللون الأصفر خاص بحسابك لكل موقع .

2- كلمة اضف رابط حسابك المحدد باللون الاخضر خاص برابط حسابك على جوجل بلس .

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

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

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

انتهى الدرس وارجو بأن هذه الأضافة اعجبتكم وانتظرونى بأضافة اخرى جديدة