Pos

Diposkan pada

Kode custom CSS untuk menampilkan live chat YouTube sebagai overlay di OBS

Cara menampilkan overlay live chat id OBS cukup mudah jika kalian mengikuti langkah-langkah ini:

Dari dashboard live streaming YouTube, klik tombol titik tiga pada kolom live chat, dan buat dia popout (Popout Chat). Nah setelah itu link nya kita copy paste ke OBS.

Setelah itu kita tambahkan custom css untuk menampilkan hanya teks chat nya saja. Berikut ini adalah kode custom css nya:

@import url("https://fonts.googleapis.com/css?family=Candal");
@import url("https://fonts.googleapis.com/css?family=Changa One");
@import url("https://fonts.googleapis.com/css?family=Imprima");
@import url("https://fonts.googleapis.com/css?family=Fira Sans");

/* Background colors*/
body {
  overflow: hidden;
  background-color: rgba(255,255,255,0);
}
/* Transparent background. */
yt-live-chat-renderer {
  background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
  background-color: rgba(227,227,227,0.83) !important;
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
  background-color: rgba(NaN,10,0,0.32) !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
  background-color: rgba(NaN,10,0,1) !important;
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
  background-color: rgba(NaN,10,0,1) !important;
}


yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}
/* Outlines */
yt-live-chat-renderer * {
  
  font-family: "Fira Sans";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
  overflow: initial !important;
}

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

yt-live-chat-paid-message-renderer #header {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
  
  width: 30px !important;
  height: 30px !important;
  border-radius: 30px !important;
  margin-right: 7.5px !important;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
  display: none !important;
  vertical-align: text-top !important;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
  
  color: #999999 !important;
  font-family: "Imprima";
  font-size: 16px !important;
  line-height: 16px !important;
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #8a1919 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}

/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
  color: #363636 !important;
  font-family: "Candal";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 0px;
}

/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #060505 !important;
  font-family: "Fira Sans";
  font-size: 20px !important;
  line-height: 20px !important;
}


/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: #ffffff !important;
  font-family: "Changa One";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer {
  margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
  background-color: #0f9d58 !important;
  margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}


yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: "Imprima";
}

yt-live-chat-mode-change-message-renderer, 
yt-live-chat-viewer-engagement-message-renderer, 
yt-live-chat-restricted-participation-renderer {
  display: none !important;
}

yt-live-chat-banner-manager {
  display: none !important;
}

Kalau mau yang lebih bagus dan full transparan (cuma menampilkan teks nya saja) bisa pakai style yang ini:

@import url("https://fonts.googleapis.com/css?family=Candal");
@import url("https://fonts.googleapis.com/css?family=Changa One");
@import url("https://fonts.googleapis.com/css?family=Imprima");

/* Background colors*/
body {
  overflow: hidden;
  background-color: rgba(0,0,0,0);
}
/* Transparent background. */
yt-live-chat-renderer {
  background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
  background-color: transparent !important;
}


yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}
/* Outlines */
yt-live-chat-renderer * {
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
  overflow: initial !important;
}

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

yt-live-chat-paid-message-renderer #header {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
  
  width: 24px !important;
  height: 24px !important;
  border-radius: 24px !important;
  margin-right: 6px !important;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
  display: none !important;
  vertical-align: text-top !important;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
  
  color: #999999 !important;
  font-family: "Imprima";
  font-size: 16px !important;
  line-height: 16px !important;
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #ffd600 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}

/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
  color: #cccccc !important;
  font-family: "Candal";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 2px;
}

/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}


/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: #ffffff !important;
  font-family: "Changa One";
  font-size: 20px !important;
  line-height: 20px !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
  color: #ffffff !important;
  font-family: "Imprima";
  font-size: 18px !important;
  line-height: 18px !important;
}

yt-live-chat-paid-message-renderer {
  margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
  background-color: #0f9d58 !important;
  margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}


yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: "Imprima";
}

yt-live-chat-mode-change-message-renderer, 
yt-live-chat-viewer-engagement-message-renderer, 
yt-live-chat-restricted-participation-renderer {
  display: none !important;
}

yt-live-chat-banner-manager {
  display: none !important;
}

Kode ini saya dapatkan dari link GitHub berikut:

https://gist.github.com/lohanidamodar/81145c6d3a668cf18e6453ab5ba1f642

Semoga bermanfaat ya…

Diposkan pada

Contoh sederhana banget dan keren program JavaScript Text To Speech (teks menjadi suara bacaan)

Di bawah ini Om Puter share contoh kode HTML dan JavaScript untuk membuat program Text To Speech sederhana dan sederhananya pake banget.

Ini dia kodenya… Buat file index.html kosong dan copy paste kode di bawah ini:

<!DOCTYPE html>
<html>
	<head>
		<title>Percobaan Text To Speech</title>
		<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	</head>
	<body>
		
		<input id="bacaini" placeholder="Teks yang dibaca">
		<button onclick="BacaTeks()">Baca Sekarang</button>
		
		<script>
			
			
			
			function BacaTeks(){
				const synth = window.speechSynthesis;
				let text = $("#bacaini").val();
				const utterThis = new SpeechSynthesisUtterance(text);
				utterThis.lang = 'id-ID';
				synth.speak(utterThis);
			}
			
		</script>
		
	</body>
</html>

Source aslinya dari website ini yah, guys: https://www.juannicolas.eu/convert-text-to-speech-with-javascript/

Diposkan pada

Cara install Mac OS di PC/Laptop Windows secara virtual menggunakan VMware

Buat kamu yang gak punya Mac dan ingin develop apa aja pakai XCode di Mac, kalian bisa install Mac OS di PC/Laptop menggunakan VMware. Tapi nantinya VMware nya harus diinstalin unlocker supaya bisa menjalankan Mac OS.

Begini caranya:

  1. Download ISO instalasi versi OS yang kamu inginkan, ini file torrent nya: https://drive.google.com/file/d/1XHsCkyvX0o4ie-YbmoT13WArwJHmZbCw/view?usp=sharing
  2. Download VMware. Cari tahu dari Google bagaimana kamu bisa download VMware, lalu install. Usahakan cari versi Workstation versi 11-15 atau Player versi 7-15; karena versi 16 ke atas biasanya unlocker nya tidak berfungsi.
  3. Download Unlocker dari link ini lalu install: https://github.com/paolo-projects/auto-unlocker
  4. Edit file VMX seperti ini:

Add
smbios.reflectHost = “TRUE”
hw.model = “MacBookPro14,3”
board-id = “Mac-551B86E5744E2388”
smc.version = “0”
ulm.disableMitigations = “TRUE”

Edit
ethernet0.virtualDev = “vmxnet3”

Nah setelah itu mulai kita install Mac OS nya…

 

 

Diposkan pada

Cara simpan tiap halaman file word sebagai sebuah file html terpisah secara otomatis – Script macro Microsoft Word

Misalnya kita punya sebuah file word ratusan halaman, lalu kita ingin menconvert tiap halaman file tersebut sebagai satu file html terpisah, kita bisa menggunakan script macro di bawah ini:

Sub SaveAsHtmls()
'
' SaveAsHtmls Macro
'
'

    Dim orig As Document
    Dim page As Document
    Dim numPages As Integer
    Dim idx As Integer
    Dim fn As String
    
       
    ' Keep a reference to the current document.
    Set orig = ActiveDocument
    
    ' Calculate the number of pages
    numPages = ActiveDocument.BuiltInDocumentProperties("Number of Pages")
    
    For idx = 1 To numPages
        ' Make sure the document is active
        orig.Activate
               
        ' Go to the page with index idx
        Selection.GoTo What:=wdGoToPage, Name:=idx
    
        ' Select the current page
        Selection.GoTo What:=wdGoToBookmark, Name:="\page"
               
        ' Copy the selection
        Selection.Copy
        
        ' Create a new document
        Set page = Documents.Add
        
        ' Activate it
        page.Activate
               
        ' Paste the selection
        Selection.Paste
        
        ' Generate the file name
        fn = "C:\converted\page_" + CStr(idx) + ".html"
        
        ' Save the document as HTML
        page.SaveAs FileName:=fn, FileFormat:=wdFormatHTML, AddToRecentFiles:=False
        
        ' Close the document
        page.Close
        
    Next

End Sub

Cara menggunakan script di atas akan Om Puter tunjukin di video di bawah ini: