Hướng dẫn thêm Dòng thời gian dọc cho Blogger

Xin chào tất cả mọi người, chào mừng bạn đến với Vozshare.com trong bài đăng này, mình sẽ chỉ cho các bạn Cách Thêm Dòng thời gian Dọc vào Trang web Blogger của Bạn bằng cách sử dụng Html Và CSS .

Xem Demo

Làm theo các bước sau Cách thêm Dòng thời gian dọc trong Trang web Blogger

Thêm Phông chữ của Google vào Trang web Blogger

Đi tới Trang tổng quan Blogger
Đi tới phần Chủ đề / Mẫu
Nhấp vào Chỉnh sửa HTML
Bây giờ Tìm kiếm~~</head>~~Nhãn
Bây giờ sao chép mã được cung cấp bên dưới và dán nó lên trên~~</head>~~nhãn

<link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Pacifico&amp;family=Roboto&amp;display=swap"
      rel="stylesheet"
    />

Thêm mã Html dòng thời gian dọc trong bài đăng trên Blogger

Đi tới Trang tổng quan Blogger
Đi tới Phần bài đăng để thêm Dòng thời gian dọc trong bài đăng của blogger
Thêm Bài đăng Mới và sao chép mã được cung cấp bên dưới.
Dán mã đã sao chép ở chế độ Html View not composer.
Và xuất bản bài đăng của bạn.

<div class="timeline-container">
      <div class="event">
        <div class="event-date">Nov 02</div>
        <h2>The Planning Session</h2>
        <div class="timeline-content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
            dolore iste similique mollitia quidem vitae cupiditate? Sint sunt
            vero possimus.
          </p>
        </div>
      </div>

      <div class="event">
        <div class="event-date">Nov 06</div>
        <h2>Designing</h2>
        <div class="timeline-content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
            dolore iste similique mollitia quidem vitae cupiditate? Sint sunt
            vero possimus.
          </p>
        </div>
      </div>

      <div class="event">
        <div class="event-date">Nov 15</div>
        <h2>Testing</h2>
        <div class="timeline-content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
            dolore iste similique mollitia quidem vitae cupiditate? Sint sunt
            vero possimus.
          </p>
        </div>
      </div>

      <div class="event">
        <div class="event-date">Nov 17</div>
        <h2>Deploying The Website</h2>
        <div class="timeline-content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
            dolore iste similique mollitia quidem vitae cupiditate? Sint sunt
            vero possimus.
          </p>
        </div>
      </div>
    </div>

Thêm mã Css dòng thời gian dọc trong bài đăng trên Blogger

Sau đó, đi tới Chủ đề Blogger của bạn và nhấp vào Tùy chỉnh để truy cập Trình thiết kế chủ đề Blogger.
Sau đó chọn Nâng cao> Thêm CSS .
Sao chép mã sau và dán và nhấp vào Áp dụng cho Blog.

.timeline-container {
  font-family: "Roboto", sans-serif;
  max-width: 500px;
  margin: 0 auto;
  border-left: 4px solid #222;
  padding-left: 25px;
}

.timeline-container h2 {
  font-family: "Pacifico", cursive;
  font-size: 32px;
  margin: 0;
  color: #00272b;
  border-bottom: 1px solid #eee;
}

.timeline-container .event {
  box-shadow: 0px 3px 6px -2px rgba(0, 0, 0, 0.2);
  padding: 32px;
  margin: 48px 0;
  line-height: 2;
  cursor: pointer;
  position: relative;
  transition: all 500ms;
}

.timeline-container .event::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #000;
  position: absolute;
  left: -36px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  transition: all 500ms;
}

.timeline-container .event:hover {
  box-shadow: 1px 6px 16px -1px rgba(0, 0, 0, 0.1);
}

.timeline-container .event:hover::before {
  background: red;
}

.timeline-container .event .event-date {
  position: absolute;
  left: -95px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
}

@media (max-width: 700px) {
  .timeline-container {
    max-width: 100%;
    margin-left: 8px;
  }

  .timeline-container .event .event-date {
    position: static;
    margin-bottom: -20px;
  }
}

Phần kết luận-

Bây giờ bạn có thể thấy thông báo cập nhật thành công bây giờ hãy quay lại bài đăng của chúng tôi và làm mới trang của chúng tôi và bây giờ chúng tôi có thể thấy rằng phông chữ chính xác đang được hiển thị và mọi thứ đều hoạt động bình thường và dòng thời gian này cũng phản hồi, vì vậy nếu chúng tôi xem nó trong thiết bị di động, đây là cách chúng ta có thể thấy ngày tháng đã tăng lên. Nếu bạn có bất kỳ nghi ngờ nào, bạn có thể hỏi trong phần bình luận bên dưới.

Chúc bạn viết blog vui vẻ …

Bài viết thuộc www.vozshare.com

Blogger, Code