Cara Membuat Widget WebChat IRC Multi Server di Blogger
Internet Relay Chat atau IRC merupakan salah satu teknologi komunikasi real-time yang sudah hadir jauh sebelum aplikasi messenger modern. Bagi pengguna internet era warnet, istilah mIRC, nickname, server IRC dan channel tentu masih terasa familiar.
Pada masa populernya mIRC, pengguna biasanya memasang IRC client pada komputer kemudian menentukan network, nickname dan channel yang ingin dimasuki. Sekarang konsep tersebut masih dapat digunakan langsung melalui browser menggunakan WebChat.
CodeFlare sebelumnya pernah membuat Widget WebChat IRC yang menggunakan Mibbit sebagai engine. Karena kondisi layanan IRC berbasis web sudah banyak berubah, widget tersebut sekarang kita kembangkan menjadi Universal IRC WebChat Launcher.
Widget terbaru mendukung beberapa network IRC dengan WebChat berbeda. Sementara itu tampilan widget versi sebelumnya tetap dipertahankan sehingga pembaca masih bisa menggunakan konsep klasiknya jika lebih menyukai desain lama.
Informasi Singkat
CODEFLARE // IRC NETWORK TERMINAL
DATA ONLINE
Universal IRC WebChat
Widget berfungsi sebagai launcher untuk beberapa WebChat IRC. Network, nickname dan channel dapat ditentukan sebelum floating WebChat window dibuka pada halaman Blogger.
NETWORK
Multi Server
CHANNEL
#codeflare
NICKNAME
JohnDoe
WEBCHAT
Floating Panel
COMM LINK
IRC NETWORK ONLINE
DALnet digunakan sebagai network default dengan nickname JohnDoe dan channel #codeflare. Network, nickname maupun channel dapat diganti sebelum memulai koneksi.
Update Widget CodeFlare
Versi modern dan versi lama sama-sama dipertahankan. Floating window keduanya sekarang dilengkapi animasi opening dan closing serta layout responsif untuk desktop, tablet dan smartphone.
Live Preview Universal IRC WebChat
Pilih IRC Network kemudian tentukan nickname dan channel yang ingin digunakan.
IRC WEBCHAT
CODEFLARE MULTI NETWORK TERMINAL
READY
SELECTED NETWORK
DALnet
www.dal.net/webchat/
WEBCHAT
SYSTEM READY
DALNET WEB IRC
DALNET IRC
#codeflare
DALNET SESSION
JohnDoe
IRC Server Basic Commands
COMMAND REFERENCE
/join #channel
Masuk ke sebuah channel.
/part #channel
Keluar dari channel.
/nick nickname
Mengganti nickname.
/msg nickname pesan
Mengirim pesan pribadi.
/whois nickname
Melihat informasi pengguna.
/list
Melihat daftar channel.
/me action
Mengirim action message.
/quit
Keluar dari IRC.
COMM LINK ACTIVE
CODEFLARE IRC TERMINAL
Floating window tetap berada pada halaman artikel
Tombol Connect menampilkan WebChat sebagai panel fixed di atas halaman. Animasi opener menggunakan kombinasi fade, scale dan slide ringan. Saat Close ditekan animasi berjalan terbalik sebelum iframe dihentikan.
Network IRC yang Tersedia
DALnet
dal.net/webchat
Default Network
Libera.Chat
web.libera.chat
Web IRC
QuakeNet
webchat.quakenet.org
WebChat
Undernet
chat.undernet.org
WebChat
EFnet
chat.efnet.org
Web IRC
IRCnet
webchat.ircnet.net
Web IRC
Cara Kerja Widget Multi Server
JavaScript menyimpan konfigurasi WebChat masing-masing network. Ketika pengguna memilih network lalu menekan Connect, script membangun alamat WebChat yang sesuai dan memasukkannya ke floating window.
01
NETWORK
Pilih IRC
02
NICKNAME
JohnDoe
03
CHANNEL
#codeflare
04
WEBCHAT
Floating Panel
Kode Widget IRC Modern
Jika Anda lebih menyukai tampilan modern, gunakan versi ini. Widget modern dirancang dengan interface terminal futuristik, dukungan multi-network, floating WebChat window, animasi opening dan closing serta layout responsif untuk desktop maupun mobile.
MODERN BUILD // INSTALLATION PACKAGE
Paket Kode Widget IRC Modern
Untuk memasang widget secara lengkap, copy ketiga bagian kode berikut secara berurutan. HTML digunakan untuk struktur widget, JavaScript menangani koneksi WebChat dan interaksi, sedangkan CSS mengatur desain serta animasi.
01
HTML
02
JavaScript
03
CSS
READY TO DEPLOY
Urutan pemasangan
Pastikan seluruh HTML, JavaScript dan CSS ikut digunakan. Jika salah satu bagian tidak dipasang, fungsi atau tampilan widget dapat berjalan tidak sempurna.
<div class="cfIRCWrap">
<div class="cfIRCWidget">
<div class="cfIRCGlow"></div>
<div class="cfIRCScanner"></div>
<div class="cfIRCHeader">
<div class="cfIRCBrand">
<div class="cfIRCAvatar">
<i class="fa fa-comments"></i>
<span></span>
</div>
<div>
<strong>IRC WEBCHAT</strong>
<small>CODEFLARE MULTI NETWORK TERMINAL</small>
</div>
</div>
<div class="cfIRCOnline">
<i></i> READY
</div>
</div>
<div class="cfIRCDivider">
<span></span><i></i><span></span>
</div>
<div class="cfIRCForm">
<div class="cfIRCField">
<label><i class="fa fa-server"></i> IRC Network</label>
<div class="cfIRCSelect">
<i class="fa fa-globe"></i>
<select class="cfIRCNetwork">
<option value="dalnet">DALnet</option>
<option value="libera">Libera.Chat</option>
<option value="quakenet">QuakeNet</option>
<option value="undernet">Undernet</option>
<option value="efnet">EFnet</option>
<option value="ircnet">IRCnet</option>
</select>
<i class="fa fa-angle-down cfIRCSelectArrow"></i>
</div>
</div>
<div class="cfIRCField">
<label>
<i class="fa fa-user-secret"></i>
Nickname
</label>
<div class="cfIRCInput">
<i class="fa fa-user"></i>
<input class="cfIRCNick"
type="text"
value="JohnDoe"
maxlength="30" />
</div>
</div>
<div class="cfIRCField">
<label>
<i class="fa fa-hashtag"></i>
Channel
</label>
<div class="cfIRCInput">
<i class="fa fa-hashtag"></i>
<input class="cfIRCChannel"
type="text"
value="codeflare"
maxlength="50" />
</div>
</div>
</div>
<div class="cfIRCActions">
<button class="cfIRCConnect" type="button">
<i class="fa fa-plug"></i>
CONNECT WEBCHAT
</button>
<button class="cfIRCExternal" type="button">
<i class="fa fa-external-link"></i>
</button>
</div>
</div>
<div class="cfIRCOverlay">
<div class="cfIRCPanel">
<div class="cfIRCPanelHead">
<button class="cfIRCCommandsBtn" type="button">
<i class="fa fa-terminal"></i>
Basic Commands
<i class="fa fa-plus-square cfIRCCommandIcon"></i>
</button>
<div class="cfIRCPanelTitle">
<strong class="cfIRCPanelNetwork">DALNET IRC</strong>
</div>
<button class="cfIRCClose" type="button">
Close
<i class="fa fa-window-close"></i>
</button>
</div>
<div class="cfIRCChatBox">
<iframe
class="cfIRCFrame"
title="IRC WebChat">
</iframe>
</div>
</div>
</div>
</div>
<script>
//<![CDATA[
(function(){
'use strict';
/* ========================================
NETWORK DATABASE
======================================== */
var NETWORKS={
dalnet:{
name:'DALnet',
label:'DALNET',
display:'www.dal.net/webchat/',
url:function(nick,channel){
return 'https://www.dal.net/webchat/?nick='
+encodeURIComponent(nick)
+'&channels='
+encodeURIComponent('#'+channel);
}
},
libera:{
name:'Libera.Chat',
label:'LIBERA',
display:'web.libera.chat',
url:function(nick,channel){
return 'https://web.libera.chat/?nick='
+encodeURIComponent(nick)
+'?#'
+encodeURIComponent(channel);
}
},
quakenet:{
name:'QuakeNet',
label:'QUAKENET',
display:'webchat.quakenet.org',
url:function(nick,channel){
return 'https://webchat.quakenet.org/?channels='
+encodeURIComponent(channel)
+'&nick='
+encodeURIComponent(nick);
}
},
undernet:{
name:'Undernet',
label:'UNDERNET',
display:'chat.undernet.org',
url:function(){
return 'https://chat.undernet.org/';
}
},
efnet:{
name:'EFnet',
label:'EFNET',
display:'chat.efnet.org',
url:function(){
return 'https://chat.efnet.org/';
}
},
ircnet:{
name:'IRCnet',
label:'IRCNET',
display:'webchat.ircnet.net',
url:function(nick,channel){
return 'https://webchat.ircnet.net/?channels='
+encodeURIComponent(channel)
+'&nick='
+encodeURIComponent(nick);
}
}
};
/* ========================================
HELPERS
======================================== */
function cleanNick(value){
return String(value||'')
.trim()
.replace(/\s+/g,'');
}
function cleanChannel(value){
return String(value||'')
.trim()
.replace(/^#+/,'')
.replace(/\s+/g,'');
}
/* ========================================
WIDGET INIT
======================================== */
var widgets=
document.querySelectorAll(
'.cfIRCWrap'
);
Array.prototype.forEach.call(
widgets,
function(wrapper){
var widget=
wrapper.querySelector(
'.cfIRCWidget'
);
var overlay=
wrapper.querySelector(
'.cfIRCOverlay'
);
if(!widget || !overlay){
return;
}
var panel=
overlay.querySelector(
'.cfIRCPanel'
);
var network=
widget.querySelector(
'.cfIRCNetwork'
);
var nick=
widget.querySelector(
'.cfIRCNick'
);
var channel=
widget.querySelector(
'.cfIRCChannel'
);
var connect=
widget.querySelector(
'.cfIRCConnect'
);
var external=
widget.querySelector(
'.cfIRCExternal'
);
var status=
widget.querySelector(
'.cfIRCStatusText'
);
var statusNetwork=
widget.querySelector(
'.cfIRCStatusNetwork'
);
var networkName=
widget.querySelector(
'.cfIRCNetworkName'
);
var networkURL=
widget.querySelector(
'.cfIRCNetworkURL'
);
var frame=
overlay.querySelector(
'.cfIRCFrame'
);
var close=
overlay.querySelector(
'.cfIRCClose'
);
var commandsBtn=
overlay.querySelector(
'.cfIRCCommandsBtn'
);
var commandIcon=
overlay.querySelector(
'.cfIRCCommandIcon'
);
var chatBox=
overlay.querySelector(
'.cfIRCChatBox'
);
var commandsPanel=
overlay.querySelector(
'.cfIRCCommandsPanel'
);
var panelNetwork=
overlay.querySelector(
'.cfIRCPanelNetwork'
);
var panelChannel=
overlay.querySelector(
'.cfIRCPanelChannel'
);
var panelNick=
overlay.querySelector(
'.cfIRCPanelNick'
);
var panelSession=
overlay.querySelector(
'.cfIRCPanelSession'
);
/* ========================================
CURRENT VALUES
======================================== */
function getValues(){
var networkID=
network.value||'dalnet';
var nickname=
cleanNick(
nick.value
);
var channelName=
cleanChannel(
channel.value
);
if(!nickname){
nickname='JohnDoe';
nick.value=
nickname;
}
if(!channelName){
channelName='codeflare';
channel.value=
channelName;
}
return {
network:networkID,
nick:nickname,
channel:channelName
};
}
/* ========================================
BUILD WEBCHAT URL
======================================== */
function buildURL(){
var data=
getValues();
var config=
NETWORKS[
data.network
]||
NETWORKS.dalnet;
return config.url(
data.nick,
data.channel
);
}
/* ========================================
UPDATE NETWORK UI
======================================== */
function updateNetwork(){
var config=
NETWORKS[
network.value
]||
NETWORKS.dalnet;
if(networkName){
networkName.textContent=
config.name;
}
if(networkURL){
networkURL.textContent=
config.display;
}
if(statusNetwork){
statusNetwork.textContent=
config.label+
' WEB IRC';
}
status.textContent=
'NETWORK SELECTED';
}
/* ========================================
OPEN WEBCHAT
======================================== */
function openIRC(){
var data=
getValues();
var config=
NETWORKS[
data.network
]||
NETWORKS.dalnet;
panelNetwork.textContent=
config.label+
' IRC';
panelSession.textContent=
config.label+
' SESSION';
panelChannel.textContent=
'#'+data.channel;
panelNick.textContent=
data.nick;
status.textContent=
'CONNECTING...';
frame.src=
buildURL();
chatBox.style.display=
'block';
commandsPanel.style.display=
'none';
commandIcon.className=
'fa fa-plus-square cfIRCCommandIcon';
overlay.classList.remove(
'cfIRCOverlayClosing'
);
overlay.classList.add(
'cfIRCOverlayActive'
);
panel.classList.remove(
'cfIRCPanelClosing'
);
panel.classList.add(
'cfIRCPanelOpening'
);
document.documentElement
.classList.add(
'cfIRCNoScroll'
);
document.body
.classList.add(
'cfIRCNoScroll'
);
setTimeout(function(){
panel.classList.remove(
'cfIRCPanelOpening'
);
status.textContent=
'WEBCHAT OPEN';
},330);
}
/* ========================================
CLOSE WEBCHAT
======================================== */
function closeIRC(){
if(
overlay.classList.contains(
'cfIRCOverlayClosing'
)
){
return;
}
status.textContent=
'CLOSING SESSION...';
overlay.classList.add(
'cfIRCOverlayClosing'
);
panel.classList.add(
'cfIRCPanelClosing'
);
setTimeout(function(){
frame.src=
'about:blank';
overlay.classList.remove(
'cfIRCOverlayActive',
'cfIRCOverlayClosing'
);
panel.classList.remove(
'cfIRCPanelClosing'
);
commandsPanel.style.display=
'none';
chatBox.style.display=
'block';
commandIcon.className=
'fa fa-plus-square cfIRCCommandIcon';
document.documentElement
.classList.remove(
'cfIRCNoScroll'
);
document.body
.classList.remove(
'cfIRCNoScroll'
);
status.textContent=
'SYSTEM READY';
},270);
}
/* ========================================
BASIC COMMANDS
======================================== */
function toggleCommands(){
if(
commandsPanel.style.display===
'block'
){
commandsPanel.style.display=
'none';
chatBox.style.display=
'block';
commandIcon.className=
'fa fa-plus-square cfIRCCommandIcon';
}else{
commandsPanel.style.display=
'block';
chatBox.style.display=
'none';
commandIcon.className=
'fa fa-minus-square cfIRCCommandIcon';
}
}
/* ========================================
EVENTS
======================================== */
network.addEventListener(
'change',
updateNetwork
);
connect.addEventListener(
'click',
openIRC
);
close.addEventListener(
'click',
closeIRC
);
commandsBtn.addEventListener(
'click',
toggleCommands
);
/* OPEN DIRECT */
external.addEventListener(
'click',
function(){
window.open(
buildURL(),
'_blank',
'noopener,noreferrer'
);
}
);
/* QUICK CHANNEL */
var quick=
widget.querySelectorAll(
'.cfIRCQuick button'
);
Array.prototype.forEach.call(
quick,
function(button){
button.addEventListener(
'click',
function(){
channel.value=
this.getAttribute(
'data-channel'
)||'codeflare';
Array.prototype.forEach.call(
quick,
function(item){
item.classList.remove(
'active'
);
}
);
this.classList.add(
'active'
);
status.textContent=
'CHANNEL SELECTED';
}
);
}
);
/* ENTER CONNECT */
[nick,channel].forEach(
function(input){
input.addEventListener(
'keydown',
function(event){
if(event.key==='Enter'){
event.preventDefault();
openIRC();
}
}
);
}
);
/* CLICK OUTSIDE */
overlay.addEventListener(
'click',
function(event){
if(event.target===overlay){
closeIRC();
}
}
);
/* ESC CLOSE */
document.addEventListener(
'keydown',
function(event){
if(
event.key==='Escape' &&
overlay.classList.contains(
'cfIRCOverlayActive'
)
){
closeIRC();
}
}
);
/* INITIAL */
updateNetwork();
}
);
})();
//]]>
</script>
<style>
.cfIRCWrap,
.cfIRCWrap *{
box-sizing:border-box;
}
.cfIRCWidget{
position:relative;
width:100%;
overflow:hidden;
padding:16px;
border:1px solid #1c6d89;
border-radius:10px;
background:#07151d;
color:#eafaff;
box-shadow:
0 10px 35px rgba(0,0,0,.18),
inset 0 0 25px rgba(0,174,239,.05);
font-family:Arial,sans-serif;
}
/* GLOW */
.cfIRCGlow{
position:absolute;
width:180px;
height:180px;
right:-80px;
top:-90px;
border-radius:50%;
background:rgba(0,174,239,.14);
filter:blur(35px);
pointer-events:none;
}
/* SCANNER */
.cfIRCScanner{
position:absolute;
left:0;
top:-50px;
width:100%;
height:40px;
background:linear-gradient(
to bottom,
transparent,
rgba(77,220,255,.07),
transparent
);
pointer-events:none;
animation:cfIRCScanning 6s linear infinite;
}
/* HEADER */
.cfIRCHeader{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.cfIRCBrand{
display:flex;
align-items:center;
gap:10px;
}
.cfIRCAvatar{
position:relative;
width:42px;
height:42px;
flex:0 0 42px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border:1px solid #159ac2;
border-radius:5px;
background:#092635;
color:#54dcff;
font-size:18px;
}
.cfIRCAvatar span{
position:absolute;
left:0;
top:-100%;
width:100%;
height:40%;
background:linear-gradient(
to bottom,
transparent,
rgba(255,255,255,.25),
transparent
);
animation:cfIRCAvatarScan 2.8s linear infinite;
}
.cfIRCBrand strong{
display:block;
font-size:15px;
letter-spacing:1.5px;
color:#f4fcff;
}
.cfIRCBrand small{
display:block;
margin-top:3px;
font-size:9px;
letter-spacing:1px;
color:#77aebb;
}
.cfIRCOnline{
display:flex;
align-items:center;
gap:6px;
font-size:9px;
letter-spacing:1px;
color:#91ffbf;
}
.cfIRCOnline i,
.cfIRCStatusDot,
.cfIRCNetworkState i{
width:7px;
height:7px;
display:inline-block;
border-radius:50%;
background:#32df7e;
box-shadow:0 0 8px #32df7e;
animation:cfIRCPulse 1.7s infinite;
}
/* DIVIDER */
.cfIRCDivider{
display:flex;
align-items:center;
gap:5px;
margin:14px 0;
}
.cfIRCDivider span{
height:1px;
flex:1;
background:linear-gradient(
90deg,
transparent,
#187899
);
}
.cfIRCDivider span:last-child{
background:linear-gradient(
90deg,
#187899,
transparent
);
}
.cfIRCDivider i{
width:6px;
height:6px;
border:1px solid #32d3ff;
transform:rotate(45deg);
}
/* FORM */
.cfIRCForm{
display:grid;
grid-template-columns:1.1fr 1fr 1fr;
gap:10px;
}
.cfIRCField label{
display:block;
margin-bottom:6px;
font-size:10px;
font-weight:bold;
letter-spacing:.6px;
color:#8bc7d8;
}
.cfIRCField label i{
margin-right:4px;
color:#40d8ff;
}
.cfIRCInput,
.cfIRCSelect{
position:relative;
height:40px;
display:flex;
align-items:center;
overflow:hidden;
border:1px solid #164d61;
border-radius:5px;
background:#0b202b;
transition:.25s;
}
.cfIRCInput:focus-within,
.cfIRCSelect:focus-within{
border-color:#39d8ff;
box-shadow:
0 0 0 2px rgba(57,216,255,.08);
}
.cfIRCInput>i,
.cfIRCSelect>i:first-child{
width:38px;
flex:0 0 38px;
text-align:center;
color:#45cdeb;
}
.cfIRCInput input,
.cfIRCSelect select{
width:calc(100% - 38px);
height:100%;
padding:0 30px 0 0;
border:0;
outline:0;
background:transparent;
color:#eafaff;
font-size:12px;
}
.cfIRCSelect select{
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
.cfIRCSelect option{
background:#0b202b;
color:#eafaff;
}
.cfIRCSelectArrow{
position:absolute;
right:10px;
width:auto!important;
pointer-events:none;
}
/* NETWORK INFO */
.cfIRCNetworkInfo{
display:flex;
align-items:center;
gap:10px;
margin-top:11px;
padding:9px 10px;
border:1px solid #164657;
border-radius:5px;
background:#091e28;
}
.cfIRCNetworkIcon{
width:34px;
height:34px;
flex:0 0 34px;
display:flex;
align-items:center;
justify-content:center;
border-radius:4px;
background:#0d3040;
color:#4bddff;
}
.cfIRCNetworkText{
flex:1;
min-width:0;
}
.cfIRCNetworkText span{
display:block;
font-size:7px;
letter-spacing:.8px;
color:#598996;
}
.cfIRCNetworkText strong{
display:block;
font-size:11px;
color:#eafaff;
}
.cfIRCNetworkText small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:8px;
color:#75adbb;
}
.cfIRCNetworkState{
display:flex;
align-items:center;
gap:5px;
font-size:8px;
color:#79f6ab;
}
/* QUICK CHANNEL */
.cfIRCQuick{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:10px;
}
.cfIRCQuick button{
padding:6px 10px;
border:1px solid #18536a;
border-radius:4px;
background:#0d2935;
color:#91c9d8;
font-size:10px;
cursor:pointer;
transition:.2s;
}
.cfIRCQuick button:hover,
.cfIRCQuick button.active{
border-color:#31d8ff;
background:#103c4d;
color:#fff;
}
/* ACTION */
.cfIRCActions{
display:flex;
gap:7px;
margin-top:12px;
}
.cfIRCConnect,
.cfIRCExternal{
height:42px;
border:0;
border-radius:5px;
cursor:pointer;
transition:.25s;
}
.cfIRCConnect{
flex:1;
background:#0083da;
color:#fefefe;
font-size:12px;
font-weight:bold;
letter-spacing:.5px;
}
.cfIRCConnect:hover{
background:#079b67;
box-shadow:
0 0 18px rgba(7,155,103,.22);
}
.cfIRCExternal{
width:45px;
flex:0 0 45px;
background:#172d38;
border:1px solid #245466;
color:#72ddf6;
}
.cfIRCExternal:hover{
background:#203f4d;
color:#fff;
}
/* STATUS */
.cfIRCStatus{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:10px;
padding:8px 10px;
border:1px solid #123c4c;
border-radius:4px;
background:#091b24;
font-size:9px;
letter-spacing:.8px;
color:#83cadb;
}
.cfIRCStatus>div{
display:flex;
align-items:center;
gap:6px;
}
.cfIRCFooter{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:12px;
padding-top:10px;
border-top:1px solid #103747;
font-size:8px;
letter-spacing:1px;
color:#55818d;
}
/* ========================================
FLOATING WINDOW
======================================== */
.cfIRCNoScroll{
overflow:hidden!important;
}
.cfIRCOverlay{
display:none;
position:fixed;
z-index:9999999;
inset:0;
padding:12px;
background:rgba(2,10,15,.48);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
opacity:0;
}
.cfIRCOverlayActive{
display:flex;
align-items:center;
justify-content:center;
animation:
cfIRCOverlayOpen .28s ease forwards;
}
.cfIRCOverlayClosing{
animation:
cfIRCOverlayClose .27s ease forwards;
}
.cfIRCPanel{
width:min(900px,100%);
height:min(
680px,
calc(100vh - 24px)
);
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid #1c708e;
border-radius:10px;
background:#07151d;
color:#eafaff;
box-shadow:
0 20px 70px rgba(0,0,0,.45);
}
.cfIRCPanelOpening{
animation:
cfIRCPanelOpen
.33s
cubic-bezier(.22,.8,.25,1)
both;
}
.cfIRCPanelClosing{
animation:
cfIRCPanelClose
.27s
ease
both;
}
/* PANEL HEADER */
.cfIRCPanelHead{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:8px;
min-height:48px;
padding:7px 9px;
border-bottom:1px solid #17566d;
background:#0b2a38;
color:#eafaff;
}
.cfIRCPanelHead button{
min-height:31px;
padding:5px 9px;
border:1px solid #1b617c;
border-radius:4px;
background:#103b4d;
color:#dff8ff;
font-size:10px;
cursor:pointer;
transition:.2s;
}
.cfIRCPanelHead button:hover{
background:#0083da;
color:#fff;
}
.cfIRCCommandsBtn{
justify-self:start;
}
.cfIRCClose{
justify-self:end;
}
.cfIRCPanelTitle{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
text-align:center;
}
.cfIRCPanelTitle>i{
color:#4adeff;
}
.cfIRCPanelTitle strong{
display:block;
font-size:12px;
letter-spacing:.8px;
color:#f4fcff;
}
.cfIRCPanelTitle small{
display:block;
margin-top:2px;
font-size:8px;
color:#71b5c7;
}
/* PANEL STATUS */
.cfIRCPanelStatus{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:6px 10px;
border-bottom:1px solid #123f50;
background:#081e29;
font-size:8px;
letter-spacing:.7px;
color:#6fb5c8;
}
.cfIRCPanelStatus span:first-child{
display:flex;
align-items:center;
gap:5px;
}
.cfIRCPanelStatus i{
width:6px;
height:6px;
display:inline-block;
border-radius:50%;
background:#32df7e;
box-shadow:0 0 6px #32df7e;
}
/* CHAT */
.cfIRCChatBox{
flex:1;
min-height:0;
background:#fff;
color:#111;
}
.cfIRCFrame{
display:block;
width:100%;
height:100%;
border:0;
background:#fff;
}
/* COMMAND PANEL */
.cfIRCCommandsPanel{
display:none;
flex:1;
min-height:0;
overflow:auto;
padding:16px;
background:#f5fafc;
color:#213942;
}
.cfIRCCommandsHead{
display:flex;
align-items:center;
gap:10px;
margin-bottom:15px;
padding-bottom:10px;
border-bottom:1px solid #d2e3e9;
}
.cfIRCCommandsHead>i{
font-size:22px;
color:#0083da;
}
.cfIRCCommandsHead strong{
display:block;
}
.cfIRCCommandsHead small{
display:block;
margin-top:2px;
font-size:8px;
letter-spacing:.8px;
color:#67848e;
}
.cfIRCCommandGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.cfIRCCommandGrid>div{
padding:10px;
border:1px solid #d6e4e9;
border-radius:5px;
background:#fff;
color:#253a43;
}
.cfIRCCommandGrid code{
display:block;
margin-bottom:5px;
padding:6px;
border-radius:3px;
background:#102a35;
color:#7be7ff;
font-size:11px;
}
.cfIRCCommandGrid span{
font-size:10px;
}
/* PANEL FOOT */
.cfIRCPanelFoot{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:28px;
padding:5px 10px;
border-top:1px solid #17495b;
background:#091f2a;
font-size:7px;
letter-spacing:.8px;
color:#568593;
}
/* ========================================
ANIMATION
======================================== */
@keyframes cfIRCScanning{
0%{
top:-50px;
}
100%{
top:100%;
}
}
@keyframes cfIRCAvatarScan{
0%{
top:-50%;
}
100%{
top:120%;
}
}
@keyframes cfIRCPulse{
0%,100%{
opacity:.5;
}
50%{
opacity:1;
}
}
@keyframes cfIRCOverlayOpen{
from{
opacity:0;
}
to{
opacity:1;
}
}
@keyframes cfIRCOverlayClose{
from{
opacity:1;
}
to{
opacity:0;
}
}
@keyframes cfIRCPanelOpen{
0%{
opacity:0;
transform:
translateY(-20px)
scale(.94);
}
65%{
opacity:1;
transform:
translateY(3px)
scale(1.008);
}
100%{
opacity:1;
transform:
translateY(0)
scale(1);
}
}
@keyframes cfIRCPanelClose{
0%{
opacity:1;
transform:
translateY(0)
scale(1);
}
100%{
opacity:0;
transform:
translateY(15px)
scale(.95);
}
}
/* ========================================
RESPONSIVE
======================================== */
@media(max-width:800px){
.cfIRCOverlay{
padding:5px;
}
.cfIRCPanel{
width:100%;
height:calc(100vh - 10px);
max-height:none;
}
}
@media(max-width:700px){
.cfIRCForm{
grid-template-columns:1fr;
}
.cfIRCCommandGrid{
grid-template-columns:1fr;
}
}
@media(max-width:500px){
.cfIRCWidget{
padding:12px;
}
.cfIRCBrand strong{
font-size:12px;
}
.cfIRCBrand small{
font-size:7px;
}
.cfIRCOnline{
font-size:7px;
}
.cfIRCPanelHead{
grid-template-columns:
auto 1fr auto;
padding:6px;
}
.cfIRCCommandsBtn span,
.cfIRCClose span{
display:none;
}
.cfIRCPanelTitle strong{
font-size:10px;
}
.cfIRCPanelTitle small{
font-size:7px;
}
.cfIRCFooter,
.cfIRCPanelFoot{
font-size:6px;
}
}
@media(max-width:360px){
.cfIRCActions{
flex-wrap:wrap;
}
.cfIRCConnect{
width:100%;
flex-basis:100%;
}
.cfIRCExternal{
width:100%;
flex-basis:100%;
}
.cfIRCNetworkState{
display:none;
}
}
@media(prefers-reduced-motion:reduce){
.cfIRCScanner,
.cfIRCAvatar span{
animation:none!important;
}
.cfIRCPanelOpening,
.cfIRCPanelClosing,
.cfIRCOverlayActive,
.cfIRCOverlayClosing{
animation-duration:.01ms!important;
}
}
</style>
Live Preview Widget IRC Versi Lama
Widget berikut mempertahankan nuansa biru dan struktur klasik versi sebelumnya. Form Server, Channel dan NickName masih tersedia bersama tombol Dalnet Connect, Server Connect, IRC Server List dan Basic Commands.
LEGACY CODE // LIVE PREVIEW
Widget WebChat IRC Versi Sebelumnya
Tampilan klasik tetap dipertahankan. Hanya bagian engine WebChat yang disesuaikan dengan layanan yang masih tersedia.
LEGACY
WebChat
|
|
mIRC Chat Panel
DALnet
IRC Server Basic Commands
General Commands
ChanServ
NickServ
General Commands
/join #channel
Open Channel
/nick nickname
Change Nick
/msg nickname message
Send Private Message
/whois nickname
View User Information
/list
View Channel List
/part #channel
Leave Channel
/quit
Disconnect IRC
ChanServ
/ChanServ INFO #channel
View Channel Information
/ChanServ OP #channel
Request Channel OP
NickServ
/NickServ INFO nickname
View Nick Information
/NickServ IDENTIFY password
Identify Nickname
Kode Widget IRC Versi Lama
Jika Anda masih menyukai tampilan WebChat klasik CodeFlare, versi lama tetap bisa digunakan. Desain biru dan susunan interface original dipertahankan, sementara bagian koneksi sudah mendapat compatibility update agar dapat diarahkan ke layanan WebChat yang masih tersedia.
LEGACY BUILD // CLASSIC INTERFACE
Paket Kode Widget IRC Versi Lama
Gunakan paket ini jika ingin mempertahankan nuansa widget IRC CodeFlare generasi sebelumnya. Struktur klasiknya tetap sama, tetapi script koneksi sudah diperbarui agar lebih relevan untuk penggunaan sekarang.
01
HTML
02
JavaScript
03
CSS
LEGACY READY
Tampilan lama tetap dipertahankan
Bagian ini sengaja tidak didesain ulang menjadi modern. Warna biru klasik, form Server, Channel, NickName dan karakter panel WebChat lama tetap menjadi identitas versi legacy.
<div class="cfOldMircWidget">
<div class="cfOldMircMain">
<div class="cfOldMircForm">
<div class="cfOldMircTitle">
<span class="cfOldMircLogo">
<i class="fa fa-comments"></i>
</span>
<span>WebChat</span>
</div>
<hr />
<div class="cfOldMircInputArea">
<div class="cfOldMircRow">
<label>
<i class="fa fa-server"></i>
Server
</label>
<div class="cfOldMircControl">
<select class="cfOldMircServer">
<option value="dalnet">DALnet</option>
<option value="libera">Libera.Chat</option>
<option value="quakenet">QuakeNet</option>
<option value="undernet">Undernet</option>
<option value="efnet">EFnet</option>
<option value="ircnet">IRCnet</option>
</select>
</div>
</div>
<div class="cfOldMircRow">
<label>
<i class="fa fa-hashtag"></i>
Channel
</label>
<div class="cfOldMircControl">
<input class="cfOldMircChannel"
type="text"
value="codeflare" />
</div>
</div>
<div class="cfOldMircRow">
<label>
<i class="fa fa-user-secret"></i>
NickName
</label>
<div class="cfOldMircControl">
<input class="cfOldMircNick"
type="text"
value="JohnDoe" />
</div>
</div>
</div>
<div class="cfOldMircButtons">
<button class="cfOldMircDalnet"
type="button">
<i class="fa fa-bolt"></i>
Dalnet Connect
</button>
<button class="cfOldMircConnect"
type="button">
<i class="fa fa-bolt"></i>
Server Connect
</button>
</div>
<div class="cfOldMircMenu">
<button class="cfOldMircListBtn"
type="button">
<i class="fa fa-list"></i>
IRC Server List
</button>
<span>|</span>
<button class="cfOldMircHelpBtn"
type="button">
<i class="fa fa-info-circle"></i>
Basic Commands
</button>
<span>|</span>
<button class="cfOldMircSettings"
type="button">
<i class="fa fa-cogs"></i>
</button>
</div>
<div class="cfOldMircServerList">
<button type="button" data-network="dalnet">
DALnet
</button>
<button type="button" data-network="libera">
Libera.Chat
</button>
<button type="button" data-network="quakenet">
QuakeNet
</button>
<button type="button" data-network="undernet">
Undernet
</button>
<button type="button" data-network="efnet">
EFnet
</button>
<button type="button" data-network="ircnet">
IRCnet
</button>
</div>
</div>
</div>
<div class="cfOldMircOverlay">
<div class="cfOldMircPanel">
<div class="cfOldMircPanelHeader">
<div>
<button class="cfOldMircBasicBtn"
type="button">
Basic Commands
<span class="cfOldMircBasicIcon">
<i class="fa fa-plus-square"></i>
</span>
</button>
</div>
<div class="cfOldMircPanelTitle">
mIRC Chat Panel
<small class="cfOldMircPanelNetwork">
DALnet
</small>
</div>
<div>
<button class="cfOldMircClose"
type="button">
Close
<i class="fa fa-window-close"></i>
</button>
</div>
</div>
<div class="cfOldMircChatBox">
<iframe
class="cfOldMircFrame"
title="Legacy IRC WebChat"
loading="lazy">
</iframe>
</div>
<div class="cfOldMircCommands">
<b>IRC Server Basic Commands</b>
<code>/join #channel</code>
<span>Open Channel</span>
<code>/nick nickname</code>
<span>Change Nick</span>
<code>/msg nickname message</code>
<span>Send Private Message</span>
<code>/whois nickname</code>
<span>View User Information</span>
<code>/list</code>
<span>View Channel List</span>
<code>/part #channel</code>
<span>Leave Channel</span>
<code>/quit</code>
<span>Disconnect IRC</span>
</div>
</div>
</div>
</div>
<script>
//<![CDATA[
(function(){
'use strict';
var NETWORKS={
dalnet:{
name:'DALnet',
url:function(nick,channel){
return 'https://www.dal.net/webchat/?nick='
+encodeURIComponent(nick)
+'&channels='
+encodeURIComponent('#'+channel);
}
},
libera:{
name:'Libera.Chat',
url:function(nick,channel){
return 'https://web.libera.chat/?nick='
+encodeURIComponent(nick)
+'?#'
+encodeURIComponent(channel);
}
},
quakenet:{
name:'QuakeNet',
url:function(nick,channel){
return 'https://webchat.quakenet.org/?channels='
+encodeURIComponent(channel)
+'&nick='
+encodeURIComponent(nick);
}
},
undernet:{
name:'Undernet',
url:function(){
return 'https://chat.undernet.org/';
}
},
efnet:{
name:'EFnet',
url:function(){
return 'https://chat.efnet.org/';
}
},
ircnet:{
name:'IRCnet',
url:function(nick,channel){
return 'https://webchat.ircnet.net/?channels='
+encodeURIComponent(channel)
+'&nick='
+encodeURIComponent(nick);
}
}
};
function cleanNick(value){
return String(value||'')
.trim()
.replace(/\s+/g,'');
}
function cleanChannel(value){
return String(value||'')
.trim()
.replace(/^#+/,'')
.replace(/\s+/g,'');
}
var widgets=
document.querySelectorAll(
'.cfOldMircWidget'
);
Array.prototype.forEach.call(
widgets,
function(widget){
var overlay=
widget.querySelector(
'.cfOldMircOverlay'
);
var panel=
widget.querySelector(
'.cfOldMircPanel'
);
var server=
widget.querySelector(
'.cfOldMircServer'
);
var channel=
widget.querySelector(
'.cfOldMircChannel'
);
var nick=
widget.querySelector(
'.cfOldMircNick'
);
var dalnet=
widget.querySelector(
'.cfOldMircDalnet'
);
var connect=
widget.querySelector(
'.cfOldMircConnect'
);
var listBtn=
widget.querySelector(
'.cfOldMircListBtn'
);
var helpBtn=
widget.querySelector(
'.cfOldMircHelpBtn'
);
var serverList=
widget.querySelector(
'.cfOldMircServerList'
);
var frame=
widget.querySelector(
'.cfOldMircFrame'
);
var chatBox=
widget.querySelector(
'.cfOldMircChatBox'
);
var commands=
widget.querySelector(
'.cfOldMircCommands'
);
var basicBtn=
widget.querySelector(
'.cfOldMircBasicBtn'
);
var basicIcon=
widget.querySelector(
'.cfOldMircBasicIcon'
);
var close=
widget.querySelector(
'.cfOldMircClose'
);
var panelNetwork=
widget.querySelector(
'.cfOldMircPanelNetwork'
);
function buildURL(forceDalnet){
var networkID=
forceDalnet
?'dalnet'
:server.value;
var nickname=
cleanNick(
nick.value
)||'JohnDoe';
var channelName=
cleanChannel(
channel.value
)||'codeflare';
nick.value=
nickname;
channel.value=
channelName;
var config=
NETWORKS[networkID]
||NETWORKS.dalnet;
panelNetwork.textContent=
config.name;
return config.url(
nickname,
channelName
);
}
function openPanel(forceDalnet){
if(forceDalnet){
server.value=
'dalnet';
}
frame.src=
buildURL(
forceDalnet
);
commands.style.display=
'none';
chatBox.style.display=
'block';
basicIcon.innerHTML=
'<i class="fa fa-plus-square"></i>';
overlay.classList.remove(
'cfOldMircOverlayClosing'
);
overlay.classList.add(
'cfOldMircOverlayActive'
);
panel.classList.remove(
'cfOldMircPanelClosing'
);
panel.classList.add(
'cfOldMircPanelOpening'
);
document.documentElement
.classList.add(
'cfOldMircNoScroll'
);
document.body
.classList.add(
'cfOldMircNoScroll'
);
setTimeout(function(){
panel.classList.remove(
'cfOldMircPanelOpening'
);
},320);
}
function closePanel(){
overlay.classList.add(
'cfOldMircOverlayClosing'
);
panel.classList.add(
'cfOldMircPanelClosing'
);
setTimeout(function(){
frame.src=
'about:blank';
overlay.classList.remove(
'cfOldMircOverlayActive',
'cfOldMircOverlayClosing'
);
panel.classList.remove(
'cfOldMircPanelClosing'
);
commands.style.display=
'none';
chatBox.style.display=
'block';
document.documentElement
.classList.remove(
'cfOldMircNoScroll'
);
document.body
.classList.remove(
'cfOldMircNoScroll'
);
},260);
}
function toggleCommands(){
if(
commands.style.display===
'block'
){
commands.style.display=
'none';
chatBox.style.display=
'block';
basicIcon.innerHTML=
'<i class="fa fa-plus-square"></i>';
}else{
commands.style.display=
'block';
chatBox.style.display=
'none';
basicIcon.innerHTML=
'<i class="fa fa-minus-square"></i>';
}
}
connect.addEventListener(
'click',
function(){
openPanel(false);
}
);
dalnet.addEventListener(
'click',
function(){
openPanel(true);
}
);
close.addEventListener(
'click',
closePanel
);
basicBtn.addEventListener(
'click',
toggleCommands
);
helpBtn.addEventListener(
'click',
function(){
overlay.classList.add(
'cfOldMircOverlayActive'
);
panel.classList.add(
'cfOldMircPanelOpening'
);
chatBox.style.display=
'none';
commands.style.display=
'block';
}
);
listBtn.addEventListener(
'click',
function(){
serverList.classList.toggle(
'cfOldMircServerListActive'
);
}
);
var networkButtons=
serverList.querySelectorAll(
'button'
);
Array.prototype.forEach.call(
networkButtons,
function(button){
button.addEventListener(
'click',
function(){
server.value=
this.getAttribute(
'data-network'
);
serverList.classList.remove(
'cfOldMircServerListActive'
);
}
);
}
);
[nick,channel].forEach(
function(input){
input.addEventListener(
'keydown',
function(event){
if(event.key==='Enter'){
event.preventDefault();
openPanel(false);
}
}
);
}
);
overlay.addEventListener(
'click',
function(event){
if(event.target===overlay){
closePanel();
}
}
);
document.addEventListener(
'keydown',
function(event){
if(
event.key==='Escape' &&
overlay.classList.contains(
'cfOldMircOverlayActive'
)
){
closePanel();
}
}
);
}
);
})();
//]]>
</script>
<style>
.cfOldMircWidget{
position:relative;
width:100%;
box-sizing:border-box;
}
.cfOldMircWidget *{
box-sizing:border-box;
}
.cfOldMircMain{
width:100%;
max-width:420px;
margin:auto;
padding:5px;
border-radius:4px;
background-image:linear-gradient(
to bottom,
rgba(50,123,165,.75),
rgba(46,75,90,.75) 50%,
rgba(92,176,220,.75)
);
box-shadow:
inset 0 0 1px #fff,
0 8px 22px rgba(0,0,0,.15);
}
.cfOldMircForm{
padding:5px;
border-radius:4px;
background:#006699;
color:#fff;
}
.cfOldMircTitle{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
font-size:22px;
font-weight:bold;
color:#fff;
}
.cfOldMircLogo{
width:29px;
height:29px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
color:#0083da;
border-radius:3px;
}
.cfOldMircInputArea{
padding:7px;
background:#0083da;
}
.cfOldMircRow{
display:grid;
grid-template-columns:100px 1fr;
gap:5px;
align-items:center;
margin-bottom:5px;
}
.cfOldMircRow label{
font-size:11px;
font-weight:bold;
color:#fff;
}
.cfOldMircControl input,
.cfOldMircControl select{
width:100%;
height:29px;
padding:0 6px;
border:1px solid #ddd;
background:#fff;
color:#222;
}
.cfOldMircButtons{
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
margin-top:6px;
}
.cfOldMircButtons button{
min-height:29px;
border:1px solid #fff;
background:#0083da;
color:#fff;
cursor:pointer;
}
.cfOldMircMenu{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
margin-top:6px;
padding:6px;
background:#0083da;
color:#fff;
}
.cfOldMircMenu button{
border:0;
background:transparent;
color:#fff;
cursor:pointer;
}
.cfOldMircServerList{
display:none;
grid-template-columns:repeat(2,1fr);
gap:5px;
margin-top:5px;
padding:6px;
background:#075983;
}
.cfOldMircServerListActive{
display:grid;
}
.cfOldMircServerList button{
padding:6px;
border:1px solid #fff;
background:#0083da;
color:#fff;
}
.cfOldMircNoScroll{
overflow:hidden!important;
}
.cfOldMircOverlay{
display:none;
position:fixed;
z-index:9999998;
inset:0;
padding:8px;
background:rgba(0,0,0,.28);
opacity:0;
}
.cfOldMircOverlayActive{
display:flex;
align-items:center;
justify-content:center;
animation:cfOldOverlayOpen .28s ease forwards;
}
.cfOldMircOverlayClosing{
animation:cfOldOverlayClose .26s ease forwards;
}
.cfOldMircPanel{
width:min(800px,100%);
height:min(610px,calc(100vh - 16px));
display:flex;
flex-direction:column;
overflow:hidden;
padding:5px;
border-radius:4px;
background-image:linear-gradient(
to bottom,
rgba(50,123,165,.97),
rgba(46,75,90,.97) 50%,
rgba(92,176,220,.97)
);
box-shadow:0 15px 45px rgba(0,0,0,.3);
}
.cfOldMircPanelOpening{
animation:cfOldPanelOpen .32s cubic-bezier(.22,.8,.25,1) both;
}
.cfOldMircPanelClosing{
animation:cfOldPanelClose .26s ease both;
}
.cfOldMircPanelHeader{
display:grid;
grid-template-columns:1fr 1fr 1fr;
align-items:center;
gap:5px;
margin-bottom:5px;
}
.cfOldMircPanelHeader button{
min-height:29px;
border:1px solid #fff;
background:#0083da;
color:#fff;
cursor:pointer;
}
.cfOldMircPanelTitle{
text-align:center;
font-weight:bold;
color:#fff;
}
.cfOldMircChatBox,
.cfOldMircCommands{
flex:1;
min-height:0;
}
.cfOldMircFrame{
display:block;
width:100%;
height:100%;
border:1px solid #fff;
background:#fff;
}
.cfOldMircCommands{
display:none;
overflow:auto;
padding:12px;
background:#fff;
color:#222;
}
.cfOldMircCommands code{
display:block;
margin-top:7px;
padding:6px 8px;
background:#163441;
color:#7deaff;
}
@keyframes cfOldOverlayOpen{
from{opacity:0}
to{opacity:1}
}
@keyframes cfOldOverlayClose{
from{opacity:1}
to{opacity:0}
}
@keyframes cfOldPanelOpen{
0%{
opacity:0;
transform:translateY(-18px) scale(.94);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
}
}
@keyframes cfOldPanelClose{
0%{
opacity:1;
transform:translateY(0) scale(1);
}
100%{
opacity:0;
transform:translateY(14px) scale(.95);
}
}
@media(max-width:800px){
.cfOldMircOverlay{
padding:5px;
}
.cfOldMircPanel{
width:100%;
height:calc(100vh - 10px);
}
}
@media(max-width:480px){
.cfOldMircRow{
grid-template-columns:1fr;
}
.cfOldMircButtons{
grid-template-columns:1fr;
}
.cfOldMircPanelHeader{
grid-template-columns:auto 1fr auto;
}
.cfOldMircBasicBtn{
font-size:0;
}
.cfOldMircBasicBtn i,
.cfOldMircBasicIcon{
font-size:12px;
}
.cfOldMircClose{
font-size:0;
}
.cfOldMircClose i{
font-size:12px;
}
}
</style>
Cara Menggunakan Widget
Pilih network, masukkan nickname dan channel kemudian tekan Connect WebChat. Channel tidak perlu ditulis menggunakan tanda pagar karena script akan membersihkan input dan menambahkan format channel sesuai WebChat network.
NETWORK
DALnet
NICKNAME
JohnDoe
CHANNEL
#codeflare
Perintah Dasar IRC
/join #channel
Masuk ke sebuah channel.
/part #channel
Keluar dari channel.
/nick NamaBaru
Mengganti nickname.
/msg nickname pesan
Mengirim pesan pribadi.
/whois nickname
Melihat informasi pengguna.
/list
Menampilkan daftar channel.
/me action
Mengirim action message.
/quit
Keluar dari IRC.
Keamanan Menggunakan IRC
IRC tetap merupakan ruang komunikasi online sehingga prinsip keamanan internet tetap perlu diterapkan.
1
Jangan membagikan password.
2
Jangan memberikan OTP atau kode autentikasi.
3
Hindari memakai informasi sensitif sebagai nickname.
4
Jangan sembarangan membuka link.
5
Jangan menerima file dari pengguna yang tidak dikenal.
6
Ikuti aturan network dan operator channel.
Channel publik bukan ruang privat
Pesan pada channel publik dapat dibaca pengguna lain yang berada di channel tersebut. Hindari membagikan informasi rahasia melalui percakapan publik.
Dengan tetap menyediakan widget modern dan versi sebelumnya, pengguna dapat memilih desain sesuai karakter blog mereka. Versi baru menawarkan tampilan terminal yang lebih modern, sedangkan versi legacy mempertahankan nuansa WebChat IRC klasik yang menjadi ciri widget awal CodeFlare.
CODEFLARE DEVELOPMENT SERVICE
Punya Ide Widget Blogger yang Lebih Unik?
CodeFlare dapat membantu membuat custom widget Blogger seperti live chat, generator, dashboard, API integration maupun JavaScript interaktif sesuai kebutuhan blog Anda.
Custom Widget Blogger
Perbaikan Template
Custom JavaScript
Website Blogger
Custom widget mulai dari Rp50.000 tergantung tingkat kerumitan dan kompleksitas script.
Konsultasikan Project AndaKeyword: Widget IRC Blogger, WebChat IRC, DALnet, Libera Chat, QuakeNet, Undernet, EFnet, IRCnet, Multi Server IRC, Widget Chat Blogger.
Incoming Search Terms: cara membuat widget IRC multi server, WebChat IRC Blogger, widget mIRC Blogger, DALnet Blogger, Libera Chat Blogger, widget IRC klasik Blogger.
About CodeFlare
1 comment:
💬 Share Your Thoughts & Join the Hall of Fame!
Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀
💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.
👉 Comment now. Share your ideas. Get noticed on codeflare.net
Just Checking my Post comment...
ReplyDelete