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

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

زائر
زائر
تمت المشاركة في الثلاثاء سبتمبر 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>

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

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

عضو فعال
عدد المساهمات : 668

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الأحد فبراير 07, 2016 6:49 pm
كود وتطوير رائعه
يعطيك العافيه وتسلم الأيادي المتألقه
على روعة ماخطت لنا من ابجديات واكواد ماسيه
بإنتظار روائعك القادمه بشوووق

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

زائر
زائر
تمت المشاركة في الثلاثاء مايو 17, 2016 7:28 pm
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي

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

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 6:05 pm
كود جمييل شكرا لك

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

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 10:22 pm
منور الموضوع

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

زائر
زائر
تمت المشاركة في الأربعاء سبتمبر 14, 2016 11:27 pm
شكرااا

كود رائع

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

avatar
بصمة خالدة
الجنس : انثى

السمك

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

نقاط النشاط : 140976

السٌّمعَة : 2955

بلد العضو :

العمر : 31



معاينة صفحة البيانات الشخصي للعضوhttp://taqnyiat.ahlamontada.com/
تمت المشاركة في السبت يناير 28, 2017 11:47 pm
#تقنية_تكويد
#تعلم_تكويد
#برمجه_احلى_منتدى
#طور_منتداك
يعطيك العافية على العطاء
 واصل تالقك
التوقــيـــــــــــــــــــــع



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

avatar
عضو فعال
الجنس : ذكر

القوس

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

نقاط النشاط : 719

السٌّمعَة : 38

بلد العضو :

العمر : 20

معاينة صفحة البيانات الشخصي للعضوhttp://egyptian-cafe.123.st/
تمت المشاركة في الإثنين يناير 30, 2017 11:23 am
شكرا اخي الغالي على الطرح الرائع ,,,,,واصل تالقك .... مع جزيل الشكر ..." تحية مع الشكر
التوقــيـــــــــــــــــــــع

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

avatar
بصمة خالدة
الجنس : ذكر

القوس

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

نقاط النشاط : 35985

السٌّمعَة : 84

بلد العضو :

العمر : 31

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء مارس 21, 2017 1:21 am
بارك الله بيك
واصل
التوقــيـــــــــــــــــــــع

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

avatar
عضو محترف
الجنس : انثى

الثور

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

نقاط النشاط : 2081

السٌّمعَة : 9

بلد العضو :

العمر : 16




معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الخميس مارس 23, 2017 12:04 am
طرح مميز يعطيك العافية
التوقــيـــــــــــــــــــــع


أنـا فـتاة لآ أخــسـر #كــبريآئـي من أجـل بــقايـا حـب ،،
فـأنا أنـثــى لآيسـتطـيع أن يلــوي ذراعـي رجــل ...
أستطيـع ترک أغـلى شيء وأنا فـي قمـة السـعادة #واثـقة_من_نفـسي لـدرجـة أنـک لآ تـتحمـل #غـروري ...
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
Propellerads                                                                           Propellerads