إضافة أزرار الشبكات الأجتماعية بتاثير دائريه CSS3 لبلوجر

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

كيفية تطبيق هذه الإضافة على مدوناتكم

[1] اذهب الى لوحة التحكم ← تخطيط ← إضافة أداة HTML/JavaScript.
[2] اختيار أي الشكل الذي تريده ← استبدال الروابط ← ثم الصق الكود اسفله وحفظه :

مثال حي للاضافه : الشكل الأول 

<style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger Ar konozblog*/
-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); } /* Spinning Social Icons Widget By HelperBlogger Ar konozblog */
</style> <center><p id="hb_socialicons"> <a href="http://www.facebook.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk1xVpCqrNSrr2I61W3ZPa2AzETvWTwk1TKBojVpup3u0NkrxHl7ngGJw20TNjMXIegWPi9v6IFuGbvxbC1hdwxpnncGMiHAxjv4wiaS0h249_qRZGAECaI6R2WVn1RlMZEjOTflXHitI/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/ALEMAD5/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvlL_GGU-AyluTG64NIsZAfg4qmx5ODzF0W-1sM30l8JXQCP14zMiYkWz20FfF3M5swUXWP3A2I7J_cnRhAWbTYMiGPLj9NmME2k1AHhcu268adLO6fM8lEGlD92-kSyjA16C56A3jVhA/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/106314147416991843215/posts"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkuhde2x9M9_ugfopD6Xigqie6lWIbMgdoU4lCcEzo3hFU2V9y6Bzj3OtZgyGyMSHDKCvm44IOYHLaGiB7unjqaZDb3PywRE0U5mpaPeLowosLpqmd6-2N_XD6UfeDSsmd-u0FX8SoKM/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ3MfxHQSYSBebeHI6iSpmEOAU7EJH64oedcXkJH8RN6qRjaMslQbPVIqYufEGr3ic_QIeO6XRbWdnU2NSq8QyRsqG_ngIhQqbbi1sBFGHpIp0Ko1W7ONejZ7A6xTcU9aKZmJLpLca35w/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHYsBUf9VrAlAEXQUmfqG2XCZPvrmiZEBG5hzUc5KjXRqy1UuaRr05RmxmDnSlwPIBLAGUfl7nz7Yw7LfgRAYyuShVihc3QmU_TdoZ8-m6KWPzOKyOGUv_iW0hL-zUUG0ZbZs7NAiciC0/s1600/helperblogger.com-youtube.png" /></a> </p></center>

مثال حي للاضافه : الشكل الثآني

<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/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk1xVpCqrNSrr2I61W3ZPa2AzETvWTwk1TKBojVpup3u0NkrxHl7ngGJw20TNjMXIegWPi9v6IFuGbvxbC1hdwxpnncGMiHAxjv4wiaS0h249_qRZGAECaI6R2WVn1RlMZEjOTflXHitI/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/ALEMAD5/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvlL_GGU-AyluTG64NIsZAfg4qmx5ODzF0W-1sM30l8JXQCP14zMiYkWz20FfF3M5swUXWP3A2I7J_cnRhAWbTYMiGPLj9NmME2k1AHhcu268adLO6fM8lEGlD92-kSyjA16C56A3jVhA/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/106314147416991843215/posts"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkuhde2x9M9_ugfopD6Xigqie6lWIbMgdoU4lCcEzo3hFU2V9y6Bzj3OtZgyGyMSHDKCvm44IOYHLaGiB7unjqaZDb3PywRE0U5mpaPeLowosLpqmd6-2N_XD6UfeDSsmd-u0FX8SoKM/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ3MfxHQSYSBebeHI6iSpmEOAU7EJH64oedcXkJH8RN6qRjaMslQbPVIqYufEGr3ic_QIeO6XRbWdnU2NSq8QyRsqG_ngIhQqbbi1sBFGHpIp0Ko1W7ONejZ7A6xTcU9aKZmJLpLca35w/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHYsBUf9VrAlAEXQUmfqG2XCZPvrmiZEBG5hzUc5KjXRqy1UuaRr05RmxmDnSlwPIBLAGUfl7nz7Yw7LfgRAYyuShVihc3QmU_TdoZ8-m6KWPzOKyOGUv_iW0hL-zUUG0ZbZs7NAiciC0/s1600/helperblogger.com-youtube.png" /></a> </p></center>

مثال حي للاضافه : الشكل الثالثّ

<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/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk1xVpCqrNSrr2I61W3ZPa2AzETvWTwk1TKBojVpup3u0NkrxHl7ngGJw20TNjMXIegWPi9v6IFuGbvxbC1hdwxpnncGMiHAxjv4wiaS0h249_qRZGAECaI6R2WVn1RlMZEjOTflXHitI/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/ALEMAD5/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvlL_GGU-AyluTG64NIsZAfg4qmx5ODzF0W-1sM30l8JXQCP14zMiYkWz20FfF3M5swUXWP3A2I7J_cnRhAWbTYMiGPLj9NmME2k1AHhcu268adLO6fM8lEGlD92-kSyjA16C56A3jVhA/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/106314147416991843215/posts"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkuhde2x9M9_ugfopD6Xigqie6lWIbMgdoU4lCcEzo3hFU2V9y6Bzj3OtZgyGyMSHDKCvm44IOYHLaGiB7unjqaZDb3PywRE0U5mpaPeLowosLpqmd6-2N_XD6UfeDSsmd-u0FX8SoKM/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ3MfxHQSYSBebeHI6iSpmEOAU7EJH64oedcXkJH8RN6qRjaMslQbPVIqYufEGr3ic_QIeO6XRbWdnU2NSq8QyRsqG_ngIhQqbbi1sBFGHpIp0Ko1W7ONejZ7A6xTcU9aKZmJLpLca35w/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHYsBUf9VrAlAEXQUmfqG2XCZPvrmiZEBG5hzUc5KjXRqy1UuaRr05RmxmDnSlwPIBLAGUfl7nz7Yw7LfgRAYyuShVihc3QmU_TdoZ8-m6KWPzOKyOGUv_iW0hL-zUUG0ZbZs7NAiciC0/s1600/helperblogger.com-youtube.png" /></a> </p></center>

[3] الان لم يتبقى سوى تخصيص الاضافة بروابطك الخــاصة بك .

• استبدل اللون الأحمر برابط خلاصة مواضيع مدونتك .
• استبدل اللون الأزرق برابط صفحتك على جوجل بلس.
• استبدل اللون البرتقالي برابط صفحتك على الفايسبوك .  
• استبدل اللون الأخضر بك  برابط صفحتك على تويتر .  

احفظ الاداة ومبروك عليك الاضافة.. 
اذا كان عندكم اي استفسارات يمكنكم كتابة تعليق  وسيتم الرد عليكم ان شاء الله .
اسألكم الدعاء لي بان يحقق الله لي ما اتمنى وان يجعل لي الخير فيه ، فإن الدعاء بظهر الغيب مستجاب .

بقلم العماد

عماد البدري : غالباً ما يفشل معظم الناس في الحديث عند التعريف بأنفسهم، ويعجبني في هذا المقام أن أنضم لمعظم الناس، فقد حاولت استفزاز نرجسيتي أكثر من مرة لمعرفة من أنا، أو على الأقل لأفتح المجال أمام (الأنا) لتعبّر عن ذاتها , صدقاً لم أجد الكثير لأخطه عن نفسي، إلا بعض عادات أداوم بين الفينة والأخرى على فعلها، وشخصيات أحب تبني أفكارها وآرائها، وأعتقد أن الإنسان يعرف بأقرانه، ومن خلال اهتماماته يمكنك سبر أغواره، ربما هي طريقة جميلة أن تعرفني من خلال ما أحب وما أكره، يمكنكم متابعتي والتواصل معي على صفحتي بتويتر @ ALEMAD5 أو عبر الفيسبوك AL EMAD