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

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

الاضافة متوفره على منصة WordPress وها قد وصلت الى منصة Blogger وانتشرت بشكل كبير الا ولكن ! ان بعض مدونات تقوم بأستخدامها ولا تشاركنا بأكوادها :( لا عليكم معنا هنا في التقنية حياتك سنقدم لكم كل الاكواد وجديد و .. الى اخره

معاينة الاداة :

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

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

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

التخصيص:

روابط صفحات
نصوص قابله لتغير

الموضوع الاصلي من مصدر من هـنـا

الموضوع من قسم:

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