رأيك يهمنا

تغير اللغة

المتابعون

اخر المواضيع

تبادل اعلاني

للتصفح الافضل

اخر التعليقات

يتم التشغيل بواسطة Blogger.

تابعنا على الفيسبوك

facebook

الـموضــوعـات الأكـثـر زيـارة

السبت، 21 سبتمبر 2013

إضافة أداة عائمة للمتابعة عبر مواقع الشبكات الإجتماعية

شاهد:
 social media widgets
السلام عليكم و رحمة الله تعالى و بركاته إخواني الكرام زوار و متتبعي مدونة محمد, اليوم و في هذه التدوينة أقدم لكم أداة جميلة للمتابعة عبر مواقع الشبكات الإجتماعية, و التي تتميز بشكلها الجميل و سهولة التركيب و من خلالها يمكنك أن تعرض على زوارك متابعة جديد الدروس و المقالات و غير ذلك عن طريق المواقع الإجتماعية (الفاسبوك – تويتر – الخلاصات). يمكنك مشاهدة مثال مباشر لهذه الأداة في الجانب الأيمن لمدونتي.
separator 1
إذا أعجبتك الأداة و تريد إضافتها إلى مدونتك, فكل ما عليك فعله هو تتبع الخطوات التالية :
  1. توجه إلى لوحة التحكم الخاصة بمدونتك ثم اختر تخطيط بعد ذلك اضغط على إضافة أداة و من النافذة المنبثقة اختر إضافة أداة HTML/Javascript.
  2. الآن قم بنسخ ثم لصق الكود أسفله داخل الأداة.
<style type='text/css'> 
.soc-fixed a, .slider-tooltip p{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out} 
.slideshow-chunk>div{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out} 
.soc-fixed{height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px} 
.soc-fixed a{display:block;margin-left:133px;width:19px;height:20px;position:absolute;top:0;right:0;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;line-height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_WYwcBg2BeIVvrsXxYdFQN4eLfliy3JIbHyfUFYYmMlhAD07aEcjP-zB2vpqK45TAm3QQGz0gMpYy5T0U9fdH16WIroPWHNnfu7Ox1yCeJ0TTC_9P1IYWx1JfdrkHrz2p53iva3QOW94/s1600/soc-icons.png) no-repeat;overflow:hidden} 
.soc-fixed a span{min-width: 152px;padding: 0px;display:block;visibility:hidden;min-width:152px} 
.soc-fixed a:hover{min-width:133px;padding-left:25px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out} 
.soc-fixed a:hover span{visibility:visible;position:absolute;top:0;right:25px} 
.soc-fixed a.soc-facebook{background-position:3px -15px;top:20px;background-color:#526ca5} 
.soc-fixed a.soc-twitter{background-position:3px -36px;top:40px;background-color:#75ddfe} 
.soc-fixed a.soc-rss{background-position:3px -55px;top:60px;background-color:#f6a858} 
.soc-fixed a.soc-mail{background-position:3px -75px;top:80px;background-color:#c1c1c2} 
.soc-fixed a.soc-facebook:hover{background-color:#526ca5;background-position:5px -15px} 
.soc-fixed a.soc-twitter:hover{background-color:#75ddfe;background-position:5px -36px} 
.soc-fixed a.soc-mail:hover{background-color:#c1c1c2;background-position:5px -75px} 
.soc-fixed a.soc-rss:hover{background-color:#f6a858;background-position:5px -55px} 
.soc-fixed a.soc-facebook:active{background-color:#294a90} 
.soc-fixed a.soc-twitter:active{background-color:#40b5fe} 
.soc-fixed a.soc-mail:active{background-color:#909090}.soc-fixed a.soc-rss:active{background-color:#f37526} 
</style> 
<div class='soc-fixed'> <a class='soc-facebook' href='https://www.facebook.com/modawanatmohamed' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Facebook&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='فايسبوك'><span>تابعنا عبر الفاسبوك</span></a> <a class='soc-twitter' href='https://twitter.com/USERNAME' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Twitter&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='تويتر'><span>تابعنا عبر التويتر</span></a> <a class='soc-rss' href='http://www.mohamedblog.com/feeds/posts/default' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;RSS&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-follow&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='الخلاصات'><span>تابعنا عبر الخلاصات</span></a> </div>

التعديل على الكود :
  • modawanatmohamed : غير باسم صفحتك على الفايسبوك.
  • USERNAME : غيره باسم المستخدم الخاص بك على تويتر.
  • http://www.mohamedblog.com : غيره برابط مدونتك.
هذا كل شيء. أتمنى أن تكون هذه الأداة قد نالت إعجابكم.
إذا واجهتك أي مشكلة في تركيب الأداة المرجو طرحها عبر تعليق
_________________________________




0 التعليقات:

إرسال تعليق

صفحات

قسم بلوجر

مدونات صديقة

المتواجدين الان

Web Design Blogs
Ping your blog, website, or RSS feed for Free a7trafy.blogspot.com Real PR

اعلانات