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

السلام عليكم ورحمة الله تعالى وبركاته


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

لمشاهدة العرض التوضيحي

للمعاينة

خطوات إضافة أزرار مشاركة الموضوع عبر مواقع التواصل

تابع معي ...

تنبيه : قبل أي تعديل على القالب يرجى تحميل أو أخذ نسخة احتياطية للقالب الخاص بك منعاً لحدوث أي أخطاء
لمن لا يعرف كيفية أخد نسخة إحتياطية للقالب الخاص به  من هنا 


أولا - توجه الى لوحة تحكم مدونتك  من هنا 
2 - قالب (المظهر) >> تحرير Html >>
3 - إبحث عن الوسم التالي بالضغط على Ctrl + f من لوحة المفاتيح
]]>
4 - أضف الكود التالي قبله (فوق)
/*  Jumbo Social Share Bar By El3araby Web*/

#sharrrrre{
float:left;
margin: -10px 5px 0 0;
padding: 15px 15px 15px 0;
background: url(http://3.bp.blogspot.com/-TguUlFiODMQ/U_Ex40j2nPI/AAAAAAAAHDQ/UPbx0X7po-U/s1600/diagonal.png) no-repeat 100% 50%;
);
}
.sharrre .count {
  color:#7fc04c;
  font-weight: bold;
  display:block;
  font-size:50px;
  position:relative;
  text-align:center;
  text-decoration:none;
  width:100px;
  line-height: 40px;
  padding: 0;
}
.sharrre .share {
  color:#666;
  display:block;
  font-size:10px;
  height:10px;
  text-align:center;
  text-decoration:none;
  width:100px;
  padding: 0;
}
@import url(http://fonts.googleapis.com/css?family=Raleway:600);
.social-div a{
text-decoration:none!important;
display:inline-block;
}
.social-div a img{
display:inline-block;
width: auto;
height: auto;
margin: 0 8px 0 -5px;
vertical-align:middle
}
#socialshare{
display:inline-block;
vertical-align: middle;
text-align: center;
color:#ffffff;
font-size:16px;
padding:14px 20px 15px 20px;
text-decoration:none;
font-family:Raleway;
margin-right:5px;
-webkit-font-smoothing:antialiased;
-webkit-text-rendering:optimizeLegibility;
}
#socialshare:active {
padding: 15px 20px 15px 20px;
margin-bottom: -1px;
}
#socialshare:hover{
opacity: 0.9;
}
.share-toggle{
position:relative;
display:inline-block;
cursor:pointer;
vertical-align:middle;
text-align:center;
color:#fff;
}
.share-toggle a{
color:#fff;
text-decoration:none;
}
.social-div{
vertical-align:middle;
}
#expand-social{
display:inline-block;
position:relative;
vertical-align:middle;
height: 53px;
}
#social-expand{
display:inline-block;
vertical-align:middle;
position:relative;
top:0px;
left:0px;
}
.expand {
box-shadow: 0px 3px 0px 0px #c5bebe;
background:#cdcccc;
position: relative;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 200%;
}
.expand:active {
box-shadow: 0px 1px 0px 0px #c5bebe;
height: 41px;
margin-bottom:-1px;
}
.expand:hover {
opacity:0.9;
}
.expand-minus{
display:none;
}
.socialshare2 {
width:50px;
height:50px;
display:inline-block;
}
.socialshare2:active {
height:51px;
margin-bottom:-1px;
}
.socialshare2:hover {
opacity:0.9;
}
.ubhfacebook{
background:#507bbf;
box-shadow: 0px 3px 0px 0px #4671b5;
}
.ubhfacebook:active{
box-shadow: 0px 1px 0px 0px #4671b5;
}
.ubhtwitter{
background:#63cef2;
box-shadow: 0px 3px 0px 0px #57c4e9;
}
.ubhtwitter:active{
box-shadow: 0px 1px 0px 0px #57c4e9;
}
.ubhgoogle-plus{
box-shadow: 0px 3px 0px 0px #43454c;
background:#4d4f54 url(http://2.bp.blogspot.com/-JUU52V5MYVo/U_A3giibA_I/AAAAAAAAHCM/SzeQhUA-Bxo/s20/g%2B.png) no-repeat center;
}
.ubhgoogle-plus:active{
box-shadow: 0px 1px 0px 0px #43454c;
}
.ubhlinkedin {
box-shadow: 0px 3px 0px 0px #12a4db;
background:#1aace3 url(http://4.bp.blogspot.com/-QMNlNpoulTE/U_BXjWZny7I/AAAAAAAAHCc/-EfrIknqbWo/s20/in.png) no-repeat center;
}
.ubhlinkedin:active{
box-shadow: 0px 1px 0px 0px #12a4db;
}
.ubhpinterest{
box-shadow: 0px 3px 0px 0px #e85756;
background:#f16261 url(http://4.bp.blogspot.com/-vOmei_tL7Jk/U_BY4sC_jYI/AAAAAAAAHCo/EkqbJL7hvJg/s20/pinterest.png) no-repeat center;
}
.ubhpinterest:active{
box-shadow: 0px 1px 0px 0px #e85756;
}
.ubhstumbleupon{
box-shadow: 0px 3px 0px 0px #f5a635;
background:#fdaf40 url(http://3.bp.blogspot.com/-VtXmJrq9NWo/U_BZpBmH5gI/AAAAAAAAHCw/2B-pqn5B3Wk/s20/stumble.png) no-repeat center;
}
.ubhstumbleupon:active{
box-shadow: 0px 1px 0px 0px #f5a635;
}
5 - إبحث عن الشفرة التالية
6 - وأضف الكود التالي قبلها (فوق)

7 - وأخيرا إبحث عن هذا الوسم
8 - أضف الكود التالي قبله (فوق)

9 - حفظ المظهر
الآن توجه لمدونتك وشاهد النتيجة

ملحوظة : قد لا تجد الشفرة

تعليقات