شبكة همس الشوق - كود رائع للمواقع الاجتماعية بخاصية 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; }

الشكل النهائى

https://up.hamsalshok.com/do.php?img=45508