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

السلام عليكم ومرحبا بكم وعيد فطر مبارك سعيد وكل عام وأنتم لله أقرب. واليوم في موضوع جديد وحصري على مدونة المحترف إسماعيل للمعلوميات حيث سنشرح طريقة إضافة صناديق المتابعة على مواقع التواصل الإجتماعي لن أطيل عليكم الحديث لدى سنمر إلى شرح طريقة التركيب  ☺

لمعاينة الإضافة
إضغط للمشاهدة

طريقة تركيب الإضافة:

1. أول خطوة نقوم بالتوجه إلى القالب ثم تحرير HTML
2. قم بالبحث هن الوسم </head>
3. ثم قم بوضع هذه الأكواد فوقها

<style>
#social-footer:after {
    content: '';
    display: table;
    clear: both;
}
#social-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#social-footer ul li:nth-of-type(3) {
    background: #d34836;
}
#social-footer ul li {
    float: left;
    width: 33.3333%;
    text-align: center;
}
#social-footer ul li:nth-of-type(2) {
    background: #3b5998;
}
#social-footer ul li a {
    display: block;
    color: #fff;
    font-size: 2em;
    padding: 10px;
    text-decoration: none;
}
#social-footer ul li:nth-of-type(1) {
    background: #55acee;
}
#social-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
div#social-footer {
    margin-bottom: -8px;
    margin-top: -8px;
}
#social-footer ul li a span.counter {
    font-size: .5em;
    padding: 2px 10px;
    border-radius: 4px;
    display: block;
    background-color: #333;
    background: rgba(0,0,0,0.3);
}
#social-footer ul li a span {
    display: block;
}
#social-footer ul li a span.name {
    font-size: .5em;
    display: block;
    font-weight: bold;
}
#social-footer ul li a .right {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
#social-footer ul li a span.social-icon {
    display: inline-block;
}
.counter:hover{ -webkit-animation:rubberBand .8s 1;  -moz-animation:rubberBand .8s 1;  -o-animation:rubberBand .8s 1;  animation:rubberBand .8s 1;}
</style>

1. ثاني خطوة عليك نسخ الكود التالي ووضع في اي مكان في القالب ومن الأحسن وضعه أسفل القائمة الرئيسية
2. وتستتطيع وضعه أيظا في التخطيط داخل أداة html /javascript 

<div id="social-footer">

<br/>

<ul>

<li><a href="https://twitter.com/tagliout" target="_blank">

<span class="freepikicon-twitter social-icon"></span>

<div class="right" id="tw_followers">

<span class="name">Twitter</span>

<span class="counter">4,418</span>

</div>

</a></li>

<li><a href="https://www.facebook.com/info24tagliout" target="_blank">

<span class="freepikicon-facebook1 social-icon"></span>

<div class="right" id="fb_followers">

<span class="name">Facebook</span>

<span class="counter">19,145</span>

</div>

</a></li>

<li><a href="https://plus.google.com/u/0/115179754862668273653" target="_blank">

<span class="freepikicon-googleplus social-icon"></span>

<div class="right" id="gl_followers">

<span class="name">+ Google</span>

<span class="counter">3,248</span>

</div>

</a></li>

</ul>

</div>

1. قم بتغيير الروابط الملونة بالأحمر بالروابط الخاصة بك
2. مبروك عليك الإضافة.

• وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع.

عيد مبارك سعيد