خدمات الجزيرة

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

• ادخل مدونتك .
• قم باضافة هذا الكود فى اداة جديده 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/AVvXsEhzzVTHFD1627r2qeWEPZ8vnyWZf4q8GZfeSqOvR1oiWP_GJ_G9dIUPbRUeignJ5bkCnvjO-nY230S3WeI_PfHlquKSZi6daYF42qt8T7peNDez2MRuGaAYXJfaPaQOVGCGZs6dMI1qflES/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/AVvXsEjKwifsCsyqbfKrPpSjGSz1gTQymW03usx7E2NC5XaVbxhdfaiadSCQRq8L8j3Ay3of4eFhROMi4BFbvMqJnt-ffq4_dPmbUmtyrl9-PDyxS1mz6Nc575fSZ7enNHgzRZAKDoVJUiekyfYD/s1600/tw-hover.png);

}

   #social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi590lQkJaNCe-7Khh3fxIme9yp6K1lIkvEV5AycLIjXewgyd_-Cy0weM2LU062YDh-Iw_WjWEt4y644rmIdWrl4wQQzHGRnyytrT0HaUnrb4-ZjLvaFdjuxnyJQ0Ut2ZCTcHRk8VEvbx_g/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/AVvXsEj_wgr9wqD4XMj56L86UKxUsw3bJF1UvGaiDJ9QoHgNLgzn5rs_NQDk1wkr9u_dazHcH59AcQj0O3HyVPbzadq5N3Q7woK3pWbgRpsKkXIoinT_rK9aJpAaqUaIkZntQVaqSmVK_tUB57K1/s1600/fb-hover.png);

}

   #social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixGmabTdE2ZGsXgzpQ6qCzJLx_P6yjEY4TUVzFhtYsoP0iCr5ji1Z8TeRlGFwwFHyZ1DgWlSfYf-3a4InRe-VcwFzHdyodb05J0Kz1sPt9ko-d5wZb9e1xwgR0Ze4o8hB_4UIxWoCtWvHN/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/AVvXsEiq-2nxCEzf3UGYyKFfBOS33-Jcq7B4ucqqxoKmM9c6fqTUagBA8SPltyCKhtWuNaeY882cEMQc2xO_omR4-lhKeXQ9152_TZrEjEvgwFqS99caXYY0PkaoE8CA1TsOn2x69kQEPd9YDf35/s1600/yo-hover.png);

}</style>