مرحبا بزوار ومتتبعي المدونة نقدم لكم اليوم موضوع هو عبارة عن اضافة ازرار مواقع التواصل الاجتماعي لمدونة بلوجر بشكل رائع احترافي و جداب عزيزي المدون وجب عليك الاهتمام بمتابعيك وزارك, وهذه الأمور التي يجب الاهتمام بها بحيث تلبي طلباتهم وتحل مشاكلهم, وجميعنا نحب أن يكون لنا العديد من المتابعين ولجلب متابعين يجب علينا الاهتمام في تسهيل لهم الطرق لمتابعتنا بحيث نعمل لمدوناتنا صفحات في مواقع التواصل الاجتماعي ومحاولة ترويجها إلى زوار مدوناتنا, لذالك نجد أنّ يجب عليك تركيب كود أزرار المشاركة في مدونتك لما لها من تأثير ايجابي في زيادة أعداد متابعين المدونة في مواقع التواصل الاجتماعي, لذالك نقدم لكم كود أيقونات مواقع التواصل الاجتماعي بشكل احترافي ومميز, الإضافة يمكن وضعها على القائمة الجانبية كذالك الإضافة تحتوي على جميع مواقع التواصل الاجتماعي.
كود أزرار المشاركة تتكون من جزئين الجزء الأول هو عبارة عن أيقونات التواصل الاجتماعي 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>
