اضافه جافا سكربت بالتخطيط
==============================
<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/AVvXsEiKtgvJBhSA3m1SN-0Q5VFcgZ8UFwN152mXqeqX-AVtnGCy8G_sZPPRXbFb1dHOHZ_cEUwf7ICXBXDeM0lEp8pblapy9jeyL8p6zGvL9g5r32KorWwRaIKhDmBQgENIluU_Zp5ZmHnHow/s1600/facebook.png)
no-repeat 0 -88px}
.abt-social-slide li
a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtgvJBhSA3m1SN-0Q5VFcgZ8UFwN152mXqeqX-AVtnGCy8G_sZPPRXbFb1dHOHZ_cEUwf7ICXBXDeM0lEp8pblapy9jeyL8p6zGvL9g5r32KorWwRaIKhDmBQgENIluU_Zp5ZmHnHow/s1600/facebook.png)
no-repeat 0 0}
.abt-social-slide li
a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7OS7HUyFOeAeoEQ05opT_SOPG7gSRm6w40uDD2yTmaGqwO36vLoY7d76cdKsaO8NY5280qFOFJe_9vSC_QyJIStksTr_Jv6TnGcAqoXCIJNHjM-a9RAmqS5DfyP0sUeCqkCtl3Q55w/s1600/twitter-1.png)
no-repeat 0 -88px}
.abt-social-slide li
a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7OS7HUyFOeAeoEQ05opT_SOPG7gSRm6w40uDD2yTmaGqwO36vLoY7d76cdKsaO8NY5280qFOFJe_9vSC_QyJIStksTr_Jv6TnGcAqoXCIJNHjM-a9RAmqS5DfyP0sUeCqkCtl3Q55w/s1600/twitter-1.png)
no-repeat 0 0}
.abt-social-slide li
a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPdJRnz5PYir2St0Er9oOi6dlMbE8RDOS32VGF3y6Tz_RyvJ7WcmaagCprj-5cntysQ5jlFQ7_sLrqFCy1D4FYeNQ5MR5kfB9EhFC1YZce1CR196qiO80vYGZCqf0z0HSOLpErRoBMSg/s1600/google.png)
no-repeat 0 -88px}
.abt-social-slide li
a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPdJRnz5PYir2St0Er9oOi6dlMbE8RDOS32VGF3y6Tz_RyvJ7WcmaagCprj-5cntysQ5jlFQ7_sLrqFCy1D4FYeNQ5MR5kfB9EhFC1YZce1CR196qiO80vYGZCqf0z0HSOLpErRoBMSg/s1600/google.png)
no-repeat 0 0}
.abt-social-slide li
a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRjSANBDsGKzcPVkXRnH9atEGbb3gxF-3G1XB76oOXdPc0V4VqsJZ4zxw_J8_lUEcVqtABryn7UXeQ0shh0l-0iRb8Hzpw_ABqt9uY1pw1kSV-iR-YrkAOq3p8qqK7hN2r8OjcIyEpxQ/s1600/twitter.png)
no-repeat 0 -88px}
.abt-social-slide li
a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRjSANBDsGKzcPVkXRnH9atEGbb3gxF-3G1XB76oOXdPc0V4VqsJZ4zxw_J8_lUEcVqtABryn7UXeQ0shh0l-0iRb8Hzpw_ABqt9uY1pw1kSV-iR-YrkAOq3p8qqK7hN2r8OjcIyEpxQ/s1600/twitter.png)
no-repeat 0 0}
</style>
==============================
ليست هناك تعليقات:
إرسال تعليق