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

معاينة للاضافة والتجاوب:

معاينة بمقياس الحاسوب

معاينة بمقياس لوحة الكترونية (Tablet, iPad)

معاينة بمقاس هاتف

شرح طريقة تركيب الاضافة

1. اولا انتقل الى لوحة تحكم قالب مدونتك وابحث عن الوسم ]]></b:skin>
2. وضع فوقه الاكواد التالية

/* Social Nak1ha.com :D
-------------------------------- */
div#suded-social ul li {
overflow: hidden;
float: right;
width: 25%;
text-align: center;
    padding: 1% 0 0;
}
div#suded-social ul li i {
display: none
}
div#suded-social {
overflow: hidden
}
div#suded-social ul li p {
    font-size: 16px;
    padding: 0 40px 0px 0;
    text-align: right;
}
div#suded-social ul li a {
display: block;
color: #fff;
overflow: hidden;
position: relative;
transition: 0.3s;
padding: 13px 28px;
}
div#suded-social ul li.fb-c a {
background: #3b5998;
}
div#suded-social ul li.twt-c a {
background: #55acee;
}
div#suded-social ul li.ytb-c a {
background: #b00;
}
div#suded-social ul li.instagram-nak1ha a {
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
div#suded-social ul li.fb-c a:before {
content: "\f082";
font-family: Fontawesome;
position: absolute;
      right: 10px;
    font-size: 55px;
    color: #ffffff;
    top: 14px;
}
div#suded-social ul li.twt-c a:before {
content: "\f081";
font-family: Fontawesome;
position: absolute;
      right: 10px;
    font-size: 55px;
    color: #ffffff;
    top: 14px;
}
div#suded-social ul li.ytb-c a:before {
content: "\f166";
font-family: Fontawesome;
position: absolute;
     right: 10px;
    font-size: 55px;
    color: #ffffff;
    top: 14px;
}
div#suded-social ul li.instagram-nak1ha a:before {
content: "\f16d";
font-family: Fontawesome;
position: absolute;
     right: 10px;
    font-size: 55px;
    color: #ffffff;
    top: 14px;
}
@media screen and (max-width : 1330px) {
div#suded-social ul li p {
    font-size: 15px;
}}
@media screen and (max-width: 1268px){
div#suded-social ul li p {
    font-size: 16.2px;
}
}
@media (max-width: 1100px) {
      div#suded-social ul li {width: 50%;}
div#suded-social ul li p{font-size: 15px}
div#suded-social ul li.fb-c a:before,div#suded-social ul li.twt-c a:before,div#suded-social ul li.ytb-c a:before,div#suded-social ul li.instagram-nak1ha a:before {
    right: 20px;
    font-size: 40px;
    top: 7px;
}
}
@media screen and (max-width : 768px) {
div#suded-social ul li p{font-size: 14.7px}
@media screen and (max-width : 620px) {
div#suded-social ul li {width: 100%;}
      div#suded-social ul li p{font-size: 16px}
div#suded-social ul li.fb-c a:before,div#suded-social ul li.twt-c a:before,div#suded-social ul li.ytb-c a:before,div#suded-social ul li.instagram-nak1ha a:before {
    right: 20px;
    font-size: 30px;
    top: 12px;
}

1. بعد هذه الخطوة ركب هذه الاكواد في المكان الذي تريد أن تظهر فيه الاضافة كأسفل القائمة الرئيسية او فوق الفوتر.

<div class='container'>
<div id='suded-social'>
<ul>
<li class='fb-c'><a href='https://www.facebook.com/Nak1ha' target='_blank'><p>تابع جديدنا على الفيسبوك و انظم لأكثر من 1500  متابع</p>
</a></li>
<li class='twt-c'><a href='https://www.twitter.com/nak1ha' target='_blank'><p>تابع كل جديدنا على تويتر و انظم الى أكثر من 100 متابع</p>
</a></li>
<li class='ytb-c'><a href='https://www.youtube.com/nak1ha' target='_blank'><p>تابع جديدنا على اليوتيوب وانظم الى أكثر من 290 متابع </p>
</a></li>
<li class='instagram-nak1ha'><a href='https://www.instagram.com/nak1ha_/' target='_blank'>
<p>تابع جديدنا على انسغرام و انظم الى العديد من المتابعين</p>
</a></li>
</ul>
</div>
</div>