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>Hasilnya seperti dibawah ini:
2019
Mulai ngeblog dengan semangat 45.
2020
Belajar SEO dan mulai dapat trafik organik.
2021
Dapat job pertama dari brand lokal.
2022
Monetize blog dan nambah penghasilan!
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.
*kode ini juga bisa untuk wordpress yaa…
[…] Kode HTML Membuat Timeline di Blogger […]