اضافة أيقونات مواقع التواصل الإجتماعى بشكل ثلاثي الابعاد | حلمي حلمكم

اضافة أيقونات مواقع التواصل الإجتماعى بشكل ثلاثي الابعاد

السلام عليكم
أيقونات مواقع التواصل الإجتماعى كثيره جدا ومنتشره جدا على الكثير من المواقع والمدونات , ولكنى اليوم جئت لكم بأحدث شكل من أشكال هذه الأيقونات وهو شكل ثلاثى الأبعاد , بالإضافه إلى وجود تأثير عليها يجعلها تدور حول محورها عند المرور عليها بمؤشر الماوس

قم بالذهاب إلى تخطيط مدونتك وأضف أداه HTML/JAVASCRIPT وضع فيها الكود التالى

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center>
<div id="social">
  <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIUFHAri06YtnoLdZmTTnvJYXc-MxCHEsknhCnFdzN3GpUnVrmBaXN8cUDVlyP_Ct0Mqjc2iE0Aae_CbVJq2KcrXV_OR8ippzjz76GpRdw9OMsMp00C3HxReMAL9YDqFtKfqfXQlK0qIo/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDS6k0ZEoD6sziGPjjqtFIghJ3nCZYvoa_0YW-Uv_OIZrRGxOb3g-vICz9Ui1wQ61hN9B5Iu8h-UvC5M_5Q66jCedLNc4VW-wXaoi1MGZ_pNvlpEPIc1sqzopNhraqH3DPHG9nY5AfkppA/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLHKUzfKWDyWE6YvAoChx2XVyamKsqtVOS7giIDxggFQJL7EWimcl44KMG5DKNktm8rOkI2W9YTl3MUtAmSrZOU6QKGLWuCG7roWo1FhL9wlkDLdgYzOzmoN4cDnT_dNpNpkY84kF2Snn/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQPQVec1zc4eO0IAmTgm0VbuoMsILiHxFt04FmIoKXm_u7e1AjezvM9JYW2r2HNaA5aXBAdINFAfDL6AeoT9BY7LxwqCbZo6jI9oZFkwmKpf2rmh98ft1u17k4SFG7hd0jceLS1ya87_Jc/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLRJ7fBrg1M9z0i9VZUot9rinaJdJYlnW9O0GIT7lpTFv3iT5YfPE3jSns9QrVOyvROxGwH4PeimyxnXTZFwlVt-E1cL7AHv9s2-L5qVPbjbTfWASe6PYIgZ_dnZCPT8HFhFPmHxoiOH7n/s1600/GOOGLE-PLUS-48x48.png"/></a>   <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjER2TVxFgPRlqN4sCyGm6O9G1rozpG4YEvgVz9s6uAUHGJN3ksDALCsHYDBa1eKrLhw1gMI2DrFdn6shU1VZl_oqUm5f1yxDV4vI4IIGy6PFPadxIJjVXM1rXMMR44QZOgGoeWck4dVjaJ/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>  </div>
<br/>  <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a> </center>

غير هذه الكلمات في لكود اعلا بحساباتك
YOUR-FEED-URL-HERE
YOUR-EMAIL-RSS-URL-HERE
YOUR-FACEBOOK-PAGE-URL-HERE
YOUR-TWITTER-URL-HERE
YOUR-GOOGLE-PLUS-URL-HERE
YOUR-PINTEREST-URL-HERE
YOUR-FEEDBURNER-URL-HERE
الى اللقاء...ابو هشام الحمداني