كود المواقع الاجتماعية في الهيدر او الفوتر بطريقة مميزة

من طرف زائر في الثلاثاء سبتمبر 08, 2015 3:18 am

كود المواقع الاجتماعية في الهيدر او الفوتر بطريقة مميزة

السلام عليكم ورحمة الله وبركاته

الكود عبارة عن شريط به ايقونات للمواقع الاجتماعية بشكل جذاب

كود css وكود يضاف ببداية الهيدر او نهاية الفوتر كما تحبون

صورة للكود

http://i59.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>

ذكر المصدر عند النقل فجميع مايوجد هنا لن تجدة بمكان اخر هع