طريقة إضافة أزرار الشبكات الأجتماعية متحركة و دائرية بتأثيرات CSS3 لمدونة بلوجر.

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

 شكل الأداة:

نمر لتطبيق الاضافة:

1.اذهب للوحة التحكم

2. تخطيط

3.عناصر الصفحة

4.إضاف اداة

5.اختار  Html/Javascript

6.أضف هذا الكود :

<style>p#hb_socialicons img {

 /* Spinning Social Icons Widget By HelperBlogger Ar konozblog */

    -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#hb_socialicons img:hover {

    -moz-transform: rotate(-360deg);

    -webkit-transform: rotate(-360deg);

    -o-transform: rotate(-360deg);

    -ms-transform: rotate(-360deg);

    transform: rotate(-360deg);

}

/* Spinning Social Icons Widget By HelperBlogger Ar konozblog */

</style> 

<center><p id="hb_socialicons">

    <a href="http://www.facebook.com/trucsinformatiques/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3XleIh9fKV1nQ4ic0zPiT4pD5jJC4btHuux2oYM4OoQBfYI3Rvajt3ssljxJzBAMLZ81RxgzqLZWthOK_yvSUhthyoMzaYs0AUegtJ5m-RliDCCqUBqk-2PZcNAVNfB3fD0jstkNaD4/s1600/helperblogger.com-facebook.png" /></a>

    <a href="https://twitter.com/SAIDTRUCS/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEildX0TK5WwE_lCNpMfZO7HrFbp_cFti7DCYmfQ9ZUr3YZ_CBniWl9CzVL8JxYtSeNOF7NWYv5ZocBMcJ3L1kCUGLb4TiCmd9rRJCyTcK3y21JgBp_CzrRzhjMqjD4PZUuk0wDamDDuEnU/s1600/helperblogger.com-twitter.png" /></a>

    <a href="https://plus.google.com/b/105968879451676024660/105968879451676024660/posts">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOk1wz4dGO3lcWKaXZ8AEJ3cCiZy29ogIj3fR7-iiT8fUzNAijgRYg8nHvTh7lHBfnL92puHnLmnAEwaIcwjQeppbiSDyPihaJMFkWrDWZxO_KpzrsjAPCrpmuujsFBfiq2eIb5N0rU0/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://feeds.feedburner.com/blogspot/ZCvgi/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHXJNN8NlDXEz7-9FJuUd0jYvq9JhoX6ytAVXusr-iAkoD98Ia2ZKWBJAXnEbDLoVqiEaHjWookhV6h5ROmDiyI7RzPt-s8ZzZ8OV9FBh7Y226MKBDkbhUquuOZjs_pGnzT0G9OkhhJNo/s1600/helperblogger.com-rss.png" /></a>

    <a href="http://www.youtube.com/trucsinformatiques/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXlGOVpmMQggUN9ffF3rRb6H4Vo8CVRoGI_U8QjirFHNn17vI7HOd_21EclFjxHLrbYnSaa9R96uR5BjobHQ7YuV4_AkXygRm00YDoodbGSDGgdRscjfT01aEOj0KqL5S1L3ZRbUIT6AM/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

7.قم بتغير ما كتب بالأحمر بما يتناسب و مختلف صفحات مدونتك على المواقع الإجتماعية .
8.قم بحفظ الأداة.


و مبروك عليك.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.