ازرار التواصل الاجتماعي عائمة على الصفحة
اقدم لكم اضافة رائعة جدا لمدونات بلوجر
الاضافة عبارة عن ازرار التواصل الاجتماعي بشكل زر عائم
يمكنكم معاينة الأضافة من هنا
نأتي الان لشرح تركيب الاضافة
الأكواد الخاصة بالأضافة
1- أولا إضافة أكواد 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"/>
2- إضافة الزر العائم - إنسخ وألصق هذا الكود إلى موقعك أسفل علامة <body>.
<div class="kc_fab_wrapper">
</div>
3- إضافة كود 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.halateck.com",
"target":"_blank",
},
]
$('.kc_fab_wrapper').kc_fab(links);
})
</script>
التعديل على الكواد
- لتغيير لون خلفية الأيقونة غير الكود #000000 الموجود أمام bgcolor إلى إلى كود اللون الذي تريد.
- لتغيير لون الأيقونة غير الكود #fffff الموجود أمام color إلى إلى كود اللون الذي تريد.
- لتغيير الأيقونة غير الكود fa fa-name-icon الموجود أمام icon إلى إلى كود الأيقونة التي تريد.
- لتغيير الرابط الذي يفتح عند الضغط على الأيقونة غير الرابط http://www.domain.com الموجود أمام url إلى إلى الرابط الذي تريد.
- إذا أردت أن يفتح الرابط في نفس الصفحة موقعك قم بإزالة الكود "target":"_blank".
لإضافة أيقونة أخرى فقط قم بنسخ هذا الكود أسفل الكود الذي يشبه
{
"bgcolor":"#000000",
"color":"#fffff",
"icon":"<i class='fa fa-home'></i>",
"url":"http://www.halateck.com",
"target":"_blank",
},
و شكرا لكم
شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب ازرار التواصل بشكل زر عائم لمدونات بلوجر. إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل كل ما هو جديد.