Cara Membuat Animasi Cuaca di Blogspot dengan HTML, CSS, dan JavaScript

 

Sourcecode disini ya

Bagi kamu yang ingin belajar web design, membuat animasi sederhana bisa jadi latihan yang seru. Salah satunya adalah animasi cuaca. Dengan memadukan HTML, CSS, dan JavaScript, kita bisa membuat simulasi perubahan suasana langit dari cerah, mendung, hujan, hingga malam berbintang.

🛠️ Langkah-Langkah Membuat Animasi Cuaca

1. Membuat Struktur Dasar dengan HTML

Pertama, kita siapkan elemen-elemen yang dibutuhkan:

• Langit sebagai background utama.

• Matahari untuk suasana cerah.

• Awan dalam beberapa layer agar terlihat bergerak.

• Hujan berupa butiran air yang turun ke bawah.

• Bintang dan Bulan untuk suasana malam.

2. Memberikan Tampilan dengan CSS

Setelah elemen dibuat, kita desain tampilannya. CSS digunakan untuk:

• Memberi warna langit (biru, abu-abu, jingga, hingga gelap).

• Membuat animasi awan bergerak dengan @keyframes.

• Mengatur efek hujan agar turun dari atas ke bawah.

• Membuat transisi matahari terbenam.

• Menampilkan bintang berkelap-kelip di malam hari.

3. Mengatur Transisi dengan JavaScript

Agar animasi tidak berjalan bersamaan, kita atur waktunya menggunakan JavaScript. Misalnya:

• 0–10 detik: langit cerah + matahari + awan putih.

• 10–15 detik: langit mendung + awan semakin gelap.

• 15–20 detik: hujan turun.

• 20–25 detik: hujan berhenti, matahari terbenam.

• 25 detik ke atas: langit malam + bintang + bulan sabit.

4. Menguji Animasi di Browser

Setelah semua elemen dan transisi diatur, jalankan di browser. Animasi cuaca akan bergerak otomatis sesuai urutan waktu.

🎯 Hasil yang Didapat

Animasi ini menampilkan perjalanan waktu yang indah:

• Cerah → Mendung → Hujan → Matahari terbenam → Malam berbintang.

Dengan efek transisi yang halus, blog atau website kamu akan terlihat lebih hidup dan menarik.

Cara membuat Jam Analog Digital dengan HTML, CSS, dan JavaScript

 

Sourcecode ada di sini

Jam Analog Digital dengan HTML, CSS, dan JavaScript

Pendahuluan

Jam tidak hanya berfungsi sebagai penunjuk waktu, tetapi juga bisa menjadi elemen menarik di sebuah website. Dengan memanfaatkan HTML, CSS, dan JavaScript, kita bisa membuat jam analog yang tampil elegan, interaktif, dan real-time sesuai waktu komputer pengguna.

Jam analog digital ini cocok digunakan untuk:

• Website edukasi atau pembelajaran.

• Website personal sebagai elemen dekorasi.

• Proyek latihan pemrograman front-end.

Fitur Jam Analog

Jam analog ini memiliki beberapa fitur utama:

1. Real-Time Update
   Jarum jam, menit, dan detik bergerak otomatis mengikuti waktu asli.

2. Desain Elegan
   Lingkaran jam dengan background gelap, angka 1–12 tersusun rapi, dan jarum berwarna berbeda (jam, menit, detik).

3. Label Khusus
   Terdapat label personalisasi “Yp Best” di bagian atas jam, yang bisa diganti sesuai nama atau brand Anda.

4. Full Responsif
   Jam tetap proporsional meskipun dibuka di berbagai ukuran layar.

Manfaat Belajar Membuat Jam Analog

• Meningkatkan Skill HTML & CSS: Belajar membuat layout lingkaran, posisi elemen, dan tipografi.

• Memahami Transformasi CSS: Teknik transform: rotate digunakan untuk menggerakkan jarum.

• Menguasai Logika JavaScript: Menghubungkan waktu real dengan animasi visual.

• Kreativitas Tanpa Batas: Label, warna, atau ikon pada jarum bisa diganti sesuai selera.

Cara Membuat Simulasi Traffic Light dengan HTML dan CSS

 Lampu lalu lintas (traffic light) adalah salah satu contoh animasi sederhana yang bisa dibuat dengan HTML dan CSS. Dengan kombinasi @keyframes dan animation, kita bisa membuat lampu merah, kuning, dan hijau menyala bergantian secara otomatis.

Pada artikel ini, kita akan membuat simulasi traffic light yang terdiri dari:

• Kotak lampu berisi 3 lingkaran (merah, kuning, hijau).

• Animasi nyala bergantian tiap 5 detik.

• Tambahan tiang dan alas agar mirip lampu lalu lintas asli

1. Struktur HTML

Pertama, buat file baru dengan nama traffic_light.html



2. Desain dengan CSS

Selanjutnya, buat file style.css untuk mengatur tampilan dan animasi.

3. Hasil Akhir

Jika kamu buka file traffic_light.html di browser, maka lampu akan:

1. Menyala merah selama 5 detik.

2. Menyala kuning selama 5 detik.

3. Menyala hijau selama 5 detik.

4. Kembali lagi ke merah, dan seterusnya.

Ditambah dengan tiang dan alas, tampilannya akan menyerupai traffic light asli. 🚦

4. Pengembangan Lanjutan

Beberapa ide pengembangan:

• Tambahkan JavaScript untuk mengatur waktu lebih fleksibel (misalnya merah 10 detik, hijau 7 detik, kuning 3 detik).

• Buat lebih interaktif dengan tombol Start dan Stop.

• Tambahkan suara atau teks "STOP", "READY", "GO".
  

Sourcecode download di sini

Cara Membuat Aplikasi Sederhana Menggunaan HTML dan CSS

Kamu lagi cari tugas latihan atau Ingin belajar coding? Membuat aplikasi sederhana dengan HTML dan CSS adalah langkah awal yang mudah dan seru. Kali ini kita akan membuat aplikasi kalkulator sederhana hanya dengan dua komponen utama: HTML untuk struktur, dan CSS untuk desain.

Sourcecode klik disni

Download Aplikasi

 Compiler C++

1. Dev C++ Download

C++, Aplikasi Diskon

  Assalam...wr.wb.

Pagi ini saya akan berbagi bagai mana cara membuat Aplikasi Sederhana Hitung Diskon. ini merupakan dasar dari aplikasi2 kasir.

source code :

Hasil compilernya

Kalau bisa di catat ulang ya source codenya biar kamu paham strukturnya, tapi kalau tetep ngeyel pengen copy paste silahkan  download Disini cuman ada iklannya, jangan marah ya....

Selamat Mencoba

C++, Menggunakan Syntax COUT dan CIN dalam aplikasi sederhana

 Berikut bentuk penggunaan Output dan Input pada C++, semoga kalian bisa memahami yah cara penggunaan Cout dan Cin !

Ketika code diatas di compile dan di run hasilnya akan seperti ini

Sengaja saya SS codenya biar gak bisa di copy paste, usahakan untuk di tulis ulang, karna dengan kita menulis ulang minimal 25% masuk ke otak kamu.

Tapi kalau masih teteo ngeyel pengen copy paste ya silahkan saja Download Disini tapi jangan marah itu ada iklannya.

Terimakasih ya udah mampir di blogku

C++, Cara menggunakan COUT dan CIN

 

CIN ( Character Input ) adalah Perintah untuk memasukan data kedalam variabel 

COUT ( Character Out ) adalah Perintah untuk menampilkan hasil ke layar

Perhatikan contoh berikut ini, disarankan untuk di tulis ulang agar kamu lebih paham! sengaja saya buat JPG biar gak bisa di copy paste.

Ketika code diatas di compile dan di run hasilnya akan seperti ini 

Tapi Kalau kalian masih maksa pengen copy paste juga ya silahkan download aja di Disi cuman ada iklannya hehehe

STRUKTUR DATA C++

  Asslm..wr.wb

Rasa syukur yang teramat dalam saya panjatkan kehadirat Allah,karna atas nikmat sehat yang telah diberikannNYA saya bisa menyelesaikan postingan Blog kali ini.

Pada postingan lalu saya telah membahas tentang sejarah singkat C++ dan cara membuat aplikasi sederhana (“Hello World”) dengan menggunakan compiler ( editor ) Dev C++ versi 5.10.

Pada kesempatan kali ini,saya akan membahas tentang struktur dasar C++.pada dasarnya program C++ terdiri dari beberapa komponen pokok diantaranya :

1.      Preprocessor  

Adalah : Proses awal sebelum mengeksekusi kode program. preprocessor ini biasanya diawali dengan tanda hash ( # ).Untuk  preprocessor itu sendiri sangat banyak jenisnya dan tidak bisa saya jabarkan secara gamblang disini,saya hanya akan memberikan contoh yang biasa digunakan dalam membuat sebuah program.Contoh penggunaan preprocessor : 

#include<iostream> 

#include<stdio> 

#include<conio> 

#include<math.h> 

#include<iomanip> 

#include<stdlib> 

#include<cstdlib> 

Dan masih banyak jenis-jenis preprocessor lainnya.  

2.      Fungsi main
Adalah : Salah satu dasar  penyusunan blok pada program C++.pada fungsi main ini biasa ditandai dengan ()

Contoh penggunaan Fungsi main :

int main( ) 
void main( )

3.      Deklarasi 
Adalah : Langkah awal dalam setiap penulisan program untuk menyatakan suatu variabel kedalam type data.untuk bentuk deklarasi itu sendiri terdapat berbagai macam jenis dan fungsinya,namun disini saya hanya menuliskan beberapa contoh yang biasa digunakan dalam pembuatan program. 
Contoh penulisan Deklarasi : 
int x 
char x 
long x 
float x 
double x 
Dan masih banyak bentuk Deklarasi lainnya yang diseuaikan dengan kebutuhan suatu program.

4.      Tubuh program 
Adalah : Bagian dimana seorang programer menuliskan source code untuk membentuk sebuah aplikasi.pada bagian tubuh program ini biasa diawali dengan simbol { dan diakhir proses di tutup dengan simbol } 
Contoh : 
{ 
Cout<<”Hello World”;   
}

Contoh struktur dasar C++ dalam sebuah program sederhana ( Membuat Biodata )

#include<iostream>  ----> Preprocessor

using namespace std;

int main()------> Fungsi main

{

    char nama[15],alamat[30],nim[10];-------> Deklarasi

    cout<<"Biodata Mahasiswa"<<endl;-----> Tubuh Program

    cout<<"------------------"<<endl;-----> Tubuh Program

    cout<<"Nim\t\t:";cin.getline(nim,10);-----> Tubuh Program

    cout<<"Nama\t\t:";cin.getline(nama,15);-----> Tubuh Program

    cout<<"Alamat\t\t:";cin.getline(alamat,30);--> Tubuh Program

    system("cls");

    cout<<"Nim Anda Adalah\t\t:"<<nim<<endl;-----> Tubuh Program

    cout<<"Nama Anda Adalah \t:"<<nama<<endl;-----> Tubuh Program

    cout<<"Alamat Anda Adalah\t:"<<alamat<<endl;--> Tubuh Program

    return 0;

}

 
Selamat Mencoba !!
untuk file pdf nya bisa anda download di Download