عدد مشاهدات الموضوع:
عزيزى القارئ. لقد اتيت لكم اليوم بأضافة احترافية من تصميم وتكويد مدونه العبقرى للمعلوميات الا وهى اضافة مواقع التواصل الاجتماعى بطريقة احترافية دعونا نرى معاينة!
بعدما رأينا المعاينة نذهب الى التركيب:اذهب الى > التخطيط > اضافة اداة > html > ونضيف هذا الكود
<div id='social_networks'>
<ul><!--Social Icons Started Started-->
<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-2x'/><span class='inv'>Facebook</span></a></li>
<!--Replase With Facebook URL-->
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-2x'/><span class='inv'>twitter</span></a></li>
<!--Replase With Twitter URL-->
<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-2x'/><span class='inv'>googleplus</span></a></li>
<!--Replase With Google Plus URL-->
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-2x'/><span class='inv'>linkedin</span></a></li>
<!--Replase With Linked In URL-->
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-2x'/><span class='inv'>youtube</span></a></li>
<!--Replase With Youtube URL-->
</ul><!--Social Icons Started End-->
</div>
<Style>
#social_networks{width:100%;display:block;margin:0 auto;text-align:center;}
#social_networks ul {list-style:none;}
#social_networks{text-align:center;display:block;margin:0 auto;padding-bottom:15px;margin-bottom:15px;}
#social_networks ul {display:block;height:36px;margin:0 auto;list-style:none;color:#fff;transition:All 0.2s ease;}
#social_networks li{text-align:center;display:inline-block;margin:0 auto;margin-right:2px;margin-left:2px;width:48px;height:48px;opacity:0.9;transition:All 0.2s ease;}
#social_networks li:hover{opacity:0.9;}
#social_networks li a{display:inline-block;width:48px;height:48px;line-height:48px;padding-top:5px;padding-bottom:5px;color:#fff;}
#social_networks li a:hover{background:transparent;color:#f35d5c;box-shadow:none;}
#social_networks li a span{display:none;visibility:hidden;}
#social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.linkedin{text-align:center;background:#f35d5c;color:#fff;}
#social_networks li.facebook:hover,#social_networks li.twitter:hover,#social_networks li.youtube:hover,#social_networks li.googleplus:hover,#social_networks li.linkedin:hover{background:#4b3f57;color:#fff;}
#social_networks li.facebook .fa.fa-facebook,#social_networks li.twitter .fa.fa-twitter,#social_networks li.youtube .fa.fa-youtube,#social_networks li.googleplus .fa.fa-google-plus,#social_networks li.linkedin .fa.fa-linkedin{color:#fff;}
</Style>
- نقوم باستبدال رمز # برابط مواقعك الاجتماعية.
- نقوم باستبدال هذا الكود بأى لون تريد #f35d5c (كود اللون الاحمر).
- نقوم باستبدال هذا الكود بأى لون تريد #4b3f57 (كود اللون الاسود).
هذه التدوينة برعاية: مدونة ابو اياد و يلا لايف
مدونة تهتم بكل ما هو جديد في عالم الحماية وبلوجر
ردحذفhttp://nj--rat.blogspot.com/
أشكرك جدا يا ادمن على الموضوع واتشرف بزيارتك لمدونتي
ردحذفمدونة كنوز
العفو واذا كان لديك اى استفسار ارجو ان تطرحه
حذفشكرا على الاضافة
ردحذفعرب تك شو
العفو ^_^
حذفالعفو وشكراً على مرورك العطر
ردحذفاخي اسلام هل من وسيلة لتغيير ازرار بلوجر الرسمية بأزرار اريدها انا بارك الله فيك
ردحذفبحت في نتائج البحت كلها تقريبا ولم اجد احد تطرق الى هدا الموضوع افدنا بارك الله فيك
أى ازرار رسمية ماذا تقصد بالضبط؟ وان شاء الله نفيدك
حذفارجو من الاخوة الرد
ردحذفنحن لم نفهمك ممكن توضح لنا اكثر
حذفاقصد ازرار مشاركة الموضوع التي توكن اسفل التدوينة
حذففهمت قصدك وساقوم بالبحث عن طريقة ما.. شكرا لك على سؤالك
حذفممتازة تم التركيب
ردحذفبالتوفيق
حذفthank you for share this info ith us
ردحذفhttp://liveromanticlove.blogspot.com/
اذا سمحت طبقت الطريقة لكن لاتخرج اشكال الازرار
ردحذفاحيانا هناك اضافات لا يقبلها قوالب معينة بسبب كثرة اكواد الجافا سكريبت وكثرة الاضافات والاكواد المستخدمة داخل القالب.
حذفشكرا جزيلا على الإضافات
ردحذفhttp://www.blog4softwere.com/
ماذا لو اردت اضافة هذه الازار في النافبر في اعلى المدونة وبالجهه اليسرى هل من طريقة وشكراً
ردحذفطيب مافي انستقرام؟
ردحذفشكرا لك على هذا الدرس اخ ابو اياد
ردحذفدمت بود