Nội dung

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

3 năm trước, Câu hỏi thường gặp, Code website hay dùng, 43 Lượt xem

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

  • Quản lý mẫu web phòng khám

    Quản lý mẫu web phòng khám

    2 tháng trước, 125 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

  • Quản lý mẫu web công ty

    Quản lý mẫu web công ty

    5 tháng trước, 191 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

Bình luận trên facebook netweb.vn

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)