ضافة أداة عائمة للمتابعة عبر مواقع الشبكات الإجتماعية
السلام عليكم و رحمة الله تعالى و بركاته إخواني الكرام زوار و متتبعي عقبة للمعلوميات, اليوم و في هذه التدوينة أقدم لكم أداة جميلة للمتابعة عبر مواقع الشبكات الإجتماعية, و التي تتميز بشكلها الجميل و سهولة التركيب و من خلالها يمكنك أن تعرض على زوارك متابعة جديد الدروس و المقالات و غير ذلك عن طريق المواقع الإجتماعية (الفاسبوك – تويتر – الخلاصات). يمكنك مشاهدة مثال مباشر لهذه الأداة في الجانب الأيمن لمدونتي.
إذا أعجبتك الأداة و تريد إضافتها إلى مدونتك, فكل ما عليك فعله هو تتبع الخطوات التالية :
إذا أعجبتك الأداة و تريد إضافتها إلى مدونتك, فكل ما عليك فعله هو تتبع الخطوات التالية :
- توجه إلى لوحة التحكم الخاصة بمدونتك ثم اختر تخطيط بعد ذلك اضغط على إضافة أداة و من النافذة المنبثقة اختر إضافة أداة HTML/Javascript.
- الآن قم بنسخ ثم لصق الكود أسفله داخل الأداة.
<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/AVvXsEhGCkz6TJHBQ-PzZlsGfXiZRNMctvlbjklfFy9n2C8jmPw_RjaEB6064i0OZyM19ERbh1COUyGg9nkVyBR0HbzLXTNjdIFKp30xW3twyp06-Y-lfLzyjjCjvYp0SF7hcQ8AgVELb5qdnqs/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('WT.z_iLinks','Facebook','WT.z_iLinks_actionoffer','exnav-soc','WT.z_iLinks_targetcampaign','src-gs');' target='_blank' title='فايسبوك'><span>تابعنا عبر الفاسبوك</span></a> <a class='soc-twitter' href='https://twitter.com/USERNAME' onclick='dcsSetVar('WT.z_iLinks','Twitter','WT.z_iLinks_actionoffer','exnav-soc','WT.z_iLinks_targetcampaign','src-gs');' target='_blank' title='تويتر'><span>تابعنا عبر التويتر</span></a> <a class='soc-rss' href='http://www.mohamedblog.com/feeds/posts/default' onclick='dcsSetVar('WT.z_iLinks','RSS','WT.z_iLinks_actionoffer','invite-follow','WT.z_iLinks_targetcampaign','src-gs');' target='_blank' title='الخلاصات'><span>تابعنا عبر الخلاصات</span></a> </div>
التعديل على الكود :
- modawanatmohamed : غير باسم صفحتك على الفايسبوك.
- USERNAME : غيره باسم المستخدم الخاص بك على تويتر.
- http://www.mohamedblog.com : غيره برابط مدونتك.
هذا كل شيء. أتمنى أن تكون هذه الأداة قد نالت إعجابكم.
0 التعليقات:
إرسال تعليق