جی دی
فناوری ، سلامت ، سینما

آموزش قرار دادن آیکون تلگرام در سایت به صورت ثابت و شناور

1

در این آموزش قصد داریم نحوه قرار دادن آیکون تلگرام در سایت (وردپرس) را به صورت ثابت و بدون نیاز به افزونه را آموزش می دهیم.

بسیاری از سایت ها به خصوص سایت های فروشگاهی نیاز به ارتباط برقرار کردن با مشتری دارند و استفاده از شبکه های اجتماعی مانند واتساپ و تلگرام یکی از بهترین راه ها می باشد.

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

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

قرار دادن آیکون تلگرام در سایت به صورت ثابت و شناور

 

مرحله اول : استایل دهی

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

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

حال در باکس باز شده کد های زیر را کپی کنید.

.telegram-icon-float {
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    left:50px;
    background-color:#551A8B;
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:40px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float {
    margin-top:10px;
}


.tooltip-container {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.tooltip {
    opacity: 0;
    z-index: 99;
    width: 140px;
    display: block;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    text-shadow: 1px 1px 2px #111;
    background: #000000;
    border: 1px solid rgba(34,34,34,0.9);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    right: -55px;
    bottom: 75px;
}

.tooltip:before,.tooltip:after {
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(51,51,51,0.9);
    position: absolute;
    bottom: -11px;
    left: 43%;
}

.tooltip-container:hover .tooltip,a:hover .tooltip {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

 

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

مرحله دوم: وارد کردن کد های html برای نمایش آیکون تلگرام

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

در ابتدا در پیشخوان سایت به بخش نمایش و سپس ویرایشگر پوسته (theme editor) بروید.

در صفحه باز شده از پنل سمت چپ یعنی پرونده های پوسته پابرگ پوسته (footer.php) را پیدا و باز کنید.

حال کد های زیر را در ابتدا یا انتهای صفحه وارد کنید.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">

<div class="tooltip-container">
<a href="https://t.me/jidi_ir" class="telegram-icon-float" target="_blank">
<i class="fab fa-telegram my-float">
  <span class="tooltip">کانال سایت جی دی </span>
  </i>
</a>
<div>

 

جهت شخصی سازی  کد های بالا به جای نوشته نارنجی رنگ آدرس کانال و متن مورد نظر خود را جایگزین کنید.

در انتها ، بروز رسانی پرونده را بزنید تا تغییرات ذخیره شود.

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

دمو و کدهای مورد نیاز برای قرار دادن آیکون تلگرام در سایت به صورت ثابت در فایل زیر موجود است.

دانلود فایل

رمز فایل : jidi.ir

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