کد دکمه های ثابت شبکه های اجتماعی

قرار هستش که کدهای قرار گرفتن دکمه های ثابت شبکه های اجتماعی رو با هم مرور کنیم ، با این کدها لینک شبکه های اجتماعی سایتتون مثل فیس بوک ، توئیتر و … رو در درسترس تر قرار بدید.

کد دکمه های ثابت شبکه های اجتماعی

کدهای 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 هستش که هر چقدر این مقدار رو کم کنید لینک های ثابت بالاتر میرن .همچنین در مطالب قبلی سایت کد دکمه های ثابت کنار سایت رو آموزش داده بودیم که اونم بد نیست یک نگاهی کنید !

دمو و دانلود فایل ضمیمه دکمه های ثابت

امتیاز شما برای این مقاله
15 نظرات
  1. سام می گوید

    سلام
    خیلی ممنونم
    فقط برای اینکه وقتی موس روی اونها میره هم زمینه و هم لوگوی شبکه اجتماعی همزمان رنگشون عوض شه باید چه کار کنیم؟؟
    ممنون

    1. عباس صادقی می گوید

      سلام، به وسیله هاور میتونید اینکار رو انجام بدین
      موفق باشید..

  2. سام می گوید

    سلام
    میشه از مدل دکمه های ثابت شبکه اجتماعی سایت خودتون استفاده کرد؟

    1. عباس صادقی می گوید

      سلام، بله کافیه استایل خودتون رو که انجام دادین از خاصیت position:fixed برای ثابت موندن توی مرورگر استفاده کنید.
      موفق باشید..

  3. محمدی می گوید

    سلام اگه بخام لینک تلگرام رو قرار بدم باید چیکار کنم ؟
    میشه کد مخصوص تلگرام رو هم بگید ؟

    1. عباس صادقی می گوید

      سلام، مشابه همین عمل کنید فقط برای تلگرام از دامنه http://telegram.me استفاده کنید و آی‌دی مدنظرتون رو بنویسید!

  4. حامد می گوید

    با سلام و خسته نباشبد
    من این کدهارو همانطور که گفتید انجام دادم ولی هیچ اتفاقی نیوفتاد
    1- اون آدرس که گفتید عوض کنم جای اون چی بذارم
    2- فایل دانلود گذاشتید به چه خاطر هست
    با تشکر

    1. دکتر آرش حیدری می گوید

      سلام
      حتما جایی اشتباه انجام دادید لطفا مراحل و تکرار کنید
      فایل دانلودی کدها هستند
      با احترام

  5. دانشجو می گوید

    سلام
    ممنون از مطالب خوبتون
    کتابتون “سئو انگار که من 5 ساله هستم!” چاپ شد؟
    کتاب فارسی یا انگلیسی درمورد سئو میشناسید؟

  6. امیر می گوید

    سلام و خداقوت .زحمت کشیدین عالی بود

  7. رهاپارسایی می گوید

    اقا من گذاشتم خداوکیلی سایتم حرفه ای تر کرد

  8. آیفون کوماکس می گوید

    موفق باشید

  9. دادوند می گوید

    سلام اقای حیدری خیلی ممنون انشالله خیرشو ببینی.

    زکات علم در یاد دادن آن است. (امام علی ع)

  10. lili می گوید

    با تشکر
    آموزش بسیار عالی و کارآمد بود
    سپاس

  11. حسین محمودی می گوید

    ممنون عالی بود ..

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.