-->

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

Add-social-media-buttons-professionally
المتابعين كنز المدون لذالك وجب عليك الاهتمام بهم ومراعاتهم, المتابعين من أهم الأمور الذي يجب الاهتمام بهم بحيث تلبي طلباتهم وتحل مشاكلهم, وجميعنا نحب أن يكون لنا العديد من المتابعين ولجلب متابعين يجب علينا الاهتمام في تسهيل لهم الطرق لمتابعتنا بحيث نعمل لمدونتنا صفحات في مواقع التواصل الاجتماعي ومحاولة ترويجها إلى زوار مدوناتنا, لذالك نجد أنّ يجب عليك تركيب كود أزرار المشاركة في مدونتك لما لها من تأثير ايجابي في زيادة أعداد متابعين المدونة في مواقع التواصل الاجتماعي, لذالك نقدم لكم كود ايقونات مواقع التواصل الاجتماعي بشكل احترافي ومميز, الإضافة يمكن وضعها على القائمة الجانبية كذالك الإضافة تحتوي على جميع مواقع التواصل الاجتماعي.


ملاحظة: هذه الاضافة تعمل مع جميع المواقع بجميل سكربتتها ونحن شرحنا تركيبها على بلوجر فقط, لكن  تستطيع تركيبها انت في موقعك وستعمل بدون اي مشاكل. 

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

كود أزرار المشاركة  تتكون من جزئيين الجزء الأول هو عبارة عن أيقونات التواصل الاجتماعي html أما الجزء الثاني هو عبارة عن css  كود أزرار المشاركة.

طريقة إضافة إيقونات التواصل الاجتماعي.

طريقة تركيب الإضافة سهل جدا, فقط توجه إلى التخطيط ثم اختار المكان المناسب ثم أضف أداة  HTML/JavaScript وضع الكود التالي داخلها.
<div class="social-counter">
<ul id="social">
<li class="item-social facebook count=3.5k;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">3.5k</span><span class="item-text">اعجاب</span>
</a></li>
<li class="item-social twitter count=1.7k;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">1.7k</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social gplus count=735;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">735</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social youtube count=2.8k;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">2.8k</span><span class="item-text">اشتراك</span>
</a></li>
<li class="item-social pinterest count=524;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">524</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social dribbble count=7.3k;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">7.3k</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social instagram count=849;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">849</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social rss count=286;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">286</span><span class="item-text">اشتراك</span>
</a></li>
</ul>
</div>

<style  type="text/css">
.social-counter{margin:0;padding:0;overflow:hidden}
.social-counter ul{margin:0;padding:0}
.social-counter ul li{list-style: none;width:42%;float:left;text-align:left;margin:0 0 5px;padding:0 0 5px;position:relative;    position: relative;
border: 1px solid #f5f5f5;
padding: 7px;}
.social-counter ul li:nth-child(2),.social-counter ul li:nth-child(4),.social-counter ul li:nth-child(6),.social-counter ul li:nth-child(8){float:right}
.social-counter ul li a{margin:0;padding:0}
.item-icon{float:left;position:relative;text-align:center;vertical-align:middle;color:#fff;margin:0;display:inline-block;width:32px;height:32px;line-height:32px;font-size:16px;border-radius:2px}
.hide-count{display:none}
.item-count{display:inline-block;color:#333;font-weight:700;font-size:13px;line-height:32px;float:left;padding-left:10px}
.item-text{float:right;display:inline-block;color:#666666;font-size:11px;line-height:32px;font-weight:400}
.item-social.facebook .item-icon{background-color:#5271b3}
.item-social.twitter .item-icon{background-color:#49aff8}
.item-social.gplus .item-icon{background-color:#cb2027}
.item-social.rss .item-icon{background-color:#FFC200}
.item-social.youtube .item-icon{background-color:#eb1a21}
.item-social.dribbble .item-icon{background-color:#ea4c89}
.item-social.instagram .item-icon{background-color:#4E729A}
.item-social.pinterest .item-icon{background-color:#cb2027}
.item-social.facebook .item-icon:before{content:"\f09a"}
.item-social.twitter .item-icon:before{content:"\f099"}
.item-social.gplus .item-icon:before{content:"\f0d5"}
.item-social.rss .item-icon:before{content:"\f09e"}
.item-social.youtube .item-icon:before{content:"\f16a"}
.item-social.instagram .item-icon:before{content:"\f16d"}
.item-social.dribbble .item-icon:before{content:"\f17d"}
.item-social.pinterest .item-icon:before{content:"\f0d2"}
.social-counter ul li:hover .item-icon{background-color:#222222}
.social-counter ul li:hover .item-text{color:#01BD5D}
</style>

التعديلات

# استبدلها برابط صفحة المدونة في موقع التواصل الاجتماعي.
استبدل ما في ألون الأصفر بعدد متابعين صفحاتك

ملاحظة: في حالت أردّت حذف فئة من مواقع التواصل الاجتماعي أحذفها من بداية <li إلى </li>

اذا لم تظهر الأيقونات قم بوضع رابط الأيقونات في مدونتك
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>


هنا نكون قد انتهينا من تركيب كود ايقونات مواقع التواصل الاجتماعي, في حالت حدثت مشكلة معك يمكن وضعها في تعليك وسنقوم برد عليك في اقرب وقت.

هناك 26 تعليقًا:

  1. لم تزبط معي اطلاقا فيما تفضلت به

    ردحذف
  2. السلام عليكم
    اخي تقريبا رابط خط ال Font awesome عندك ناقص، المفروض والله اعلم ان يكون الرابط كامل بال https ، حتي يعمل الخط بشكل صحيح.
    وبالتوفيق.

    ردحذف
  3. شكرا على الموضوع القيم االرجاء زيارة مدونتي وتقيمها
    اكتب في جوجل thre3free

    ردحذف
  4. Full Stack Development Company provides the best full-stack customization and integration services that help their clients in getting the best web applications for their business. A Full Stack Development team consisting of specialists from various development technologies and a skilled one who can club all these experts.
    You can Hire Full Stack Developers from them to build pixel-perfect web applications, SaaS applications, web portals, and much more.

    ردحذف
  5. ارغب التاصل معم على تيتر. تحياتي
    https://twitter.com/sulaimanns1

    ردحذف
  6. Before we comment on any religion we must make sure to study it or stay quiet when you are not aware of what the holy books of any religion teach rather than demining it in public. People around the world have their own methods of greeting each other. We are specialized in providing ideal online Quran classes from the USA and UK  with highly qualified and experienced Quran teachers. Begin your lessons at Quranforkids.com Online Academy!

    ردحذف
  7. أشكرك على الاضافه وأتمنى زيارة لمدونتى الأجنبيه

    ردحذف
  8. mantap banget kak, jangan lupa kunjungi web saya di
    Asam Mefenamat

    ردحذف
  9. Before making public comments about any religion, we must first study it or remain silent if we do not understand what the sacred scriptures of that faith say. People from all across the world greet one another in their own unique ways. We specialise in giving perfect online Quran classes with highly skilled and experienced Quran teachers from the United States and the United Kingdom. Start learning at the QuranLesson.com Online Academy!

    ردحذف
  10. Quranforkids.com is an online Quran academy for kids and adults in the USA & Uk. we provide Online Quranic services. We provide many courses including a basic Qaida course with tajweed rules. Quran memorization course. Daily Dua's courses. If you want to Learn Quran Online With Tajweed, Recitation & Memorization Classes With Expert Quran Teachers, Contact us. We have highly qualified male/female Quran teachers. Our teachers teach very well. We provide one-week free trial classes. Our teachers teach 24 hours 7 days in the world. So, what are you waiting for? Join us now to start learning the Quran!

    ردحذف

  11. مقال من افضل المقالات ومدونة ممتازة دائما متفوقة وفي المقدمة تسلموا علي المجهود المبذول في كتابة مثل هذا المحتوي الرائع
    خبير سيو
    محترف سيو
    مقابر للبيع

    ردحذف
  12. شركة بسينا الدولية لالنشاءات هي شركة متخصصة في انشاءات حمامات السباحة والتي تغطي قطاع كبير في معظم أنحاء الكويت
    خبير سيو
    احواض سباحة الكويت
    احواض السباحة الكويت

    ردحذف
  13. Are you interested in helping and post helpful...

    ردحذف
  14. شرح مميز اخى عبدالله .. وفقك الله

    ردحذف
  15. Your choice! Regardless, you should take care of yourself first and foremost before making any changes that may impact your community negatively. kalyan chart

    ردحذف
  16. لو سمحت عاوز أضيف أيقونات مواقع تواصل إجتماعي تانيه وعاوز هغير شكل أيقونة الإنستجرام إلي شكل آخر

    ردحذف

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *