📁 آخر الأخبار

إضافة أيقونات متابعة مواقع التواصل الاجتماعي أسفل مواضيع الموقع بشكل جديد

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

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

<style>
#follow-sami-al-small{background-color:#425e77;padding:20px;text-align:center;color:#fff;border-radius:4px;margin-bottom:20px;border: 2px solid #f49a9a;}
#follow-sami-al-small > strong{font-size:120%;text-shadow:1px 1px #000;margin-bottom:20px;display:block;}
.follow-icons{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));}
.follow-icons a{color:#fff;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;background-color:rgba(255,255,255,.1);padding:10px!important;border-radius:2px;transition:background-color .4s;border: 2px solid #9b9494;}
.follow-icons a:hover{background-color:rgba(0,0,0,.3);}
.follow-icons a i{order:-1;font-size:24px;}
.follow-icons a span {white-space: nowrap;}

.follow-icons a:nth-child(1):hover {background-color: #3b5999;color: #fff;}
.follow-icons a:nth-child(2):hover {background-color: #00acee;color: #fff;}
.follow-icons a:nth-child(3):hover {background-color: #e60023;color: #fff;}
.follow-icons a:nth-child(4):hover {background-color: #f102e5;color: #fff;}
.follow-icons a:nth-child(5):hover {background-color: #179cde;color: #fff;}
.follow-icons a:nth-child(6):hover {background-color: #0077b5;color: #fff;}
</style>
<div id="follow-sami-al-small">
<strong>تابعنا على المواقع الإجتماعية</strong>
<div class='follow-icons'>
  
<a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-facebook-f"></i>
<span>Facebook</span>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-x-twitter"></i>
<span>Twitter-X</span>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-youtube"></i>
<span>Youtube</span>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-instagram"></i>
<span>instagram</span>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa-solid fa-paper-plane"></i>
<span>Telegram</span>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-linkedin-in"></i>
<span>Linkedin</span>
</a>
</div>
</div>    
 بعد نسخ الكواد بالكامل قم بالدخول الي تنسيق لموقع ثم قم بإضافة أداة جديد تظهر فى جميع المواضيع أو فى القائمة الجانبية فالخيار يعود لك وأضف الكود فى الأداة وثم حفظ وسوف تعمل مع أضافة أيقونات التواصل مباشر على الموقع . أليك نموذج معاينة
 
تابعنا على المواقع الإجتماعية
المستر
المستر
تعليقات