كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger

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

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

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

كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger
كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger

لنبدأ الآن درس حول إضافة كود HTML و CSS  لإضافة رموز الوسائط الاجتماعية في blogger بطرق بسيطة.

كيف تضيف ايقونات مواقع التواصل الاجتماعي في مدونة بلوجر؟

اتبع بعض الخطوات لإضافة رموز الوسائط الاجتماعية في المدون.

  دائما أوصى باخد نسخة احتياطية من القالب لتفادي الاخطاء.

الخطوة 1) أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة تحكم blogger.com .

الخطوة 2) انتقل الآن إلى قسم التخطيط .

الخطوة 3) في قسم التخطيط ، انتقل إلى عنصر واجهة الشريط الجانبي .

الخطوة 4) الآن في إخانة ضافة أداة أضف أداة HTML / Javascript .

الخطوة 5) الآن ، انسخ هذا الرمز والصقه في HTML / Javascript كما هو موضح أدناه.

كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger
كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger

الصق الكود واعمل حفظ كما هو موضح بالصورة

كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger
كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger

<head> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } .social-media { display: flex; flex-wrap: wrap; } .social-media a .fa { font-size: 20px; line-height: 50px; color: #000; } .social-media a { display: block; width: 50px; height: 50px; margin: 3px; text-align: center; background: rgba(0, 0, 0, 0.1); transition: 0.3s; border-radius: 50px; } .social-media a:before { content: ''; top: -6px; left: 3px; width: 100%; height: 10%; background: rgba(0, 0, 0, 0.5); transform: skewX(-45deg); } .social-media a:after { content: ''; top: -2.5px; left: 50px; width: 10%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: skewY(-45deg); } .social-media .social-media .blogtriggers-facebook { color: #3b5998; } .social-media a:hover { transform: translate(-10%, 10%); box-shadow: 10px 0 35px #000; transition: 0.3s; } .social-media .blogtriggers-facebook { background: #3b5998; } .social-media .blogtriggers-facebook .fa { color: #fff; } .social-media .blogtriggers-twitter { background: #55acee; } .social-media .blogtriggers-twitter .fa { color: #fff; } .social-media .blogtriggers-youtube { background: #cd201f; } .social-media .blogtriggers-youtube .fa { color: #fff; } .social-media .blogtriggers-instagram { background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1); } .social-media .blogtriggers-instagram .fa { color: #fff; } .social-media .blogtriggers-quora { background: #b92b27; } .social-media .blogtriggers-quora .fa { color: #fff; } .social-media .blogtriggers-linkedin { background: #0077b5; } .social-media .blogtriggers-linkedin .fa { color: #fff; } .social-media .blogtriggers-whatsapp { background: #25d366; } .social-media .blogtriggers-whatsapp .fa { color: #fff; } .social-media .blogtriggers-pinterest { background: #b3001b; } .social-media .blogtriggers-pinterest .fa { color: #fff; } .social-media .blogtriggers-telegram { background: #0088cc; } .social-media .blogtriggers-telegram .fa { color: #fff; } a { text-decoration: none; text-align: center; } .tutorial-button { margin: 10px 0px; width: 30%; height: 50px; background: rgba(205, 32, 31, 0.3); position: relative; transition: 0.2s; } .tutorial-button p { padding: 12px; text-align: center; color: #333; font-size: 1rem; font-family: sans-serif; transition: 0.2s; } .tutorial-button:hover { background: rgba(205, 32, 31, 1); box-shadow: 5px 5px 5px black; transition: 0.2s; } .tutorial-button:hover p { color: #fff; transition: 0.2s; } </style> </head> <div class="social-media"> <div class="demo"> <a href="https://facebook.com/photoomax" target="_blank" class="blogtriggers-facebook"><i class="fa fa-facebook"></i></a> </div> <a href="https://twitter.com/photoomax" target="_blank" class="blogtriggers-twitter"><i class="fa fa-twitter"></i></a> <a href="https://www.youtube.com/@photoomax/videos" target="_blank" class="blogtriggers-youtube"><i class="fa fa-youtube"></i></a> <a href="https://instagram.com/photoomax1" target="_blank" class="blogtriggers-pinterest"><i class="fa fa-instagram"></i></a> <a href="https://blogtriggers.quora.com" target="_blank" class="blogtriggers-quora"><i class="fa fab fa-quora"></i></a> <a href="https://www.linkedin.com/in/photoomax1" target="_blank" class="blogtriggers-linkedin"><i class="fa fa-linkedin"></i></a> <a href="https://whatsapp.com/" target="_blank" class="blogtriggers-whatsapp"><i class="fa fab fa-whatsapp"></i></a> <a href="https://in.pinterest.com/photoomax/" target="_blank" class="blogtriggers-pinterest"><i class="fa fab fab fa-pinterest"></i></a> <a href="https://t.me/blogtriggers" target="_blank" class="blogtriggers-telegram"><i class="fa fab fab fa-telegram"></i></a> <a href="https://www.linkedin.com/in/photoomax1" target="_blank" class="blogtriggers-linkedin"><i class="fa fa-linkedin"></i></a> </div>


الخطوة 5) الآن انقر فوق حفظ .

تهانينا لقد نجحت في إضافة رمز وسائل التواصل الاجتماعي إلى المدون.

كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger
كيفية إضافة أيقونات وسائط اجتماعية متجاوبة في Blogger

فوائد إضافة أيقونات الوسائط الاجتماعية في المدون

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

 مما يؤدي إلى مصداقية مدونتك ، فإنه يجعل القراء يتفاعلون مع موقعك. هذه الرموز هي إشارة مرئية إلى وجود مواقع الشبكات الاجتماعية لعملك أو مدونتك.

 إنها طريقة سهلة لإظهار جمهورك النشط والبقاء على اتصال مع قرائك.

 يمكن للأشخاص متابعتك بسرعة أكبر على شبكات التواصل الاجتماعي الخاصة بك عن طريق النقر فوق الرموز الخاصة بك.

 زيادة التفاعل والمشاركة ، وزيادة عدد الزيارات إلى منشورك.

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

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

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

Tags :( الأكثر بحثا على جوجل )
كيفية, إضافة, أيقونات, وسائط, اجتماعية, متجاوبة, في, Blogger كيفية, إضافة, أيقونات, وسائط, اجتماعية, متجاوبة, في, Blogger

إرسال تعليق

{مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ}
Cookie Consent
نحن نقدم ملفات تعريف الارتباط على هذا الموقع لتحليل حركة المرور وتذكر تفضيلاتك وتحسين تجربتك
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.