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

Follow-us-on-Blogger-social-networking-sites
المتابعين من أهم الأمور الذي يجب الاهتمام بها بحيث تلبي طلباتهم وتحل مشاكلهم, وجميعنا نحب أن يكون لنا العديد من المتابعين ولجلب متابعين يجب علينا الاهتمام في تسهيل لهم الطرق بحيث نعمل لمدونتنا صفحات في مواقع التواصل الاجتماعي ومحاولة ترويجها إلى زوار مدوناتنا ,لذالك نقدم لكم كواد لمدونة بلوجر.
هده الاضافة نقدمها لكم بلونين مختلفين حتى تناسب أدوقكم وتناسب مدوناتكم

تركيب الإضافة 

الاضافة تتكون من جزئيين الجزاء الأول هو ملف CSS هو ملف تنسيق الاضافة بحيث يحتوي على تنسيق الألوان وترتيب الشكل, وهو يتكون من جزئيين كل جزئ يختلف في الشكل والألوان. نبدى أولى في تركيب CSS
لتركيب CSS نتوجه الى لوحة تحكم المدونة ثم المظهر ثم تحرير HTML ثم نبحث ]]></b:skin> عن ونضع فوقة/اعلاء كواد احد الإشكال
1-الشكل الأول
Follow-us-on-Blogger-social-networking-sites

.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
    text-align: center;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
    letter-spacing: 0px;
text-decoration: none;
display: block;
padding: 10px 1px 10px 10px;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align:center ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li a.social-btn-instagram {
background: #405de6;
color:#fff;
}
.kt-social-buttons-widget li a:hover {
color: #0a0a0a !important;
background:#f8f8f8 !important;
}

2-الشكل التأني
Follow-us-on-Blogger-social-networking-sites
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
    text-align: center;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
    letter-spacing: 0px;
text-decoration: none;
display: block;
color: #0a0a0a;
padding: 10px 1px 10px 10px;
background:#f8f8f8;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li:hover a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align:center ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-instagram {
background: #405de6;
color:#fff;
}


ألان نأتي الى تركيب وسوم الاضافة نذهب الى التخطيط تم نختار المكان المناسب ثم نضغط "إضافة أداة" تم أضف HTML/JavaScrip واكتب عنوان مناسب في صندوق العنوان وضع الكود التالي في صندوق النص. وضغط حفظ
<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix">
<li><a href="#!" class="social-btn-twitter">تابعنا عبر تويتر<i class="fa fa-twitter"></i> </a></li>
<li><a href="#!" class="social-btn-facebook">تابعنا عبر الفيس بوك <i class="fa fa-facebook"></i> </a></li>
<li><a href="#!" class="social-btn-youtube">تابعنا في اليوتيوب <i class="fa fa-youtube"></i> </a></li>
<li><a href="#!" class="social-btn-instagram">تابعنا في انستجرام <i class="fa fa-instagram"></i> </a></li>
</ul></div>
قم بتغيير #! بروابط صفحتك في مواقع التواصل الاجتماعي ومبروك عليك الاضافة 

هناك 17 تعليقًا:

  1. السلام عليكم.. أخي الفاضل:
    ثم نبحث عن ]]> ونضع كواد احد الإشكال.
    طيب ما فهمت، أين بالضبط نضع الكود هل قبل ]]> أو بعد، أنا جربت قبل وبعد ما نفع.

    ولك تحياتي..

    ردحذف
    الردود
    1. ضع كود احد الاشكال اعلاء/فوقه ]]>


      ارسلي رابط مدونتك

      حذف
  2. شكرا على الاضافة

    ردحذف
    الردود
    1. العفو
      شكراً على مرورك اخي الفاضل نتمنى ان تكون من متابعينا

      حذف
  3. شكرا لك علي تلك الإضافه الرائعه

    ردحذف
  4. صور الفايسبو وتويتر والانستاغرام واليوتيوب لا تظهر بجانب العناوين ؟

    ردحذف
  5. شكرا على مساعدتك القيمة
    انا مدونتي هي https://educationalsupportcenter.blogspot.com
    ولكن كيف اربط هذه الصفحة بصفحات التواصل

    ردحذف
  6. تمت الاضافه ولكن بدون روابط للسوشيال ميديا يعني عند الضغط علي زر الفيس مثلا لا يتجه لصفحه الفيس

    ردحذف
    الردود
    1. قم بتغير #! كل واحده الى رابط صفحتك

      حذف
    2. جزاك الله خيرا
      كيف اعرف رابط اليوتيوب لقناتي

      حذف
  7. انظر الى هذه الشرح ممكن يفيدك

    http://www.tech-hall.com/%D8%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA-%D9%8A%D9%88%D8%AA%D9%8A%D9%88%D8%A8/how-get-custom-youtube-url-channel/

    ردحذف
  8. محتاجه كود html لاضافه الواتساب للبلوجر

    عندي الكود ولكن رساله الترحيب لا تظهر

    ردحذف
    الردود
    1. قريباً إن شاء الله سنوفرها في المدونة

      حذف
    2. اخي الكريم راسني على بريد الالكتروني او على صفحتي في الفيس بوك لم افهم ما تريد بضبط
      بريدي
      abduallah7890@gmail.com

      حذف

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *