مدونة هلا تك

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

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

العديد من المدونين على منصة بلوجر ترغب في اضافة ايقونة التواصل الاجتماعي مثل الفيس بوك وتويتر وغيرها من المواقع الاجتماعية والتي يكون فيها تفاعل ومتابعين للموقع . طبعا هناك العديد من الادوات التي تساعد في اضافة المواقع الاجتماعية في الموقع ولكن كل واحدة وطريقتها الخاصة ، ومنها الثابت والمتحرك ، ومنها من يظهر منبثق في الصفحات و وهناك العديد من الايقوانات التي تستخدم في مدونة بلوجر . لهذا اليوم في مدونة هلا تك سوف نقدم لكم احدى افضل الايقونات التي تساعد في جمع المشتركين والمتابعين في المواقع الاجتماعية المرتبطة بالمدونة نفسها .

معاينة الأضافة

شرح تركيب الأضافة على القالب الخاص بك

اولا نذهب الى المظهر و ثم الى تعديل ~~HTML~~ و ثم نبحث عن ~~]]></b:skin>~~ و نلصق الكود التالي اعلاه

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } /* INSERT CSS HERE */ /* SOCIAL PANEL CSS */ .social-panel-container { position: fixed; right: 0; bottom: 80px; transform: translateX(100%); transition: transform 0.4s ease-in-out; z-index: 99999; } .social-panel-container.visible { transform: translateX(-10px); } .social-panel { background-color: #fff; border-radius: 16px; box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); border: 5px solid #0066ff; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 169px; width: 370px; max-width: calc(100% - 10px); } .social-panel button.close-btn { border: 0; color: #97A5CE; cursor: pointer; font-size: 20px; position: absolute; top: 5px; right: 5px; } .social-panel button.close-btn:focus { outline: none; } .social-panel p { background-color: #0066ff; border-radius: 0 0 10px 10px; color: #fff; font-size: 14px; line-height: 18px; padding: 2px 17px 6px; position: absolute; top: 0; left: 50%; margin: 0; transform: translateX(-50%); text-align: center; width: 235px; } .social-panel p i { margin: 0 5px; } .social-panel p a { color: #FF7500; text-decoration: none; } .social-panel h4 { margin: 20px 0; color: #97A5CE; font-size: 14px; line-height: 18px; text-transform: uppercase; } .social-panel ul { display: flex; list-style-type: none; padding: 0; margin: 0; } .social-panel ul li { margin: 0 10px; } .social-panel ul li a { border: 1px solid #DCE1F2; border-radius: 50%; color: #0066ff; font-size: 20px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; text-decoration: none; } .social-panel ul li a:hover { border-color: #FF6A00; box-shadow: 0 9px 12px -9px #FF6A00; } .floating-btn { border-radius: 6px; background-color: #0066ff; border: 1px solid #0066ff; box-shadow: 0 16px 22px -17px #03153B; color: #fff; cursor: pointer; font-size: 16px; line-height: 20px; padding: 12px 20px; position: fixed; bottom: 20px; right: 20px; z-index: 999; } .floating-btn:hover { background-color: #ffffff; color: #0066ff; } .floating-btn:focus { outline: none; } @media screen and (max-width: 480px) { .social-panel-container.visible { transform: translateX(0px); } .floating-btn { right: 10px; } }

ثانيا نبحث عن ~~</body>~~ و نلصق الكود التالي اعلاه

<script type='text/javascript'>
//<![CDATA[
// SOCIAL PANEL JS
const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');

floating_btn.addEventListener('click', () => {
social_panel_container.classList.toggle('visible')
});

close_btn.addEventListener('click', () => {
social_panel_container.classList.remove('visible')
});

//]]>
</script>

ثالثا نبحث عن ~~<body>~~ و نلصق الكود التالي اسفله مباشرة

<link async='async' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>

<div class='social-panel-container'>
<div class='social-panel'>
<p>مع تحيات مدونة <i class='fa fa-heart'/>
<a href='https://halateck.blogspot.com/' target='_blank'>هلا تـــك</a></p>
<button class='close-btn'><i class='fas fa-times'/></button>
<h4>تواصــل معنـــا</h4>
<ul>
<li>
<a href='https://twitter.com/florinpop1705' target='_blank'>
<i class='fab fa-twitter'/>
</a>
</li>
<li>
<a href='https://linkedin.com/in/florinpop17' target='_blank'>
<i class='fab fa-linkedin'/>
</a>
</li>
<li>
<a href='https://facebook.com/florinpop17' target='_blank'>
<i class='fab fa-facebook'/>
</a>
</li>
<li>
<a href='https://instagram.com/florinpop17' target='_blank'>
<i class='fab fa-instagram'/>
</a>
</li>
</ul>
</div>
</div>
<button class='floating-btn'>
تواصــل معنــــا
</button>

التعديلات

يمكنك تغير اي نص بما تريد و قم بتغير الروابط الخاصة بمواقع التواصل الخاصة بك

و ثم قم بالحفظ

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع أضافة صندوق أزرار التواصل الأجتماعي بشكل منبثق. إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل كل ما هو جديد.