إضافة أزرار الشبكات الأجتماعية بتاثير دائريه CSS3 لبلوجر المصدر: http://konozblog.blogspot.com/2013/01/spinning-icons-with-css3-for.html#ixzz2Iv7xpmSb

درس اليوم سنلعب مع بعض خصائص 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/AVvXsEiw6IrIGraY51GvMt6S19UQ1EVOOcyWpPod3vIx4Fy8s2IpYt5vXbRttXfTpDtFmCB4fDGCGVgOVcrwFUWt8iLuiFzLxN9hJWlGnEzbVQjf7AcKdmSpVYmaV5C-xhNDDhnehuTQzhCxRO0/s1600/helperblogger.com-facebook.png" /></a>
    <a href="https://twitter.com/ALEMAD5/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69TDWZ97IPifm_WSiBsemCGKDAHt3_VarkECdupnNM-HaAYF-1ihOunXeIm24PdbPy0mJ07yNMlqbY1Wl8XyXlrDmzrZ_ze9zYl4kR89FBz_JDFiggciuTnrCe8Re3q7NIUqK85GY5U0/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/AVvXsEjF5s5qeFxMbmdOXylJXYvo0V0Is9ELD7WGPIfSomLjWrMQ3MGq_jdioT5bI5yRAWjZU_lUQreqMfeN-DVQ8HAOHFk46Qj09wVseb1Zc5GXBHVi4z3wyFmV4mwkLEDFzM_dsJus2IB-tOg/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/AVvXsEhOtnA6_Kw8v1kLP5LEA-yruahXtaQSnszdJG1MxjM5HjH5nJdx8FJ0qW7N1wZacUdzmjQqvk073wo593FxxKZRP13O5Dd_xXfGoUkHC3C402yYnldhNOm5BwHDgiSeRUK3IrikHYakbbY/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/konozblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjec3_4_UCNebfGlnr2N58Boe4ClF6GeYhBnCxlkEE9BgUkYftDwRae7DjP9NhbI7YziGyiG4ARjIEv31Zu40iuY7PO-rKFWeiyA4hmyLaGMALBrisCsjXh0BSYh7_Gi-gIxNc3KKRQtuM/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/AVvXsEiw6IrIGraY51GvMt6S19UQ1EVOOcyWpPod3vIx4Fy8s2IpYt5vXbRttXfTpDtFmCB4fDGCGVgOVcrwFUWt8iLuiFzLxN9hJWlGnEzbVQjf7AcKdmSpVYmaV5C-xhNDDhnehuTQzhCxRO0/s1600/helperblogger.com-facebook.png" /></a>
    <a href="https://twitter.com/ALEMAD5/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69TDWZ97IPifm_WSiBsemCGKDAHt3_VarkECdupnNM-HaAYF-1ihOunXeIm24PdbPy0mJ07yNMlqbY1Wl8XyXlrDmzrZ_ze9zYl4kR89FBz_JDFiggciuTnrCe8Re3q7NIUqK85GY5U0/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/AVvXsEjF5s5qeFxMbmdOXylJXYvo0V0Is9ELD7WGPIfSomLjWrMQ3MGq_jdioT5bI5yRAWjZU_lUQreqMfeN-DVQ8HAOHFk46Qj09wVseb1Zc5GXBHVi4z3wyFmV4mwkLEDFzM_dsJus2IB-tOg/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/AVvXsEhOtnA6_Kw8v1kLP5LEA-yruahXtaQSnszdJG1MxjM5HjH5nJdx8FJ0qW7N1wZacUdzmjQqvk073wo593FxxKZRP13O5Dd_xXfGoUkHC3C402yYnldhNOm5BwHDgiSeRUK3IrikHYakbbY/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/konozblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjec3_4_UCNebfGlnr2N58Boe4ClF6GeYhBnCxlkEE9BgUkYftDwRae7DjP9NhbI7YziGyiG4ARjIEv31Zu40iuY7PO-rKFWeiyA4hmyLaGMALBrisCsjXh0BSYh7_Gi-gIxNc3KKRQtuM/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/AVvXsEiw6IrIGraY51GvMt6S19UQ1EVOOcyWpPod3vIx4Fy8s2IpYt5vXbRttXfTpDtFmCB4fDGCGVgOVcrwFUWt8iLuiFzLxN9hJWlGnEzbVQjf7AcKdmSpVYmaV5C-xhNDDhnehuTQzhCxRO0/s1600/helperblogger.com-facebook.png" /></a>
    <a href="https://twitter.com/ALEMAD5/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69TDWZ97IPifm_WSiBsemCGKDAHt3_VarkECdupnNM-HaAYF-1ihOunXeIm24PdbPy0mJ07yNMlqbY1Wl8XyXlrDmzrZ_ze9zYl4kR89FBz_JDFiggciuTnrCe8Re3q7NIUqK85GY5U0/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/AVvXsEjF5s5qeFxMbmdOXylJXYvo0V0Is9ELD7WGPIfSomLjWrMQ3MGq_jdioT5bI5yRAWjZU_lUQreqMfeN-DVQ8HAOHFk46Qj09wVseb1Zc5GXBHVi4z3wyFmV4mwkLEDFzM_dsJus2IB-tOg/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/AVvXsEhOtnA6_Kw8v1kLP5LEA-yruahXtaQSnszdJG1MxjM5HjH5nJdx8FJ0qW7N1wZacUdzmjQqvk073wo593FxxKZRP13O5Dd_xXfGoUkHC3C402yYnldhNOm5BwHDgiSeRUK3IrikHYakbbY/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/konozblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjec3_4_UCNebfGlnr2N58Boe4ClF6GeYhBnCxlkEE9BgUkYftDwRae7DjP9NhbI7YziGyiG4ARjIEv31Zu40iuY7PO-rKFWeiyA4hmyLaGMALBrisCsjXh0BSYh7_Gi-gIxNc3KKRQtuM/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

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

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

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

المصدر: http://konozblog.blogspot.com/2013/01/spinning-icons-with-css3-for.html#ixzz2Iv7o5XON

Pages

مدونه رؤيه

الخميس، 24 يناير 2013