Pemberitahuan Penting

Mohon baca informasi berikut sebelum melanjutkan.

Halo Pengguna OMNIDATA,

Kami ingin menyampaikan beberapa informasi penting terkait penggunaan website ini agar tidak terjadi kesalahpahaman di kemudian hari.

  • 1. Status Website & Hak Cipta
    Website ini bukan situs resmi dan tidak memiliki hubungan langsung dengan perusahaan, studio, atau pihak mana pun yang memegang hak cipta atas konten yang muncul di sini. Karena sifatnya non-official, segala bentuk pelanggaran hak cipta atau masalah hukum yang timbul bukan menjadi tanggung jawab kami.
  • 2. Non-Komersial
    Website ini dibuat tanpa tujuan komersial. Kami tidak menjual layanan, tidak menarik biaya, dan tidak memaksa siapa pun untuk berdonasi. Dukungan donasi sepenuhnya bersifat sukarela.
  • 3. Dukungan Platform Resmi
    Kami sangat menyarankan seluruh pengguna untuk tetap mengutamakan platform yang legal dan resmi demi keamanan serta mendukung keberlangsungan industri kreatif.

Terima kasih telah menggunakan layanan kami. Semoga informasi ini membantu Anda memahami posisi serta tujuan website ini dengan lebih jelas.

Linux Windows Android WordPress Blogger Code
Beranda
Blogger
CSS

Buat Halaman Info Update Stylish di Website Kamu Hanya dengan CSS

Ryusei Kaito

Ingin membuat blog atau website kamu terlihat lebih profesional dan menarik? Dengan menerapkan halaman notifikasi pembaruan menggunakan CSS, kamu bisa menampilkan riwayat update dalam bentuk timeline modern yang memudahkan pengunjung melihat perubahan terbaru. Solusi sederhana ini sangat efektif untuk meningkatkan kesan profesional dan mempertahankan pengunjung di situsmu.

Dalam artikel ini, aku akan membagikan panduan lengkap langkah demi langkah untuk membuat halaman pemberitahuan pembaruan di blog atau website hanya dalam beberapa tahap sederhana. Kamu akan mendapatkan tampilan yang menarik, mudah dikustomisasi, ramah pengguna, dan SEO-friendly.

Ayo langsung praktikkan dan buat tampilan websitemu jadi lebih modern dan interaktif!

CSS
Info Update Stylish di Website

Panduan Membuat Halaman Notifikasi Pembaruan dengan CSS untuk Blog/Website

Ingin membuat blog atau website kamu terlihat lebih profesional dan berkesan? Dengan menggunakan halaman pemberitahuan pembaruan berbasis CSS, kamu bisa menampilkan riwayat update dalam bentuk timeline modern yang memudahkan pengunjung mengikuti setiap perubahan terbaru. Solusi ini sederhana namun sangat efektif untuk meningkatkan pengalaman pengguna dan mempertahankan pengunjung di situsmu.

Dalam artikel ini, kamu akan belajar langkah-langkah lengkap untuk membuat halaman notifikasi pembaruan di blog atau website hanya dalam beberapa tahap mudah. Kamu akan mendapatkan desain yang menarik, fleksibel untuk dikustomisasi, responsif di berbagai perangkat, serta ramah SEO.

Yuk, mulai praktik sekarang dan buat tampilan websitemu jadi lebih modern serta interaktif!

LIHAT DEMO

Panduan Membuat Halaman Notifikasi Pembaruan dengan CSS untuk Blog atau Website

  1. Masuk ke halaman Dashboard Blogger kamu.
  2. Buat halaman baru, lalu beri judul “Pemberitahuan Pembaruan” atau judul lain sesuai keinginanmu.
  3. Salin seluruh kode di bawah ini, kemudian tempelkan ke dalam editor halaman yang telah kamu buat.
  4. <div id="timeline">
<div class="timeline-item">
<div class="timeline-icon">
</div>
<div class="timeline-content">
<h2><i class="fal fa-calendar-alt"></i> 15/02/2022</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>          
</div>
</div>

<div class="timeline-item">
<div class="timeline-icon">
</div>
<div class="timeline-content right">
<h2><i class="fal fa-calendar-alt"></i> 27/03/2023</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</div>
</div>

<div class="timeline-item">
<div class="timeline-icon">
</div>
<div class="timeline-content">
<h2><i class="fal fa-calendar-alt"></i> 01/04/2023</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</div>
</div>
      
<div class="timeline-item">
<div class="timeline-icon">
</div>
<div class="timeline-content right">
<h2><i class="fal fa-calendar-alt"></i> 19/06/2024</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</div>
</div>
      
<div class="timeline-item">
<div class="timeline-icon">
</div>
<div class="timeline-content">
<h2><i class="fal fa-calendar-alt"></i> 22/09/2024</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</div>
</div>
  
    <div class="timeline-item">
<div class="timeline-icon">
</div>
<div class="timeline-content right">
<h2><i class="fal fa-calendar-alt"></i> 14/01/2025</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</div>
</div>
  
  
  <div class="timeline-item">
<div class="timeline-icon">
</div>
<div class="timeline-content">
<h2><i class="fal fa-calendar-alt"></i> 30/02/2025</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</div>
</div>
  
<div class="timeline-item">
<div class="timeline-icon">
</div>
<div class="timeline-content right">
<h2><i class="fal fa-calendar-alt"></i> 29/03/2025</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</div>
</div>
</div>
<style>
  <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE9DkpGC2aPuGAfVvyQC8KwW0aoU7Lt8cOLNbdr8Uj21SyU5tfPDMUqsVr1aD9Rlaipvayk10IT1b5xCRXYDHrZfUgiDlzfX13QeVHyIpcqRQANuu1wvOxpl7GGGsK5W2iSsvKtkACRiQrAcqsBUczZibyfuP1iKxILSp6pg0pX3lSoIhbDGVwDn__pjM/s1563/logo-social-truongdevs.com.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="1563" data-original-width="1563" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE9DkpGC2aPuGAfVvyQC8KwW0aoU7Lt8cOLNbdr8Uj21SyU5tfPDMUqsVr1aD9Rlaipvayk10IT1b5xCRXYDHrZfUgiDlzfX13QeVHyIpcqRQANuu1wvOxpl7GGGsK5W2iSsvKtkACRiQrAcqsBUczZibyfuP1iKxILSp6pg0pX3lSoIhbDGVwDn__pjM/s320/logo-social-truongdevs.com.png"/></a></div>
  a {color: #fff;text-decoration: none;}
.post-body a:hover{text-decoration:none!important}#header-wrapper,#sidebar-wrapper,#footer-content-wrap,#footer-wrapper,#back-top,.note-noti{display:none!important}#backhome{text-align:center;margin:50px auto 20px}.is-single #main-wrapper{width:100%}
#timeline .timeline-item:after,#timeline .timeline-item:before{content:'';display:block;width:100%;clear:both}
.container-time{max-width:1100px;margin:0 auto}
.project-name{text-align:center;padding:10px 0}
#timeline{width:100%;margin:30px auto;position:relative;padding:0 10px;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;transition:all .4s ease}
#timeline:before{content:"";width:3px;height:100%;background:#2e96ff;left:50%;top:0;position:absolute}
#timeline .timeline-item{margin-bottom:50px;position:relative}
#timeline .timeline-item .timeline-icon{background:#fff;width:50px;height:50px;position:absolute;top:0;left:50%;overflow:hidden;margin-left:-23px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;border:2px solid #d3d9e2}
#timeline .timeline-item .timeline-icon{position:relative;top:50px;color:#000;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE9DkpGC2aPuGAfVvyQC8KwW0aoU7Lt8cOLNbdr8Uj21SyU5tfPDMUqsVr1aD9Rlaipvayk10IT1b5xCRXYDHrZfUgiDlzfX13QeVHyIpcqRQANuu1wvOxpl7GGGsK5W2iSsvKtkACRiQrAcqsBUczZibyfuP1iKxILSp6pg0pX3lSoIhbDGVwDn__pjM/s1563/logo-social-truongdevs.com.png);background-size:30px;background-repeat:no-repeat;background-position:center center}
#timeline .timeline-item .timeline-content{width:45%;background:#f6f7f8;padding:20px;-webkit-box-shadow:0 3px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 3px 0 rgba(0,0,0,0.1);-ms-box-shadow:0 3px 0 rgba(0,0,0,0.1);box-shadow:0 3px 0 rgba(0,0,0,0.1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}
#timeline .timeline-item .timeline-content h2{padding:15px;background:#1976d2;color:#fff;margin:-20px -20px 0;font-weight:900;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
#timeline .timeline-item .timeline-content:before{content:'';position:absolute;left:45%;top:70px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #1976d2}
#timeline .timeline-item .timeline-content.right{float:right}
#timeline .timeline-item .timeline-content.right:before{content:'';right:45%;left:inherit;border-left:0;border-right:7px solid #0bf}
@media screen and (max-width: 768px) {
#timeline{margin:30px;padding:0;width:90%}
#timeline:before{left:0}
#timeline .timeline-item .timeline-content{width:90%;float:right}
#timeline .timeline-item .timeline-content:before,#timeline .timeline-item .timeline-content.right:before{left:10%;margin-left:-6px;border-left:0;border-right:7px solid #0bf}
#timeline .timeline-item .timeline-icon{left:0}
}
</style>
<script type='text/javascript'>//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css");
//]]></script>
  5. Setelah itu, cukup publikasikan halaman tersebut, dan kamu akan langsung melihat hasilnya — tampilan timeline yang indah dan profesional.

Kesimpulan

Hanya dengan beberapa langkah sederhana, kamu sudah bisa membuat halaman notifikasi pembaruan berbasis CSS untuk blog atau website dengan tampilan timeline yang menarik dan elegan. Desain ini tidak hanya menampilkan riwayat pembaruan secara jelas, tetapi juga memberikan kesan modern yang membuat pengunjung betah berlama-lama di situsmu.

Segera terapkan cara ini untuk mempercantik tampilan blog, sekaligus meningkatkan SEO dan kepercayaan pengunjung. Jika kamu menemui kendala selama proses pembuatan, jangan ragu untuk meninggalkan komentar agar bisa didiskusikan dan dibantu oleh komunitas lainnya.

About the author

Ryusei Kaito
Hallo Saya NakamaChi

Posting Komentar