منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز
 

 اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز

اذهب الى الأسفل 
كاتب الموضوعرسالة
BLADHAC
عضو 

BLADHAC

ذكر
السرطان
عدد المساهمات : 12
نقاط النشاط : 29
السٌّمعَة : 11
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Ioao10
العمر : 24

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالإثنين فبراير 08, 2016 9:41 pm

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

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 145495433441536







[/center]


أولا نتوجهة الى مظهر المنتدى > التومبلايتات و القوالب > إدارة عامة

ثم نقوم بالنقر للتعديل على قالب 
index_box

ثم نقوم بإضافة الكود التالي أسفل التومبلات 





الكود:
<div class="clearbreak"></div>
<div id="jsn-social-icons">
<ul>
<li class="facebook">
<a href="https://www.facebook.com/" title="Facebook" target="_blank">
Facebook</a>
</li>
<li class="twitter">
<a href="https://twitter.com" title="Twitter" target="_blank">
Twitter</a>  
</li>
<li class="googleplus">
<a href="https://accounts.google.com" title="googleplus" target="_blank">
googleplus</a>
</li>
<li class="youtube">
<a href="http://www.youtube.com" title="YouTube" target="_blank">
YouTube</a>
</li>
</ul>
</div>

يمكنك التعديل على روابط الصفحات من الكود اعلاه 






نقوم بحفظ التومبلات ونشرة 

ثم نتوجهة الى الوان > ورقة تصميم CSS








ثم نقوم بإضافة الكود التالي في ورقة تصميم CSS

الكود:

#jsn-social-icons {
 text-align: center;
}

#jsn-social-icons ul {
 display: inline-block;
 margin: 0 auto;
}
#jsn-social-icons ul li {
 display: inline-block;
 list-style: none;
 margin-left: 3px;
 background-color: #fff;
 padding: 3px;
 border: 3px solid #dadada;
 border-radius: 100%;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
}
#jsn-social-icons ul li:first-child {
 margin-left: 0;
}
#jsn-social-icons ul li:hover {
 border-color: #aaa;
}
#jsn-social-icons ul li a {
 display: block;
 text-indent: -999em;
 background-image: url(http://store1.up-00.com/2016-02/145495321070611.png);
 background-repeat: no-repeat;
 width: 59px;
 height: 59px;
 transition: all 0.2s ease;
 -moz-transition: all 0.2s ease;
 -webkit-transition: all 0.2s ease;
 -o-transition: all 0.2s ease;
 opacity: 0.4;
 border-radius: 100%;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
}
#jsn-social-icons ul li:hover a,
#jsn-social-icons ul li a:hover {
 opacity: 1;
 background-color: transparent;

}
#jsn-social-icons ul li.facebook:hover a {
 background-position: 0 0;
}
#jsn-social-icons ul li.facebook a {
 background-position: 0 -59px;
}
#jsn-social-icons ul li.twitter:hover a {
 background-position: -177px 0;
}
#jsn-social-icons ul li.twitter a {
 background-position: -177px -59px;
}
#jsn-social-icons ul li.youtube:hover a {
 background-position: -59px 0;
}
#jsn-social-icons ul li.youtube a {
 background-position: -59px -59px;
}
#jsn-social-icons ul li.googleplus:hover a {
 background-position: -118px 0;
}
#jsn-social-icons ul li.googleplus a {
 background-position: -118px -59px;
}
#jsn-social-icons ul li.pinterest:hover a {
 background-position: -472px 0;
}
#jsn-social-icons ul li.pinterest a {
 background-position: -472px -59px;
}
#jsn-social-icons ul li.myspace:hover a {
 background-position: -590px 0;
}
#jsn-social-icons ul li.myspace a {
 background-position: -590px -59px;
}
#jsn-social-icons ul li.flickr:hover a {
 background-position: -413px 0;
}
#jsn-social-icons ul li.flickr a {
 background-position: -413px -59px;
}
#jsn-social-icons ul li.dribble:hover a {
 background-position: -295px 0;
}
#jsn-social-icons ul li.dribble a {
 background-position: -295px -59px;
}
#jsn-social-icons ul li.stumbleupon:hover a {
 background-position: -649px 0;
}
#jsn-social-icons ul li.stumbleupon a {
 background-position: -649px -59px;
}
#jsn-social-icons ul li.yahoo:hover a {
 background-position: -354px 0;
}
#jsn-social-icons ul li.yahoo a {
 background-position: -354px -59px;
}
#jsn-social-icons ul li.skype:hover a {
 background-position: -531px 0;
}
#jsn-social-icons ul li.skype a {
 background-position: -531px -59px;
}
#jsn-social-icons ul li.rss:hover a {
 background-position: -236px 0;
}
#jsn-social-icons ul li.rss a {
 background-position: -236px -59px;
}
#jsn-social-icons ul li.linkedin a:hover {
 background-position: -708px 0;
}
#jsn-social-icons ul li.linkedin a {
 background-position: -708px -59px;





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


الكود:
http://store1.up-00.com/2016-02/145495321070611.png






واخيرا شكرا :)





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


اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالإثنين فبراير 08, 2016 10:05 pm

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

ahmedkhalifa

ذكر
عدد المساهمات : 137
نقاط النشاط : 262
السٌّمعَة : 13
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Egypt10

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالثلاثاء فبراير 09, 2016 1:08 am

ججميل اوي كنت اريدهم
بس التركيب غلط
راح اعدل عليه وارفعهم بموضوع جديد
من بعد اذنكم


وردة حمراء  وردة حمراء ahmedkhalifa وردة حمراء  وردة حمراء

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 2l93alv








painting painting painting painting painting جارى جارى جارى gfifeee
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://totwerkm.ibda3.info/
THE ROCK
عضو خبير 

THE ROCK

ذكر
عدد المساهمات : 668
نقاط النشاط : 988
السٌّمعَة : 24
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Egypt10

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالثلاثاء فبراير 09, 2016 1:38 am

اشكرك على الطرح المميز تحياتي لك  



اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 1011_md_13129827261
اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 1411_m10
اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Uia_oo10
اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Uia_oo12
اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Dua_ui10
اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Uia_od10
الرجوع الى أعلى الصفحة اذهب الى الأسفل
BLADHAC
عضو 

BLADHAC

ذكر
السرطان
عدد المساهمات : 12
نقاط النشاط : 29
السٌّمعَة : 11
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Ioao10
العمر : 24

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالثلاثاء فبراير 09, 2016 2:28 pm

@ahmedkhalifa كتب:
ججميل اوي كنت اريدهم
بس التركيب غلط
راح اعدل عليه وارفعهم بموضوع جديد
من بعد اذنكم

التركيب ليس خاطئ ولكن يمكنك اضافة الكود باي تومبلات تشاء وانا اخترت ان تكون اسفل الفئات ويمكنك التعديل بما تشاء عزيزي



شكرا لردودكم التحفيزية
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Mr. Loay
سوبر الإبداع 

Mr. Loay

ذكر
الجوزاء
عدد المساهمات : 6242
نقاط النشاط : 7090
السٌّمعَة : 65
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Saudi-10
العمر : 16

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالثلاثاء فبراير 09, 2016 6:23 pm

بارك الله فيك  وردة حمراء


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

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


اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Uia_io10
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Mr. Loay
سوبر الإبداع 

Mr. Loay

ذكر
الجوزاء
عدد المساهمات : 6242
نقاط النشاط : 7090
السٌّمعَة : 65
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Saudi-10
العمر : 16

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالثلاثاء فبراير 09, 2016 6:28 pm

ممكن صورة للكود في الصفحة الكاملة بدون قص لنرى أين يظهر تحديداً


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

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


اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Uia_io10
الرجوع الى أعلى الصفحة اذهب الى الأسفل
ѕαα∂ ∂єѕιgη
سوبر الإبداع 

ѕαα∂ ∂єѕιgη

ذكر
الدلو
عدد المساهمات : 43577
نقاط النشاط : 48231
السٌّمعَة : 300
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Saudi-10
العمر : 21

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالثلاثاء فبراير 09, 2016 9:26 pm

كوددد جميل
شكككرآ اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 1607768772 اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 2070821343 ~
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://t-altwer.yoo7.com/
Abshahad
سوبر الإبداع 

Abshahad

ذكر
الاسد
عدد المساهمات : 23608
نقاط النشاط : 27156
السٌّمعَة : 90
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Sudan10
العمر : 39

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالخميس فبراير 11, 2016 9:48 am

جزاك الله خير دمت في حمي الرحمن
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com/
زائر
زائر
avatar


اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالثلاثاء مايو 17, 2016 8:33 pm

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

تحياتــي
الرجوع الى أعلى الصفحة اذهب الى الأسفل
زائر
زائر
avatar


اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالسبت أغسطس 27, 2016 7:05 pm

كود جمييل شكرا لك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Derraz Boujemaa
عضو ذهبي 

Derraz Boujemaa

ذكر
عدد المساهمات : 3399
نقاط النشاط : 6145
السٌّمعَة : 121
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Morocc10

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالخميس ديسمبر 14, 2017 12:55 pm

الف شكر على الطرح المميز
ومزيدا من التالق
مع كل الاحترام والتقدير


اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز OhiHHcI
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10774
نقاط النشاط : 11116
السٌّمعَة : 136
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Ioao10
العمر : 36

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالسبت يونيو 16, 2018 11:39 pm

يعطيكم العافية على الطرح اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 837876428
كل الاحترام اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Ioao10

اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Empty
مُساهمةموضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز   اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Emptyالثلاثاء يوليو 24, 2018 12:35 pm

 جزاكم الله خيراً  
 اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 1454454920 اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 1454454920 اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 1454454920 اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز 1454454920 


سبحان الله والحمدلله ولا إله إلا الله 
 
اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
 
اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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