راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

إعلان

آخر الأخبار

إعلان

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


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


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

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



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






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






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



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







و شكرا لكم



hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان