تعد مواقع التواصل الاجتماعي من بين اهم الوسائل لنشر المواقع و المدونات  وذلك يعود لانتشارهذه المواقع على نطاق واسع لذك لابد من اضافة ازرار التواصل الاجتماعي المختلفة الى المدونة او الموقع حتى يتسنى للزوار متابع جديد المدونة باستمرار .
اليوم اقدم لكم شكل جديد من هذه الازرار وهو عبارة عن قلب احمر يتفتح عند مرور الماوس فوقه فتنبثق منه ازرار التواصل الاجتماعي المختلفة.
إضافة أزرار التواصل الإجتماعى بشكل قلب متحرك
هذه الازرار تظهر في الجانب الاسفل للصفحة و تنزلق مع تحريك الصفحة الى الاعلى او الاسفل بحيث لا تختفي من الشاشة و ايضا لاتعيق القراءة و لا تسبب اية مضايقة للقراء.
تركيب الاضافة :
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: جديد !

rydnet

[اذا اعجبك الموضوع هذه روابط النشر]

URL Of Post:



Paste This HTML Code On Your Page:


التعليقات : 1

Unknown

شرحك مفيد جدا اخي وننتظر منك الجديد

رابط مدونتي : www.st-tek.blogspot.com

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