Timeline Sejarah

• Diposting oleh : TKIT AL-MUJAHIDIN
• pada tanggal : Maret 25, 2025

Cara Menggunakan Timeline Historis

1. Buka Blogger dan buat postingan baru
2. Klik tombol "</>" atau pilih tab "HTML" di editor
3. Copy lalu Paste kode HTML berikut ini, dalam postingan

<ul class="timelinenew">
        <li style="--accent-color:#3B0764">
            <div class="date">2005</div>
            <div class="title">Pendirian Sekolah</div>
            <div class="descr">TKIT Al-Mujahidin resmi didirikan oleh sekelompok pendidik dan orang tua yang peduli terhadap pendidikan Islam bagi anak usia dini di Cirebon.</div>
        </li>
        <li style="--accent-color:#F7D456">
            <div class="date">2008</div>
            <div class="title">Penambahan Ruang Kelas</div>
            <div class="descr">Meningkatnya jumlah siswa mendorong sekolah untuk menambah ruang kelas baru agar lebih nyaman dalam proses belajar mengajar.</div>
        </li>
        <li style="--accent-color:#E24A68">
            <div class="date">2012</div>
            <div class="title">Pendirian Kelas Peminatan</div>
            <div class="descr">Sekolah mulai membuka kelas peminatan seperti Tahfidz, Seni, Literasi Numerasi, dan Bahasa Inggris untuk mengembangkan potensi siswa.</div>
        </li>
        <li style="--accent-color:#1B5F8C">
            <div class="date">2017</div>
            <div class="title">Penghargaan Sekolah Berprestasi</div>
            <div class="descr">TKIT Al-Mujahidin mendapatkan penghargaan sebagai sekolah berbasis Islam terbaik di kota Cirebon.</div>
        </li>
        <li style="--accent-color:#4CADAD">
            <div class="date">2023</div>
            <div class="title">Peningkatan Fasilitas</div>
            <div class="descr">Sekolah menambahkan fasilitas seperti AC di setiap ruang kelas dan memperluas area bermain untuk kenyamanan siswa.</div>
        </li>
        <li style="--accent-color:#FF5733">
            <div class="date">2025</div>
            <div class="title">Inovasi Digital dalam Pembelajaran</div>
            <div class="descr">TKIT Al-Mujahidin mulai mengintegrasikan teknologi digital dalam pembelajaran dan administrasi sekolah.</div>
        </li>
    </ul>
       

4. Anda bisa:
   • Mengganti teks dengan konten Anda sendiri dengan mengubah pada teks berwarna putih saja
   • Mengubah warna dengan mengganti kode hex (#3498db)
5. Klik "Publikasi" untuk melihat hasilnya

Langkah Selanjutnya

Letakkan Kode berikut pada Custom Css panel tata letak

Cara Memasukkan Kode di Custom CSS

1. Ketuk ikon tiga garis di pojok kiri atas.
2. Masuk ke menu Tata Letak.
3. Pada bagian Eduzaid Theme v.30, pilih widget Custom CSS.
4. Copy lalu Paste kode CSS di dalamnya
5. jika terdapat code css lain disana maka kode css ini, letakkan dibawah kode tersebut

CSS Code

.timelinenew{--col-gap:2rem;--row-gap:2rem;--line-w:0.25rem;display:grid;grid-template-columns:var(--line-w)1fr;grid-auto-columns:max-content;column-gap:var(--col-gap);list-style:none;width:min(60rem,100%);margin-inline:auto;}.timelinenew::before{content:"";grid-column:1;grid-row:1/span 20;background:var(--ds-primary);border-radius:calc(var(--line-w)/2);}.timelinenew li:not(:last-child){margin-bottom:var(--row-gap);}.timelinenew li{grid-column:2;--inlineP:1.5rem;margin-inline:var(--inlineP);grid-row:span 2;display:grid;grid-template-rows:min-content min-content min-content;}.timelinenew li .date{--dateH:3rem;height:var(--dateH);margin-inline:calc(var(--inlineP)*-1);text-align:center;background-color:var(--accent-color);color:white;font-size:1.25rem;font-weight:700;display:grid;place-content:center;position:relative;border-radius:calc(var(--dateH)/2)0 0 calc(var(--dateH)/2);box-shadow:inset 3px 3px 6px rgba(255,255,255,0.4),inset -3px -3px 6px rgba(0,0,0,0.4);text-shadow:1px 1px 2px rgba(0,0,0,0.4);}.timelinenew li .date::before{content:"";width:var(--inlineP);aspect-ratio:1;background:var(--accent-color);background-image:linear-gradient(rgba(0,0,0,0.2)100%,transparent);position:absolute;top:100%;clip-path:polygon(0 0,100% 0,0 100%);right:0;}.timelinenew li .date::after{content:"";position:absolute;width:2rem;aspect-ratio:1;background:var(--ds-light);border:0.3rem solid var(--accent-color);border-radius:50%;top:50%;transform:translate(50%,-50%);right:calc(100% + var(--col-gap) + var(--line-w)/2);box-shadow:inset 3px 3px 6px rgba(255,255,255,0.4),inset -3px -3px 6px rgba(0,0,0,0.4);}.timelinenew li .title,.timelinenew li .descr{background:var(--ds-light);position:relative;font-weight:bold;padding-inline:0.5rem;}.timelinenew li .title{overflow:hidden;padding-block-start:1.5rem;padding-block-end:1rem;font-weight:500;}.timelinenew li .descr{padding-block-end:1.5rem;font-weight:300;border-radius:0 0 10% 10%;}.timelinenew li .title::before,.timelinenew li .descr::before{content:"";position:absolute;width:90%;height:0.5rem;background:rgba(0,0,0,0.5);left:50%;border-radius:50%;filter:blur(4px);transform:translate(-50%,50%);}.timelinenew li .title::before{bottom:calc(100% + 0.125rem);}.timelinenew li .descr::before{z-index:-1;bottom:0.25rem;}@media (min-width:40rem){.timelinenew{grid-template-columns:1fr var(--line-w)1fr;}.timelinenew::before{grid-column:2;}.timelinenew li:nth-child(odd){grid-column:1;}.timelinenew li:nth-child(even){grid-column:3;}.timelinenew li:nth-child(odd) .date::after{transform:translate(-50%,-50%);left:calc(100% + var(--col-gap) + var(--line-w)/2);}}

6. Simpan perubahan, lalu periksa hasilnya.