معهد خبراء بلوجر - جديد: ايقونات المشاركات بخاصيه .css3

بسم الله الرحن الرحيم

اضافه ايقونات جديدة للمشاركات الاجتماعيه بخاصيه css3

اكثر من رائعة المتحركة

http://www5.0zz0.com/2012/07/09/17/295885160.jpg

للمعاينه

كيفيه اضافه هذة الخاصية:

نذهب الى ..تصميم _عناصر الصفحه - اداة HTML/JavaScript

ثم نضيف الاكواد التاليه :

الشكل الاول :

كود بلغة HTML:

<style>p#hb_socialicons img {

 /* Spinning Social Icons Widget By HelperBlogger */

    -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 */

</style>  

 

 

 

<center><p id="hb_socialicons">

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

<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>

    <a href="http://www.twitter.com/helperblogger/">

<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/106527290580119996124">

<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://www.feeds.feedburner.com/hblogger/">

<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/helperblogger1/">

<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

الشكل التانى :

كود بلغة HTML:

<style>p#hb_socialicons img {

 /* Spinning Social Icons Widget By HelperBlogger */

    -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 */

</style>  

 

 

 

<center><p id="hb_socialicons">

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

<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>

    <a href="http://www.twitter.com/helperblogger/">

<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/106527290580119996124">

<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://www.feeds.feedburner.com/hblogger/">

<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/helperblogger1/">

<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

الشكل التالت :

كود بلغة HTML:

<style>p#hb_socialicons img {

 /* Spinning Social Icons Widget By HelperBlogger */

    -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 */

</style>  

 

 

 

<center><p id="hb_socialicons">

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

<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>

    <a href="http://www.twitter.com/helperblogger/">

<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/106527290580119996124">

<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>

    <a href="http://www.feeds.feedburner.com/hblogger/">

<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/helperblogger1/">

<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

ثم غير الروابط الى الروابط الخاصة بك