JohnyCassiaResponsivedemo

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

• ادخل مدونتك .

قم باضافة هذا الكود فى اداة جديده 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/AVvXsEhmB3viUb8GXctTEE6bTgouhHJtyeXkNyf1jtNyIq9hfLEHjhbDz6mrr3tbsQkmE0Msylg-HOLxDRtFUoelIAufO8oI8SH8LAP7KgP2VoVAk21a-iTcypOf0dHpjsa0qccQatEJNtKYUHcI/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/AVvXsEjxXpvjNiTDCmA-VHmc0y0zHtxLMLcZmbctpNbJB3QGaIzf3EXmRaa_ASiUUbgB8CO6R8syAzxN5QaO6Uh-DYOqXxTdLnygQeQdKyI3ONHU3UOIiB3MqrMOVC_CIyO0K0OUIoVavfkzB8Cz/s1600/tw-hover.png);

}

   #social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGS2UWmRhUUtzzy-8lwYTkWjpRaFV2YxRR25znokg8_fCtFUuG9_vyddIuEmF5vJE6rsjEUdG48583IotlJwHi7ZzVJalPXeEQt6gMVS5PNK0DqUnKqSO-CotyT0Ztw1EcpDHcdiJDmvu/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/AVvXsEigURq_Ouduu5x6v4GE1oG_rsWWxdmvtiunYJWwUSVJpM8NQuJ6rxP9MnpDFB2oKhvNlSYs2CFpH5H0ZLsQ0GSzGHhRi725vZVSKGgUVuRXfG3VbG3gHPBuQVOSK36v2fv8SwTv6BCbs66-/s1600/fb-hover.png);

}

   #social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMFX9usG3CYkMOJASwPAfDNK2uu7jdXv0q_xq9KQHEmKS6k1C-vz42ewapKLz6FqfP_9GzwJqrJ6OVlf3OvMPkDzV2J8f_4-_OvbzcEsQGKkNaiT7weDGqh0aI-DIVcn77jMKCLkM8PSq1/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/AVvXsEiKcKmXUmFl9bOAAJsX0xBRYTu5j_hc7I7xQ2I1kMuTJaTZLS4vnKkm8TBKAu8ZanQGr2YYofCHrXHZsTniTGy-ZX1C91l2n5EPg50W3Pptt5_Fbwz9auqy6n6yRpv8Ol6KWIQBpORr40XR/s1600/yo-hover.png);

}</style>