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

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

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

السرطان

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

نقاط النشاط : 29

السٌّمعَة : 11

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الإثنين فبراير 08, 2016 8: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 9:05 pm
طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير

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

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

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

نقاط النشاط : 257

السٌّمعَة : 13

بلد العضو :

معاينة صفحة البيانات الشخصي للعضوhttp://totwerkm.ibda3.info/
تمت المشاركة في الثلاثاء فبراير 09, 2016 12:08 am
ججميل اوي كنت اريدهم
بس التركيب غلط
راح اعدل عليه وارفعهم بموضوع جديد
من بعد اذنكم
التوقــيـــــــــــــــــــــع


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










painting painting painting painting painting جارى جارى جارى gfifeee

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

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

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

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

السٌّمعَة : 24

بلد العضو :

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء فبراير 09, 2016 12:38 am
اشكرك على الطرح المميز تحياتي لك  
التوقــيـــــــــــــــــــــع



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

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

السرطان

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

نقاط النشاط : 29

السٌّمعَة : 11

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء فبراير 09, 2016 1:28 pm
@ahmedkhalifa كتب:ججميل اوي كنت اريدهم
بس التركيب غلط
راح اعدل عليه وارفعهم بموضوع جديد
من بعد اذنكم

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



شكرا لردودكم التحفيزية

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

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

الجنس : ذكر

الجدي

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

نقاط النشاط : 7085

السٌّمعَة : 65

بلد العضو :

العمر : 100



معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
تمت المشاركة في الثلاثاء فبراير 09, 2016 5:23 pm
بارك الله فيك  وردة حمراء
التوقــيـــــــــــــــــــــع


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

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



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

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

الجنس : ذكر

الجدي

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

نقاط النشاط : 7085

السٌّمعَة : 65

بلد العضو :

العمر : 100



معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
تمت المشاركة في الثلاثاء فبراير 09, 2016 5:28 pm
ممكن صورة للكود في الصفحة الكاملة بدون قص لنرى أين يظهر تحديداً
التوقــيـــــــــــــــــــــع


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

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



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

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

الدلو

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

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

السٌّمعَة : 282

بلد العضو :

العمر : 18

معاينة صفحة البيانات الشخصي للعضوhttp://WwW.t-AlTwEr.CoM
تمت المشاركة في الثلاثاء فبراير 09, 2016 8:26 pm
كوددد جميل
شكككرآ ~
التوقــيـــــــــــــــــــــع

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

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

الاسد

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

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

السٌّمعَة : 90

بلد العضو :

العمر : 37

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

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

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

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