Thêm thông tin nhân viên cuộn theo trang với wordpress

Code thêm hình nhân viên cuộn theo trang áp dụng cho sale bất động sản và ô tô xe máy cực đẹp.

Code có cuộn theo trang nên khá đẹp bắt mắt, các bạn làm theo các bước theo trình tự sẽ ok ạ! xin cảm ơn

Bước 1:

Thêm đoạn code trên vào phần header hoặc phần body của trang cần load.

 

	
<div class="sticky_avt">
		<div style="height:362px;display:block"><div class="sticky-inner" id="sticky-avt" style="position: fixed; top: 200px; width: 200px; margin-top: 0px;">
			<img class="center-block img-responsive" src="https://i.imgur.com/o23GneV.jpg">
			<a class="call-number" href="#"><i class="fa fa-mobile" aria-hidden="true"></i> 0908 526 727<span> Kiều Tiên</span></a>
			
		</div></div>
</div>	

Bước 2:

Upload hình lên website: https://imgur.com/upload trang web up hình khá lớn

Bước 3:

Thêm css

.sticky_avt .call-number, .sticky-avt-mb .call-number {
    display: block;
    background: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
}

@media only screen and (max-width: 1000px){
	.sticky_avt {
    position: absolute;
    top: 0;
    width: 200px;
    right: 0;
    padding: 20px;
    border-radius: 20px;
    z-index: 3;
    display: none;
}
}

.sticky_avt {
    position: absolute;
    top: 0;
    width: 200px;
    right: 0;
    padding: 20px;
    border-radius: 20px;
    z-index: 3;
}

.sticky_avt .sticky-inner {
    position: absolute;
    top: 0;
    width: 200px;
    right: 0;
    background: #0e4d8b;
    padding: 20px 10px;
    border-radius: 20px;
    z-index: 3;
}
.sticky_avt img {
    width: 80%;
    margin: auto auto 20px;
    display: block;
    border-radius: 15px;
}
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.sticky_avt .call-number, .sticky-avt-mb .call-number {
    display: block;
    background: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600;
}



#frontend_customizer_button {
    position: absolute;
    right: -43px;
    top: 50%;
    margin: -20px 0 0 0;
    width: 43px;
    height: 40px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 22px;
    line-height: 40px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    display: none !important;
}

.select2 {
    width: 100% !important;
    margin-top: -20px !important;
}

Demo: volkswagenmiennam.net

Chúc các bạn thành công!

Bài viết mới cập nhập

• 

  Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

  8 tháng trước, 199 Lượt xem

  Xin chào các bạn! hôm nay netweb sẽ hướng dẫn các bạn quản lý web bán hàng 2 ngôn ngữ! Hướng dẫn tạo user thành…

• 

  Hướng dẫn tạo user thành viên và quản lý đơn hàng

  8 tháng trước, 204 Lượt xem

  Trong bài viết này, netweb sẽ hướng dẫn các bạn tạo user thành viên và đặt hàng quản lý đơn hàng trong WooCommerce Thêm mới…

• 

  Hướng dẫn Plugin floating contact

  10 tháng trước, 341 Lượt xem

  Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

• 

  ánh xạ OneDrive for Business dưới dạng Ổ đĩa mạng

  11 tháng trước, 221 Lượt xem

  Hôm nay netweb sẽ hướng dẫn các bạn ánh xạ ổ đĩa mạng để làm việc online dùng như ổ cứng bình thường qua OneDrive…

• 

  Backup Yandex Mail

  12 tháng trước, 229 Lượt xem

  Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…