Friday, 5 July 2013

إضافة أزرار التواصل الإجتماعى بشكل قلب متحرك

تعد مواقع التواصل الاجتماعي من بين اهم الوسائل لنشر المواقع و المدونات  وذلك يعود لانتشارهذه المواقع على نطاق واسع لذك لابد من اضافة ازرار التواصل الاجتماعي المختلفة الى المدونة او الموقع حتى يتسنى للزوار متابع جديد المدونة باستمرار .
اليوم اقدم لكم شكل جديد من هذه الازرار وهو عبارة عن قلب احمر يتفتح عند مرور الماوس فوقه فتنبثق منه ازرار التواصل الاجتماعي المختلفة.
إضافة أزرار التواصل الإجتماعى بشكل قلب متحرك
هذه الازرار تظهر في الجانب الاسفل للصفحة و تنزلق مع تحريك الصفحة الى الاعلى او الاسفل بحيث لا تختفي من الشاشة و ايضا لاتعيق القراءة و لا تسبب اية مضايقة للقراء.
تركيب الاضافة :
1-من لوحة التحكم>>>قالب>>>تحرير html  (احفظ نسخة من القالب قبل التعديل)
2- ابحث بواسطة ctrl+f عن    :  </head>
3- انسخ فوقه مباشرة الكود التالي  :
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
4-الان قم بالبحث عن الكود التالي   :      </body>

5-وانسخ قبله الكود التالي :
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script>
6-احفظ القالب .

 مبروك انتهينا من الاضافة و يمكنك معاينة النتيجة.



اشكال اخرى من اضافات التواصل الاجتماعي:

اضافة صندوق المتابعة في google+جديد !

اضافة صندوق المشاركة لقناةYOUTUBEمع صور المشتركين    جديد !

اضاف صندوق المتابعة twitter مع الصوربتقنية jquery     جديد !

اضاف صندوق الاعجاب FACEBOOK مع الصوربتقنية jquery: جديد !

0 comments:

Post a Comment