اضافة تابعنا عبر صفحاتنا على شبكات أو مواقع التواصل الاجتماعي اضافة رائعة من خلالها قد تحصل على متابعين لمدونتك عبر هذي الاضافة لأنها تقوم بعرض تلك الصفحات بشكل جذاب جدا والاضافة تشمل صفحات Google+ و facebook و twitter
الاضافة متوفره على منصة WordPress وها قد وصلت الى منصة Blogger وانتشرت بشكل كبير الا ولكن ! ان بعض مدونات تقوم بأستخدامها ولا تشاركنا بأكوادها :( لا عليكم معنا هنا في التقنية حياتك سنقدم لكم كل الاكواد وجديد و .. الى اخره .
معاينة الاداة :
طريقة التركيب :
- قم ببحث عن ]]></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;
}
ثم قم بأضافة اداة جافا سكربت من التخطيط
واضف الكود التالي
<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>
التخصيص:
- روابط صفحات
- نصوص قابله لتغير