اضافة ايقونات التواصل الاجتماعي في بلوجر
اضافة ايقونات التواصل الاجتماعي في بلوجر من الأشياء المهمة الواجب عملها في كل مدونة على بلوجر ومن الملاحظ أنه لا يوجد قالب إلا وتوجد فيه هذه الايقونات ولكن باشكال والوان مختلفة حسب ذوق مصمم القالب ونوعية الطلب من قبل المدونين
وقد تم شرح كيفية اضافة ايقونات html إلى مدونات بلوجر والمواقع الإلكترونية في درس سابق وشرحنا كيفية اضافة الايقونات وكم هي سهلة الاستخدام ويتم جلب هذه الايقونات عبر أكواد html بسيطة لا تتعدى سطر واحد لكل ايقونة وشددنا على تعريف مدونتك بهذه الايقونات عبر اضافة رابط مصدر الايقونات وهو الرابط الي يستضيف الايقونات ويتم استدعائها منه على شكل كود html ومن الملاحظ أن معظم قوالب بلوجر يوجد بها هذا الرابط بشكل تلقائي لكن إذا لم يوجد في مدونتك فيمكنك أن تنسخه الآن وتضيفه الى مدونتك عبر الذهاب الى بلوجر » المضهر » تعديل html » قم بإضافة هذا الكود أسفل الوسم <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
مصدر ايقونات html كما قلنا هو موقع font awesome ويمكنك عبر هذا الموقع نسخ كود أي ايقونة ترغب باستخدامها في مدونتك او موقعك الإلكتروني ويمكنك تحميل ايقونات التواصل الإجتماعي للتصميم إذا كانت من عشاق التصميم وتحميل ايقونات أخرى خاصة بالمواقع الإلكترونية وأقسامها المختلفة
أهمية اضافة ايقونات التواصل الاجتماعي لـ بلوجر
هناك أهمية لهذه الايقونات عبر ربط موقعك الإلكتروني أو مدونتك على بلوجر بمواقع التواصل الاجتماعي الأخرى مما يساعد في تحسين سيو المدونات والمواقع الإلكترونية وأيضاً الشكل الجميل الذي تقدمه هذه الايقونات للمواقع الإلكترونية وسهولة تنقل الزوار من الموقع او المدونة إلى مواقع التواصل الإجتماعي الأخرى ومشاركة المقالات والمنشورات فيها وذلك يزيد من شهرة الموقع الإلكتروني ويساعد في تصدره على المواقع الإلكترونية والمدونات الأخرى
اضافة كود ايقونات مواقع التواصل الاجتماعي في المدونة
يتم اضافة ايقونات التواصل الاجتماعي في بلوجر بشكل كود ايقونات التواصل الاجتماعي html ويتم اضافة هذا الكود في قالب بلوجر أو إضافته في أداة html ونحن اليوم لدينا كود ايقونات مواقع التواصل الاجتماعي وهو من النوع الذي يتم إضافته في أداة html ويمكن إضافته بعدة خطوات كما يلي :
- قم بالذهاب إلى بلوجر
- لوحة التحكم
- التنسيق
- اضافة أداة html /JavaScript
- قم بوضع هذا الكود وحفظ الاداة
<div dir="rtl" style="text-align: right;" trbidi="on"><div id="socialsidebar"><ul><li><a href="#"><div class="sidebar-facebook"><p class="animated"><i class="fa fa-facebook"></i><span class="social-num">+300K</span><small class="social-count">مشترك</small></p></div></a></li><li><a href="#"><div class="sidebar-twitter"><p class="animated"><i class="fa fa-twitter"></i><span class="social-num">+1.5K</span><small class="social-count">متابع</small></p></div></a></li>
<li><a href="#"><div class="sidebar-instagram"><p class="animated"><i class="fa fa-instagram"></i><span class="social-num">+1.5K</span><small class="social-count">متابع</small></p></div></a></li>
<li><a href="#"><div class="sidebar-youtube"><p class="animated"><i class="fa fa-youtube"></i><span class="social-num">1.5k</span><small class="social-count">مشترك</small></p></div></a></li>
<li><a href="#"><div class="sidebar-googleplus"><p class="animated"><i class="fa fa-google-plus"></i><span class="social-num">1.5k</span><small class="social-count">مشترك</small></p></div></a></li>
<li><a href="#"><div class="sidebar-rss"><p class="animated"><i class="fa fa-rss-square"></i><span class="social-num">1.5k</span><small class="social-count">مشترك</small></p></div></a></li>
</ul>
<style>
/* SOCIAL COUNTERS*/
#socialsidebar .widget-content ul li {
width: 30%;
float: right;
border: 1px solid #2A2E31;
overflow: hidden;
background: #ffffff;
}
div#socialsidebar ul li>a {
color: #BEBFC1;
}
div#socialsidebar ul li a>div {
padding: 10px;
text-align: center;
text-transform: uppercase;
display: block;
}
div#socialsidebar i {
font-size: 30px;
}
#socialsidebar ul li a div .social-num {
font-size: 15px;
display: block;
padding: 10px 0 2px 0;
}
#socialsidebar ul li a div small.social-count {
display: block;
padding: 2px 0 0px 0;
}
#socialsidebar ul li {
width: 103px;
float: right;
border: 1px solid #FFFFFF;
overflow: hidden;
background: #ffffff;
}
div#socialsidebar ul li>a {
color: #414142;
font-family: neosansarabic;
}
div#socialsidebar {
margin-right: -18px;
}
#socialsidebar ul li {
width: 102px;
float: right;
border: 1px solid #FFFFFF;
overflow: hidden;
background: #ffffff;
padding: 3px 0px;
}
div#socialsidebar ul li>a:hover {
color: #414142 !important;
background-color: #ffffff !important;
}
#socialsidebar ul li:hover {
background-color: #ffffff;
}
</style>
</div>
<br /></div>
يمكن التعديل على كود ايقونات مواقع التواصل الاجتماعي وذلك بتعديل الوان الخلفيات ;background-color=#ffffff حسب اللون الذي تريد
١) يمكن التعديل على مكان الكود باليمين أو اليسار عبر تعديل قيمة الـ ;float:right بجعلها ; float:left مثلاً
٢) يمكن التعديل على الوان ايقونات مواقع التواصل الاجتماعي بتغيير قيمة color:#414142
يمكن التعديل على لون حدود مربع الايقونات بتغيير قيمة ; border: 1px solid #ffffff
٣) يمكن التعديل على عرض ايقونات مواقع التواصل الاجتماعي بتغيير القيمة ;width:102px
٤) يمكن التعديل على الكلمات باللغة العربية مثل مشترك ومتابع إلى كلمات تحددها انت وتعديل عدد المشتركين في القنوات مثل 1.5k
٥) قم بإضافة رابط مواقع التواصل الاجتماعي كل واحد على حدة مكان رمز # <"#"=a href>
وبهذا تكون قد تمكنت من اضافة ايقونات التواصل الاجتماعي في بلوجر
شاهد أيضاً
اضافة مربع نص html في مشاركات بلوجر
معلومات عن السيو داخل وخارج الموقع الإلكتروني
شاركونا بالتعليقات لنجيبكم عن آرائكم واستفساراتكم حول الإضافة بصدر رحب
تحياتنا لكم
إرسال تعليق
0 تعليقات