إضافة أداة المتابعة عبر مواقع التواصل الإجتماعي لمدونات بلوجر

مرحبا بكم زوار ومتابعي مدونة محترفي المعلوميات

اليوم أحضرت لكم إضافة جد رائعة مطورة من طرف مدونة عرب ويب

و هي عبار عن أداة المتابعة عبر مواقع التواصل الإجتماعي

وهذه صورة حية للإضافة

ننتقل الآن إلى طريقة التركيب

لتركيب الأداة قم بالذهاب من الصفحة الرئيسية في بلوجر إلى

القالب >> تحرير

ثم إبحث عن

وضع فوقها مباشرة الكود التالي

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

ثم ألصق في الأداة الكود التالي مع تغيير الروابط

الملونة بالأحمر بما يناسبك

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

أي مشكل تواجهونه في تركيب الأداة أنا في خدمتكم

دمتم في رعاية الله

إعدادات القالب

القائمة الرئيسية

مساحة إعلانية

اعلان هام

إضافة أداة المتابعة عبر مواقع التواصل الإجتماعي لمدونات بلوجر

عن الكاتب

مقالات مشابهة

ليست هناك تعليقات:

أو يمكنكم الإتصال بنا من خلال النموذج التالي

إعلان تحت صورة الموضوع

إعلان وسط الموضوع

إعلان آخر الموضوع

التعليقات