Post Top Ad

Your Ad Spot

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

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

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


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

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

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

Post Top Ad