Code nút góc dưới bên trái hoặc bên phải website

Đánh giá post

Code botton cho blogspot

<div class="linhproductions-nav"> <ul> <li><a href="#" rel="nofollow noopener" target="_blank"><i class="ticon-heart"></i>Chỉ đường</a></li> <li><a href="https://zalo.me/" rel="nofollow noopener" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li> <li class="phone-mobile"> <a href="tel:0335676209" rel="nofollow" class="button"> <span class="phone_animation animation-shadow"> <i class="icon-phone-w" aria-hidden="true"></i> </span> <span class="btn_phone_txt">Gọi điện</span> </a> </li> <li><a href="https://m.me/" rel="nofollow noopener" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li> <li><a href="#baogia" class="chat_animation"> <i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin"></i> Báo Giá</a> </li></ul> </div>
<style>
	.phone-mobile {display: none;} .linhproductions-nav { margin-bottom: 2%; position: fixed; right: 15px; background: #fff; border-radius: 5px; width: auto; z-index: 150; bottom: 50px; padding: 10px 0; border: 1px solid #f2f2f2; } .linhproductions-nav ul {list-style: none;padding: 0;margin: 0;} .linhproductions-nav ul li {list-style: none!important;} .linhproductions-nav ul>li a { border:none; padding: 3px; display: block; border-radius: 5px; text-align: center; font-size: 10px; line-height: 15px; color: #515151; font-weight: 700; max-width: 72.19px; max-height: 54px; text-decoration: none; } .linhproductions-nav ul>li .chat_animation{display:none} .linhproductions-nav ul>li a i.ticon-heart { background: url(https://1.bp.blogspot.com/-xWCOvN3Ky-E/YFOP5wmbMkI/AAAAAAAADmw/O-9wpm60WFQjaZnXcDEEOk_QsVEA8VTLQCLcBGAsYHQ/s0/icon-map.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; } .linhproductions-nav ul>li a i.ticon-zalo-circle2 { background: url(https://1.bp.blogspot.com/--TrCBmzLuOU/YFOO5lv2_gI/AAAAAAAADmo/6y5kxwyW7lkv1BhkpmlY_PRgoJp5X2l5ACLcBGAsYHQ/s0/icon-zalo.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.linhproductions-nav li .button { background: transparent; }.linhproductions-nav ul>li a i.ticon-angle-up { background: url(https://linhminaz.com/wp-content/uploads/2020/06/wpfast-icon-angle-up.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.linhproductions-nav ul>li a i { width: 33px; height: 33px; display: block; margin: auto; }.linhproductions-nav ul li .button .btn_phone_txt { color: black;position: relative; top:35px; font-size: 10px; font-weight: bold; text-transform: none; } .linhproductions-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; }.linhproductions-nav ul>li a.chat_animation svg { margin: -13px 0 -20px; } .linhproductions-nav ul>li a i.ticon-messenger { background: url(https://1.bp.blogspot.com/-22ghFJiAXns/YFOOKIXppSI/AAAAAAAADmg/Wds1pm8RSqk80d5zOJkkN3SEFqxRGe9YwCLcBGAsYHQ/s0/messs.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.linhproductions-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; } .linhproductions-nav ul>li a i.ticon-chat-sms { background: url(https://linhminaz.com/wp-content/uploads/2020/06/wpfast-icon-sms.png) no-repeat; background-size: contain; width: 38px; height: 36px; display: block; } .linhproductions-nav ul>li a i.icon-phone-w { background: url(https://linhminaz.com/wp-content/uploads/2020/06/wpfast-icon-phone.png) no-repeat; background-size: contain;} .linhproductions-nav ul li .button .btn_phone_txt { position: relative; } @media only screen and (max-width: 600px){ .linhproductions-nav li .chat_animation{display:block !Important} .linhproductions-nav li .button .phone_animation {box-shadow: none; position: absolute; top: -16px; left: 50%; transform: translate(-50%,0); width: 50px; height: 50px; border-radius: 100%; background: #6cb917; line-height: 15px; border: 2px solid white; } .linhproductions-nav ul>li a{padding:0; margin:0 auto} .linhproductions-nav { background: white; width: 100%; border-radius:0; color: #fff; height: 60px; line-height: 50px; position: fixed; bottom: 0; left: 0; z-index: 999; padding: 5px; margin: 0; box-shadow: 0 4px 10px 0 #000; } .linhproductions-nav li { float: left; width: 20%; list-style: none; height: 50px; } .phone-mobile{display:block !important}} 
	</style>

Code Messenger cho blog, website wordpress

<div class="linhproductions-nav"> <ul> <li><a href="#" rel="nofollow noopener" target="_blank"><i class="ticon-heart"></i>Chỉ đường</a></li> <li><a href="https://zalo.me/" rel="nofollow noopener" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li> <li class="phone-mobile"> <a href="tel:0335676209" rel="nofollow" class="button"> <span class="phone_animation animation-shadow"> <i class="icon-phone-w" aria-hidden="true"></i> </span> <span class="btn_phone_txt">Gọi điện</span> </a> </li> <li><a href="https://m.me/" rel="nofollow noopener" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li> <li><a href="#baogia" class="chat_animation"> <i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin"></i> Báo Giá</a> </li></ul> </div>
<style>
	.phone-mobile {display: none;} .linhproductions-nav { margin-bottom: 2%; position: fixed; right: 15px; background: #fff; border-radius: 5px; width: auto; z-index: 150; bottom: 50px; padding: 10px 0; border: 1px solid #f2f2f2; } .linhproductions-nav ul {list-style: none;padding: 0;margin: 0;} .linhproductions-nav ul li {list-style: none!important;} .linhproductions-nav ul>li a { border:none; padding: 3px; display: block; border-radius: 5px; text-align: center; font-size: 10px; line-height: 15px; color: #515151; font-weight: 700; max-width: 72.19px; max-height: 54px; text-decoration: none; } .linhproductions-nav ul>li .chat_animation{display:none} .linhproductions-nav ul>li a i.ticon-heart { background: url(https://1.bp.blogspot.com/-xWCOvN3Ky-E/YFOP5wmbMkI/AAAAAAAADmw/O-9wpm60WFQjaZnXcDEEOk_QsVEA8VTLQCLcBGAsYHQ/s0/icon-map.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; } .linhproductions-nav ul>li a i.ticon-zalo-circle2 { background: url(https://1.bp.blogspot.com/--TrCBmzLuOU/YFOO5lv2_gI/AAAAAAAADmo/6y5kxwyW7lkv1BhkpmlY_PRgoJp5X2l5ACLcBGAsYHQ/s0/icon-zalo.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.linhproductions-nav li .button { background: transparent; }.linhproductions-nav ul>li a i.ticon-angle-up { background: url(https://linhminaz.com/wp-content/uploads/2020/06/wpfast-icon-angle-up.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.linhproductions-nav ul>li a i { width: 33px; height: 33px; display: block; margin: auto; }.linhproductions-nav ul li .button .btn_phone_txt { color: black;position: relative; top:35px; font-size: 10px; font-weight: bold; text-transform: none; } .linhproductions-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; }.linhproductions-nav ul>li a.chat_animation svg { margin: -13px 0 -20px; } .linhproductions-nav ul>li a i.ticon-messenger { background: url(https://1.bp.blogspot.com/-22ghFJiAXns/YFOOKIXppSI/AAAAAAAADmg/Wds1pm8RSqk80d5zOJkkN3SEFqxRGe9YwCLcBGAsYHQ/s0/messs.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.linhproductions-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; } .linhproductions-nav ul>li a i.ticon-chat-sms { background: url(https://linhminaz.com/wp-content/uploads/2020/06/wpfast-icon-sms.png) no-repeat; background-size: contain; width: 38px; height: 36px; display: block; } .linhproductions-nav ul>li a i.icon-phone-w { background: url(https://linhminaz.com/wp-content/uploads/2020/06/wpfast-icon-phone.png) no-repeat; background-size: contain;} .linhproductions-nav ul li .button .btn_phone_txt { position: relative; } @media only screen and (max-width: 600px){ .linhproductions-nav li .chat_animation{display:block !Important} .linhproductions-nav li .button .phone_animation {box-shadow: none; position: absolute; top: -16px; left: 50%; transform: translate(-50%,0); width: 50px; height: 50px; border-radius: 100%; background: #6cb917; line-height: 15px; border: 2px solid white; } .linhproductions-nav ul>li a{padding:0; margin:0 auto} .linhproductions-nav { background: white; width: 100%; border-radius:0; color: #fff; height: 60px; line-height: 50px; position: fixed; bottom: 0; left: 0; z-index: 999; padding: 5px; margin: 0; box-shadow: 0 4px 10px 0 #000; } .linhproductions-nav li { float: left; width: 20%; list-style: none; height: 50px; } .phone-mobile{display:block !important}} 
	</style>

Hướng dẫn chèn code vào website và blog

Chèn vào Blogspot

Bước 1: Đăng nhập vào blog -> Chủ đề -> Chỉnh sửa html

Bước 2: Bạn chèn code bên trên vào trước thẻ đóng </body>

Chèn vào website – wordpress

Bước 1: Bạn đăng nhập wordpress -> Giao diện -> Sửa giao diện.

Bước 2: Bạn tìm thẻ Footer.php và chèn code bên trên trước thẻ đóng </body>

Mục đích chúng ta chèn code vào cuối để giảm thời gian tải trang.

One thought on “Code nút góc dưới bên trái hoặc bên phải website

Trả lời