Các bạn có thể xem demo của Dòng thời gian timeline đẹp cho blogspot bên dưới:
<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>