برای استعلام یا ارسال سفارش اینجا کلیک کنید.

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

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

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

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

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

قبلا هم مقاله آموزش ساخت باکس اطلاع رسانی کانال تلگرام در وبیت ارسال شده بود.
برای اینکه بخواهید همچین حرکتی در سایت وردپرسی خود داشته باشید.
پیش ازهر چیزی خواهشا از فایل های خود بکاپ داشته باشید.
نیاز به آموزش دارید پس فایل 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;

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

من محمد پورداداش متولد سال ۱۳۶۷ در خدمت شما هستم. طراحی گرافیک و وب مهمترین مسئولیت من بوده و است. سعی خواهم کرد بهتر از همیشه در خدمت شما باشم. خوب بودن به حرف نیست به رفتار نیک و عمل پسندیده است.
در کانال ما عضو شوید و از آخرین اخبار ، محصولات و تخفیف با خبر شوید... کانال تلگرام وبیت

دیدگاهتان را بنویسید

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

saeed گفته :کاربر سایت
1399-10-15 15:26پاسخ دهید

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

محمد پورداداش گفته :مدیر سایت
1399-10-15 16:44پاسخ دهید

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

آخرین نمونه کار ها مشاهده همه

آخرین طرح های اختصاصی اجرا شده