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ữ

  1 năm trước, 341 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

  1 năm trước, 334 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

  1 năm trước, 440 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

  1 năm trước, 448 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

  2 năm trước, 286 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…