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

السلام عليكم ورحمة الله وبركاته

كما عودتكم خبراء الحاسوب على الجديد ، أقدم لكم اضافة مميزة في درس اليوم ازرار الشبكات الاٍجتماعية
 مع تأثيرات Css3 بشكل رائع وتأثيرات متحركة فعند تمرير مؤشر الماوس فوقها تدور بشكل جميل و عند اٍزالة المؤشر تدور بالعكس لتعود اٍلى حالتها الاٍبتدائية وتحتوي الاٍضافة على أزرار فيسبوك وتويتر واليوتيوب. اضافة اٍلى كونها تزيد من معجبيك ومتابعيك عبر المواقع الاجتماعيه .

كود الاضافه :

<div id="social">

<ul class="social-sidebar">

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

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

<li><a href="http://www.youtube.com/geekmostafa" 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/AVvXsEgPbc4sPIbEOMDxUVFQLtNGcz65P2vwowr7eIhIVdQRZHNs5tb13HagxG-xfJ7ycCUc9VkUEMyayRm2IaMWVt3sPls2kGYv62avk2BL6BlInELhNBOnegIFvLLoMqyRcHAJL3_H14DYlSzt/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/AVvXsEjH5MCFTSpptlftTxPw14qx89Zdyxj9QM4ChbLYcQu6omIerT1z_tY_soRW2YzOC3_622ru40xMdwvfGUOWfjCHfZXOR5X1XGbckTYqeoQ6eflkCsLtVJlME45q_cEdsAG0nBi0hy33A68R/s1600/tw-hover.png);

}

   #social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgacqobR-vThQL-MUvKr7eNy6pa651mqj9W-x6JVDALXjoNbL4b2mEo71qpcKIJHM9Cj1oj_cYhheMDdJgo31Tcl225V-G3D2yWHL_M_9vBDNNFVamNSETcxNDThpC4Wh4qOQHuLbfTtRWo/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/AVvXsEhGvpEhzXclx029g_mO_tw-hpyPXQo9hkqoROhVMqasG_tQfRgNPRejBVPj6Fr1b_TKcLJYeG4pcXTmbBHtVscI8F6YJ1fdBd9QNExIpol33CRpgs-xprYy_4xw8VGYIkGQnh-qMywwBtkf/s1600/fb-hover.png);

}

   #social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmp3UssuV-DLP7m45gme5XjQ6ULdhdOtykeCfI0uHv-hcowVmhGtYKmM1ti_fg4yaiYQKHaNv9r2R0VdszMr7YFeOEHSw1QLqSBSG_HYnut2m2QBuzNItEULYvYdhoqQ_NK3SqVOKwQ0Sp/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/AVvXsEg4NpOKUVIt8Rp-wYyPRsQ3yJY5jGjDqD3znA_ub4Y_E8aBeMMcQJHZG9HYKhUTxRudqA_qMaZ5qU6oFMzsy6_yRmubDsjnXcmyXvlKGi9fnv1d96CNTFFhw_pM2yzSorsTiFyXoHQwM3O9/s1600/yo-hover.png);

}</style>

كيفية التركيب :

اٍذهب الى لوحة التحكم ← تخطيط ← إضافة أداة HTML/JavaScript.

ثم الصق الكود ،
مع تغيير ما بالون الأحمر بصفحتك على الفيسبوك

مع تغيير ما بالون البرتقالي بحسابك على تويتر

مع تغيير ما بالون الأخضر قناتك على اليوتيوب

و قم بحفظ الأداه و مبروك عليك هذه الإضافه الجميله .
و انتظروا منا خبراء الحاسوب الجديد بإذن الله ، ونسعي الى تطوير محتوي الويب العربي .

أرجو ان يكون أعجبكم الموضوع و الإضافه ، والسلام عليكم ورحمة الله وبركاته

منشورة في: إضافات بلوجر