ازرار التواصل الاجتماعي بشكل خاص وانيق

بسم الله الرحمان الرحيم

اما بعد متابعي ومتابعات مدونة حاسوبي Astuce

اليوم اتيت لكم بازرار التواصل الاجتماعي بشكل خاض وانيق

ازرار تضفي جمالا على مدونتك كانت او موقعك الخاص

بدون اطالة لنرى الازرار

معاينة

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

اضف اداة  HTML/JavaScript والصق فيها الكود التالي

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<center>
<style>
ul.social
{
cursor: default;
margin: 0;
color:#fff;
}
ul.social li
{
position: relative;
display: inline-block;
margin: 0.25em;
top: 0;
color:#fff;
border-radius: 6px;
overflow: hidden;
background: #444;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
-moz-transition: background-color .2s ease-in-out, top .2s ease-in-out;
-webkit-transition: background-color .2s ease-in-out, top .2s ease-in-out;
-o-transition: background-color .2s ease-in-out, top .2s ease-in-out;
-ms-transition: background-color .2s ease-in-out, top .2s ease-in-out;
transition: background-color .2s ease-in-out, top .2s ease-in-out;
box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px 1px 0px rgba(255,255,255,0.1);
}
ul.social li:before
{
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
ul.social li.twitter:hover { background-color: #2DAAE4; }
ul.social li.facebook:hover { background-color: #3b5998; }
ul.social li.youtube:hover { background-color: #BF2E25; }
ul.social li.googleplus:hover { background-color: #DA2713; }
ul.social li:hover
{
top: -5px;
}
ul.social li:active
{
top: 0;
}
ul.social li a
{
display: block;
position: relative;
width: 48px;
height: 43px;
outline: 0;
color: #fff !important;
line-height: 48px;
font-size: 25px;
text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
}
ul.social li a span
{
display: block;
text-indent: -9999px;
}
.ftwitter::before{content:"\f099";font-family:fontawesome;}
.ffacebook::before{content:"\f09a";font-family:fontawesome;}
.fyoutube::before{content:"\f167";font-family:fontawesome;}
.fgoogleplus::before{content:"\f0d5";font-family:fontawesome;}
.youtube a{text-align:center;text-decoration:none;}
.twitter a{text-align:center;text-decoration:none;}
.facebook a{text-align:center;text-decoration:none;}
.googleplus a{text-align:center;text-decoration:none;}
</style>
<ul class="social">
<li class="twitter"><a href="https://twitter.com/astucehassoubi" class="ftwitter" target="_blank"><span>Twitter</span></a></li>
<li class="facebook"><a href="https://www.facebook.com/astuce.hassoubi/" class="ffacebook" target="_blank"><span>Facebook</span></a></li>
<li class="googleplus"><a href="https://plus.google.com/107697546224113579108?prsrc=5" class="fgoogleplus" target="_blank"><span>Google+</span></a></li>
<li class="youtube"><a href="https://www.youtube.com/channel/UCnY0--54e47UJk1sk0L0x5w" class="fyoutube" target="_blank"><span>YouTube</span></a></li>
</ul>
</center>

تحديد الكل

احذف الكود التالي اذا كانت مكتبة Font Awesome مضافة الى موقعك

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

مبروك عليك الاضافة والى درس آخر انشاء الله تعالى

• غرّد
• شارك
• شارك
• شارك
• شارك