Skip to content
This repository has been archived by the owner on Jul 15, 2024. It is now read-only.

SekaliPakaiBuang/obs-clock-overlay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OBS Clock Overlay by SekaliPakaiBuang

Sebuah overlay jam digital yang bisa dipakai di OBS
Cocok buat streamer, yaiyalah orang buat OBS

Fitur

  • Jam digital (jam, menit, detik)
  • Kalender (nama hari, tanggal, bulan, tahun)
  • Progress bar (sama kayak jarum detik di jam analog tapi bentuknya progress bar) 4 WARNA

Yang Kamu Butuhkan

  • OBS Studio, yang versi terbaru biar gampang
  • Aplikasi buat unzip, bisa winrar, 7zip dll

Yang Harus Kamu Lakukan

  • Download filenya (Code>Download ZIP atau clone)
  • Unzip filenya
  • Buka OBS Studio, tambah browser source baru (kalo gatau caranya cari di internet)
  • Centang opsi Local File, terus nanti prompt URL bakal ganti jadi Local file
  • Pencet Browse, terus cari deh file index.html yang udah di unzip tadi
  • Ganti width & height sesuai kebutuhan (saranku sih width 256 height 144)
  • Pencet OK

Kalo gamau download filenya, kalian bisa pakai link dibawah about section.

Yang Bisa Kamu Lakukan

Kalo kalian merasa overlay nya kok jelek tampilannya apa gimana, kalian bisa modifikasi dengan 2 cara:

  1. Pake Custom CSS (biar gampang)
  2. Edit file nya langsung (kalo kalian merasa custom css nanggung karena udah punya filenya)

Cara 1: Pake Custom CSS

  • Klik kanan browser source, pilih Properties
  • Cari tulisan Custom CSS, kalo gak kelihatan scroll kebawah
  • Edit dari situ

Contoh:

html {
	--bar-color-1: red;
	--bar-color-2: yellow;
	--bar-color-3: green;
	--bar-color-4: blue;
	
	--fg-color: white;
	--bg-color: black;
}

Bar color 1 sampe 4 untuk warna progress bar,
FG Color untuk warna teks,
BG Color untuk warna latar belakang (background)

NB: Pastikan kalian mudeng CSS ya adik-adik, kalo gak mudeng mending minta tolong temenmu

Cara 2: Edit filenya langsung

Kalo kalian mau lebih dari sekedar ganti warna, misal mau ganti layout,
ganti codingannya sekalian biar gak kayak jam lagi mungkin /chuaksssss Kalian bisa edit filenya.

  • index.html isinya kerangka halaman (anjay kerangka)
  • style.css isinya styling biar page nya jadi lebih a e s t h e t i c
  • main.js isinya codingan biar jam nya jalan

NB: Pastikan kalian mudeng HTML, JS, dan CSS ya adik-adik, kalo gak mudeng mending minta tolong temenmu