طريقة إضافة أزرار المشاركات بشكل عائم وإحترافي لبلوجر

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

معاينة

أول خطوة سنقوم بها هي إضافة كود Css فوق وسم </head>.

<link rel="stylesheet" href="https://cdn.rawgit.com/Parrou/webbloog.com/w01/kc.fab.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

الخطوة الثانية هي إضافة الزر العائم وذالك عبر نسخ ولصق هذا الكود أسفل وسم <body>.

<div class="kc_fab_wrapper">
</div>

الخطوة الثالثة وهي إضافة كود jquery جي كويري ، فما عليك سوي نسخ ولصق هذا الكود فوق وسم </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/Parrou/webbloog.com/w01/scriptfab.js"></script>
<script>
$(document).ready(function(){
var links = [
{
"bgcolor":"#03A9F4",
"icon":"+",
},
{
"bgcolor":"#DB4A39",
"color":"#fffff",
"icon":"<i class= fa fa-google-plus ></i>",
"url":"http://plus.google.com",
"target":"_blank",
},
{
"bgcolor":"#00ACEE",
"color":"#fffff",
"icon":"<i class= fa fa-twitter ></i>",
"url":"http://www.twitter.com",
"target":"_blank",
},
{
"bgcolor":"#3B5998",
"color":"#fffff",
"icon":"<i class= fa fa-facebook ></i>",
"url":"http://www.facebook.com",
"target":"_blank",
},
{
"bgcolor":"#263238",
"color":"#fffff",
"icon":"<i class= fa fa-home ></i>",
"url":"http://www.domain.com",
"target":"_blank",
},
]
$( .kc_fab_wrapper ).kc_fab(links);
})
</script>

التغبيرات الضرورية

لتغيير لون خلفية الأيقونة فما عليك سوي تغيير الكود #000000 الذي ستجده أمام bgcolor إلى إلى كود اللون الذي تريد وللحصول على أكواد الألوان إستعمل هذه الأداة : من هنا.

تغيير لون الأيقونة

فقط عليك تغيير الكود #fffff أمام color إلى كود اللون الذي تريد.

تغيير أيقونة المشاركة

حتى تغير أيقونة المشاركة فالأمر سهل جداً فقط عليك أن تغير كود fa fa-name-icon أمام icon إلى كود الأيقونة التي تريد ، وللحصول على أيقونات fa fa icon فقط قم بالدخول لهذا الموقع من هنا وإبحث عن الشكل الذي تريده ثم سيعطيك كود وهنا عليك نسخ الكود الذي يبدأ ب fa fa وينتهي بإسم الأيقونة fa fa-android على سبيل المثال.
للتعديل على الرابط الدي يفتح عند الضغط على الأيقونة غير الرابط http://www.domain.com أمام url بالرابط الذي تريد.
في حال أردت أن يفتح الرابط في نفس الصفحة في مدونتك فقط قم بإزالة الكود التالى "target":"_blank".
وإذا أردت إضافة المزيد من الأزرار فقط قم بنسخ هذا الكود وألصقه أسفل الكود الذي يشبهه وطبق عليه نفس التعديلات التي ذكرتها سلفاً.