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

اضافات بلوجربلوجر

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

jzairi.dz 0

A+ A-

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

السلام عليكم احبتي في الله 

اليوم في هذا المقال نحاول الحديث عن ازرار التواصل الاجتماعي للمواقع عامة و لبلوجر خاصة 

اهمية ازرار التواصل الاجتماعي بالنسبة للمواقع

من المؤكد ان لوسائل التواصل الاجتماعي اهمية كبرى من خلال زيادة المتابعين وجلب المزيد من  الزوار الى موقعك 

و هذا ما يعود بالفائدة للموقع و تحسين ترتيبه

طريقة تركيب الاضافة 

للمعاينة

الاضافة سهلة التركيب و ساشرح خطواتها على مدونة بلوجر لتعم الفائدة 

الخطوة الاولى: كود CSS

1. الدخول الى بلوجر.
2. اختيار المدونة المراد تركيب الاداة عليها.
3. من القائمة الجانبية نختار المظهر.
4. ثم نفتح القائمة المنسدلة و نختار  تعديل HTML.

كما في الصورة ندخل الى القالب 

ثم نبحث عن الوسم : ]]></b:skin>

البحث يكون باضغط داخل القالب و استعمال المفاتيح:

Ctrl + F

في مربع البحث انسخ الوسم  الاتي:

]]></b:skin>

و نضع كود CSS الاتي  فوقه مباشرة كما في الصورة الموالية: 

(شاهد  الكود المضلل في الصورة )

كود CSS

<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>

الخطوة الثانية: كود HTML

1. الرجوع الى بلوجر.
2. من القائمة الجانبية نختار تنسيق.
3. نختار مكان اضافة كود HTML.
4. ننقر على اضافة اداة.
5. ثم نختار HTML/Javascript.
6. نقوم باختيار العنوان المناسب.
7. ثم اسفله نقوم بلصق الكود في الخانة. 

تابع الصور

هذا كود HTML

<div class="social-counter">
<ul id="social">
<li class="item-social facebook count=3.5k;"><a href="https://www.facebook.com/hazhazi.neddine">
<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="https://twitter.com/JzaiRiDz">
<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="http://plus.google.com/+JzaiRiDz">
<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="https://www.youtube.com/channel/UCCKMgGVUyij9tz8h5oVPJ2g">
<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="https://www.pinterest.fr/jzairid">
<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="https://dribbble.com/JzaiRi">
<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="https://www.instagram.com/hazhazi.noureddine">
<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="http://feeds.feedburner.com/fosha">
<i class="item-icon fa"></i><span class="item-count">286</span><span class="item-text">اشتراك</span>
</a></li>
</ul>
</div>

الى هنا ناتي الى نهاية موضوعنا لهاذا اليوم.

ملاحظة: الكود يعمل على جميع المواقع. 

و   بعد اتمامك لجميع الخطوات يتبقى عليك اخي ان تقوم بتغيير روابط حساباتي في مواقع التواصل الاجتماعي بروابطك  .

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

في حالة عدم ظهور الايقونات ادخل على القالب و قم بالبحث عن الوسم:

</head>

ضع اسفله الكود الاتي مباشرة

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

 

دمتم في رعاية الله و حفظه 

الوسوم: اضافات بلوجر بلوجر