اضافة أزرار التواصل الاجتماعي بشكل جديد لمدونات بلوجر

محمد رحمة

السبت، 22 فبراير 2020

بلوجر

اضافة أزرار التواصل الاجتماعي بشكل جديد لمدونات بلوجر

اضافة أزرار التواصل الاجتماعي بشكل جديد لمدونات بلوجر 

مواقع التواصل بتأثير جديد لاصحاب مدونات بلوجر 

 كَيْفِيَّة اضافة أَزَرَّار التَّوَاصُل الْاِجْتِمَاعِيِّ لِمُدَوَّنَات بلوجر؟

درس اليوم عن أزرار التواصل الاجتماعي ولكن بشكل جديد كما في صورة المقال وشكل الأزرار جيد ويقوموا بتحسين شكل الموقع وليس بهم أي اكواد جافا فقط CSS و HTML  , ومايميز هذه الاضافة هي التأثير الخاص بها (HOVER) 

قد يهمك : إضافة قائمة جانبية بسيطة لمدونات بلوجر 

معاينة الأضافة /Button Text/Icon/button

شرح وضع الاضافة

اولا قم بفتح المظهر الخاص بموقعك ثم تعديل HTML ثم ابحث عن هذا الكود

]]></b:skin>

وقم بوضع هذا الكود أعلاه 

.middle{
width: 100%;
text-align: center;
}
.middle a {
color:#00455b;
}
.btn{
display: inline-block;
width: 70px;
height: 70px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #3498db;
overflow: hidden;
position: relative;
}
.btn i{
line-height: 70px;
font-size: 26px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn::before{
content: &quot;&quot;;
position: absolute;
width: 120%;
height: 120%;
background: linear-gradient(to right, #ee0979, #ff6a00);
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
top: -10%;
left: -10%;
}
}

ثم قم بحفظ القالب وتوجه بعدها الي التخطيط 

ثم قم بالتوجه الي السايدبار ( الشريط الجانبي ) وقم باضافة أداة HTML/JAVASCRIPT وبعد اضافة الاداة قم بوضع هذا الكود داخل الأداة 

<div class="middle">

      <a class="btn" href="https://www.facebook.com/nsafrblog/">

        <i class="fab fa-facebook-f" aria-hidden="true"></i>

      </a>

      <a class="btn" href="https://www.instagram.com/mr.arabko/">

        <i class="fab fa-instagram" aria-hidden="true"></i>

      </a>

            <a class="btn" href="https://www.pinterest.com/mrarabko/">

        <i class="fab fa-pinterest" aria-hidden="true"></i>

      </a>

            <a class="btn" href="https://twitter.com/mrarabko">

        <i class="fab fa-twitter" aria-hidden="true"></i>

      </a>

      <a class="btn" href="https://www.youtube.com/channel/UCaKWp2S5LITfnRMiAmljTgQ">

        <i class="fab fa-youtube" aria-hidden="true"></i>

      </a>

  <a class="btn" href="https://www.quora.com/profile/Ehab-Zayn">

        <i class="fab fa-quora" aria-hidden="true"></i>

      </a>

    </div>

ثم قم بتغيير الروابط التي بـ اللون الاحمر بـ الروابط الخاصة بك ثم قم بحفظ الاداة وستعمل معك هذه الازرار الخاصة بمواقع التواصل الأجتماعي بدون أي مشاكل 

  لاتنسي زيارة قسم بلوجر  لمزيد من المواضيع واذا واجهت اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد  شرح معين عن  أي شي لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع