Home اضافات بلوجر جديد: ايقونات المشاركات بخاصيه .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/AVvXsEi6xYuJ6gQSOlvFNEn3kOYf9c3niTXu_NkYYU3UCcNxRDBKZ6KZvP_tnXpvtXDrWj54N0oUOSeTtfMtUXd0DPGquXiZlYwRM-lMhlhXHDPfrfZ713vveXlnoF6q5-alCa6p2lZsXEB7rvw/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZAe1WL8FRlPO4B5DWtGYJUZhsOSInmjnnykVyQg9t_Qt6598DxsuVC9IhX9W1WchVM0BROhNsxYdbyXzeFBIWvjVPYtq8-bySA60QdXIzFwmYPTXjZLZMv-VoeZvf9ba46eb_0biQ-S0/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/AVvXsEgiSoJ2sTcVU9T-_QYstaZkoiSpE9wWgVSPXCF5uuQ7Vpg-HUHODuqKyZwd1hHiRn3E9T0LlLGi30znezHOXYPIBmOXcdUBRXZdHzBUkRZqyCyd5o80mclPjKK2DTcwu6p8GHI01vpYvL4/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/AVvXsEimqSSK6blPcWuo3u4BVTjMXNtK1M_Dj1W_1FbM4qNY69KS1-DPte1ZFqkjJqcUGXuCuXhHausTiWCfBB8S2sF65q1PqzmPYGGFPC2BkwC6w8MdtuSCxREW3A7HED9DYLq9CZyUr6HoOzc/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKwIFqFdhHp8ZHTPXROZmPXb72kp1UmCeqOzsSWiv5sLKvPEsJL-J6casCHVInHXZzKNaEIH6988GP7ygCoE5O23bJSVbHM5XIgYAOB5XlUYxN0kKewHnxIMcMqXnB-M09JKhyr_rVaw/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/AVvXsEi6xYuJ6gQSOlvFNEn3kOYf9c3niTXu_NkYYU3UCcNxRDBKZ6KZvP_tnXpvtXDrWj54N0oUOSeTtfMtUXd0DPGquXiZlYwRM-lMhlhXHDPfrfZ713vveXlnoF6q5-alCa6p2lZsXEB7rvw/s1600/helperblogger.com-facebook.png" /></a>    <a href="http://www.twitter.com/helperblogger/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZAe1WL8FRlPO4B5DWtGYJUZhsOSInmjnnykVyQg9t_Qt6598DxsuVC9IhX9W1WchVM0BROhNsxYdbyXzeFBIWvjVPYtq8-bySA60QdXIzFwmYPTXjZLZMv-VoeZvf9ba46eb_0biQ-S0/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/AVvXsEgiSoJ2sTcVU9T-_QYstaZkoiSpE9wWgVSPXCF5uuQ7Vpg-HUHODuqKyZwd1hHiRn3E9T0LlLGi30znezHOXYPIBmOXcdUBRXZdHzBUkRZqyCyd5o80mclPjKK2DTcwu6p8GHI01vpYvL4/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/AVvXsEimqSSK6blPcWuo3u4BVTjMXNtK1M_Dj1W_1FbM4qNY69KS1-DPte1ZFqkjJqcUGXuCuXhHausTiWCfBB8S2sF65q1PqzmPYGGFPC2BkwC6w8MdtuSCxREW3A7HED9DYLq9CZyUr6HoOzc/s1600/helperblogger.com-rss.png" /></a>    <a href="http://www.youtube.com/helperblogger1/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKwIFqFdhHp8ZHTPXROZmPXb72kp1UmCeqOzsSWiv5sLKvPEsJL-J6casCHVInHXZzKNaEIH6988GP7ygCoE5O23bJSVbHM5XIgYAOB5XlUYxN0kKewHnxIMcMqXnB-M09JKhyr_rVaw/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/AVvXsEi6xYuJ6gQSOlvFNEn3kOYf9c3niTXu_NkYYU3UCcNxRDBKZ6KZvP_tnXpvtXDrWj54N0oUOSeTtfMtUXd0DPGquXiZlYwRM-lMhlhXHDPfrfZ713vveXlnoF6q5-alCa6p2lZsXEB7rvw/s1600/helperblogger.com-facebook.png" /></a>    <a href="http://www.twitter.com/helperblogger/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZAe1WL8FRlPO4B5DWtGYJUZhsOSInmjnnykVyQg9t_Qt6598DxsuVC9IhX9W1WchVM0BROhNsxYdbyXzeFBIWvjVPYtq8-bySA60QdXIzFwmYPTXjZLZMv-VoeZvf9ba46eb_0biQ-S0/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/AVvXsEgiSoJ2sTcVU9T-_QYstaZkoiSpE9wWgVSPXCF5uuQ7Vpg-HUHODuqKyZwd1hHiRn3E9T0LlLGi30znezHOXYPIBmOXcdUBRXZdHzBUkRZqyCyd5o80mclPjKK2DTcwu6p8GHI01vpYvL4/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/AVvXsEimqSSK6blPcWuo3u4BVTjMXNtK1M_Dj1W_1FbM4qNY69KS1-DPte1ZFqkjJqcUGXuCuXhHausTiWCfBB8S2sF65q1PqzmPYGGFPC2BkwC6w8MdtuSCxREW3A7HED9DYLq9CZyUr6HoOzc/s1600/helperblogger.com-rss.png" /></a>    <a href="http://www.youtube.com/helperblogger1/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKwIFqFdhHp8ZHTPXROZmPXb72kp1UmCeqOzsSWiv5sLKvPEsJL-J6casCHVInHXZzKNaEIH6988GP7ygCoE5O23bJSVbHM5XIgYAOB5XlUYxN0kKewHnxIMcMqXnB-M09JKhyr_rVaw/s1600/helperblogger.com-youtube.png" /></a></p></center>



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

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

تابع كل جديد 
By
Similiar tagsاضافات بلوجر
الاشتراك في: تعليقات الرسالة (Atom)