اضافة مواقع التواصل الاجتماعى باللغة المتاريل
السلام عليكم فى موضوع حصري على الموقع وهو عن اضافة مواقع التواصل الاجتماعى باللغة المتاريل وهى اضاقة تستطيع وضعها على موقعك سواء ان كان بلوجر او وورد بريس او مواقع ديزين , وهى عبارة عن شريط يضم بعض الايقونات التى تضم بعض مواقع التواصل الاجتماعى مثل الفيس يوك وتويتر والمسنقر واليوتيوب و ديس كورد وتستطيع وضع المزيد لان الاضافة تعتمد على مكتبة ايقونات fontawesome كل ما عليك فعلة هو اتباع طريقة التركيب ثم تقوم بتغيير المواقع التى تريدها واقوم بتغيير الروابط بي روابطك ادعكم مع التركيب
طريقة التركيب
- تتوجة الى المظهر ثم تعديل HTML ثم تقوم بالبحث عن /head وقم بوضع الكود فوقة .
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css"/>- ثم قم بالبحث عن /b:skin وقم بوضع الكود فوقة.
.social-head { position: fixed; left: 18px; bottom: 18px; text-align: center; background-color: rgba(0,0,0,0.2); padding: 12px 5px; -webkit-border-radius: 25px; border-radius: 25px; } .social-head a { margin: 0; display: block; padding: 8px; font-size: 1.4em; color: rgba(255, 255, 255,0.3); transition: all .5s ease-in-out; } .social-head a:hover{ transform: scale(1.4); transition: all .4s ease-in-out; } .social-head:hover a{ color: #ffffff; } .social-head:hover{ background-color: rgba(0,0,0,0.4); } .social-head a:hover .fab[class*="facebook"] { color: #2e6992; } .social-head a:hover .fab[class*="youtube"] { color: #fb4e4e; } .social-head a:hover .fab[class*="twitter"] { color: #20b2e8; } .social-head a:hover .fab[class*="instagram"] { color: #9548eb; } .social-head a:hover .fab[class*="discord"] { color: #7289da; }- ثم في النهاية تضع الكود تحت body او تتوجة الى التنسيق او التخطيط واضافة اداةHTMLJAVASCRIPT وتضع الكود
<div class="social-head">
<a href="https://web.facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>
<a href="https://discord.gg" target="_blank"><i class="fab fa-discord"></i></a>
</div>- اسهل طريقة تضع الكود تحت body او تتوجة الى التنسيق او التخطيط واضافة اداةHTMLJAVASCRIPT وتضع الكود
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css"/>
<style>.social-head { position: fixed; left: 18px; bottom: 18px; text-align: center; background-color: rgba(0,0,0,0.2); padding: 12px 5px; -webkit-border-radius: 25px; border-radius: 25px; } .social-head a { margin: 0; display: block; padding: 8px; font-size: 1.4em; color: rgba(255, 255, 255,0.3); transition: all .5s ease-in-out; } .social-head a:hover{ transform: scale(1.4); transition: all .4s ease-in-out; } .social-head:hover a{ color: #ffffff; } .social-head:hover{ background-color: rgba(0,0,0,0.4); } .social-head a:hover .fab[class*="facebook"] { color: #2e6992; } .social-head a:hover .fab[class*="youtube"] { color: #fb4e4e; } .social-head a:hover .fab[class*="twitter"] { color: #20b2e8; } .social-head a:hover .fab[class*="instagram"] { color: #9548eb; } .social-head a:hover .fab[class*="discord"] { color: #7289da; }</style>
<div class="social-head">
<a href="https://web.facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>
<a href="https://discord.gg" target="_blank"><i class="fab fa-discord"></i></a>
</div>لا يسمح بأعادة استخدام المحتوى وإلأ سوف يتم التبليغ عنك وسيتم حذف المقالة من طرف بلوجر(Google) بدون اخبارك
تعليقات
إرسال تعليق