زائر زائر

 | موضوع: كود المواقع الاجتماعية في الهيدر او الفوتر بطريقة مميزة الثلاثاء سبتمبر 08, 2015 4:18 am | |
| تذكير بمساهمة فاتح الموضوع :كود المواقع الاجتماعية في الهيدر او الفوتر بطريقة مميزة السلام عليكم ورحمة الله وبركاته الكود عبارة عن شريط به ايقونات للمواقع الاجتماعية بشكل جذاب كود css وكود يضاف ببداية الهيدر او نهاية الفوتر كما تحبون صورة للكود  https://2img.net/h/oi59.tinypic.com/2wps6jc.gif اولا كود css - الكود:
-
#footer-down { clear: both; height: 60px; background: #DBDBDB; border-top: 2px solid #C2C2C2; bottom: 0; } .middle { width: 200px; } /* social_icons */ .social_icons { float: right; height: 50px; padding-right: 0; width: 229px; } .social_icons > ul { float: left; margin: 10px 0 0; } .social_icons ul li { float: right; margin: 0 1px 5px 0; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } .social_icons a { background: url("http://i21.servimg.com/u/f21/16/46/77/76/social12.png") no-repeat scroll 4px 3px #dcdcdc; display: inline-block; height: 37px; text-indent: -9999px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; width: 37px; } .social_icons .fb { background-position: -86px 3px; } .social_icons .fb:hover { background-color: #3B5998; background-position: -86px -29px; } .social_icons .tw { background-position: -125px 3px; } .social_icons .tw:hover { background-color: #18B7F1; background-position: -125px -29px; } .social_icons .google { background-position: -205px 3px; } .social_icons .google:hover { background-color: #D94A39; background-position: -205px -29px; } .social_icons .rss { background-position: -246px 3px; } .social_icons .rss:hover { background-color: #FE9900; background-position: -246px -29px; }
ثانيا كود HTML - الكود:
-
<div id="footer-down"> <div class="middle"> <div class="social_icons"> <ul> <li><a class="fb" href="#" target="_blank">face</a></li> <li><a class="tw" href="#" target="_blank">twitter</a></li> <li><a class="google" href="#" rel="publisher" target="_blank">google</a></li> <li><a class="rss" href="#">rss</a></li> </ul> </div> </div> </div> ذكر المصدر عند النقل فجميع مايوجد هنا لن تجدة بمكان اخر هع |
|