السلام عليكم
اليوم أحضرت لكم إضافة جد رائعة مطورة من طرف مدونة عرب ويب
و هي عبار عن المتابعة عبر مواقع التواصل الإجتماعي
صورة حية عن الاضافة
اليوم أحضرت لكم إضافة جد رائعة مطورة من طرف مدونة عرب ويب
و هي عبار عن المتابعة عبر مواقع التواصل الإجتماعي
صورة حية عن الاضافة
طريقة التركيب
أولا المظهر : أدخل الى تحرير القالب ولا تنسى أخذ نسخة إحتياطية ثم قم بتوسيع عناصر الستايل بالضغط على السهم الخاص بذلك
ثم فوق الوسم ]]></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;
}
ثانياتوجه إلى التخطيط ثم إضافة عنصر جديد ثم إظقط على إضافة كود HTML/JAVA SCRIPT
كما هو موضح في الصورة
قم بتركيب الكود التالي
<div class='socialCounterWidget' id='socialCounterWidget'>
<a class='facebook-box' href='https://www.facebook.com/dzfun01' 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='https://plus.google.com/u/0/+' id='sc-googleplus' target='_blank'>
<span class='fa fa-google'></span>
<span class='title'>تابعنا على جوجل بلس</span>
<span class='count'>لتصلك أخر التحديثات على جوجل بلس</span>
</a>
</div>
و إلى موضوع أخر إن شاء الله
يرجى التعليق على المواضيع بكل احترام
أتقبل كل إنتقادتكم لكن بشرط أن تكون محترمة
يرجى عدم وضع روابط إشهارية