امروز برای شما آموزشی را آماده کرده ام که بسیار ساده و در عین حال کاملا کاربردی می باشد. قطعا برای شما اتفاق افتاده است که هنگام خواندن مطلب سایتی به دکمه های اشتراک گذاری برخورده باشید.

این مقاله در تاریخ 1 آبان 1396 بروزرسانی شده است.

وردپرس دارای افزونه های بسیار زیادی برای اشتراک گذاری است اما ممکن است بسیاری از ما با ظاهر یا محل قرار گیری آنها  مشکل داشته باشیم. با این آموزش کوتاه و مفید می توانیم افزودن دکمه های اشتراک گذاری بدون افزونه و مطابق با استایل سفارشی داشته باشیم

فیلم آموزش افزودن دکمه های اشتراک گذاری بدون افزونه

 

در ابتدا کد های زیر را جایی که می خواهیم دکمه ها نمایش یابند می گذاریم:

صفحه را بارگذاری کنید. می بینید که لینک ها به صورت متن و نا مرتب چیده شده اند.

حالا نوبت به استایل دهی می رسد.

در اینجا استایلی که من انتخاب کرده ام ساده و در عین حال زیبا و سبک است

من برای این آموزش از عکس زیر برای آیکن ها استفاده  کردم. کد استایل بالا رو داخل فایل style.css قرار داده ام  با توجه به این مورد من عکس زیر رو داخل فولدر پوسته قرار دادم.

خب آموزش امروز هم به پایان رسید. شما باید به راحتی افزودن دکمه های اشتراک گذاری بدون افزونه را پیاده سازی کرده باشید. همچنین می توانید دکمه ها را با سلیقه خودتان استایل دهی کرده و درست کنید.

موفق باشید

 

23 دیدگاه برای “افزودن دکمه های اشتراک گذاری بدون افزونه + فیلم آموزشی

  • محمد
    - ۲۵ فروردین , ۱۳۹۳

    سلام
    من از کدها استفاده کردم . اما استایل شما کامل نیست . گرد شدن گوشه آیکون ها مربوط به قسمت دیگه ای از فایل استایل قالب شماست که در این مطلب ننوشتید . هنگامی که کاربر استایل رو اضافه میکنه فقط دور نوشته ها یه مستطیل رنگی اضافه میشه که ظاهر خوبی نداره و اون چیزی که شما اینجا تصورش رو گذاشتید از آب در نمیاد.

    ممنون.

  • آیلین
    - ۳۰ فروردین , ۱۳۹۳

    سلام،
    این کدها فقط داخل حلقه کارایی دارند، ولی من میخوام در هدر قرارشون بدم!!!

    • الناز
      - ۳۱ فروردین , ۱۳۹۳

      سلام دوست عزیز. یعنی دکمه های اشتراک گذاری در هدر سایت باشند؟ مشکلی ندارد فقط بهتر است از آیکن استفاده کنید و داخل هدر قرار دهید

  • سئو
    - ۱۷ خرداد , ۱۳۹۳

    تشکر مفید بود

  • آناز
    - ۲۸ خرداد , ۱۳۹۳

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

  • طراحی سایت
    - ۱۲ مرداد , ۱۳۹۳

    سایت خیلی خوبی دارین موفق باشین

  • Mohammad
    - ۱۸ آذر , ۱۳۹۳

    زیبا!

  • دانلود رایگان نرم افزار
    - ۴ بهمن , ۱۳۹۳

    بهتر بود اگه کلاس ها و آی دی ها رو عجیب غریب می گرفتید که یه وقت تو قالب موجود نباشه من استایل رو گذاشتم قالب پوکید!

    • الناز بیک زاده
      - ۶ بهمن , ۱۳۹۳

      دوست عزیز میتونید خودتون اسم کلاس ها و آی دی هارو تغییر بدید و عجیب غریب بزارید 😀

  • شبکه اجتماعی
    - ۲۸ اردیبهشت , ۱۳۹۴

    سلام
    ممنون مطلب بسیار خوبی بود
    اگه امکان داره بهترین سایت های اشتراک گذاری رو به ترتیب تو یه پست جداگانه نام ببرید
    البته ترتیبشون معلومه ولی منظور بنده از نظر اهمیتی هست که گوگل میده
    با احترام

  • mohsen
    - ۳۱ مرداد , ۱۳۹۴

    سلام و احترام. کلوب و فیس نما، دنبالر و پی سی گپ رو قرار بدید عالی میشه. اینا ک نصفشون بسته فیل… هست

  • سایه روشن
    - ۱۷ شهریور , ۱۳۹۴

    با سلام و خسته نباشید
    به نضر من اگه تو استایلش کد :
    }a hover
    { ; opacity: 0.7
    اضافه کنید قشنگتر بشه
    ممنون از مطالب مفیدتون

  • sam
    - ۲۹ آذر , ۱۳۹۴

    مطلب جالبی بود.

  • علی
    - ۲۴ شهریور , ۱۳۹۵

    ممنون از اموزش خوبتون همیشه با آمزش هاتون مشکلات همه رو حل میکنید
    ممنون از سایت خوبتون

    مرسی

  • معماری
    - ۱۷ مهر , ۱۳۹۵

    سلام و خسته نباشید. این دکمه های اشتراک گذاری سایت خودتون از همین کد استفاده می کنه؟

  • مهدی طیبی
    - ۱ آبان , ۱۳۹۶

    سلام . لطفا این مقاله رو بروزرسانی کنید و نحوه اشتراک گذاری مطلب درون تلگرام نیز بفرمایید . ممنون .

دیدگاه خود را بیان کنید