اليوم السابع |
09-21-2018 01:15 PM |
كود رائع للمواقع الاجتماعية بخاصية css
الكود اكثر من رائع وبعمل بتاثير متحرك جميل وجدته فى احد المنتديات والمواقع فنقلته لكم التركيب ضعه فى اى مكان تريده
الخطوات
- قم بتحميل الصور ستجدها مضغوطة
- فك الضغط عن الفولدر social
- قم برفع مجلد social داخل مجلد صور منتداك وهو images
كود الهاتمل
كود:
<div id="socialbdrssliding">
<ul>
<li class="bdrs-gplus">
<a href="رابط جوجل بلس" rel="nofollow" target="_blank" title="جوجل بلس">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
جوجل بلس</div>
</a></li>
<li class="bdrs-facebook">
<a href="رابط الفيس بوك" rel="nofollow" target="_blank" title="فيس بوك">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
فيس بوك</div>
</a></li>
<li class="bdrs-twitter">
<a href="رابط تويتر" rel="nofollow" target="_blank" title="تويتر">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
تويتر</div>
</a></li>
<li class="bdrs-rss">
<a href="رابط التغذية" rel="nofollow" target="_blank" title="rss feed">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
RSS</div>
</a></li>
<li class="bdrs-youtube">
<a href="رابط قناة اليوتيوب" rel="nofollow" target="_blank" title="يوتيوب">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
يوتيوب</div>
</a></li>
</ul>
</div>
كود css
كود:
#socialbdrssliding a {
font-family: 'Open Sans', Helvetica, 'Exo 2', 'Droid Arabic Kufi', tahoma, sans-serif;
width: 40px;
transition: width 0.4s;
-webkit-transition: width 0.4s;
-moz-transition: width 0.4s;
overflow: hidden;
}
#socialbdrssliding a:hover {
width: 100px;
overflow: hidden;
}
#socialbdrssliding {
float: right;
position: relative;
height: 40px;
}
#socialbdrssliding ul {
margin: 0;
}
#socialbdrssliding li, #socialbdrssliding li a, #socialbdrssliding li .bdrs-thumb, #socialbdrssliding li .bdrs-title {
display: block;
position: relative;
width: 40px;
height: 40px;
}
#socialbdrssliding li, #socialbdrssliding li a, #socialbdrssliding li .bdrs-title {
float: left;
width: auto;
overflow: hidden;
}
#socialbdrssliding li a {
width: 40px;
line-height: 40px;
color: #E9E9E9;
font-size: 11px;
font-weight: bold;
text-shadow: 1px 2px 2px #000;
text-decoration: none;
}
#socialbdrssliding li .bdrs-thumb {
float: left;
}
#socialbdrssliding li.bdrs-facebook a {
background-color: #3B5998;
}
#socialbdrssliding li.bdrs-facebook .bdrs-thumb {
background: url('images/social/FACEBOOK.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-gplus a {
background-color: #d94a39;
}
#socialbdrssliding li.bdrs-gplus .bdrs-thumb {
background: url('images/social/googleplus.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-twitter a {
background-color: #3CF;
}
#socialbdrssliding li.bdrs-twitter .bdrs-thumb {
background: url('images/social/TWITTER.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-rss a {
background-color: #F88F16;
}
#socialbdrssliding li.bdrs-rss .bdrs-thumb {
background: url('images/social/rssbd.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-youtube a {
background-color: #BD3518;
}
#socialbdrssliding li.bdrs-youtube .bdrs-thumb {
background: url('images/social/youtube.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {
background-color: #666;
}
الشكل النهائى
تحميل الصور
كود:
arabsharing.com/do.php?id=179737
او
كود:
up.top4top.net/downloadf-994z4luc1-zip.html
|