أزرار المواقع الإجتماعية بشكل بسيط وتأثير مميز

السلام عليكم إخواني اتمنى ان تكونوا بخير

في هذا الموضوع سيتم طرح ازرار جميلة لاهم المواقع الإجتماعية

تتيمز هذه الاخير ببساطتها وتأثير مرور الماوس على الازرار

صورة من الإضافة

لتركيب الإضافة قم بإضافة اداة جديدة ثم ضع فيها الكود التالي :

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="http://www.arabe-eye.com" target="_blank">فيس بوك</a></li>
<li><a class="twitter" href="http://www.arabe-eye.com" target="_blank">تويتر</a></li>
<li><a class="google-p" href="http://www.arabe-eye.com" target="_blank">جوجل بلس</a></li>
<li><a class="rss" href="http://www.arabe-eye.com" target="_blank">خلاصات المواضيع</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhxfrbaRm5mgCflX9104Qcn65eD8QkbXz_WE36lA5EYEBCKMm-T2jOVfOYUwTSFcp74y_6etJjEoXgu84mXXPV_AUPzgel88syoriyd5flm1gZDKIkUvcvM84kqXWSrkXXlc4tw2b5AA/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhxfrbaRm5mgCflX9104Qcn65eD8QkbXz_WE36lA5EYEBCKMm-T2jOVfOYUwTSFcp74y_6etJjEoXgu84mXXPV_AUPzgel88syoriyd5flm1gZDKIkUvcvM84kqXWSrkXXlc4tw2b5AA/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6T4f8wud1KWQdCIxYWFOB6HOzRjfaLotJoo58pSvPBTzpt6aqLUU3WHqvL6cm48mWj8RypYmGi9-kKL3qCWZtwdoJkBNz5bTlu4Wzxr0kVXqs1wARHklNwSV_F98gWCU7klUlmUcFww/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6T4f8wud1KWQdCIxYWFOB6HOzRjfaLotJoo58pSvPBTzpt6aqLUU3WHqvL6cm48mWj8RypYmGi9-kKL3qCWZtwdoJkBNz5bTlu4Wzxr0kVXqs1wARHklNwSV_F98gWCU7klUlmUcFww/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_Icaa2JEgpVV4213CHe-RPVXJ_D49garUZ2CpSEsGOeQ3POHdObfVO8rlIfi-C0SOnhCbbLcDieTHE6NSZSbQGY-vRTB7QrPxUm5k0tpTtH7nRj7fFeLc96TstR6Zpd196_i0iK4hA/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_Icaa2JEgpVV4213CHe-RPVXJ_D49garUZ2CpSEsGOeQ3POHdObfVO8rlIfi-C0SOnhCbbLcDieTHE6NSZSbQGY-vRTB7QrPxUm5k0tpTtH7nRj7fFeLc96TstR6Zpd196_i0iK4hA/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3STOWjZy-NdciaOFzAqQ7aHePexdib6-wWvZORkdLiSmFR02cFgZ4y4vgAl2fNctov1kwLqv7Pb3s0jYgXjGdBDkHfrbb5iu510J6NRhrznQTWmarPIPQdMGA5KIRaB8PWi14HT4kSA/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3STOWjZy-NdciaOFzAqQ7aHePexdib6-wWvZORkdLiSmFR02cFgZ4y4vgAl2fNctov1kwLqv7Pb3s0jYgXjGdBDkHfrbb5iu510J6NRhrznQTWmarPIPQdMGA5KIRaB8PWi14HT4kSA/s1600/twitter.png) no-repeat 0 0}
</style>

غير فقط روابط مدونتي برابط كل موقع صفحاتك على الفيس بوك وتويتر وجوجل بلس وأيضا ضع رابط خلاصات المواضيع
 الذي يكون على هذا الشكل http://www.arabe-eye.com/feeds/posts/default غير فقط رابط مدونتي واترك الباقي

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