Cách chèn các icon Số điện thoại, Facebook, Zalo.. vào website wordpress

Hôm nay khogiaodienwp hướng dẫn các bạn chèn các nút Facebook,Zalo, Số điện thoại vào website.

Mình sẽ gửi đến các bạn 3 style khác nhau, các bạn tự chọn style phù hợp, ưng ý nhé

Đối với các themes Flat Some mua tại khogiaodienwp.com. Các bạn làm như sau:

Bước 1: 

Bước2

Chèn code vào Footer Scripts; Code lấy theo các style tương ứng ở bước 3

Bước 3: Chèn style nút thích hợp

Style 1:

Code:

<style>

.div-nut {

display: flex;

flex-direction: column;

font-size: 14px !important;

position: fixed;

z-index: 2147483647;

bottom: 24px;

left: 0;

padding-left: 5px;

}

.div-nut > a {

display: inline-block;

overflow: visible !important;

width: 54px !important;

height: 54px !important;

margin: 6px !important;

background-size: 100% !important;

border: 2px solid #fff !important;

border-radius: 50% !important;

margin: 8px;

text-align: center;

background-repeat: no-repeat;

background-position: center center;

background-size: auto;

cursor: pointer;

position: relative;

}

.div-nut .nut-action:hover .tooltext {

visibility: visible;

opacity: 1;

}

.div-nut:hover .nut-action {

text-decoration: none !important;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.13);

}

.div-nut .tooltext {

visibility: hidden;

font-size: 12px !important;

line-height: 16px !important;

text-align: center;

white-space: nowrap;

border-radius: 4px;

padding: 8px;

position: absolute;

top: calc(50% – 16px);

z-index: 1;

opacity: 0;

transition: opacity 0.5s;

left: 120%;

background-image: linear-gradient(180deg, #e57373 0%, #c62828 100%);

color: #fff;

}

.div-nut .nut-goi {

background-image: url(“https://webkhoinghiep.net/wp-content/uploads/2020/10/call.svg”);

}

.div-nut .nut-zalo {

background-image: url(“https://webkhoinghiep.net/wp-content/uploads/2020/10/zalo.svg”);

}

.div-nut .nut-face {

background-image: url(“https://webkhoinghiep.net/wp-content/uploads/2020/10/messenger.svg”);

}

</style>

<div class=“div-nut”>

<a href=“tel:0935743575” class=“nut-goi nut-action”>

<div><span class=“tooltext”>Gọi ngay</span></div>

</a>

<a href=“http://zalo.me/0935743575” target=“_blank” class=“nut-zalo nut-action”>

<div><span class=“tooltext”>Chat với chúng tôi qua Zalo</span></div>

</a>

<a href=“https://m.me/webkhoinghiepnhatrang/” target=“_blank” class=“nut-face nut-action”>

<div><span class=“tooltext”>Facebook Messenger</span></div>

</a>

</div>

còn tiếp …