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

صفحة 1 من اصل 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>

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


زائر
زائر


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

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

مُساهمة من طرف ѕαα∂ ∂єѕιgη في الثلاثاء سبتمبر 08, 2015 3:29 am


ѕαα∂ ∂єѕιgη
بصمة خالدة
بصمة خالدة

الجنس : ذكر

الدلو

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

نقاط النشاط : 41613

السٌّمعَة : 280

بلد العضو :

العمر : 17


http://WwW.t-AlTwEr.CoM

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

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

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


منور اخي العزيز تسلم


زائر
زائر


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

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

مُساهمة من طرف صرخة ألم في الخميس سبتمبر 17, 2015 11:20 pm


تسلمى أيدك ي جرح
أبداع وتألق 
الله يعطيك العافية ع كل مجهودك معنا
جزاك الله الف خير على كل ما تقدمه لهذا المنتدى 
ننتظر ابداعاتك الجميلة بفارغ الصبر 




التوقيع



صرخة ألم
عضو نشيط
عضو نشيط

الجنس : ذكر

السرطان

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

نقاط النشاط : 461

السٌّمعَة : 12

العمر : 25


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

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

مُساهمة من طرف زائر في الخميس سبتمبر 17, 2015 11:41 pm


الله يسلمك اخي منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف محمد رأفت الجندى في الخميس أكتوبر 08, 2015 12:09 am


اذا ارت وضع مواقع التواصل على الفوتر نفسه كيف يتم ذلك؟


محمد رأفت الجندى
عضو جديد
عضو جديد

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

نقاط النشاط : 34

السٌّمعَة : 0


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

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

مُساهمة من طرف زائر في الخميس أكتوبر 08, 2015 7:59 am


دة قائمة لوحدها تقدر تغيير الخلفية بما يناسب منتداك


زائر
زائر


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

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

مُساهمة من طرف almaldin في السبت فبراير 06, 2016 12:40 pm


بارك الله فيك  وجعله الله لك في ميزان
حسناتك دمت في  حمي الرحمن





almaldin
الادارة العليا
الادارة العليا

الجنس : ذكر

الاسد

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

نقاط النشاط : 20018

السٌّمعَة : 55

بلد العضو :

العمر : 36





http://www.ibda3araby.com/

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

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

مُساهمة من طرف Mr.LoLo في الأحد فبراير 07, 2016 6:18 pm


كوددد جميل
شكككرآ   ~




التوقيع


سبحان الله وبحمده ..
          سبحان الله العظيم ...

اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين




Mr.LoLo
عضو دهبي
عضو دهبي

الجنس : ذكر

نقاط التفاعل : 3 نقاط

الجدي

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

نقاط النشاط : 6163

السٌّمعَة : 54

بلد العضو :

العمر : 99


http://bank.ahlamontada.com/

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

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

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


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




التوقيع




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

الجنس : ذكر

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

نقاط النشاط : 988

السٌّمعَة : 24

بلد العضو :


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

صفحة 1 من اصل 2 1, 2  الصفحة التالية

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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