آخر الأخبار

جاري التحميل ...

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

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


معاينة

أول خطوة سنقوم بها هي إضافة كود 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".
وإذا أردت إضافة المزيد من الأزرار فقط قم بنسخ هذا الكود وألصقه أسفل الكود الذي يشبهه وطبق عليه نفس التعديلات التي ذكرتها سلفاً.
{
  "bgcolor":"#000000",
  "color":"#fffff",
  "icon":"<i class= fa fa-home ></i>",
  "url":"http://www.domain.com",
  "target":"_blank",
},

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

عن الكاتب

إدارة المدونة

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

دليلك التقني