کد دکمه های ثابت شبکه های اجتماعی
آنچه می خوانید
قرار هستش که کدهای قرار گرفتن دکمه های ثابت شبکه های اجتماعی رو با هم مرور کنیم ، با این کدها لینک شبکه های اجتماعی سایتتون مثل فیس بوک ، توئیتر و … رو در درسترس تر قرار بدید.
کدهای css قرار گرفتن لینک های ثابت
شما ابتدا باید کدهای زیر رو به انتهای فایل استایل (style.css) خودتون اضافه کنید .
.fixed-side-social-container{left:0;width:60px;position:fixed;top:397px;background-repeat:no-repeat;z-index:10}
.fixed-side-social-container .social-icon{float:left;width:60px;filter:alpha(opacity=75);moz-opacity:.75;-khtml-opacity:.75;opacity:.75;display:block;background-repeat:no-repeat;height:60px;-webkit-transition:all ease .2s;-moz-transition:all ease .2s;-o-transition:all ease .2s;-ms-transition:all ease .2s;transition:all ease .2s;background-position:0 0}
.fixed-side-social-container .social-icon{background-image:url("https://doctorwp.com/wp-content/uploads/2014/04/social-media.png")}
.fixed-side-social-container .social-icon:hover{filter:alpha(opacity=99);moz-opacity:.99;-khtml-opacity:.99;opacity:.99}
.fixed-side-social-container .linkedin-icon{background-position:0 0}
.fixed-side-social-container .twitter-icon{background-position:0 -61px}
.fixed-side-social-container .facebook-icon{background-position:0 -122px}
.fixed-side-social-container .google-icon{background-position:0 -186px}
دقت کنید که ما اینجا داخل استایل از آدرس تصویر آپلود شده خودمون برای آیکون لینک ها استفاده کردیم ، شما رو هاست خودتون آپلود کنید و آدرسشو ویرایش کنید. بعد که کدهای استایل رو اضافه کردید نوبت به اضافه کردن کدهای html می رسه .
کدهای html دکمه های ثابت شبکه های اجتماعی
حالا اینجا کدهای html زیر رو قبل از <body/> باید قرار بدید ( فرقی هم نمی کنه هر کجا بعد از <body> هم میشه دیگه ) .
<div class="fixed-side-social-container"> <a class="social-icon linkedin-icon" href="#" target="new" title="مارو در linkedin دنبال کنید"><span></span></a> <a class="social-icon twitter-icon" href="https://twitter.com/picor_ir" target="new" title="مارو در توئیتر دنبال کنید !"><span></span></a> <a class="social-icon facebook-icon" href="http://www.facebook.com/pages/picorir/447849195255223" target="new" title="مارو در فیس بوک دنبال کنید"><span></span></a> <a class="social-icon google-icon" href="https://plus.google.com/105539120649256197303" target="new" title="مارو در گوگل پلاس دنبال کنید"><span></span></a> </div>
تغییر مکان لینک های ثابت کنار سایت
اگر دقت کنید داخل فایل های استایل top:397px هستش که هر چقدر این مقدار رو کم کنید لینک های ثابت بالاتر میرن .همچنین در مطالب قبلی سایت کد دکمه های ثابت کنار سایت رو آموزش داده بودیم که اونم بد نیست یک نگاهی کنید !
دمو و دانلود فایل ضمیمه دکمه های ثابت
- لینک دانلود
- مشاهده دمو
- منبع
سلام
خیلی ممنونم
فقط برای اینکه وقتی موس روی اونها میره هم زمینه و هم لوگوی شبکه اجتماعی همزمان رنگشون عوض شه باید چه کار کنیم؟؟
ممنون
سلام، به وسیله هاور میتونید اینکار رو انجام بدین
موفق باشید..
سلام
میشه از مدل دکمه های ثابت شبکه اجتماعی سایت خودتون استفاده کرد؟
سلام، بله کافیه استایل خودتون رو که انجام دادین از خاصیت position:fixed برای ثابت موندن توی مرورگر استفاده کنید.
موفق باشید..
سلام اگه بخام لینک تلگرام رو قرار بدم باید چیکار کنم ؟
میشه کد مخصوص تلگرام رو هم بگید ؟
سلام، مشابه همین عمل کنید فقط برای تلگرام از دامنه http://telegram.me استفاده کنید و آی‌دی مدنظرتون رو بنویسید!
با سلام و خسته نباشبد
من این کدهارو همانطور که گفتید انجام دادم ولی هیچ اتفاقی نیوفتاد
1- اون آدرس که گفتید عوض کنم جای اون چی بذارم
2- فایل دانلود گذاشتید به چه خاطر هست
با تشکر
سلام
حتما جایی اشتباه انجام دادید لطفا مراحل و تکرار کنید
فایل دانلودی کدها هستند
با احترام
سلام
ممنون از مطالب خوبتون
کتابتون “سئو انگار که من 5 ساله هستم!” چاپ شد؟
کتاب فارسی یا انگلیسی درمورد سئو میشناسید؟
سلام و خداقوت .زحمت کشیدین عالی بود
اقا من گذاشتم خداوکیلی سایتم حرفه ای تر کرد
موفق باشید
سلام اقای حیدری خیلی ممنون انشالله خیرشو ببینی.
زکات علم در یاد دادن آن است. (امام علی ع)
با تشکر
آموزش بسیار عالی و کارآمد بود
سپاس
ممنون عالی بود ..