Kode HTML Membuat Timeline di Blogger

Saya harap Anda menikmati membaca posting blog ini. Jika ada memerlukan jasa Web Design & Dev, Artikel Review, Content Placement, hubungi saya.

Penulis

Yandi Novia

Pendiri

Perspektif Space

Terbit

April 21, 2025

Pengen tampilan blog kamu makin kece dengan elemen visual yang eye-catching? Coba deh tambahkan timeline vertikal di Blogger. Cocok buat kamu yang ingin menampilkan perjalanan hidup, portofolio, milestone proyek, atau dokumentasi kegiatan. Kamu cukup copy paste kode html + css yang telah kami buat.

Kenapa Timeline Ini Keren?

Desainnya simpel tapi elegan.
Responsif (otomatis menyesuaikan ukuran layar).
Bisa ditaruh di post atau widget Blogger.
Gak berat, karena gak pakai JavaScript.

Langkah-Langkah Membuat Timeline di Blogger:

Masuk ke akun Blogger kamu.
Buka “Post Baru” (atau bisa juga ke Layout > Tambahkan Gadget HTML/JavaScript kalau mau taruh di sidebar).
Ubah editor ke mode HTML.
Copy dan paste kode HTML + CSS di bawah ini.

<style>
.timeline-container {
  max-width: 700px;
  margin: 50px auto;
  padding: 0 20px;
  position: relative;
}

.timeline-container::before {
  content: ”;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ddd;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 30px;
  box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}

.timeline-item::before {
  content: ”;
  position: absolute;
  top: 20px;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 50%;
  z-index: 1;
}

.timeline-item:nth-child(odd)::before {
  right: -10px;
}

.timeline-item:nth-child(even)::before {
  left: -10px;
}

.timeline-content {
  background: #f9f9f9;
  padding: 15px 20px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: fadeInUp 0.6s ease both;
}

.timeline-content h3 {
  margin-top: 0;
  color: #333;
}

.timeline-content p {
  margin: 5px 0 0;
  color: #666;
  font-size: 15px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  .timeline-container::before {
    left: 8px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 40px;
    padding-right: 20px;
    text-align: left !important;
  }

  .timeline-item::before {
    left: 0 !important;
  }
}
</style>

<div class=”timeline-container”>
  <div class=”timeline-item”>
    <div class=”timeline-content”>
      <h3>2019</h3>
      <p>Mulai ngeblog dengan semangat 45.</p>
    </div>
  </div>
  <div class=”timeline-item”>
    <div class=”timeline-content”>
      <h3>2020</h3>
      <p>Belajar SEO dan mulai dapat trafik organik.</p>
    </div>
  </div>
  <div class=”timeline-item”>
    <div class=”timeline-content”>
      <h3>2021</h3>
      <p>Dapat job pertama dari brand lokal.</p>
    </div>
  </div>
  <div class=”timeline-item”>
    <div class=”timeline-content”>
      <h3>2022</h3>
      <p>Monetize blog dan nambah penghasilan!</p>
    </div>
  </div>
</div>

<style>
.timeline-container {
  max-width: 700px;
  margin: 50px auto;
  padding: 0 20px;
  position: relative;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ddd;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 30px;
  box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 20px;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 50%;
  z-index: 1;
}

.timeline-item:nth-child(odd)::before {
  right: -10px;
}

.timeline-item:nth-child(even)::before {
  left: -10px;
}

.timeline-content {
  background: #f9f9f9;
  padding: 15px 20px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: fadeInUp 0.6s ease both;
}

.timeline-content h3 {
  margin-top: 0;
  color: #333;
}

.timeline-content p {
  margin: 5px 0 0;
  color: #666;
  font-size: 15px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  .timeline-container::before {
    left: 8px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 40px;
    padding-right: 20px;
    text-align: left !important;
  }

  .timeline-item::before {
    left: 0 !important;
  }
}
</style>

<div class="timeline-container">
  <div class="timeline-item">
    <div class="timeline-content">
      <h3>2019</h3>
      <p>Mulai ngeblog dengan semangat 45.</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-content">
      <h3>2020</h3>
      <p>Belajar SEO dan mulai dapat trafik organik.</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-content">
      <h3>2021</h3>
      <p>Dapat job pertama dari brand lokal.</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-content">
      <h3>2022</h3>
      <p>Monetize blog dan nambah penghasilan!</p>
    </div>
  </div>
</div>

Tips Tambahan:

Mau ganti warna titik atau garisnya? Ubah kode warna di bagian background: #4CAF50;.
Mau nambah event? Tinggal copy salah satu <div class="timeline-item">...</div> dan ganti isinya.
Bisa juga digabung dengan cerita personal biar makin engaging.

Demo di Blogger

*kode ini juga bisa untuk wordpress yaa…