ضافة أزرار مواقع التواصل الإجتماعي بلوجر 2026 - أيقونات مواقع التواصل الإجتماعي blogger
في هذا المقال انشاء الله سوف أشرح لك طريقة إضافة مواقع التواصل الإجتماعي في مدونة بلوجر بشكل جيد، إليك ازرار مواقع التواصل الإجتماعي احترافية ورائعة سوف تعمل على مدوناتك بشكل احترافي ورائع.
ربما قمت بإنشاء مدونة على منصة بلوجر وبدأت في ضبط إعداداتها، لذالك قمت بي البحث عن كود ازرار مواقع التواصل الإجتماعي، لا تقلق ان شاء الله سوف أقترح عليك كود رائع وفعال سوف يعجبك ويتناسب مع شكل قالب مدونتك.
كود مواقع التواصل الإجتماعي في مدونة بلوجر 2026
إليك أفضل وأجمل شكل لي أزرار مواقع التواصل الإجتماعي لي مدونة بلوجر 2022، سوف أترك لك كود JavaScript الذي يمكنك اضافة على مدونتك، من بعد سوف تظهر أزرار مواقع التواصل الإجتماعي على مدونتك بي شكل رائع .
يمكنك إضافته على مدونتك بالطريقة الصحيحة لكن أحذر أن تقوم بإضافتها بشكل صحيح لكي لا تقع بعض الأخطاء، يجب عليك إضافته في المكان الذي تريد أن تظهر فيه أزرار مواقع التواصل الإجتماعي على مدونتك.
العملية سهلة وبسيطة فقط يمكنك إضافته عن طريق أداة JavaScript، لكن يجب عليك إضافته في المكان المناسب يعني بي المكان الذي تريد أن تظهر فيه تلك الأيقونات .
من بعد تفعيل علامة JavaScript سوف تظهر أيقونات مواقع التواصل الإجتماعي على الفور في مدونتك، يمكنك استعماله في قوالب بلوجر اما اذا كنت تستخدم قالب أخر لن تحتاج لكي تضيفه.
سوف أترك لك كود JavaScript لي أيقونات مواقع التواصل الإجتماعي لي مدونة بلوجر، كذالك سوف أشرح لك كيف تقوم بإضافته على مدونتك بشكل رائع وسلس تفاديا الوقوع في بعض الأخطاء.
فقط تابع معنا الشرح لكي تفهم طريقة تركيب أزرار مواقع التواصل إجتماعي في مدونة بلوجر بشكل جيد.
كود أيقونات مواقع التواصل الإجتماعي 2026
إليك أخي الكريم كود أزرار مواقع التواصل الإجتماعي
<div class="social-counter">
<ul id="social">
<li class="item-social facebook count=3.5k;"><a href="#"><i class="item-icon fa"></i><span class="item-count">3.5k</span><span class="item-text">اعجاب</span></a></li><li class="item-social twitter count=1.7k;"><a href="#"><i class="item-icon fa"></i><span class="item-count">1.7k</span><span class="item-text">تابع</span></a></li><li class="item-social gplus count=735;"><a href="#"><i class="item-icon fa"></i><span class="item-count">735</span><span class="item-text">تابع</span></a></li><li class="item-social youtube count=2.8k;"><a href="#"><i class="item-icon fa"></i><span class="item-count">2.8k</span><span class="item-text">اشتراك</span></a></li><li class="item-social pinterest count=524;"><a href="#"><i class="item-icon fa"></i><span class="item-count">524</span><span class="item-text">تابع</span></a></li><li class="item-social dribbble count=7.3k;"><a href="#"><i class="item-icon fa"></i><span class="item-count">7.3k</span><span class="item-text">تابع</span></a></li><li class="item-social instagram count=849;"><a href="#"><i class="item-icon fa"></i><span class="item-count">849</span><span class="item-text">تابع</span></a></li><li class="item-social rss count=286;"><a href="#"><i class="item-icon fa"></i><span class="item-count">286</span><span class="item-text">اشتراك</span></a></li></ul></div><style type="text/css">.social-counter{margin:0;padding:0;overflow:hidden}.social-counter ul{margin:0;padding:0}.social-counter ul li{list-style: none;width:42%;float:left;text-align:left;margin:0 0 5px;padding:0 0 5px;position:relative; position: relative;border: 1px solid #f5f5f5;padding: 7px;}.social-counter ul li:nth-child(2),.social-counter ul li:nth-child(4),.social-counter ul li:nth-child(6),.social-counter ul li:nth-child(8){float:right}.social-counter ul li a{margin:0;padding:0}.item-icon{float:left;position:relative;text-align:center;vertical-align:middle;color:#fff;margin:0;display:inline-block;width:32px;height:32px;line-height:32px;font-size:16px;border-radius:2px}.hide-count{display:none}.item-count{display:inline-block;color:#333;font-weight:700;font-size:13px;line-height:32px;float:left;padding-left:10px}.item-text{float:right;display:inline-block;color:#666666;font-size:11px;line-height:32px;font-weight:400}.item-social.facebook .item-icon{background-color:#5271b3}.item-social.twitter .item-icon{background-color:#49aff8}.item-social.gplus .item-icon{background-color:#cb2027}.item-social.rss .item-icon{background-color:#FFC200}.item-social.youtube .item-icon{background-color:#eb1a21}.item-social.dribbble .item-icon{background-color:#ea4c89}.item-social.instagram .item-icon{background-color:#4E729A}.item-social.pinterest .item-icon{background-color:#cb2027}.item-social.facebook .item-icon:before{content:"\f09a"}.item-social.twitter .item-icon:before{content:"\f099"}.item-social.gplus .item-icon:before{content:"\f0d5"}.item-social.rss .item-icon:before{content:"\f09e"}.item-social.youtube .item-icon:before{content:"\f16a"}.item-social.instagram .item-icon:before{content:"\f16d"}.item-social.dribbble .item-icon:before{content:"\f17d"}.item-social.pinterest .item-icon:before{content:"\f0d2"}.social-counter ul li:hover .item-icon{background-color:#222222}.social-counter ul li:hover .item-text{color:#01BD5D}</style>
من بعد نسخ الكود توجه إلى مدونتك وقم بي اتباع هاته الإجراءات التالية.
كيفية تركيب كود مواقع التواصل الإجتماعي في بلوجر 2026
يمكنك تركيب كود JavaScript لي أزرار مواقع التواصل الإجتماعي على مدونتك من خلال هاته المراحل.
⬅️أولا توجه إلى الموقع www.blogger.com
⬅️ ثانيا قم بي اختيار المدونة التي تريد إضافة كود مواقع التواصل الاجتماعي لها.
⬅️ ثالتا توجه إلى ( التنسيق) أو ( التخطيط ) الموجودة بجوار المظهر .
⬅️من بعد ذالك سوف تظهر أدوات التنسيق لي مدونتك وقم بي الضغط على ( إضافة أداة ) .
⬅️ من بعد قم بي اختيار أداة JavaScript كما في الصورة .
⬅️ من بعد الضغط عليها قم بي لصق الكود الذي قم بنسخه من قبل في مكان المحتوى كما في الصورة.
⬅️ من بعد ذالك اضغط على حفظ ومبروك تم إضافة مواقع التواصل الإجتماعي على مدونتك .
يمكنك زيارة مدونتك لكي ترى أن تم إضافة أزرار مواقع التواصل الإجتماعي بشكل رائع.
⬅️ من بعد يجب عليك التعديل على ذالك الكود قم بي الدخول الى أداة JavaScript.
يمكنك وضع رابط صفحة الفيسبوك الخاصة بك في هذا المكان .
<a class="bdrs-fac" href="ضع رابط صفحتك في الفيس بوك" rel="nofollow" target="_blank" title="فيس بوك">
كذالك رابط صفحة جوجل بلس
<a class="bdrs-goo" href=" ضع رابط صفحتك في جوجل بلس" rel="publisher" target="_blank" title="جوجل بلس+">
يمكنك وضع رابط صفحة على تويتر في المكان الون الأحمر.
<a class="bdrs-twi" href="ضع رابط حسابك في تويتر" rel="nofollow" target="_blank" title="تويتر">
كذالك وضع رابط صفحة تلنبر في مكان الون الأحمر.
<a class="bdrs-tum" href="ضع رابط حسابك في تلنبر" rel="nofollow" target="_blank" title="Tumblr">
فقط هذه بعض التعديلات التي يجب عليك تعديلها لكي تضع روابط مواقع التواصل الإجتماعي على تلك الأيقونات .
من بعد قم بزيارة مدونتك سوف تجد أيقونات مواقع التواصل الإجتماعي تفعلت على مدونتك بشكل رائع واحترافي .
اتمنى ان يكون قد أفادك هذا الموضوع ولو بي القليل تحياتي لك.
