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

  عدد المساهمات : 12 نقاط النشاط : 29 السٌّمعَة : 11 بلد العضو :  العمر : 26
 | موضوع: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الإثنين فبراير 08, 2016 9:41 pm | |
| السلام عليكم , درسنا اليوم بسيط ووميز للغاية وهو طريقة اضافة ازرار مواقع التواصل الاجتماعي في المنتدى بشكل مميز طبعا لن اكثر في الكلام سوف أدخل في صلب الشرح

[/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
واخيرا شكرا :)
|
|
 | |
زائر زائر

 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الإثنين فبراير 08, 2016 10:05 pm | |
| طرحت فأبدعت يعطيك الف عافية جهود مبارك جزاك الله خير دمت ودام عطائك ودائما بأنتظار جديدك الشيق لك خالص تقديري واحترامي دمت بخير |
|
 | |
ahmedkhalifa
عضو فعال

 عدد المساهمات : 137 نقاط النشاط : 262 السٌّمعَة : 13 بلد العضو : 
 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الثلاثاء فبراير 09, 2016 1:08 am | |
| ججميل اوي كنت اريدهم بس التركيب غلط راح اعدل عليه وارفعهم بموضوع جديد من بعد اذنكم |
|
 | |
THE ROCK
عضو خبير

 عدد المساهمات : 668 نقاط النشاط : 988 السٌّمعَة : 24 بلد العضو : 
 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الثلاثاء فبراير 09, 2016 1:38 am | |
| اشكرك على الطرح المميز تحياتي لك |
|
 | |
BLADHAC
عضو

  عدد المساهمات : 12 نقاط النشاط : 29 السٌّمعَة : 11 بلد العضو :  العمر : 26
 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الثلاثاء فبراير 09, 2016 2:28 pm | |
| - ahmedkhalifa كتب:
- ججميل اوي كنت اريدهم
بس التركيب غلط راح اعدل عليه وارفعهم بموضوع جديد من بعد اذنكم التركيب ليس خاطئ ولكن يمكنك اضافة الكود باي تومبلات تشاء وانا اخترت ان تكون اسفل الفئات ويمكنك التعديل بما تشاء عزيزي شكرا لردودكم التحفيزية |
|
 | |
Mr. Loay
سوبر الإبداع

  عدد المساهمات : 6242 نقاط النشاط : 7090 السٌّمعَة : 65 بلد العضو :  العمر : 18
 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الثلاثاء فبراير 09, 2016 6:23 pm | |
| بارك الله فيك   سبحان الله وبحمده .. سبحان الله العظيم ... اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين |
|
 | |
Mr. Loay
سوبر الإبداع

  عدد المساهمات : 6242 نقاط النشاط : 7090 السٌّمعَة : 65 بلد العضو :  العمر : 18
 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الثلاثاء فبراير 09, 2016 6:28 pm | |
| ممكن صورة للكود في الصفحة الكاملة بدون قص لنرى أين يظهر تحديداً  سبحان الله وبحمده .. سبحان الله العظيم ... اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين |
|
 | |
ѕαα∂ ∂єѕιgη
سوبر الإبداع

  عدد المساهمات : 43577 نقاط النشاط : 48233 السٌّمعَة : 302 بلد العضو :  العمر : 23
 | |
 | |
Abshahad
سوبر الإبداع

  عدد المساهمات : 23607 نقاط النشاط : 27156 السٌّمعَة : 90 بلد العضو :  العمر : 41
 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الخميس فبراير 11, 2016 9:48 am | |
| جزاك الله خير دمت في حمي الرحمن
|
|
 | |
زائر زائر

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

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

 عدد المساهمات : 3399 نقاط النشاط : 6146 السٌّمعَة : 122 بلد العضو : 
 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز الخميس ديسمبر 14, 2017 12:55 pm | |
| الف شكر على الطرح المميز ومزيدا من التالق مع كل الاحترام والتقدير |
|
 | |
The Giant
مؤسس الإبداع العربي

  عدد المساهمات : 10847 نقاط النشاط : 11200 السٌّمعَة : 137 بلد العضو :  العمر : 38 
 | موضوع: رد: اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز السبت يونيو 16, 2018 11:39 pm | |
| يعطيكم العافية على الطرح  كل الاحترام  |
|
 | |
مصطفى ستيتان
عضو محترف

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