Dòng thời gian timeline đẹp cho blogspot

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

Xin chào các bạn, trong bài viết này, mình chia sẻ cách tạo Thiết kế dòng thời gian timeline chuẩn responsive trên mobile chỉ sử dụng HTML và CSS.

Các bạn có thể xem demo của Dòng thời gian timeline đẹp cho blogspot bên dưới:

Các làm đơn giản các bạn chỉ việc copy đoạn code bên dưới dán vào vị trí muốn hiển thị là xong.

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}
html{scroll-behavior:smooth}
::selection{color:#fff;background:#00bcd4}
.content-wrapper{max-width:1080px;margin:50px auto;padding:15px 20px;position:relative;background:#00bcd4}
.content-wrapper .center-line{position:absolute;height:100%;width:4px;background:#fff;left:50%;top:20px;transform:translateX(-50%)}
.content-wrapper .row-x{display:flex}
.content-wrapper .row-x-1{justify-content:flex-start}
.content-wrapper .row-x-2{justify-content:flex-end}
.content-wrapper .row-x section{background:#fff;border-radius:5px;width:calc(50% - 40px);padding:20px;position:relative}
.content-wrapper .row-x section::before{position:absolute;content:"";height:15px;width:15px;background:#fff;top:28px;z-index:-1;transform:rotate(45deg)}
.row-x-1 section::before{right:-7px}
.row-x-2 section::before{left:-7px}
.row-x section .icon,.center-line .scroll-icon{position:absolute;background:#f2f2f2;height:40px;width:40px;text-align:center;line-height:40px;border-radius:50%;color:#00bcd4;font-size:17px;box-shadow:0 0 0 4px #fff,inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.05)}
.center-line .scroll-icon{bottom:0;left:50%;font-size:25px;transform:translateX(-50%)}
.row-x-1 section .icon{top:15px;right:-60px}
.row-x-2 section .icon{top:15px;left:-60px}
.row-x section .details,.row-x section .bottom{display:flex;align-items:center;justify-content:space-between}
.row-x section .details .title{font-size:22px;font-weight:600}
.row-x section p{margin:10px 0 17px 0}
.row-x section .bottom a{text-decoration:none;background:#00bcd4;color:#fff;padding:7px 15px;border-radius:5px;font-weight:400;transition:all 0.3s ease}
.row-x section .bottom a:hover{transform:scale(0.97)}
@media(max-width:790px){.content-wrapper .center-line{left:40px}.content-wrapper .row-x{margin:30px 0 3px 60px}.content-wrapper .row-x section{width:100%}.row-x-1 section::before{left:-7px}.row-x-1 section .icon{left:-60px}}
@media(max-width:440px){.content-wrapper .center-line,.row-x section::before,.row-x section .icon{display:none}.content-wrapper .row-x{margin:10px 0}}
</style>
<div class='content-wrapper'>
<div class='center-line'>
<a class='scroll-icon' href='#'><i class='fas fa-caret-up'/></a>
</div>
<div class='row-x row-x-1'>
<section>
<i class='icon fas fa-home'/>
<div class='details'>
<span class='title'>Blogspot bán hàng</span>
<span>01/3/2021</span>
</div>
<p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p>
<div class='bottom'>
<a href='#'>Xem thêm</a>
<i>- Giaodien.blog</i>
</div>
</section>
</div>
<div class='row-x row-x-2'>
<section>
<i class='icon fas fa-star'/>
<div class='details'>
<span class='title'>Blogspot landing page</span>
<span>02/3/2021</span>
</div>
<p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p>
<div class='bottom'>
<a href='#'>Xem thêm</a>
<i>- Giaodien.blog</i>
</div>
</section>
</div>
<div class='row-x row-x-1'>
<section>
<i class='icon fas fa-rocket'/>
<div class='details'>
<span class='title'>Blogspot doanh nghiệp</span>
<span>03/3/2021</span>
</div>
<p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p>
<div class='bottom'>
<a href='#'>Xem thêm</a>
<i>- Giaodien.blog</i>
</div>
</section>
</div>
<div class='row-x row-x-2'>
<section>
<i class='icon fas fa-globe'/>
<div class='details'>
<span class='title'>Blogspot tin tức, tạp chí</span>
<span>04/3/2021</span>
</div>
<p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p>
<div class='bottom'>
<a href='#'>Xem thêm</a>
<i>- Giaodien.blog</i>
</div>
</section>
</div>
<div class='row-x row-x-1'>
<section>
<i class='icon fas fa-paper-plane'/>
<div class='details'>
<span class='title'>Blogspot bất động sản</span>
<span>05/3/2021</span>
</div>
<p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p>
<div class='bottom'>
<a href='#'>Xem thêm</a>
<i>- Giaodien.blog</i>
</div>
</section>
</div>
<div class='row-x row-x-2'>
<section>
<i class='icon fas fa-map-marker-alt'/>
<div class='details'>
<span class='title'>Blogspot công ty</span>
<span>06/3/2021</span>
</div>
<p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p>
<div class='bottom'>
<a href='#'>Xem thêm</a>
<i>- Giaodien.blog</i>
</div>
</section>
</div>
</div>

Bài viết: Dòng thời gian timeline đẹp cho blogspot được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog Timeline

Mẫu giao diện blogspot bán hàng đẹp hiện đại tối ưu seo

Dòng thời gian timeline đẹp cho blogspot

Nhận xét

Đăng nhận xét

Mẫu tiếp thị liên kết

Mẫu giao diện blogger bán hàng đẹp chuyên nghiệp seo