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

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

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

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

مُساهمة من طرف BLADHAC في الإثنين فبراير 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






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







BLADHAC
عضو جديد
عضو جديد

الجنس : ذكر

السرطان

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

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

السٌّمعَة : 11

بلد العضو :

العمر : 21


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

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

مُساهمة من طرف زائر في الإثنين فبراير 08, 2016 9:05 pm


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


زائر
زائر


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

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

مُساهمة من طرف ahmedkhalifa في الثلاثاء فبراير 09, 2016 12:08 am


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




التوقيع


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










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

ahmedkhalifa
عضو نشيط
عضو نشيط

الجنس : ذكر

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

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

السٌّمعَة : 13

بلد العضو :


http://totwerkm.ibda3.info/

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

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

مُساهمة من طرف THE ROCK في الثلاثاء فبراير 09, 2016 12:38 am


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




التوقيع




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

الجنس : ذكر

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

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

السٌّمعَة : 24

بلد العضو :


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

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

مُساهمة من طرف BLADHAC في الثلاثاء فبراير 09, 2016 1:28 pm


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

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



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


BLADHAC
عضو جديد
عضو جديد

الجنس : ذكر

السرطان

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

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

السٌّمعَة : 11

بلد العضو :

العمر : 21


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

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

مُساهمة من طرف Mr.LoLo في الثلاثاء فبراير 09, 2016 5:23 pm


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




التوقيع


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

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




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

الجنس : ذكر

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

الجدي

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

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

السٌّمعَة : 54

بلد العضو :

العمر : 99


http://bank.ahlamontada.com/

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

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

مُساهمة من طرف Mr.LoLo في الثلاثاء فبراير 09, 2016 5:28 pm


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




التوقيع


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

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




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

الجنس : ذكر

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

الجدي

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

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

السٌّمعَة : 54

بلد العضو :

العمر : 99


http://bank.ahlamontada.com/

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

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

مُساهمة من طرف ѕαα∂ ∂єѕιgη في الثلاثاء فبراير 09, 2016 8:26 pm


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

الجنس : ذكر

الدلو

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

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

السٌّمعَة : 280

بلد العضو :

العمر : 17


http://WwW.t-AlTwEr.CoM

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

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

مُساهمة من طرف almaldin في الخميس فبراير 11, 2016 8:48 am


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

الجنس : ذكر

الاسد

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

نقاط النشاط : 20821

السٌّمعَة : 57

بلد العضو :

العمر : 36





http://www.ibda3araby.com/

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

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

مُساهمة من طرف زائر في الثلاثاء مايو 17, 2016 7:33 pm


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

تحياتــي


زائر
زائر


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

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

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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