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

Unknown    اضافات بلوجر    تعليق   

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

                                                                               

                   اٍذهب الى لوحة التحكم ← تخطيط ← إضافة أداة HTML/JavaScript.                                                             

                                                                   

                                                                 الكود الاول

<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/mphker/"> <img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/mphker/"> <img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/117201013989339588009/posts"> <img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/mphker/"> <img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/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="https://www.facebook.com/Weaponsfree.ss"> <img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/weaponsfreess"> <img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/117201013989339588009/posts?partnerid=gplp0"> <img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/mphker/"> <img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a> </p></center>