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

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

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

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

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

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



شرح وضع الاضافة
اولا قم بفتح المظهر الخاص بموقعك ثم تعديل 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/mrarabkoblog/">

        <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>
ثم قم بتغيير الروابط التي بـ اللون الاحمر بـ الروابط الخاصة بك ثم قم بحفظ الاداة وستعمل معك هذه الازرار الخاصة بمواقع التواصل الأجتماعي بدون أي مشاكل 

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

ارسال تعليق

أحدث أقدم