اضافة صناديق عداد التواصل الاجتماعي v3

إعلان أدسنس

آخر المواضيع

breaking/مقالات/9
بلوجر

الجمعة، 19 مايو، 2017

5:57:00 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم ورحمة الله تعالى وبركاته, واليوم في هذا الموضوع سنقدم لكم طريقة لتركيب صناديق التواصل الاجتماعي بشكل جديد واحترافي ويمكن ان يكون كعداد للمتابعين في مواقع التواصل الاجتماعي, يتوفر على 4صناديق 'فيسبوك,تويتر,جوجل+,يوتيوب' متناسقة وجذابة تعطي للمدونة مظهرا متميزا يمكن وضعه فوق الفوتر كما في المعاينة او وضعه اسفل القائمة الرئيسية, تابعو معي شرح التركيب !!
معاينة حية للاضافة 
معاينة 
طريقة التركيب
  1. أولا عليك الانتقال الى لوحة تحكم قالب مدونتك
  2. ثم الى المظهر  --> تحرير Html
  3. ثم قم بالبحث عن الوسم ]]></b:skin> باستعمال Ctrl+F
  4. وضع الاكواد التالية فوقه مباشرة
#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:nth-of-type(4) {
    background: #CB2027;
}
#social-footer ul li {
    float: left;
    width: 25%;
    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;
    margin-bottom: 10px;
}
.awesom-icon {
    margin-bottom: 10px;
}
#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;
}

  1. الآن يتبقى لك اكواد Html يمكن وضعها في أي مكان بالقالب ما بين <body> و </body>
  2. لوضعها كما في المعاينة ابحث عن الوسم <footer وقم بوضعها فوقها مباشرة
  3. ان كنت تريد وضعها في مكان معين ولا تعرف او لم تجد الوسم <footer في قالبك فقط اعلمنا في التعليقات وسنرد عليك

<div id="social-footer">
<ul>
<li><a href="http://twitter.com/Nak1ha" target="_blank">
<span class="freepikicon-twitter social-icon"></span>
<div class="right" id="tw_followers">
<span class="name">تابعنا على</span>
<div class="awesom-icon">
<i class="fa fa-twitter"></i>
</div>
<span class="counter">500 متابع</span>
</div>
</a></li>
<li><a href="http://www.facebook.com/nak1ha" target="_blank">
<span class="freepikicon-facebook1 social-icon"></span>
<div class="right" id="fb_followers">
<span class="name">تابعنا على</span>
<div class="awesom-icon">
<i class="fa fa-facebook"></i>
</div>
<span class="counter">2799 معجب</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">تابعنا على</span>
<div class="awesom-icon">
<i class="fa fa-google-plus"></i>
</div>
<span class="counter">355 متابع</span>
</div>
</a></li>
<li><a href="https://www.youtube.com/channel/UCcJtSOYELy8bIHPQAf5gIVw" target="_blank">
<span class="freepikicon-googleplus social-icon"></span>
<div class="right" id="gl_followers">
<span class="name">تابعنا على</span>
<div class="awesom-icon">
<i class="fa fa-youtube-play"></i>
</div>
<span class="counter">741 مشترك</span>
</div>
</a></li>
</ul>
</div>
ثم قم بحفظ القالب ومبروك عليك الاضافة
  1. اريد شراء القالب الخاص بمدونتك السابق لهاذا القالب
    الذى تمت ازالتة منذ يومين

    ردحذف
    الردود
    1. قم بمراسلتنا على صفحتنا في الفيسبوك
      http://www.facebook.com/nak1ha

      حذف

مقالات