U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

ازرار التواصل الاجتماعي بشكل زر عائم لمدونات بلوجر


ازرار التواصل الاجتماعي بشكل زر عائم


اقدم لكم اضافة رائعة جدا لمدونات بلوجر

الاضافة عبارة عن ازرار التواصل الاجتماعي بشكل زر عائم



يمكنكم معاينة الأضافة من هنا






نأتي الان لشرح تركيب الاضافة






الأكواد الخاصة بالأضافة



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",
},







و شكرا لكم
الاسمبريد إلكترونيرسالة