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

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

درس اليوم خصائص 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/AVvXsEj8679QzppUlPSoODYjJfuXXzikv_lWL7_kwSzpAIGOTnNRhyHoa6pAfoYPnBwCvQVnLAlQYMPjqBH6xOGEHCZdARF-u9G8fUCtX-qpEmgZdkKmyNEkt34GsplAuEcSOdR2Xhh5W7eHhls/s1600/helperblogger.com-facebook.png" /></a>
    <a href="https://twitter.com/ALEMAD5/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtE3_o6IgCfGZGVdNwapKq3iYG2puvixCaWE7NBYGiAl00C-VZcDtyLHZ2flqYJpqDy71jo8SUVNZOxx8UFqjZxbFz-3aEAV0gW_bpDGv-n78f3x0rCAJc6vx0y7pyme1mlJC8Bgk6Wo/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/AVvXsEgTheWSyXK4e0dBxPkNp4GsA4CvO7dumytOgNdFmczD1o1T8Tyhewt9qF9JTQEHVrfbhc-AKrVDdjVgb87p5Ky6-KzqadlLDEh_PI6QoGHRfPOqnMb4oykES6TRmvKS0z9smk6p17GiOkA/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/AVvXsEhLFvwIh8f7VUEVrG0BBTI3vb-nsbNEOuwgeZZPDny9b6tMwHXnT5UEGL5J_1wPQTvAteRg0TiWrRBg1f9UuaykFo6hEMVhsb-xhqmjaD5CHb884Hc5qpmE9UhUj8DVoIDUkTUrt1amB2k/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/konozblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZyOkRr5UbbgvkuILa_LQvReCpk98zi66ng7lij6Bw9NPQcT6e4YIj1YqvHw9yvPP05yfTIKaI0cSvK_sr4CDoHj5tQ9Ic3NG9V3an1q4R0wY_emI67yCoCJp5N412qdHgaqZyeZxBxVI/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/AVvXsEj8679QzppUlPSoODYjJfuXXzikv_lWL7_kwSzpAIGOTnNRhyHoa6pAfoYPnBwCvQVnLAlQYMPjqBH6xOGEHCZdARF-u9G8fUCtX-qpEmgZdkKmyNEkt34GsplAuEcSOdR2Xhh5W7eHhls/s1600/helperblogger.com-facebook.png" /></a>
    <a href="https://twitter.com/ALEMAD5/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtE3_o6IgCfGZGVdNwapKq3iYG2puvixCaWE7NBYGiAl00C-VZcDtyLHZ2flqYJpqDy71jo8SUVNZOxx8UFqjZxbFz-3aEAV0gW_bpDGv-n78f3x0rCAJc6vx0y7pyme1mlJC8Bgk6Wo/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/AVvXsEgTheWSyXK4e0dBxPkNp4GsA4CvO7dumytOgNdFmczD1o1T8Tyhewt9qF9JTQEHVrfbhc-AKrVDdjVgb87p5Ky6-KzqadlLDEh_PI6QoGHRfPOqnMb4oykES6TRmvKS0z9smk6p17GiOkA/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/AVvXsEhLFvwIh8f7VUEVrG0BBTI3vb-nsbNEOuwgeZZPDny9b6tMwHXnT5UEGL5J_1wPQTvAteRg0TiWrRBg1f9UuaykFo6hEMVhsb-xhqmjaD5CHb884Hc5qpmE9UhUj8DVoIDUkTUrt1amB2k/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/konozblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZyOkRr5UbbgvkuILa_LQvReCpk98zi66ng7lij6Bw9NPQcT6e4YIj1YqvHw9yvPP05yfTIKaI0cSvK_sr4CDoHj5tQ9Ic3NG9V3an1q4R0wY_emI67yCoCJp5N412qdHgaqZyeZxBxVI/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/AVvXsEj8679QzppUlPSoODYjJfuXXzikv_lWL7_kwSzpAIGOTnNRhyHoa6pAfoYPnBwCvQVnLAlQYMPjqBH6xOGEHCZdARF-u9G8fUCtX-qpEmgZdkKmyNEkt34GsplAuEcSOdR2Xhh5W7eHhls/s1600/helperblogger.com-facebook.png" /></a>
    <a href="https://twitter.com/ALEMAD5/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtE3_o6IgCfGZGVdNwapKq3iYG2puvixCaWE7NBYGiAl00C-VZcDtyLHZ2flqYJpqDy71jo8SUVNZOxx8UFqjZxbFz-3aEAV0gW_bpDGv-n78f3x0rCAJc6vx0y7pyme1mlJC8Bgk6Wo/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/AVvXsEgTheWSyXK4e0dBxPkNp4GsA4CvO7dumytOgNdFmczD1o1T8Tyhewt9qF9JTQEHVrfbhc-AKrVDdjVgb87p5Ky6-KzqadlLDEh_PI6QoGHRfPOqnMb4oykES6TRmvKS0z9smk6p17GiOkA/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/AVvXsEhLFvwIh8f7VUEVrG0BBTI3vb-nsbNEOuwgeZZPDny9b6tMwHXnT5UEGL5J_1wPQTvAteRg0TiWrRBg1f9UuaykFo6hEMVhsb-xhqmjaD5CHb884Hc5qpmE9UhUj8DVoIDUkTUrt1amB2k/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/konozblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZyOkRr5UbbgvkuILa_LQvReCpk98zi66ng7lij6Bw9NPQcT6e4YIj1YqvHw9yvPP05yfTIKaI0cSvK_sr4CDoHj5tQ9Ic3NG9V3an1q4R0wY_emI67yCoCJp5N412qdHgaqZyeZxBxVI/s1600/helperblogger.com-youtube.png" /></a>
</p></center>