Theme blogspot shop thời trang 2021

Xem demo

Tên template: Theme blogspot shop thời trang 2021

Phân loại: Template blogpsot bán hàng

Nhà thiết kế: Mr Thiên ( Xem thông tin)

Giá bán: 750.000 VNĐ

Tính năng nổi bật: Thiết kế trên nền tảng blogger, theme blogspot shop thời trang 2021 là mẫu giao diện blogger dễ sử dụng tương thích tốt trên mọi nền tảng, chuẩn seo, tối ưu pagespeed insights...

- Tới ưu pagespeed insights 100/100

- Chỉnh sửa giao diện, tông mầu, font chữ trong bố cục

- Đăng bài dễ dàng

- Chuẩn seo, tương thích tốt trên mọi thiết bị

Bảo hành: Bảo hành viễn viễn trong quá trình sử dụng, hỗ trợ chỉnh sửa cơ bản.

Mô tả Hướng dẫn cài đặt

[demo]http://www.congnghewebblog.com/p/lien-he.html[/demo]

Theme blogger tin tức chuẩn seo 2021

Xem demo

Tên template: Theme blogger tin tức chuẩn seo 2021

Phân loại: Template blogger Tin tức

Nhà thiết kế: Tuan Nguyen ( Xem thông tin)

Giá bán: 500.000 VNĐ

Tính năng nổi bật:

- Theme blogger tin tức chuẩn seo, tương thích tốt trên mọi thiết bị

- Cập nhật Version mới nhất của blogger

- Giao diện thiết kế dạng tin tức tổng hợp, có vị trí đặt quảng cáo

- Nhiều tính năng, dạng bài viết hiển thị

Bảo hành: Bảo hành code trong suốt quá trình sử dụng

Hô trợ:

Hỗ trợ cài đặt, và hướng dẫn sử dụng qua ultraview

Mô tả Hướng dẫn cài đặt

[demo]https://www.ngoisaoteen.com/[/demo]

Code trang trí noel cho website blogger cực đẹp với hiệu ứng tuyết rơi

Giáng sinh noel năm 2020 sắp tới. Chúng tôi kính chúc bạn đọc và Quý khách hàng một mùa giáng sinh ấm áp và hạnh phúc, thành công trong công việc và cuộc sống.

Nay Công nghệ webblog xin gửi tới mọi người hướng dẫn trang trí giáng sinh noel cho website của các bạn với hiệu ứng tuyết rơi, và background noel.... hoàn toàn bằng CSS và HTML không ảnh hưởng tới tốc độ tải trang website của bạn.

Bước 1: vào chủ đề  --> Tùy chỉnh --> chỉnh sửa HTML tìm ]]></b:skin> thêm đoạn code này trên code vừa tìm được.

body {background-color: #C6E6F1;}
body:before {content:"";background:transparent url(https://lh4.googleusercontent.com/-jr5JTQjQ7vw/X9nm1Og2T9I/AAAAAAAABs0/xQiw_xow8_cc9rx9B2FIrfmzsaycOh84gCLcBGAsYHQ/s0/bg-top-min.png) no-repeat center top;position:absolute;left:0;top:0;width:100%;height:997px;z-index:-5;}
body footer {overflow:visible;position:relative;}
body footer:before {background:transparent url(https://lh4.googleusercontent.com/-t1hFofzWKgY/X9nnvZn6LTI/AAAAAAAABs8/piB5v8AF_wwyliGXf_z1ORadmXUrLlhgwCLcBGAsYHQ/s0/bg-footer-min.png) no-repeat center top;content:"";position:absolute;left:0;height:444px;top:-444px;width:100%;z-index:-5;}
.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%} .snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite} .snow.foreground{background-image:url(https://lh4.googleusercontent.com/--JJdJ1OpxdQ/WjM-a2RnCUI/AAAAAAAAC1M/_6T4BAIoDo0XOmh_zdqyCrlfrG_q9OnMwCLcBGAs/s1600/s1.png);-webkit-animation-duration:15s;animation-duration:10s} .snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s} .snow.middleground{background-image:url(https://lh4.googleusercontent.com/-o_B6QPW0bBo/WjM-a4ACAII/AAAAAAAAC1Q/o96JPHeO6_0Uq4DWme45uLBcaBehR7dOQCLcBGAs/s1600/s2.png);-webkit-animation-duration:20s;animation-duration:15s} .snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s} .snow.background{background-image:url(https://lh4.googleusercontent.com/-5D6Ea0qIm18/WjM-bL4beEI/AAAAAAAAC1U/cSVhjNxXlZEp471hUTWlf5jUnRbpJL2bQCLcBGAs/s1600/s3.png);-webkit-animation-duration:25s;animation-duration:20s} .snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s} @-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}} @keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}

Bước 2: Tìm thẻ </body> hoặc <!--<head/>--> với theme tại congnghewebblog.com

<div class='snow-container'>
<div class='snow foreground'/>
<div class='snow foreground layered'/>
<div class='snow middleground'/>
<div class='snow middleground layered'/>
<div class='snow background'/>
<div class='snow background layered'/>
</div>

Xong bạn lưu lại là bạn đã hoàn thành xong các bước trang trí noel cho website của mình.

Mình sẽ cập nhật các hướng dẫn tiếp theo ở bài viết này, các bạn quan tâm thì có thể ghé thăm và cập nhật.

Nếu có vướng mắc gì các bạn có thể để lại comment mình sẽ giải đáp và hỗ trợ. Thân!

Template blogspot bán hàng nội thất 2020

Xem demo

Tên template: Theme blogger nội thất đẹp 2020

Phân loại: Template blogspot bán hàng

Nhà thiết kế: Tuấn Nguyễn ( Xem thông tin)

Giá bán: 650.000 đồng

Tính năng nổi bật: Thiết kế trên nền tảng blogger với nhiều tính năng ưu việt. tối ưu chuẩn seo, tốc độ load trang nhanh.

- Tính năng shop: đặt hàng, đơn hàng gửi mail, sản phẩn ưu thích, popup xem nhanh, tính năng hết hàng, % giảm giá, zoom ảnh sản phẩm,tính năng giá liên hệ...

- Tính năng theme blogger: đăng bài tự do, đơn giản, giao diện dễ tùy chỉnh và sử dụng

- Chuẩn seo: tối ưu seo, tốc độ load trang nhanh, tương tích tốt trên mọi trình duyệt và thiết bị

Hỗ trợ khi mua theme:

- Hướng dẫn sử dụng, hỗ trợ cài đặt

- Hỗ trợ chỉnh sửa cơ bản

- Gửi kèm đây đủ các file hướng dẫn cài đặt chỉnh sửa.

Bảo hành: Bảo hành vĩnh viễn trong quá trính sử dụng

Mô tả Hướng dẫn cài đặt

[demo]https://themenoithat-demo.blogspot.com/[/demo]

Theme blogger bất động sản 2021

Xem demo

Tên template: Theme BDS01-2021

Phân loại: Theme blogger bất động sản

Nhà thiết kế: Hòa Trần ( Xem thông tin)

Giá bán: 500.000 đồng

Tính năng nổi bật: Theme được thiết kế trên nền tảng blogger hoàn toàn miễn phí từ google với độ bảo mật cao, miễn phí hosting bằng thông.

+ Theme blogpsot bất động sản bds01-2021 tương thích tốt trên di động, ipad cũng như máy tính

+ Tốc độ load trang nhanh, chuẩn seo

+ có đầy đủ tính  năng bán dự án, cũng như tin tức dự án

+ Theme được thiết kế theo phòng cách hiện đại

Hộ trợ khi mua template blogspot:

+ Hỗ trợ cài đặt 

+ Gửi kèm đẩy đủ các file hướng dẫn cài đặt, chỉnh sửa dễ sử dụng 

+ Hỗ trợ chỉnh sửa 

+ Hoàn thiện giao diện chỉ việc đăng bài ( Gói 1 triệu)

Bảo hành: Bảo hành viễn viễn trong quá trình sử dụng

Mô tả Hướng dẫn cài đặt

[demo]https://themebds01-blogger2020.blogspot.com/[/demo]

Theme blogger shop bán hàng 2020

Xem demo

Tên template: Theme blogger shop A112020

Phân loại: Theme Bán hàng

Nhà thiết kế: Tuấn Nguyễn ( Xem thông tin)

Giá bán: 650.000 Đồng

Tính năng nổi bật: Thiết kế trên nền tảng blogger, theme blogger shop A112020 tổng hợp nhiều tính năng mới, dễ dàng sử dụng và tùy chỉnh.

+ Đăng bài không cần theo code như các template blogspot bán hàng cũ

+ Đặt hàng nhanh, đơn  hàng gửi trực tiếp vào mail dễ dàng quản lý

+ Sản phẩm ưu thích, giúp khách hàng có thế chọn nhiều sản phẩm

+ Tự động tính % giảm giá

+ popup xem nhanh sản phẩm

+ Tính năng hết hàng, sản phẩm sẽ không cho đặt hàng

+ Tính năng giá liên hệ thì chuyển nút mua ngay thành đặt hàng

Theme blogger shop:

+ Thiết kế chuẩn seo, tương thích tốt trên mọi thiết bị

+ Dễ dàng chỉnh sửa, cài đặt thông qua tính năng mới của Layout: Version 3, Widget: Version 2

Hộ trợ khi mua:

+ Hỗ trợ cài đặt

+ Gửi kèm đẩy đủ các file hướng dẫn cài đặt, chỉnh sửa dễ sử dụng

+ Hỗ trợ chỉnh sửa 

+ Hoàn thiện giao diện chỉ việc đăng bài ( Gói 1 triệu)

Bảo hành: Bảo hành viễn viễn trong quá trình sử dụng, hỗ trợ chỉnh sửa cơ bản.

Mô tả Hướng dẫn cài đặt

[demo]https://themeblog-shop.blogspot.com/[/demo]

Tiện ích liên hệ cực đẹp cho theme blogger 2020

Tiện ích liên hệ cho theme blogger cũng đã được chia sẻ nhiều ở các bài viết trước của công nghệ webblog tuy nhiên hôm nay chung tôi sẽ giới thiệu thêm tới các bạn một mẫu tiện ích liên hệ mới với mong muốn các bạn sẽ có thêm nhiều lựa chọn phù hợp với website và phong cách của các bạn hơn.

Các bạn có thể tham khảo các bài viết trước:

• Tiên ích liên hệ tích hợp zalo - facebook - Mail - SMS đẹp cho blogpsot 2020
• Tổng hợp các nút gọi làm hotline đẹp cho blogspot
• Code hotline hỗ trợ trực tuyến đẹp cho blogspot

Dưới đây là cách tích hợp Tiện ích liên hệ cực đẹp cho theme blogger 2020 vào code.

Bước 1. Vào phần chủ đề --> TÙY CHỈNH (click vào mũi tên đi xuống)--> chỉnh sửa HTML --> ctrl + F bật khung tim kiếm và tìm key ]]></b:skin>

Thêm code css sau trên thẻ vừa tìm được.

/* CSS HOTLINE */
.support-online{position:fixed;z-index:999;left:15px;bottom:30px;top:auto!important}
.support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}
.support-online i{width:40px;height:40px;background:#90c908;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:40px;position:relative;z-index:999}
.support-online a{display:block}
.support-online a span{border-radius:2px;text-align:center;background:#90c908;padding:9px;display:none;width:210px;margin-left:10px;position:absolute;color:#ffffff;z-index:999;top:0;left:40px;transition:all 0.2s ease-in-out 0s;-moz-animation:headerAnimation 0.7s 1;-webkit-animation:headerAnimation 0.7s 1;-o-animation:headerAnimation 0.7s 1;animation:headerAnimation 0.7s 1}
.support-online a:hover span{display:block}
.support-online a span::before{content:"";width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #90c908 transparent transparent;position:absolute;left:-10px;top:10px}
.kenit-alo-circle-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .1s;-moz-transition:all .1s;-o-transition:all .1s;transition:all .1s;background-color:rgba(144,201,8,0.5);opacity:.75;right:-10px}
.kenit-alo-circle{width:50px;height:50px;top:-5px;right:-5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);opacity:.1;border-color:#a2e209;opacity:.5}
.support-online .btn-support{cursor:pointer}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}
@keyframes pulse{0%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}
.animated{animation-duration:1s;animation-fill-mode:both}
.animated.infinite{animation-iteration-count:infinite}
.animated.hinge{animation-duration:2s}
.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut{animation-duration:.75s}
@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}
.zoomIn{animation-name:zoomIn}
@keyframes pulse{from{transform:scale3d(1,1,1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scale3d(1,1,1)}}
.pulse{animation-name:pulse}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(0.95,1.05,1)}75%{transform:scale3d(1.05,0.95,1)}to{transform:scale3d(1,1,1)}}
/* END CSS HOTLINE */

Bước 2: Tìm thẻ </body> hoặc <!--<head/>--> thêm code dưới bên trên thẻ vừa tìm được.

<div class='support-online'>
<div class='support-content' style='display: none;'>
<a class='call-now' href='tel:0123456789' rel='nofollow'>
<i aria-hidden='true' class='fa fa-phone'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
<span>Gọi ngay: 0123 456 789</span>
</a>
<a class='mes' href='https://www.messenger.com/t/IDFACEBOOK' target='_blank'>
<i aria-hidden='true' class='fa fa-facebook-official'/>
<span>Chat qua Messenger</span>
</a>
<a class='zalo' href='mailto:baotrung304@gmail.com' target='_blank'>
<i class='fa fa-envelope'/>
<span>baotrung304@gmail.com</span>
</a>
<a class='sms' href='sms:0123456789'>
<i aria-hidden='true' class='fa fa-wechat'/>
<span>SMS: 0123 456 789</span>
</a>
</div>
<a class='btn-support'>
<i class='fa fa-bell'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
</a>
</div>
<script type='text/javascript'>
//<![CDATA[
$('a.btn-support').click(function(e){e.stopPropagation();$('.support-content').slideToggle()});$('.support-content').click(function(e){e.stopPropagation()});$(document).click(function(){$('.support-content').slideUp()});
//]]>
</script>

Thay các thông tin in đỏ thành thông tin của bạn. lần lượt là số điện thoại của bạn, ID của facebook (hoặc fan page) của bạn, mail của bạn, và số điện thoại nhận SMS.

Các bạn cũng có thể chỉnh tông mầu bằng các thay #90c908 thành tông mầu bạn muốn.

Lưu ý : Với các bạn không mua theme blogspot tại www.congnghewebblog.com thì các bạn tìm <b:skin thêm code này ngay trên thẻ vừa tìm được,

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Bước 3: Lưu lại và tận hưởng thành quả.

Trên đây là hướng dẫn tích hợp tiện ích liên hệ mới đẹp nhẹ có đầy đủ facebook, zalo, sms, nút gọi, mail vào theme blogger cho các bạn. Nếu cần hỗ trợ gì các bạn để lại comment chúng tôi sẽ giải đáp thắc mắc cho các bạn nha.

Theme blogger tin tức news 2020

Xem demo

Tên template: Template blogspot tin tức news 2020

Phân loại: theme blogspot tin tức

Nhà thiết kế: Tuấn Nguyễn ( Xem thông tin)

Giá bán: 500,000 đồng

Tính năng nổi bật: Theme blogspot thiết kế trên nền tảng blogger với nhiều tính năng nổi bật
- Theme blogspot tin tức chuẩn seo 2020
- Tối ưu tốc độ tải trang, tương thích tốt trên mọi thiết bị
- Tiện ịch thông kê chỉ số giá vàng
- Tiện ích quảng cáo trong bài đăng trên mobi
- Tiện ích video play...

Bảo hành: Bảo hành viễn viễn trong quá trình sử dụng
Hỗ trợ:
+ Hỗ trợ cài đặt
+ Hướng dẫn sử dụng
+ Hỗ trợ chỉnh sửa
+ Hỗ trợ cài đặt tên miền riêng

Mô tả Hướng dẫn cài đặt

[demo]https://jobfaceviet.blogspot.com/[/demo]

theme blog công ty dịch vụ 2020

Xem demo

Tên template: Theme blog côn ty dịch vụ

Phân loại: Template công ty

Nhà thiết kế: Hoàng Thiên( Xem thông tin)

Giá bán: 500,000 đồng

Tính năng nổi bật: Theme được thiết kế trên nền tảng blogger dễ sử dụng và hoàn toàn miễn phí từ google.
+ Theme blog công ty chuẩn seo
+ Theme blog hoạt động tốt trên mọi nền tảng trình duyệt, tương thích tốt trên mobi, ipal...
+ Theme dễ sử dụng và chỉnh sửa như thay đổi mầu sắc, logo menu....

Bảo hành: Bảo hành code trong suốt quá trình sử dụng
Hỗ trợ:
+ Hỗ trợ cài đặt
+ Hướng dẫn sử dụng
+ Hỗ trợ chỉnh sửa như chỉnh mầu, xóa hoặc thêm tiện ích...
+ Hỗ trợ cài đặt tên miền

Mô tả Hướng dẫn cài đặt

[demo]https://inanvietdung.blogspot.com/[/demo]

Template blogspot du học 2020

Xem demo

Tên template: Template blogspot du học

Phân loại: Theme blog giáo dục

Nhà thiết kế: Hoàng Thiên ( Xem thông tin)

Giá bán: 500,000 đồng

Tính năng nổi bật: Theme được thiết kế trên nền tảng blogger chuẩn seo, tương thích tốt trên mọi thiết bị. Phù hợp làm website tuyên sinh du học, trung tâm tiếng nhật, hàn....
+ Theme blogspot chuẩn seo
+ Theme blog chuẩn mobile
+ Menu đa cấp, slide ảnh chạy
+ Thư viện ảnh, slide đối tác chuyên nghiệp.....

Bảo hành: Bảo hành code trong suốt quá trình dùng.
Hỗ trợ:
+ Hỗ trợ cài đặt giống demo
+ Hướng dẫn sử dụng bằng file word và có teamview trực tiếp nếu cần
+ Hỗ trợ chỉnh sửa lại như thay tông mầu, xóa thêm một số tiện ích
+ Hỗ trợ cài tên miền ( nếu cần)

Mô tả Hướng dẫn cài đặt

[demo]https://duhoc-xuatkhaulaodongthemes.blogspot.com/[/demo]

Template blogspot bán đồ câu mới 2020

Xem demo

Tên template: Template blogspot bán đồ câu

Phân loại: Template blogspot bán hàng

Nhà thiết kế: Hoàng Thiên ( Xem thông tin)

Giá bán: 1.000.000 đ

Tính năng nổi bật:
- Theme blogspot được thiết kế đẹp mắt, tuy nhiên dễ dàng sử dụng và tùy biến
- Theme blogspot có đầy đủ tính năng shop như đặt hàng đơn hàng gửi mail tự động tính % giảm giá, tự động khó tính năng đặt hàng khi hết hàng....
- Tính năng sản phẩm yêu thích giúp khách hàng dễ dàng thêm sản phẩm vào mục yêu thích
- Theme blogspot bán hàng tuy nhiên vẫn có trang tin tức
- Tối ưu seo, tốc độ load trang cực nhanh, tương thích tốt trên mọi thiết bị di động cũng như ipad...
- Đăng bài cực kỳ nhanh và dễ dàng

Hô trợ khi mua theme:
- Hỗ trợ cài đặt
- Hướng dẫn sử dụng qua ultraview
- Hỗ trợ chỉnh sửa lại theo yêu cầu
Bảo hành: Bảo hành viễn viễn trong quá trình sử dụng

Mô tả Hướng dẫn cài đặt

[demo]http://www.congnghewebblog.com/p/lien-he.html[/demo]

Template blogspot du lịch 2020

Xem demo

Tên template: Template blogspot tour du lịch 2020

Phân loại: Template blogspot du lịch

Nhà thiết kế: Hoàng Thiên ( Xem thông tin)

Giá bán: 750.000 đồng

Tính năng nổi bật: Thiết kế trên nền tảng blogger hoàn toàn miễn phí từ google, template blogspot tour du lịch 2020 được tối ưu chuẩn seo, tốc độ load trang nhanh...
- Giao diện website tour du lich hoạt động tốt trên mọi thiết bị như di dộng, ipad...
- Tính năng đặt tour
- Cẩm nang tin tức du lịch
....
Hỗ trợ khi mua theme:
- Hỗ trợ cài đặt
- Hướng dẫn sử dụng qua ultraview
- Hỗ trợ chỉnh sửa cơ bản

Bảo hành: Bảo hành viễn viễn trong quá trình sử dụng

Mô tả Hướng dẫn cài đặt

[demo]https://theme-tourdulich-2021.blogspot.com/[/demo]

Template blogspot shop quần áo 2020

Xem demo

Tên template: Template blogspot shop quần áo 2020

Phân loại: Template blogspot bán hàng thời trang

Nhà thiết kế: Hoàng Thiên ( Xem thông tin)

Giá bán: 500,000 đồng

Tính năng nổi bật: Mẫu theme blogpsot shop quần áo được thiết kế trên nền tảng blogger với nhiều update mới.
- Tính năng xem nhanh
- Tự động tính % giảm giá
- Tính năng hết hàng tự khóa tính năng  mua hàng
- Theme blogspot shop đặt  hàng chuyên nghiệp
- Đăng bài nhanh và đơn giản dễ sử dụng
- Theme blogspot chuẩn seo và hỗ trợ mobi cũng như ipad mượt mà.
Hỗ trợ khi mua theme
+ Hỗ trợ cài đặt
+ Hỗ trợ chỉnh sửa và hướng dẫn sử dụng qua ultraview
+ Hỗ trợ cài đặt tên miền

Bảo hành: Bảo hành code vĩnh viễn trong quá trình sử dụng

Mô tả Hướng dẫn cài đặt

[demo]http://www.congnghewebblog.com/p/lien-he.html[/demo]

khắc phục lỗi không truy cập được vào blogger khi thiếu www trong tên miền

Chào các bạn, Dạo này blogger bị lỗi không thể truy cấp được khi thiếu www dù các bạn đã cài đặt cấu hình đúng theo hướng dẫn từ google, đã bật chuyển hướng non-www đến www trong phần cài đặt của blogger.

Sau đây mình xin hướng dẫn các bạn cách sửa lỗi này.

Bước 1: Bạn chỉ việc truy cập vào trang quản trị của domain --> cập nhật DNS
Bước 2: Bình thường bạn sẽ cấu hình 4 bản ghi A như sau

Bạn xóa 4 bản ghi A này đi cho mình và cập nhật 1 bản ghi A mới  với Value 74.125.130.121
Sau khi cập nhật xong bạn sẽ có cấu hình DNS như sau.

Sau khi đã sửa theo hướng dẫn xong bạn chờ khoảng 15 tới 30 phút rồi truy cập lại website và xem kết quả.
Lưu ý: Phải đảm bảo bận đã chọn chuyển hướng non-www đến www trong phần cài đặt của blogger.
Trên đây là hướng dẫn khắc phục lỗi không truy cập được vào blogger khi thiếu www trong tên miền dù bạn đã cài đặt đúng theo hướng dẫn bài viết "hướng dẫn cài đặt tên miền".
Mình đã kiểm tra cách trên tên các hệ thổng website blogger của bên mình đều cho kết quả tốt. các bạn nếu có thắc mặc gì xin để lại comment mình sẽ giải đáp hoặc có những các khắc phục tốt hơn mong được đóng góp để có nhiều phương án tốt hơn cho mọi người sử dụng blogger.
Chúc các bạn có trải nghiệm tốt nhất trên blogger!

Template blogspot thực phẩm sạch

Xem demo

Tên template: Template blogspot thực phẩm sạch

Phân loại: Template blogger bán hàng

Nhà thiết kế: Hoàng Thiên ( Xem thông tin)

Giá bán: 500.000 đồng

Tính năng nổi bật: Giao diện blogger đơn giản và đẹp, phù hợp làm website cửa hàng thực phẩm sạch
+ Theme blogger thực phẩm sạch thiết kế chuẩn seo
+ Giao diện đẹp, đơn giản tường thích tốt trên thiết bị di động, máy tính bảng
+ Dễ dang sử dụng và đăng bài

Bảo hành: Bảo hành viễn viễn trong quá trình sử dụng
Hỗ trợ: Hỗ trợ với website đầu tiên
+ Hỗ trợ cài đặt, hướng dẫn sử dụng và chỉnh sửa cơ bản
+ Hỗ trợ thêm bớt các tiện ích như chat, nút gọi, liên hệ....
+ Gừi kèm đây đủ các file hướng dẫn cài đặt và chỉnh sửa

Mô tả Hướng dẫn cài đặt

[demo]https://sieuthithucanvatnuoi.blogspot.com/[/demo]

Template blogspot quần áo xuất khẩu

Xem demo

Tên template: Template blogspot quần áo xuất khẩu

Phân loại: Template blogspot bán hàng

Nhà thiết kế: Hoàng Thiên ( Xem thông tin)

Giá bán: 500.000 đồng

Tính năng nổi bật: Template blogspot quần áo xuất khẩu là một trong những mẫu theme blogspot shop quần áo đẹp nhất hiện nay, thiết kế đẹp, giao diện tương thích tốt trên mọi thiết bị di động, máy tính bẳng , desktop....
+ Mẫu template blogger chuẩn seo
+ Tương thích tốt trên mọi thiết bị di đông, máy tính bảng
+ Tính năng đặt hàng đơn hàng gửi mail dễ dàng quản lý
+ Dễ sử dụng và đăng bài với tool được công nghệ webblog phát triển riêng.

Bảo hành: Code được bảo hành vĩnh viễn
Hỗ trợ: Hỗ trợ với website đầu tiên
+ Hỗ trợ cài đặt, chỉnh sửa cơ bản, thêm bớt các tiện  ích
+ Hướng dẫn sử dụng qua ultraview
+ Gửi kèm đầy đủ các file hướng dẫn cài đặt chỉnh sửa template và data

Mô tả Hướng dẫn cài đặt

[demo]https://quanaotreemxuatkhaushop.blogspot.com/[/demo]

Template blogspot giáo dục talky town

Xem demo

Tên template: Theme Talky Town

Phân loại: Template blogspot Giáo dục

Nhà thiết kế: Tuan Nguyen ( Xem thông tin)

Giá bán: 500.000 Đồng

Tính năng nổi bật: Templete Thiết kế trên nền tảng blogger chuẩn seo, tương thích tốt trên mọi thiết bị phù hợp là website trung tâm tiếng anh, trung tâm gia sư, website tuyển sinh du học....
+ Thiết kế chuẩn seo, tối ưu tốc độ load trang
+ Template blogspot hoạt động tốt trên di động, ipad, máy tính bảng....
+ Theme blogger có slide, hỗ trợ đăng video từ youtube...
Hỗ trợ với website đầu tiên:
+ Template blogger có đầy đủ file code không mã hóa
+ Có File hướng dẫn cài đặt, hướng dẫn chỉnh sửa và file hướng dẫn seo blogger
+ Hỗ trợ cài đặt hướng dẫn qua ultraview
+ Hỗ trợ chỉnh sửa cơ bản.

Bảo hành: Bảo hành viễn viễn trong quá trình sử dụng

Mô tả Hướng dẫn cài đặt

[demo]https://themetalkytown.blogspot.com/[/demo]

Tiên ích liên hệ tích hợp zalo - facebook - Mail - SMS đẹp cho blogpsot 2020

Chào các bạn, hôm nay mình xin chia sẻ code tiện ích liên hệ đẹp cho template blogspot tích hợp zalo, facebook, mail và sms. Bạn có thể tích hợp vào mẫu theme blog bán hàng, mẫu blogspot dịch vụ....

Tích hợp tiện ích liên hệ vào template blogspot tại congnghewebblog.com và mẫu blogger khác

Bước 1: Vào Blogger.com tới trang website bạn muốn tích hợp tiện ích liên hệ vào --> chủ đề --> chỉnh sửa HTML --> Ctrl+ F để bật khung tìm kiếm lên.

• Nếu template blogspot mua tại congnghewebblog.com tìm key <!--<head>-->
• Các mẫu blogger nguồn khác khác tìm key </body>

Bước 2: Thêm code bên dưới ngày trên thẻ vừa tìm được trong template blogspot

<style>
.fone{font-size:22px;color:#f00;line-height:40px;font-weight:bold;padding-left:45px;margin:0 0}
.fix_tel{position:fixed;bottom:15px;left:20px;z-index:999}
.fix_tel img{max-width:100%;height:auto}
.fix_tel a{text-decoration:none;display:block}
.tel{background:#eee;width:205px;height:40px;position:relative;overflow:hidden;background-size:40px;border-radius:28px;border:solid 1px #ccc}
.ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility 0.5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}
.ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility 0.5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}
.ring-alo-phone.ring-alo-show{visibility:visible}
.ring-alo-phone.ring-alo-hover,.ring-alo-phone:hover{opacity:1}
.ring-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:70px;left:10px;opacity:0.1;position:absolute;top:12px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}
.ring-alo-phone.ring-alo-active .ring-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim!important}
.ring-alo-phone.ring-alo-static .ring-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim!important}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone:hover .ring-alo-ph-circle{border-color:#f00;opacity:0.5}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle{border-color:#baf5a7;opacity:0.5}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle{border-color:#f00;opacity:0.5}
.ring-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;background-color:#000;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:0.1;position:absolute;top:33px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:30px}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone:hover .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);opacity:0.75!important}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:0.75!important}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);opacity:0.75!important}
.ring-alo-ph-img-circle{animation:1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:1;position:absolute;top:33px;transform-origin:50% 50% 0;width:30px}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone:hover .ring-alo-ph-img-circle{background-color:#f00}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle{background-color:#75eb50}
.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle{background-color:#f00}
@keyframes ring-alo-circle-anim{0%{opacity:0.1;transform:rotate(0deg) scale(0.5) skew(1deg)}30%{opacity:0.5;transform:rotate(0deg) scale(0.7) skew(1deg)}100%{opacity:0.6;transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes ring-alo-circle-img-anim{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes ring-alo-circle-fill-anim{0%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}50%{opacity:0.2;transform:rotate(0deg) scale(1) skew(1deg)}100%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}}
.ring-alo-ph-img-circle a img{padding:1px 0 0 1px;width:30px;position:relative;top:-1px}}
/* End Hotline Fixed */
</style>
<div class='fix_tel'>
<div class='ring-alo-phone ring-alo-green ring-alo-show' id='ring-alo-phoneIcon' style='right: 150px; bottom: -12px;'>
<div class='ring-alo-ph-circle'></div>
<div class='ring-alo-ph-circle-fill'></div>
<div class='ring-alo-ph-img-circle'>
<a href='tel:09662288xx'>
<img class='lazy' src='https://lh4.googleusercontent.com/-CiWa1p-Hf3A/XStRG5wkfrI/AAAAAAAAACk/KEAuiljkZZ4Wwq1KB3VXwtXthG1s_3aPwCLcBGAs/s1600/phone-ring.png'/>
</a>
</div>
</div>
<div class='tel'>
<p class='fone'>09662288xx</p>
</div>
</div>
<style>
.add-widget{position:fixed;z-index:999999}
.add-widget.widget-facebook{left:160px;bottom:50px}
.add-widget.widget-zalo{left:110px;bottom:50px}
.add-widget.widget-contact{left:60px;bottom:50px}
.add-widget.widget-driver{left:10px;bottom:50px}
.add-widget .widget-circle{position:relative;display:inline-block;width:44px;height:44px;background-color:#c4172c;-webkit-border-radius:50%;border-radius:50%}
.add-widget .widget-circle .fa-icon{position:absolute;left:7px;top:7px;width:30px;height:30px;background-size:30px;background-repeat:no-repeat}
.add-widget.widget-facebook .widget-circle{background:rgba(0,197,255,1);background:-moz-linear-gradient(top,rgba(0,197,255,1) 0,rgba(0,112,255,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(0,197,255,1)),color-stop(100%,rgba(0,112,255,1)));background:-webkit-linear-gradient(top,rgba(0,197,255,1) 0,rgba(0,112,255,1) 100%);background:-o-linear-gradient(top,rgba(0,197,255,1) 0,rgba(0,112,255,1) 100%);background:linear-gradient(to bottom,rgba(0,197,255,1) 0,rgba(0,112,255,1) 100%)}
.add-widget.widget-facebook .widget-circle .fa-icon{background-image:url(https://lh4.googleusercontent.com/-o28fuQaJdHc/XjEBjwswgSI/AAAAAAAAEAw/TgF19s77mAMYOhsBAZd3EF5RDqqyo8mbgCLcBGAsYHQ/s1600/icon-messenger-1289632j1.jpg)}
.add-widget.widget-zalo .widget-circle{background:rgba(61,157,215,1);background:-moz-linear-gradient(top,rgba(61,157,215,1) 0,rgba(32,124,229,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(61,157,215,1)),color-stop(100%,rgba(32,124,229,1)));background:-webkit-linear-gradient(top,rgba(61,157,215,1) 0,rgba(32,124,229,1) 100%);background:-o-linear-gradient(top,rgba(61,157,215,1) 0,rgba(32,124,229,1) 100%);background:linear-gradient(to bottom,rgba(61,157,215,1) 0,rgba(32,124,229,1) 100%)}
.add-widget.widget-zalo .widget-circle .fa-icon{background-image:url(https://lh4.googleusercontent.com/-5oW9YZxeMYA/XjEB5a_38RI/AAAAAAAAEA4/O-9vtgvMSp0CO1kr7mUNpQKCyY6N4OeDgCLcBGAsYHQ/s1600/icon-zalo-1289633j1.jpg)}
.add-widget.widget-contact .widget-circle{background:rgba(244,147,147,1);background:-moz-linear-gradient(top,rgba(244,147,147,1) 0,rgba(234,39,39,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(244,147,147,1)),color-stop(100%,rgba(234,39,39,1)));background:-webkit-linear-gradient(top,rgba(244,147,147,1) 0,rgba(234,39,39,1) 100%);background:-o-linear-gradient(top,rgba(244,147,147,1) 0,rgba(234,39,39,1) 100%);background:linear-gradient(to bottom,rgba(244,147,147,1) 0,rgba(234,39,39,1) 100%)}
.add-widget.widget-contact .widget-circle .fa-icon{background-image:url(https://lh4.googleusercontent.com/-r-23DPeRud4/XqZtQBkpVxI/AAAAAAAAEnI/9HOpGbgHSsgchhFl4doMhujCy8kSDpTMgCLcBGAsYHQ/s1600/sms.png)}
.add-widget.widget-driver .widget-circle{background:rgba(245,183,74,1);background:-moz-linear-gradient(top,rgba(245,183,74,1) 0,rgba(193,32,50,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(245,183,74,1)),color-stop(100%,rgba(193,32,50,1)));background:-webkit-linear-gradient(top,rgba(245,183,74,1) 0,rgba(193,32,50,1) 100%);background:-o-linear-gradient(top,rgba(245,183,74,1) 0,rgba(193,32,50,1) 100%);background:linear-gradient(to bottom,rgba(245,183,74,1) 0,rgba(193,32,50,1) 100%)}
.add-widget.widget-driver .widget-circle .fa-icon{background-image:url(https://lh4.googleusercontent.com/-WmdxdtgtyM0/XqZuGsWAhpI/AAAAAAAAEnQ/k7oeOXqf32gC5VMLbzKdOZvHF6cl4eLWQCLcBGAsYHQ/s1600/email.png)}
@media (min-width:768px){.add-widget.widget-facebook{left:20px;bottom:230px}.add-widget.widget-zalo{left:20px;bottom:180px}.add-widget.widget-contact{left:20px;bottom:130px}.add-widget.widget-driver{left:20px;bottom:80px}}
#popupBaoGiaLink{display:none}
.box-car .form-group:nth-child(5),.box-car .form-group:nth-child(6),.box-car .form-group:nth-child(7),.box-car .form-group:nth-child(8){width:50%;float:left;padding:10px}
</style>
<a class='add-widget widget-facebook' href=' https://m.me/IDFACEBOOK/' target='_blank' title='Chát trên Facebook'><span class='widget-circle'><i class='fa-icon'></i></span></a>
<a class='add-widget widget-zalo' href='https://zalo.me/09662288xx' target='_blank' title='Chát trên Zalo'><span class='widget-circle'><i class='fa-icon'></i></span></a>
<a class='add-widget widget-contact' href='sms:09662288xx' title='sms'><span class='widget-circle'><i class='fa-icon'></i></span></a>
<a class='add-widget widget-driver' href='mailto:abc@gmail.com' title='email'><span class='widget-circle'><i class='fa-icon'></i></span></a>

Bước 3: Thay các thông tin mình bôi đỏ thành thông tin của bạn.

• Thay số điện thoại 09662288xx thành số điện thoại của cậu. Riêng ở vị trí thứ 3 là số điện thoại bạn sử dụng zalo
• Thay IDFACEBOOK thành ID Facebook hoặc fanpage của bạn ( có thể là dãy chữ số hoặc tên miền riêng như /facebook/congnghewebblog )
• Thay abc@gmail.com thành địa chỉ mail của bạn.

Bước 4: Ấn lưu template blogspot và ra xem thành quả vừa làm được.

Trên đây là hướng dẫn tích hợp tiện ích liên hệ có facebook, zalo, sms, mail đẹp và đơn giản nhất. Rất mong các thủ thuật blogger này sẽ hữu ích với các bạn. Cảm ơn các bạn luôn đồng hành và ủng hộ congnghewebblog.com, chúng tôi luôn cố gắng để đưa ra các sản phẩm template blogspot tốt nhất.

Mọi thắc mắc cần hỗ trợ các bạn hãy để lại comment hoặc gửi thư về địa chỉ mail congnghewebblog@gmail.com để được giải đáp.

Thân!

Template blogspot dịch vụ 05

Xem demo

Tên template: Template blogspot dịch vụ 05

Phân loại: Dịch vụ chuyển nhà

Nhà thiết kế: Hoàng Thiên ( Xem thông tin)

Giá bán: 500.000 đồng

Tính năng nổi bật: Template blogspot thiết kế trên nền tảng blogger hoàn toàn miễn phí từ google.
- Tối ưu seo tốt, tốc độ load trang nhanh.
- Tương thích tốt trên mọi thiết bị di động, máy tính bằng, desktop
- Template blogspot dịch vụ 05 phù hợp làm website dịch vụ, website giới thiệu công ty
Hỗ trợ khi mua template.
- Hướng dẫn sử dụng có file hướng dẫn gửi kèm
- Hướng dẫn tối ưu seo theo từ khóa
- Hỗ trợ cài đặt giống demo
- Hỗ trợ chỉnh sửa cơ bản

Bảo hành: Bảo hành code vĩnh viễn

Mô tả Hướng dẫn cài đặt

[demo]https://chuyennhakienvangthemes.blogspot.com/[/demo]

Tổng hợp các nút gọi làm hotline đẹp cho blogspot

Hôm nay Công Nghệ Webblog xin chia sẻ tới các bạn các nút gọi đẹp và chuyên nghiệp làm hotline cho website của các bạn. Dưới đây là cách làm và tổng hợp các nút gọi bạn có thể chọn có hình ảnh demo kèm theo.

Cách tích hợp vào website, template blogspot như sau

Bước 1: Vào phần blogger.com --> chủ đề --> Chỉnh sửa HTML

• Nếu template blogspot mua tại congnghewebblog.com tìm key <!--<head/>-->
• Các template blogspot khác tìm key </body>

Bước 2: Thêm code bên dưới ngay trên thẻ vừa tìm được.
Bước 3: Thay số điện thoại 0966.22.08.xx và 09662208xx thành số điện thoại của bạn
Bước 4: Lưu lại và xem kết quả vừa làm được.

Code các nút goi tương ứng cho template blogspot

Nút gọi 01: Hiệu ứng nháy đẹp mắt, click vào là gọi trên di động

<style>
.fone{font-size:22px;color:#f00;line-height:40px;font-weight:bold;padding-left:45px;margin:0 0}
.fix_tel{position:fixed;bottom:15px;left:20px;z-index:999}
.fix_tel img{max-width:100%;height:auto}
.fix_tel a{text-decoration:none;display:block}
.tel{background:#eee;width:205px;height:40px;position:relative;overflow:hidden;background-size:40px;border-radius:28px;border:solid 1px #ccc}
.ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility 0.5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}
.ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility 0.5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}
.ring-alo-phone.ring-alo-show{visibility:visible}
.ring-alo-phone.ring-alo-hover,.ring-alo-phone:hover{opacity:1}
.ring-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:70px;left:10px;opacity:0.1;position:absolute;top:12px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}
.ring-alo-phone.ring-alo-active .ring-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim!important}
.ring-alo-phone.ring-alo-static .ring-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim!important}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone:hover .ring-alo-ph-circle{border-color:#f00;opacity:0.5}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle{border-color:#baf5a7;opacity:0.5}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle{border-color:#f00;opacity:0.5}
.ring-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;background-color:#000;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:0.1;position:absolute;top:33px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:30px}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone:hover .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);opacity:0.75!important}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:0.75!important}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);opacity:0.75!important}
.ring-alo-ph-img-circle{animation:1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:1;position:absolute;top:33px;transform-origin:50% 50% 0;width:30px}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone:hover .ring-alo-ph-img-circle{background-color:#f00}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle{background-color:#75eb50}
.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle{background-color:#f00}
@keyframes ring-alo-circle-anim{0%{opacity:0.1;transform:rotate(0deg) scale(0.5) skew(1deg)}30%{opacity:0.5;transform:rotate(0deg) scale(0.7) skew(1deg)}100%{opacity:0.6;transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes ring-alo-circle-img-anim{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes ring-alo-circle-fill-anim{0%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}50%{opacity:0.2;transform:rotate(0deg) scale(1) skew(1deg)}100%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}}
.ring-alo-ph-img-circle a img{padding:1px 0 0 1px;width:30px;position:relative;top:-1px}}
/* End Hotline Fixed */
</style>
<div class="fix_tel">
<div class="ring-alo-phone ring-alo-green ring-alo-show" id="ring-alo-phoneIcon" style="right: 150px; bottom: -12px;">
<div class="ring-alo-ph-circle"></div>
<div class="ring-alo-ph-circle-fill"></div>
<div class="ring-alo-ph-img-circle">
<a href="tel:09662208xx">
<img class="lazy" src="https://lh4.googleusercontent.com/-CiWa1p-Hf3A/XStRG5wkfrI/AAAAAAAAACk/KEAuiljkZZ4Wwq1KB3VXwtXthG1s_3aPwCLcBGAs/s1600/phone-ring.png"/>
</a>
</div>
</div>
<div class="tel">
<p class="fone">0966.22.08.xx</p>
</div>
</div>

Nút gọi 02: Nút hotline bên góc bên phải màn hình, click vào là gọi trên di động

<style>
.hotline .phone{margin:0}
.hotline{background:rgba(236,236,236,0.69);width:auto;margin:0 auto;position:fixed;bottom:0;right:0;border-top-left-radius:10px;border-bottom-left-radius:10px}
.hotline-inner{width:235px;margin:0 auto;font-size:20px;padding:6px 0 5px 40px;color:#261511;font-weight:bold;background:url(https://lh4.googleusercontent.com/-KumUXhg-B5I/V_nMJ7PT1vI/AAAAAAAABdU/Y46iVX54rO8hUn2Nop3KIRf9kziqAAHKgCLcB/s1600/icon-phone.png) no-repeat 4px 5px;background-size:32px auto}
.hotline .text{font-size:14px;color:#261511;float:none}
</style>
<div class="hotline">
<div class="hotline-inner">
<span class="text">Hotline: </span><span class="phone">0966.22.08.xx</span>
</div>
</div>

Nút gọi 03: Dạng nút gọi khi rê chuột vào nó hiện số điện thoại ra, click vào là gọi trên di động

<style>
.hotline-fixed{position:fixed;left:15px;bottom:20px;top:initial!important;list-style:none;background-color:rgba(190,1,1,0.7);border-radius:100%;padding:13px 16px;margin-left:11px;color:#fff;z-index:99999;height:50px;width:50px}
.hotline-fixed .fa.fa-phone{font-size:26px}
.hotline-fixed a{font-size:18px;color:#fff;margin:0;position:relative}
.hotline-fixed a:hover{color:#fff}
.number{position:absolute;top:-10px;transition:all .5s;transform:rotateX(90deg);white-space:nowrap}
.hotline-fixed:hover .number{margin-left:24px;transform:rotateX(0deg);background:#be0101;padding:5px 15px;border-radius:0 10px 10px 0}
</style>
<div class="hotline-fixed">
<a href="tel:09662208xx" class="phone_span">
<i class="fa fa-phone"></i>
<span class="number">09662208xx</span>
</a>
</div>

Nút gọi 04: Dạng nút gọi tĩnh. bên góc trái website, click vào là gọi trên di động

<style>
.hotline-fixed{position:fixed;left:15px;bottom:10px;top:initial!important;list-style:none;background-color:#fff;padding:5px 12px 2px;z-index:99999;border-radius:20px;border:2px solid #d80027}
.hotline-fixed a{font-size:18px;color:#d80027;font-weight:600}
.phone_span img{margin-top:-9px;vertical-align:middle}.number{color:#060}
</style>
<div class='hotline-fixed'>
<a class='phone_span' href='tel:09662208xx'>
<img src='https://lh4.googleusercontent.com/-shKReUkB2xw/WO3TkIPeKlI/AAAAAAAACUI/6xGV8Oc_n1cozFUtjXNxZM2KcDAttoK7ACLcB/s1600/telephone.png'/><span class='number'>09662208xx</span></a>
</div>

Nút gọi 05: nút gọi nhấp nháy, không hiện số điện thoại, click vào là gọi trên di động

<style>
.phonering-alo-phone{position:fixed;visibility:hidden;background-color:transparent;width:200px;height:200px;cursor:pointer;z-index:200000!important;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;right:150px;top:30px;right:-40px;top:70px;display:block}
.phonering-alo-phone.phonering-alo-show{visibility:visible}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}
.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}
.phonering-alo-phone.phonering-alo-static{opacity:.6}
.phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover{opacity:1}
.phonering-alo-ph-circle{width:160px;height:160px;top:20px;left:20px;position:absolute;background-color:transparent;border-radius:100%!important;border:2px solid rgba(30,30,30,0.4);border:2px solid #bfebfc 9;opacity:.1;-webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle{-webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle{-webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle{border-color:#339b67;opacity:.5}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle{border-color:#dd0000;/*border-color:#baf5a7;*/opacity:.5}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle{border-color:#339b67;/*border-color:#bfebfc;*/opacity:.5}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle{border-color:#ccc;opacity:.5}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle{border-color:#339b67;opacity:.5}
.phonering-alo-ph-circle-fill{width:100px;height:100px;top:50px;left:50px;position:absolute;background-color:#dd0000;border-radius:100%!important;border:2px solid transparent;-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill{-webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill{-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;opacity:0!important}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);background-color:#00aff2 9;opacity:.75!important}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill{background-color:rgba(0,0,0,0.5);background-color:#dd0000 9;opacity:.75!important}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill{background-color:rgba(211,0,25,0.5);background-color:#339b67 9}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill{background-color:rgba(204,204,204,0.5);background-color:#ccc 9;opacity:.75!important}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:.75!important}
.phonering-alo-ph-img-circle{width:60px;height:60px;top:70px;left:70px;position:absolute;background:rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center;border-radius:100%!important;border:2px solid transparent;-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle{-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle{-webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle{background-color:#00aff2}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle{background-color:#dd0000;background-color:#dd0000 9}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle{background-color:#339b67;background-color:#339b67 9}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle{background-color:#ccc}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle{background-color:#339b67}
@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);-webkit-opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);-webkit-opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}}
@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}
@-webkit-keyframes phonering-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}
@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}
@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}
@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg);opacity:.1}}
@keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg);opacity:.1}}
@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}
@keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}
@-webkit-keyframes phonering-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg);transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg);transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg);transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg);transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}}
@keyframes phonering-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg);transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg);transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg);transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg);transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)}}
</style>
<div class="phonering-alo-phone phonering-alo-green phonering-alo-show hidden-xs visible-sm visible-md visible-lg" id="phonering-alo-phoneIcon" style="left: -40px; top: 75%; display: block;">
<div class="phonering-alo-ph-circle"></div>
<div class="phonering-alo-ph-circle-fill"></div>
<a href="tel:09662208xx"></a>
<div class="phonering-alo-ph-img-circle">
<a href="tel:09662208xx"></a>
<a href="tel:09662208xx" class="pps-btn-img " title="Liên hệ">
<img src="https://lh4.googleusercontent.com/-BinHhcSgMok/WAmE1G2dYrI/AAAAAAAAAkg/_93qcCEIHrAgtMlsGHiNa8xyAZyHJyrcACLcB/s1600/v8TniL3.png" alt="Liên hệ" width="50"/>
</a>
</div
</div>

Trên đây là tổng hợp 5 dạng nút gọi đẹp cho webblog, template blogspot đẹp. Các code đều là dạng css và HTML nên sẽ không ảnh hưởng tới tốc độ load trang của website.