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

2 năm trước, Câu hỏi thường gặp, Code website hay dùng, 7 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ình luận trên facebook netweb.vn