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

معاينة
إضغط للمشاهدة

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

1. نتوجه إلى التخطيط
2. ثم اختيار أداة HTML/JavaScript
3. ثم قم بوضع هذا الكود

<style> ul.sticky-social { position: fixed; bottom: 28%; z-index: 10; left: 0; list-style-type: none; } ul.sticky-social li a { display: inline-block; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 5px; text-align: center; color: #2d2d2c; background-color: #333; line-height: 40px; font-size: 18px; transition:all .25s ease-in-out; } ul.sticky-social li a:focus, ul.sticky-social li a:active{ color:#fff; } ul.sticky-social li a:hover{ color:#fff !important; transform: scale(1.2); transform-origin:left center; position: relative; box-shadow: 0px 0px 3px rgba(0,0,0,.3); } ul.sticky-social li a.facebook{ background-color: #a8a7a6; } ul.sticky-social li a.twitter{ background-color: #a8a7a6; } ul.sticky-social li a.google{ background-color: #a8a7a6; } ul.sticky-social li a.youtube{ background-color: #a8a7a6; } ul.sticky-social li a.linkedin{ background-color: #a8a7a6; } ul.sticky-social li a.instagram{ background-color: #a8a7a6; } ul.sticky-social li a.whatsapp{ background-color: #a8a7a6; } ul.sticky-social li a.facebook:hover{ background-color: #3b5998; } ul.sticky-social li a.twitter:hover{ background-color: #00aced; } ul.sticky-social li a.google:hover{ background-color: #dd4b39; } ul.sticky-social li a.youtube:hover{ background-color: #bb0000; } ul.sticky-social li a.linkedin:hover{ background-color: #007bb6; } ul.sticky-social li a.instagram:hover{ background-color: #517fa4; } ul.sticky-social li a.whatsapp:hover{ background-color: #4dc247; } </style> <ul class="sticky-social"> <li> <a href="https://www.facebook.com/info24tagliout" class="facebook"><i class="fa fa-facebook"></i></a> </li> <li> <a href="https://twitter.com/tagliout" class="twitter"><i class="fa fa-twitter"></i></a> </li> <li> <a href="https://www.youtube.com/channel/UCcJtSOYELy8bIHPQAf5gIVw" class="youtube"><i class="fa fa-youtube"></i></a> </li> <li> <a href="https://www.instagram.com/_ismail_junior_/" class="instagram"><i class="fa fa-instagram"></i></a> </li> <li> <a href="https://www.linkedin.com/#" class="linkedin"><i class="fa fa-linkedin"></i></a> </li> <li> <a href="+212633759309" data-toggle="modal" data-target="#myWhatsapp" class="whatsapp"><i class="fa fa-whatsapp"></i></a> </li> </ul>

• غير الروابط بما يناسب .
•  مبروك عليك الإضافة .
• أتمنى أن تنال الإضافة إعجابكم.
• وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع