الاضافه لـ HTML/JavaScript
اختر المكان المناسب وهذا مثال
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</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/AVvXsEiShqMFomvP_J2nHfWhUmWjUJQMCx8O99ffcOJxJxtRqjh9aCWRUXFh0vkrJsQ-RlHJf_fq6ZGSIUjQXKK_S7l_tFz40JUQJ8DMsUrLOVQlEM1CAAJZRmhMDNKhqkkQN0dvbk0I08GJUQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiShqMFomvP_J2nHfWhUmWjUJQMCx8O99ffcOJxJxtRqjh9aCWRUXFh0vkrJsQ-RlHJf_fq6ZGSIUjQXKK_S7l_tFz40JUQJ8DMsUrLOVQlEM1CAAJZRmhMDNKhqkkQN0dvbk0I08GJUQ/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdcWbjvr-0WBYDfvO1ZCDDHy0_R83MsReglqJqOqUR9MSXMJ5L2XFAf4w4z8emEarwatEt5Zlm7xPKdv32E1yRw3g7dzxzlqzC3G-a42kHrfu3bj-S9tW8t42O3wCPmT_z4zm9Cc7uMw/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdcWbjvr-0WBYDfvO1ZCDDHy0_R83MsReglqJqOqUR9MSXMJ5L2XFAf4w4z8emEarwatEt5Zlm7xPKdv32E1yRw3g7dzxzlqzC3G-a42kHrfu3bj-S9tW8t42O3wCPmT_z4zm9Cc7uMw/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzUKdbp8ttd0TF3Be3QO5aD0bDta8ALW1Lyor8x539JwzvZ9f4BfZ-7aX-WttRhM-fcHt6ZA8uJ1X5TZ-sQXaMP4dadLqPrBprmAW5oAf__h1UjBuPNShzIieENgurXt5j8xQGRQbyQ/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzUKdbp8ttd0TF3Be3QO5aD0bDta8ALW1Lyor8x539JwzvZ9f4BfZ-7aX-WttRhM-fcHt6ZA8uJ1X5TZ-sQXaMP4dadLqPrBprmAW5oAf__h1UjBuPNShzIieENgurXt5j8xQGRQbyQ/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq5ctGkNv9-0-PhpxzpjJCNNwt28zBdRcXL7T5OHoSZQPBU0HghdGADpjF0RsEiTrWBfi4l__TUIsCaRnCntjxNdtqJtFr1EEOTgfKXQy6BAtsKSqcXIge3uwnWifAv2e3e6eSA_tOcg/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq5ctGkNv9-0-PhpxzpjJCNNwt28zBdRcXL7T5OHoSZQPBU0HghdGADpjF0RsEiTrWBfi4l__TUIsCaRnCntjxNdtqJtFr1EEOTgfKXQy6BAtsKSqcXIge3uwnWifAv2e3e6eSA_tOcg/s1600/twitter.png) no-repeat 0 0}
</style>
وسلامتكم
0 التعليقات :
إرسال تعليق