اضافة أزرار المواقع الإجتماعية متحركه و انيقة

بسم الله الرحمن الرحيم
والصلاة والسلام على نبينا الكريم محمد عليه وعلى اله افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته

احضرت لكم اليوم إضافة أكثر من رائعة  ان شاء الله تعجبكم
و هذه الاضافة هى أزرار المواقع الإجتماعية متحركه بتأثير css3 

طريقة التركيب : 

• ادخل مدونتك .
• قم باضافة هذا الكود فى اداة جديده HTML/JavaScript .

<div id="social">

<ul class="social-sidebar">

<li><a href="http://www.facebook.com/EgyGeniusOfficial" target="_blank " class="fa" title="صفحتنا على الفيس بوك"></a></li>

<li><a href="http://www.twitter.com/thelover500" target="_blank " class="tw" title="صفحتنا على تويتر">twitter</a></li>

<li><a href="http://www.youtube.com/geeksamu" target="_blank " class="yo" title="قناتنا على اليوتيوب">youtube</a></li>

</ul>

</div>

<style>

#social .social-sidebar li a, .social-sidebar li a:visited { width: 40px; height: 40px; display: block; text-indent: -9999px; overflow: hidden; text-decoration: none; opacity: 0.2;}

#social {}

 #social .social-sidebar { margin-top: 10px; float: left; margin-left: 13px; margin-bottom: 11px;}

  #social .social-sidebar li { float: left; list-style: none; width: 69px;  height: 68px; margin: 0 13px;}

   #social .social-sidebar li .tw { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgixmOMHWjyTpHQK118RwgOgmJOocV5M8Qk4qSic34GqPKZWhj51KY8bPYGjGjwpnCAdcehrkYV7R0-axg6vUVQgrTaatZnzZ3fuhvqkHougqG7H4-B2Ty_oV50tDhDmKah8AI_geEN2k_j/s1600/twt.png); opacity: 1; width: 69px;  height: 68px; -webkit-transition: all 1.05s ease;  -moz-transition: all 1.05s ease;  -o-transition: all 1.05s ease;  transition: all 1.05s ease;}

   #social .social-sidebar li .tw:hover {

    -webkit-transition: all 0.55s ease;  

    -moz-transition: all 0.55s ease;  

    -o-transition: all 0.55s ease;  

    transition: all 0.55s ease;

    -webkit-transition: all 0.55s ease;  -webkit-transform: rotate(360deg);  -moz-transform: rotate(360deg);  -o-transform: rotate(360deg);  -ms-transform: rotate(360deg);

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoNUXFV95hn37uU9e6znoCfYdsJ1BcwMZLvYGAvcbEQOoXoHgYMRU8wiLzp7sQabEhoQoFDdst_XDHLw0EoAtlqM2oxtKP-389cwjZ0RqEEVvpe1Xq8jF_QL1ikVTXuDb6bX5XsM79x5EB/s1600/tw-hover.png);

}

   #social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7zg9BnjiH5pf75lIp2Zddh_7zmWopHIKtzbMUT7oAvDBNaoR35isDRQqAoe6DPt3XyEcCX-jL2xYKZwc-AYYosWwU1oc8zFx82GbLMIvEsLFN-Vsv4yFDDIdfl4FsqfJCVdT6XNXStGL/s1600/fcb.png); opacity: 1; width: 69px; height: 68px; -webkit-transition: all 1.05s ease;  -moz-transition: all 1.05s ease;  -o-transition: all 1.05s ease;  transition: all 1.05s ease;}

   #social .social-sidebar li .fa:hover {

    -webkit-transition: all 0.55s ease;  -moz-transition: all 0.55s ease;  -o-transition: all 0.55s ease;  transition: all 0.55s ease;  -webkit-transition: all 0.55s ease;  -webkit-transform: rotate(360deg);  -moz-transform: rotate(360deg);  -o-transform: rotate(360deg);  -ms-transform: rotate(360deg);  

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC0OT25jo-VpzGzR0U_SIqhFykk6BO9CjqFurLRjYfPEW9nQnqqDwCKlW2sKZTROzkHVUliODWf_tnf-xsS-uCRlyMbR5Kj0ber-blRbxboWGEOYbR35VEInujOdTThfS0uq7WRw_mgGKD/s1600/fb-hover.png);

}

   #social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWCbspDQHHatTKvz36DGKUlw25udAV_vJmt73YBvWAjxi1jqFdCPQ5O4roa2i54AJ9Z9Xw3fgHUdltxAs_AEv-g_f86gyprRDyE3G8b8AXGKLlK0C1DDqna8lD_yVuBfR1ZQUZgc3nQfZm/s1600/yo.png); width: 69px;  height: 68px; margin-top: 4px; opacity: 1; -webkit-transition: all 1.05s ease;  -moz-transition: all 1.05s ease;  -o-transition: all 1.05s ease;  transition: all 1.05s ease;}

   #social .social-sidebar li .yo:hover {

    -webkit-transition: all 0.55s ease;  

    -webkit-transform: rotate(360deg);  

    -moz-transform: rotate(360deg);  

    -o-transform: rotate(360deg);  

    -ms-transform: rotate(360deg);

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruJxJ66rkpSmIK8tFhd5OCCd7miyM7s1C9I7uxgUFJ3U3gOdn6wuGs4-WxZg4nNzGRRtUBuwk1KSNQVnGQHOx6l0KO1tQ8BgD0IGLBVI12QJ6VMU4v8WfiRrY7GHd8aO53c3dzfjT6782/s1600/yo-hover.png);

}</style>

قم بتغيير

EgyGeniusOfficial بمعرف فيسبوك الخاص بصفحتك

thelover500 بتويتر الخاص بك

geeksamu بقناتك على يوتيوب

الان احفظ الاداة و استمتع بتلك الاضافة الجميلة