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

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

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

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



للمعاينه

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

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

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

الشكل الاول :

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLvdWarRGI1_ZI_1b6CF2XTqg5aoNoX8ojLZDJm1mDNOhAAnaz6W1J1Nlc2qFw44Mic2hn5F8v7xOKK7xbLpdUvTVcm-ZmDz9IILlbETlqsREOjKrisrDsoDBAPT2nEHt_qY_p5zZhoko/s1600/helperblogger.com-facebook.png" /></a>

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

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidGSHW1uif8gO6n3KBcG3ESFgcfRdTkmsjSSZIZ-QchCAT0-ifx3Vd41RTykn_Seyr_x413QiZLv82boiRLb6XUzpAp3fpJQMJnfS2Azt78ZrWQtBXPOcS7nPBIDKvK8nXXRTGWFx3Zhw/s1600/helperblogger.com-twitter.png" /></a>

    <a href="https://plus.google.com/u/0/106527290580119996124">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECe6mr6MiQpBkEwkpqoOtSodIu9uYEldJrgiuXEM6i9CbxzsbTJdTGZGY31xB1R_3BJsBNiuxtuYqFMbkLvzPw4a1uzzgV8sBH99OxM03mGS7t8kfGZ2z3g8l56dqPmRQw4FndLVOF5Q/s1600/helperblogger.com-google_plus.png" /></a>

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

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBgs1O1x_AlWlkNjsv5-s_msc4DpamnMVTywio3gYb4ErmggfOTdCw5211CD9TkIc6Su66UoHPbpFwTiljwRnW7cY_tGP9Tirk4tFCoeJBRaAvERrKx1XTPPi15_5usgT9WOXBS2Jwcx8/s1600/helperblogger.com-rss.png" /></a>

    <a href="http://www.youtube.com/helperblogger1/">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoor8cXmDXlNi7b_5prI3LO-SO5WSrsg_ciHktAKOuamISxC8YfmoeYAX0eVVgzTMKCyUaGKT7QG5kE0_CEfWOY0DN6qZ_TJVsXbWa6gjV8IeC9uymiXPT3T-oLRv0kctXQE9l-7nIrSs/s1600/helperblogger.com-youtube.png" /></a>

</p></center>

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

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLvdWarRGI1_ZI_1b6CF2XTqg5aoNoX8ojLZDJm1mDNOhAAnaz6W1J1Nlc2qFw44Mic2hn5F8v7xOKK7xbLpdUvTVcm-ZmDz9IILlbETlqsREOjKrisrDsoDBAPT2nEHt_qY_p5zZhoko/s1600/helperblogger.com-facebook.png" /></a>    <a href="http://www.twitter.com/helperblogger/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidGSHW1uif8gO6n3KBcG3ESFgcfRdTkmsjSSZIZ-QchCAT0-ifx3Vd41RTykn_Seyr_x413QiZLv82boiRLb6XUzpAp3fpJQMJnfS2Azt78ZrWQtBXPOcS7nPBIDKvK8nXXRTGWFx3Zhw/s1600/helperblogger.com-twitter.png" /></a>    <a href="https://plus.google.com/u/0/106527290580119996124"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECe6mr6MiQpBkEwkpqoOtSodIu9uYEldJrgiuXEM6i9CbxzsbTJdTGZGY31xB1R_3BJsBNiuxtuYqFMbkLvzPw4a1uzzgV8sBH99OxM03mGS7t8kfGZ2z3g8l56dqPmRQw4FndLVOF5Q/s1600/helperblogger.com-google_plus.png" /></a>    <a href="http://www.feeds.feedburner.com/hblogger/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBgs1O1x_AlWlkNjsv5-s_msc4DpamnMVTywio3gYb4ErmggfOTdCw5211CD9TkIc6Su66UoHPbpFwTiljwRnW7cY_tGP9Tirk4tFCoeJBRaAvERrKx1XTPPi15_5usgT9WOXBS2Jwcx8/s1600/helperblogger.com-rss.png" /></a>    <a href="http://www.youtube.com/helperblogger1/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoor8cXmDXlNi7b_5prI3LO-SO5WSrsg_ciHktAKOuamISxC8YfmoeYAX0eVVgzTMKCyUaGKT7QG5kE0_CEfWOY0DN6qZ_TJVsXbWa6gjV8IeC9uymiXPT3T-oLRv0kctXQE9l-7nIrSs/s1600/helperblogger.com-youtube.png" /></a></p></center>

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

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLvdWarRGI1_ZI_1b6CF2XTqg5aoNoX8ojLZDJm1mDNOhAAnaz6W1J1Nlc2qFw44Mic2hn5F8v7xOKK7xbLpdUvTVcm-ZmDz9IILlbETlqsREOjKrisrDsoDBAPT2nEHt_qY_p5zZhoko/s1600/helperblogger.com-facebook.png" /></a>    <a href="http://www.twitter.com/helperblogger/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidGSHW1uif8gO6n3KBcG3ESFgcfRdTkmsjSSZIZ-QchCAT0-ifx3Vd41RTykn_Seyr_x413QiZLv82boiRLb6XUzpAp3fpJQMJnfS2Azt78ZrWQtBXPOcS7nPBIDKvK8nXXRTGWFx3Zhw/s1600/helperblogger.com-twitter.png" /></a>    <a href="https://plus.google.com/u/0/106527290580119996124"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECe6mr6MiQpBkEwkpqoOtSodIu9uYEldJrgiuXEM6i9CbxzsbTJdTGZGY31xB1R_3BJsBNiuxtuYqFMbkLvzPw4a1uzzgV8sBH99OxM03mGS7t8kfGZ2z3g8l56dqPmRQw4FndLVOF5Q/s1600/helperblogger.com-google_plus.png" /></a>    <a href="http://www.feeds.feedburner.com/hblogger/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBgs1O1x_AlWlkNjsv5-s_msc4DpamnMVTywio3gYb4ErmggfOTdCw5211CD9TkIc6Su66UoHPbpFwTiljwRnW7cY_tGP9Tirk4tFCoeJBRaAvERrKx1XTPPi15_5usgT9WOXBS2Jwcx8/s1600/helperblogger.com-rss.png" /></a>    <a href="http://www.youtube.com/helperblogger1/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoor8cXmDXlNi7b_5prI3LO-SO5WSrsg_ciHktAKOuamISxC8YfmoeYAX0eVVgzTMKCyUaGKT7QG5kE0_CEfWOY0DN6qZ_TJVsXbWa6gjV8IeC9uymiXPT3T-oLRv0kctXQE9l-7nIrSs/s1600/helperblogger.com-youtube.png" /></a></p></center>

اتمنى ان الشرح اعجبكم

الموضوع الاصلي :
معهد خبراء بلوجر

تابع كل جديد