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

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

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

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

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

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

الدلو

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

نقاط النشاط : 41656

السٌّمعَة : 282

بلد العضو :

العمر : 18

معاينة صفحة البيانات الشخصي للعضوhttp://WwW.t-AlTwEr.CoM
تمت المشاركة في الثلاثاء سبتمبر 08, 2015 3:29 am
بصصرآحة كود ججميل ي ججرححَ يسسلمؤآ , وردة حمراء.
التوقــيـــــــــــــــــــــع

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

زائر
زائر
تمت المشاركة في الثلاثاء سبتمبر 08, 2015 3:52 am
منور اخي العزيز تسلم

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

avatar
عضو نشيط
الجنس : ذكر

السرطان

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

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

السٌّمعَة : 12

العمر : 26

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الخميس سبتمبر 17, 2015 11:20 pm
تسلمى أيدك ي جرح
أبداع وتألق 
الله يعطيك العافية ع كل مجهودك معنا
جزاك الله الف خير على كل ما تقدمه لهذا المنتدى 
ننتظر ابداعاتك الجميلة بفارغ الصبر 
التوقــيـــــــــــــــــــــع


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

زائر
زائر
تمت المشاركة في الخميس سبتمبر 17, 2015 11:41 pm
الله يسلمك اخي منور الموضوع

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

avatar
عضو جديد
عدد المساهمات : 24

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

السٌّمعَة : 0

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الخميس أكتوبر 08, 2015 12:09 am
اذا ارت وضع مواقع التواصل على الفوتر نفسه كيف يتم ذلك؟

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

زائر
زائر
تمت المشاركة في الخميس أكتوبر 08, 2015 7:59 am
دة قائمة لوحدها تقدر تغيير الخلفية بما يناسب منتداك

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

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

الاسد

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

نقاط النشاط : 26540

السٌّمعَة : 90

بلد العضو :

العمر : 37

معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
تمت المشاركة في السبت فبراير 06, 2016 12:40 pm
بارك الله فيك  وجعله الله لك في ميزان
حسناتك دمت في  حمي الرحمن
التوقــيـــــــــــــــــــــع

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

avatar
رئاسة فريق الدردشة

الجنس : ذكر

الجدي

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

نقاط النشاط : 7084

السٌّمعَة : 65

بلد العضو :

العمر : 100



معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
تمت المشاركة في الأحد فبراير 07, 2016 6:18 pm
كوددد جميل
شكككرآ   ~
التوقــيـــــــــــــــــــــع


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

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



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

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

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

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

السٌّمعَة : 24

بلد العضو :

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



استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
Propellerads                                                                           Propellerads