أهلا وسهلا بك زائرنا الكريم في PBBoard Community Forum، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .





كود ايقونات التواصل الاجتماعي

اقدم كم كود ايقونات تواصل الاجتماعي عملته قبل فتره لكن لم يسن لي الوقت لطرحه لكم اليوم اضعه بين ايديكم يمكنك اضافته في ..



23-06-2015 10:57 مساء
islamov
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 09-04-2015
رقم العضوية : 5994
المشاركات : 27
الدولة : هولندا
الجنس : ذكر
تاريخ الميلاد : 25-9-1958
قوة السمعة : 0
موقعي : زيارة موقعي
PBBoard Version : 3.0.1
 offline 
اقدم كم كود ايقونات تواصل الاجتماعي عملته قبل فتره لكن لم يسن لي الوقت لطرحه لكم

اليوم اضعه بين ايديكم

يمكنك اضافته في اي مكان يناسبك في موقعك أو منتداك

الكود

<div class="Social">
<a target="_blank" href="رابط حسابك">
<div class="facebook">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-48.png">
</div></a>
<a target="_blank" href="رابط حسابك">
<div class="google"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-google-plus-48.png">
</div></a>
<a target="_blank" href="رابط حسابك">
<div class="twitter"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-twitter-48.png">
</div></a>
</div>



أكواد CSS
.Social{
top:200px;
width:50px;
height:200px;
right:0;
position:fixed
}

.Social:hover{
width:120px;
box-shadow:0 0 0    #000 
top:200px;height:200px;
right:0;
position:fixed
}

.facebook{
background-color:   #3b5998 
width:50px;
transition:width .5s ease .15s;
top:200px;
right:0;
position:fixed
}

.facebook:hover{
background-color:   #3b5998 
top:200px;
right:0;
width:120px;
position:fixed;
box-shadow:1px 1px 8px #000
}


.google{
background-color:   #de2f2f 
width:50px;
transition:width .5s ease .15s;
top:250px;
right:0;
position:fixed
}

.google:hover{
background-color:   #de2f2f 
top:250px;
right:0;
width:120px;
position:fixed;
box-shadow:1px 1px 8px #000
}

.twitter{
background-color:   #55acee 
width:50px;
transition:width .5s ease .15s;
top:300px;
right:0;
position:fixed
}

.twitter:hover{
background-color:   #55acee 
top:300px;
right:0;
width:120px;
position:fixed;
box-shadow:1px 1px 8px #000
}



» وبكذا انتهى موضوعي لليوم ...~




الكلمات الدلالية
لا يوجد كلمات دلالية ..


 







الساعة الآن 08:34 صباحا