Widget Chatbot AI + Web Apps Builder Gratis untuk Blogger (Copy-Paste!)

Semua tools gratis untuk blog Anda sudah siap! Berikut widget lengkap yang bisa langsung Anda pasang di Blogger. Cukup copy-paste ke Layout > Add Gadget > HTML/JavaScript.

1. Widget Chatbot AI (Floating Button)

Widget chatbot floating yang muncul di pojok kanan bawah blog. Pengunjung bisa bertanya langsung dan jawaban otomatis.

📋 Copy kode ini ke Layout > Gadget > HTML/JavaScript:

<!-- JeniusKlik AI Chatbot Widget -->
<div id="jk-chatbot" style="position:fixed;bottom:20px;right:20px;z-index:99999;font-family:'Segoe UI',sans-serif">
  <button onclick="toggleJKChat()" id="jk-chat-btn" style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;font-size:28px;cursor:pointer;box-shadow:0 4px 20px rgba(102,126,234,0.5);transition:transform 0.3s">💬</button>
  <div id="jk-chat-window" style="display:none;width:350px;height:480px;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.25);position:absolute;bottom:70px;right:0;background:#fff">
    <div style="background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:15px 20px;display:flex;align-items:center;gap:10px">
      <div style="width:40px;height:40px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px">🤖</div>
      <div><div style="font-weight:600;font-size:15px">JeniusKlik AI</div><div style="font-size:11px;opacity:0.8">🟢 Online - Siap membantu!</div></div>
    </div>
    <div id="jk-messages" style="height:320px;overflow-y:auto;padding:15px;background:#f0f2f5;display:flex;flex-direction:column;gap:8px">
      <div style="background:white;padding:12px 16px;border-radius:16px;border-bottom-left-radius:4px;font-size:13px;line-height:1.5;box-shadow:0 1px 2px rgba(0,0,0,0.1);max-width:85%">Halo! Saya AI Assistant JeniusKlik. Tanyakan tentang tutorial Google Apps Script, tips SEO, atau buat aplikasi web gratis!</div>
    </div>
    <div style="display:flex;gap:6px;padding:8px 15px;background:white;border-top:1px solid #eee;flex-wrap:wrap">
      <button onclick="jkSend('Tutorial')" style="background:#f0f2f5;border:none;padding:6px 12px;border-radius:15px;font-size:11px;cursor:pointer">Tutorial</button>
      <button onclick="jkSend('Aplikasi Web')" style="background:#f0f2f5;border:none;padding:6px 12px;border-radius:15px;font-size:11px;cursor:pointer">Aplikasi Web</button>
      <button onclick="jkSend('Tips SEO')" style="background:#f0f2f5;border:none;padding:6px 12px;border-radius:15px;font-size:11px;cursor:pointer">Tips SEO</button>
    </div>
    <div style="display:flex;padding:12px;gap:8px;background:white;border-top:1px solid #eee">
      <input type="text" id="jk-input" placeholder="Ketik pesan..." style="flex:1;border:1px solid #ddd;border-radius:25px;padding:10px 16px;font-size:13px;outline:none" onkeypress="if(event.key=='Enter')jkSendMsg()">
      <button onclick="jkSendMsg()" style="background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:16px">➤</button>
    </div>
  </div>
</div>
<script>
function toggleJKChat(){var w=document.getElementById('jk-chat-window');var b=document.getElementById('jk-chat-btn');w.style.display=w.style.display==='none'?'block':'none';b.innerHTML=w.style.display==='block'?'&#10005;':'&#128172;'}
function jkSend(msg){document.getElementById('jk-input').value=msg;jkSendMsg()}
function jkSendMsg(){var input=document.getElementById('jk-input');var msg=input.value.trim();if(!msg)return;
jkAddMsg(msg,'user');input.value='';
setTimeout(function(){var responses={'tutorial':'Kami punya 20+ tutorial Google Apps Script! Kunjungi blog kami untuk tutorial lengkap membuat aplikasi web, presensi online, dan lainnya.','aplikasi web':'Buat aplikasi web gratis dengan Google Apps Script! Tanpa hosting, langsung deploy. Cek Web Apps Builder kami di blog.','seo':'Tips SEO: 1) Kata kunci di judul, 2) Konten 900+ kata, 3) Gambar relevan, 4) Internal linking, 5) Submit ke Google Search Console.','default':'Maaf, saya belum mengerti. Coba tanyakan tentang tutorial, aplikasi web, atau tips SEO!'};var resp=responses[msg.toLowerCase()]||responses['default'];jkAddMsg(resp,'bot')},800)}
function jkAddMsg(text,sender){var div=document.createElement('div');div.style.cssText='background:'+(sender==='user'?'linear-gradient(135deg,#667eea,#764ba2);color:white;align-self:flex-end;border-bottom-right-radius:4px':'white;align-self:flex-start;border-bottom-left-radius:4px')+';padding:12px 16px;border-radius:16px;font-size:13px;line-height:1.5;max-width:85%;box-shadow:0 1px 2px rgba(0,0,0,0.1)';div.textContent=text;document.getElementById('jk-messages').appendChild(div);document.getElementById('jk-messages').scrollTop=99999}
</script>

2. Web Apps Builder (Embed Realtime)

Embed Web Apps Builder interaktif langsung di blog Anda. Pengunjung bisa membuat aplikasi web secara langsung.

📋 Copy kode ini ke Layout > Gadget > HTML/JavaScript:

<!-- JeniusKlik Web Apps Builder -->
<div style="max-width:900px;margin:20px auto;font-family:'Segoe UI',sans-serif">
<div style="background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.1);overflow:hidden">
<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:25px;text-align:center">
<h2 style="font-size:22px">🛠 Web Apps Builder Gratis</h2>
<p style="opacity:0.9;font-size:13px;margin-top:5px">Buat aplikasi web profesional tanpa coding!</p>
</div>
<div style="padding:25px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px">
<div><label style="font-weight:600;font-size:13px">Nama Aplikasi</label><input type="text" id="jk-app-name" value="Aplikasi Saya" style="width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:8px;margin-top:5px;box-sizing:border-box;font-size:14px"></div>
<div><label style="font-weight:600;font-size:13px">Tipe</label><select id="jk-app-type" style="width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:8px;margin-top:5px;font-size:14px"><option>Landing Page</option><option>Formulir</option><option>Dashboard</option><option>Toko Online</option><option>Portofolio</option></select></div>
</div>
<div><label style="font-weight:600;font-size:13px">Judul Hero</label><input type="text" id="jk-hero-title" value="Selamat Datang" style="width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:8px;margin-top:5px;box-sizing:border-box;font-size:14px"></div>
<div style="margin-top:12px"><label style="font-weight:600;font-size:13px">Deskripsi</label><textarea id="jk-hero-desc" rows="2" style="width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:8px;margin-top:5px;box-sizing:border-box;font-size:14px">Aplikasi web modern dan profesional.</textarea></div>
<div style="margin-top:15px;display:flex;gap:8px;flex-wrap:wrap">
<div onclick="jkSetColor(this,'#667eea','#764ba2')" style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:2px solid #333"></div>
<div onclick="jkSetColor(this,'#f093fb','#f5576c')" style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f093fb,#f5576c);cursor:pointer;border:2px solid transparent"></div>
<div onclick="jkSetColor(this,'#4facfe','#00f2fe')" style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#4facfe,#00f2fe);cursor:pointer;border:2px solid transparent"></div>
<div onclick="jkSetColor(this,'#43e97b','#38f9d7')" style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#43e97b,#38f9d7);cursor:pointer;border:2px solid transparent"></div>
<div onclick="jkSetColor(this,'#fa709a','#fee140')" style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#fa709a,#fee140);cursor:pointer;border:2px solid transparent"></div>
</div>
<button onclick="jkGenerateApp()" style="width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;padding:14px;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;margin-top:15px;transition:transform 0.2s">🚀 Generate Aplikasi</button>
<div id="jk-output" style="margin-top:15px;display:none">
<label style="font-weight:600;font-size:13px">Kode Siap Pakai:</label>
<pre style="background:#1e1e1e;color:#d4d4d4;padding:15px;border-radius:8px;font-size:11px;max-height:250px;overflow:auto;white-space:pre-wrap;margin-top:5px" id="jk-code-output"></pre>
<button onclick="navigator.clipboard.writeText(document.getElementById('jk-code-output').textContent);this.innerHTML='✓ Tersalin!'" style="background:#4caf50;color:white;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;margin-top:8px">📋 Salin Kode</button>
</div>
</div>
</div>
</div>
<script>
var jkC1='#667eea',jkC2='#764ba2';
function jkSetColor(el,c1,c2){jkC1=c1;jkC2=c2;el.parentElement.querySelectorAll('div').forEach(function(d){d.style.borderColor='transparent'});el.style.borderColor='#333'}
function jkGenerateApp(){var name=document.getElementById('jk-app-name').value||'Aplikasi';var hero=document.getElementById('jk-hero-title').value||'Selamat Datang';var desc=document.getElementById('jk-hero-desc').value||'Deskripsi';var code='<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif}.hero{background:linear-gradient(135deg,'+jkC1+','+jkC2+');color:#fff;padding:80px 20px;text-align:center}.hero h1{font-size:2.5em;margin-bottom:15px}.hero p{font-size:1.2em;opacity:0.9;margin-bottom:25px}.cta{display:inline-block;padding:15px 40px;background:#fff;color:'+jkC1+';text-decoration:none;border-radius:12px;font-weight:600}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:40px 20px}.fc{background:#fff;padding:30px;border-radius:16px;text-align:center;box-shadow:0 5px 20px rgba(0,0,0,0.08)}.fc h3{color:'+jkC1+'}.footer{background:#333;color:#fff;text-align:center;padding:25px;margin-top:20px}</style></head><body><div class="hero"><h1>'+hero+'</h1><p>'+desc+'</p><a href="#" class="cta">Mulai Sekarang</a></div><div class="features"><div class="fc"><h3>Fitur 1</h3><p>Deskripsi fitur pertama</p></div><div class="fc"><h3>Fitur 2</h3><p>Deskripsi fitur kedua</p></div><div class="fc"><h3>Fitur 3</h3><p>Deskripsi fitur ketiga</p></div></div><div class="footer">© 2026 '+name+'</div></body></html>';document.getElementById('jk-code-output').textContent=code;document.getElementById('jk-output').style.display='block'}
</script>
</div>

Cara Memasang Widget di Blogger

1. Login ke blogger.com
2. Pilih blog Anda (JENIUSKLIK)
3. Klik menu Layout (Tata Letak)
4. Klik + Add Gadget (Tambahkan Gadget)
5. Pilih HTML/JavaScript
6. Paste kode widget di atas
7. Klik Save (Simpan)
8. Klik Save Arrangement
9. Selesai! Widget langsung aktif di blog Anda

Tips Promosi Blog yang Efektif & Etis

1. Optimasi SEO

• Submit blog ke Google Search Console
• Buat sitemap.xml otomatis
• Gunakan kata kunci di judul dan deskripsi artikel
• Tambahkan schema markup JSON-LD

2. Promosi Media Sosial

• Share artikel ke Facebook, Twitter, LinkedIn
• Buat thread di Twitter/X
• Posting di Reddit, Quora, dan forum teknologi Indonesia
• Gunakan WhatsApp Grup dan Telegram Group

3. Konten Berkualitas

• Buat artikel 900+ kata dengan gambar
• Update konten secara rutin
• Buat tutorial yang benar-benar membantu
• Gunakan data dan fakta yang akurat

4. Bangun Komunitas

• Balas komentar di blog
• Buat newsletter email
• Kolaborasi dengan blogger lain
• Guest posting di blog populer

Tags: Chatbot AI, Web Apps Builder, Blogger Widget, Google Apps Script, Blog Gratis, Tools Blogger, Widget Gratis, Tutorial Blogger

Share :