اضافة تابعنا على شبكات التواصل الاجتماعي بشكل احترافي

الاضافة الرائعة، تابعنا عبر صفحاتنا على شبكات أو مواقع التواصل الاجتماعي

 من خلالها قد تحصل على متابعين لمدونتك عبر هذي الاضافة لأنها تقوم بعرض تلك الصفحات  بشكل جذاب جدا

 والاضافة تشمل صفحات Google+ و facebook و twitter
الاضافة كانت متوفرة على منصة WordPress فقط، لكن تم برمجتها لمنصة  Blogger

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

صورة الاداة :

طريقة التركيب :

1- قم ببحث عن الوسم ]]></b:skin>
ضع الكود التالي فوقها مباشرة

#socialCounterWidget span.fa {
width: 47px;
height: 47px;
color:white;
vertical-align: top;
padding: 10px;
font-size: 26px;
right: 0;
text-align: center;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 1%, rgba(255,255,255,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(1%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0.1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1affffff',GradientType=0 );
}
#socialCounterWidget > a {
display: block;
width: 100%;
height: 47px;
position: relative;
cursor: pointer;
}
a.facebook-box {background-color: #506ba7;}
a.twitter-box {background-color: #56A4C6;}
a.googleplus-box {background-color: #BC4B37;}
#socialCounterWidget > a.facebook-box:hover {
-webkit-box-shadow: inset 0px 0px 80px 44px rgba(47,77,147,1);
-moz-box-shadow: inset 0px 0px 80px 44px rgba(47,77,147,1);
box-shadow: inset 0px 0px 80px 44px rgba(47,77,147,1);
}
#socialCounterWidget > a.twitter-box:hover {
-webkit-box-shadow: inset 0px 0px 80px 44px rgba(45,122,186,1);
-moz-box-shadow: inset 0px 0px 80px 44px rgba(45,122,186,1);
box-shadow: inset 0px 0px 80px 44px rgba(45,122,186,1);
}
#socialCounterWidget > a.googleplus-box:hover {
-webkit-box-shadow: inset 0px 0px 80px 44px rgba(207,40,27,1);
-moz-box-shadow: inset 0px 0px 80px 44px rgba(207,40,27,1);
box-shadow: inset 0px 0px 80px 44px rgba(207,40,27,1);
}
#socialCounterWidget span {display: block;position: absolute;color: #FFFFFF;right: 70px;font-size: 12px;}
#socialCounterWidget .title {top: 7px;}
#socialCounterWidget .count {top: 23px;}
.author-social {
margin-top: -8px;
margin-left: -7px;
}

2- ثم قم بأضافة أداة جافا سكربت من التخطيط
واضف داخلها الكود التالي

<div class='socialCounterWidget' id='socialCounterWidget'>
<a class='facebook-box' href='رابط صفحة فيس بوك' id='sc-facebook' target='_blank'>
<span class='fa fa-facebook'></span>
<span class='title'>تابعنا على الفيس بوك</span>
<span class='count'>لتصلك أخر التحديثات على الفيس بوك</span></a></div>
<div class='socialCounterWidget' id='socialCounterWidget'>
<a class='twitter-box' href='رابط صفحة على تويتر' id='sc-twitter' target='_blank'>
<span class='fa fa-twitter'></span> <span class='title'>تابعنا على تويتر</span>
<span class='count'>لتصلك أخر التحديثات على تويتر</span> </a> </div>
<div class='socialCounterWidget' id='socialCounterWidget'>
<a class='googleplus-box' href='رابط جوجل بلس' id='sc-googleplus' target='_blank'>
<span class='fa fa-google'></span> <span class='title'>تابعنا على جوجل بلس</span>
<span class='count'>لتصلك أخر التحديثات على جوجل بلس</span> </a> </div>

التخصيص:
     روابط صفحات التواصل الاجتماعي
     نصوص التي تظهر على الأداة (غيرها كما يحلو لك)