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

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف زائر في الثلاثاء سبتمبر 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>

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


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل


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

مُساهمة من طرف THE ROCK في الأحد فبراير 07, 2016 6:49 pm


كود وتطوير رائعه
يعطيك العافيه وتسلم الأيادي المتألقه
على روعة ماخطت لنا من ابجديات واكواد ماسيه
بإنتظار روائعك القادمه بشوووق


THE ROCK
عضو فعال
عضو فعال

عدد المساهمات : 668


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في الثلاثاء مايو 17, 2016 7:28 pm


السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف 1M ThE BesT في السبت أغسطس 27, 2016 6:05 pm


1M ThE BesT
مؤسس الابداع العربي

مؤسس الابداع العربي

الجنس : ذكر

الدلو

عدد المساهمات : 25052

نقاط النشاط : 27783

السٌّمعَة : 304

بلد العضو :

العمر : 20


http://jalil.assassino

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في السبت أغسطس 27, 2016 10:22 pm


منور الموضوع


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف AmEr MaGroh في الأربعاء سبتمبر 14, 2016 11:27 pm


AmEr MaGroh
عضو نشيط
عضو نشيط

الجنس : ذكر

الدلو

عدد المساهمات : 342

نقاط النشاط : 412

السٌّمعَة : 9

بلد العضو :

العمر : 14


الرجوع الى أعلى الصفحة اذهب الى الأسفل

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

سجل دخولك لتستطيع الرد بالموضوع

لابد تكون لديك عضوية لتستطيع الرد سجل الان

سجل معنا الان

انضم الينا بمنتدي الابداع العربي فعملية التسجيل سهله جدا ؟


تسجيل عضوية جديدة

سجل دخولك

لديك عضوية هنا ؟ سجل دخولك من هنا .


سجل دخولك

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى