learndl learndl triboon

آموزش ساخت دکمه شناور تلگرام

آموزش ساخت دکمه شناور تلگرام

ایجاد دکمه شناور تلگرام مشابه وبیت

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

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

قبلا هم مقاله آموزش ساخت باکس اطلاع رسانی کانال تلگرام در وبیت ارسال شده بود.
برای اینکه بخواهید همچین حرکتی در سایت وردپرسی خود داشته باشید.
پیش ازهر چیزی خواهشا از فایل های خود بکاپ داشته باشید.
نیاز به آموزش دارید پس فایل footer.php پوسته وردپرس سایت خود را ویرایش کنید…
البته این مخصوص وردپرس نیز و در هر قالب و سیستم محتوای میتوانید این روش رو امتحان کنید.
کدهای زیر رو درون فایل قبل از تگ </body> کپی کنید…

<a class="vtelegram" href="tg://resolve?domain=VebeetCom">
<img src="ticon.png" alt="کانال وبیت" width="60" height="60">
</a>

بعد از کپی کدهای بالا دقت کنید که به جای VebeetCom ایدی کانال تلگرام خود را کپی کنید
و به جای ticon.png ادرس فایل تصویر تلگرام خود که باید سایزش 60×60 پیکسل باشه کپی کنید
من فایل PSD این فایل رو درون باکس دانلود قرار دادم که میتونید به راحتی دانلود کنید و شخصی سازی کنید…

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

.vtelegram {
    position: fixed;
    left: 10px;
    z-index: 999;
    bottom: 10px;
    transition: all 0.35s ease-in-out;
    border-radius: 100%;
    box-shadow: 0 3px 8px rgba(255, 255, 255, 0.25), 0 7px 30px rgba(0, 156, 255, 0.4);
    overflow: hidden;
    animation: vtelegram 3s ease-in-out infinite;
}
.vtelegram img {
    display: block;
}

@keyframes vtelegram {
    0% {
        transform: translatey(0);
    }
    50% {
        box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.1);
        transform: translatey(-15px);
    }
    100% {
        transform: translatey(0);
    }
}

برای حذف انیمیشن دکمه کد زیر رو حذف نمایید.

animation: vtelegram 3s ease-in-out infinite;

موفق باشید شما تونستید تلگرام شناور رو به سایت خود اضافه کنید…
وبیت رو به دوستان خود معرفی کنید…

به این مطلب امتیاز دهید

امتیاز کلی : 5 / 5. تعداد آرا : 5

اولین نفر باید که به این مطلب امتیاز میدهید

لینک های دانلود

وبیت این پست توسط نگارش شده است.

اسم من محمد پورداداش هست و متولد سال 1367 در خدمت شما هستیم . تخصص من طراحی گرافیک و کدنویسی وب است و سعی خواهم کرد بهترین خدمات را به شما وبمستران و گرافیست های عزیز ارائه کنم. به ترس هات غلبه کن تا در زندگی همیشه پیروز باشی.

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 2 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود
  • saeed 15 دی 1399 پاسخ

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

    • محمد پورداداشمدیر سایت[ در پاسخ به saeed ] 15 دی 1399 پاسخ

      موفق باشید وظیفه است

همکاران وبیت