اضافه مميزه وخفيفه بتغير اللون وتحطه باي مكان تحب
البحث عن
]]></b:skin>
فوقه
.social-links li {text-align: center;border: 1px solid #eee;margin-bottom: 30px;border-top: 0;box-shadow: -0.5px 1px 9px 0px #eee;padding: 58px 10px;}.social-links li.facebook {border-bottom: 5px solid #223f7b;color: #223f7b;}.social-links li i {font-size: 40px;}.social-links li a {background: #223f7b;color: #fff;transform: skew(-14deg,0);display: inline-block;padding: 1px 26px;padding-bottom: 5px;line-height: 28px;font-size: 15px;padding-left: 22px;}.social-links li p {margin-bottom: 14px;}.social-links li.instagram a {background: #8539b5;}.social-links li.twitter a {background: #1ea1ef;}.social-links li.youtube a {background: #cf1f1f;}.social-links li.instagram {border-bottom: 5px solid #8539b5;color: #8539b5;}.social-links li.twitter {border-bottom: 5px solid #1ea1ef;color: #1ea1ef;}.social-links li.youtube {border-bottom: 5px solid #cf1f1f;color: #cf1f1f;}
========================
ضع الكود بالجافا سكربت بالمكان المناسب
========================
<div class="social-links"><li class="facebook"><i class="fa fa-facebook"></i><p>إنظم لصفحتنا على فايسبوك بالظغط على زر</p><span><a target="_blank" href="https://www.facebook.com/">إعجاب</a></span></li><li class="instagram"><i class="fa fa-instagram"></i><p>إنظم لصفحتنا على الانستجرام بالظغط على زر</p><span><a target="_blank" href="https://www.instagram.com/">تابعنا</a></span></li><li class="twitter"><i class="fa fa-twitter"></i><p>إنظم لصفحتنا على تويتر بالظغط على زر</p><span><a target="_blank" href="https://twitter.com/">متابعة</a></span></li><li class="youtube"><i class="fa fa-youtube-play"></i><p>إنظم لقناتنا على يوتيوب بالظغط على زر</p><span><a target="_blank" href="https://www.youtube.com/">اشتراك</a></span></li></div>
ويمكنك وضع بالجافا سكربت : تهيئة 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(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0 0}
</style>
ليست هناك تعليقات:
إرسال تعليق