أيقونات المواقع الاجتماعية بخمسة أشكال مختلفة وخصائص CSS3

أقدم لكم اليوم اخواني زوار ومتابعي المدونة التعليمية للحاسوب ، وفي موضوع جديد من مواضيع إضافات بلوجر ، أيقونات المواقع الإجتماعية بخمسة أشكال مختلفة وخصائص CSS3 .

لإضافة احد هته الأيقونات  تابع الشرح التالي :

1- الذهاب إلى لوحة مدون .

2- انقر على تخطيط > إضافة أداة  إختر اضافة اداة  HTML أو جافا سكريبت .
قم بنسخ ولصق كود الأداة المراد إضافتها وأنقر على حفظ لتجد ان الاداة قد تمت اضافتها.

الأداة رقم الأولى :

كود الأداة :

<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"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-RSS-Email-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

الأداة الثانية :

كود الأداة :

<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"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Email-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

الأداة الثالثة :

كود الأداة :

<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"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

الأداة الرابعة :

كود الأداة :

<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"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Email-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

الأداة الخامسة : 

كود الأداة :

<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"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>