Membuat Blogger Universal Tools Suite Ala Ai seperti Mas Sugeng Template

Salam Ngerapik Blog teman teman, Saat saya berkunjung ke BlogSite Mas Sugeng.id saya tertarik melihat menu Tools Suite yang ditampilkan oleh Mas Sugeng. Langsung saja tanya Mode Pintar Google..ckckck.. Langsung deh mengatakan prompt yang ingin di buat. Tanpa basa dan basi, berikut kode yang siap diaplikasikan ke dalam mode HTML blogger sobat semuanya, Cekidot Wae..!!

Untuk Demo Aplikasinya Silahkan teman teman bisa lihat DISINI. Untuk kode HTMLnya silahkan teman teman Salin dibawah ini yups Teman teman blogger, saya buat menjadi 3 bagian agar tidak semeraut saat ditempel dan disalin:

KodeTools Suite bagian 1 :

</> Bagian 1 CSS DESIGN

/* Kotak Panel Aplikasi */
  .tool-display { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
  .tool-panel { display: none; }
  .tool-panel.active { display: block; }
  .tool-panel h2 { margin-top: 0; color: #202124; font-size: 1.5rem; margin-bottom: 20px; font-weight: 700; border-bottom: 2px solid #f1f3f4; padding-bottom: 12px; }
  
  /* Aturan Form Input */
  .field-box { margin-bottom: 18px; }
  .field-box label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; color: #3c4043; }
  .input-ui { width: 100%; padding: 12px; border: 1px solid #dadce0; border-radius: 8px; box-sizing: border-box; font-size: 0.95rem; transition: 0.2s; font-family: sans-serif; }
  .input-ui:focus { border-color: #1a73e8; outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
  textarea.input-ui { font-family: monospace; }
  .btn-run { background-color: #1a73e8; color: white; border: none; padding: 14px 24px; border-radius: 8px; font-weight: bold; font-size: 1rem; cursor: pointer; width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  .btn-run:hover { background-color: #1557b0; }
  
  /* Kotak Hasil Output */
  .box-result { margin-top: 25px; padding: 20px; background-color: #f8f9fa; border: 2px dashed #1a73e8; border-radius: 8px; display: none; }
  .btn-copy-ui { background-color: #333; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: bold; cursor: pointer; margin-top: 12px; }
  .btn-copy-ui:hover { background-color: #000; }

@media (min-width: 800px) {
    .portal-grid { grid-template-columns: 280px 1fr; }
  }
</style>

KodeTools Suite bagian 2 :

</> Bagian 2 STRUKTUR PORTAL

<div class="tools-portal">
  <div class="portal-header">
    <h1>Blogger Universal Tools Suite</h1>
    <p>Aplikasi web interaktif terintegrasi untuk memaksimalkan fitur & optimasi blog Anda.</p>
  </div>
  
  <div class="portal-grid">
    
    <div class="portal-sidebar">
      <button class="tool-btn active" onclick="openTool(this, 'panel-menu')">📋 Menu Navigasi</button>
      <button class="tool-btn" onclick="openTool(this, 'panel-sosmed')">🔗 Icon Sosmed</button>
      <button class="tool-btn" onclick="openTool(this, 'panel-toc')">📑 Daftar Ini Otomatis</button>
      <button class="tool-btn" onclick="openTool(this, 'panel-copypaste')">🔒 Anti Copy Paste</button>
      <button class="tool-btn" onclick="openTool(this, 'panel-encoder')">💻 HTML Encoder (Parse)</button>
      <button class="tool-btn" onclick="openTool(this, 'panel-wa')">💬 WhatsApp Melayang <span class="badge-new">Baru</span></button>
      <button class="tool-btn" onclick="openTool(this, 'panel-adblock')">🛡️ Anti AdBlock</button>
      <button class="tool-btn" onclick="openTool(this, 'panel-pages')">📄 Halaman Penting <span class="badge-new">Baru</span></button>
    </div>
    <p>unutk kode selanjutnya & Selengkapnya, silahkan koment di Disqus dibawah yups.. teman teman blogger!.</p>

KodeTools Suite bagian 3 :

</> Bagian 3 JAVASCRIPT

function clipCode(targetId) {
    var txt = document.getElementById(targetId);
    txt.select();
    navigator.clipboard.writeText(txt.value);
    alert("Kode utilitas berhasil disalin!");
  }

// Mengubah placeholder input url sosmed secara dinamis sesuai pilihan select
  function updateSosmedPlaceholder() {
    var type = document.getElementById('sosmedType').value;
    var input = document.getElementById('sosmedUrl');
    if (type === 'whatsapp') { input.placeholder = 'Contoh: https://wa.me'; }
    else if (type === 'telegram') { input.placeholder = 'Contoh: https://t.me'; }
    else if (type === 'tiktok') { input.placeholder = 'Contoh: https://tiktok.com'; }
    else if (type === 'pinterest') { input.placeholder = 'Contoh: https://pinterest.com'; }
    else { input.placeholder = 'https://' + type + '.com/username'; }
  }

// Generator Tag Icon Sosial Media Baru
  function genSosmedHTML() {
    var type = document.getElementById('sosmedType').value;
    var url = document.getElementById('sosmedUrl').value || '#';
    
    // Menyesuaikan class ikon FontAwesome 5/6 agar valid
    var iconClass = 'fab fa-' + type;
    if (type === 'whatsapp') iconClass = 'fab fa-whatsapp';
    if (type === 'telegram') iconClass = 'fab fa-telegram-plane';
    
    document.getElementById('outSosmedCode').value = `<a class="sosmed-icon sosmed-${type}" href="${url}" target="_blank" rel="nofollow noopener" title="Ikuti kami di ${type}">\n  <i class="${iconClass}"></i>\n</a>`;
    document.getElementById('resSosmedBox').style.display = 'block';
  }

function genAntiCopy() {
    document.getElementById('outCopyCode').value = `<style>\nbody {\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n<\/style>`;
    document.getElementById('resCopyBox').style.display = 'block';
  }

function runParse() {
    var src = document.getElementById('rawSrc').value;
    if(src.trim()==="") return alert("Input kode Anda masih kosong!");
    var out = src.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
    document.getElementById('outParsedCode').value = out;
    document.getElementById('resParseBox').style.display = 'block';
  }

function genWAMelayang() {
    var num = document.getElementById('waNum').value || '628';
    document.getElementById('outWaMelayang').value = `<div style="position:fixed; bottom:20px; right:20px; z-index:9999;">\n  <a href="https://wa.me{num}" target="_blank" style="background:#25D366; color:white; padding:12px 20px; border-radius:30px; font-weight:bold; text-decoration:none; box-shadow:0 4px 10px rgba(0,0,0,0.15);">Chat WhatsApp</a>\n</div>`;
    document.getElementById('resWaMelayangBox').style.display = 'block';
  }

Sangat keren kan teman teman blogger, desaign yang simple, elegan, suite serta multi fungsi untuk diterapkan di blogger sobat semuanya. Selamat berkreasi mempercantik dan memperganteng tampilan blog teman teman semua dan ahir kata saya ucapkan terimakasih telah berkunjung di blog ngerapik ini, semoga artikel tentang "Membuat Blogger Universal Tools Suite Ala Ai seperti Mas Sugeng Template" bisa bermanfaat untuk kita semua pengguna blogger. Salam Ngerapik Blog.

Meta HasTags:

#ToolsAi #UniversalToolsBlog #Tools Blogspot #MasSugeng #TamplateSugengId #UniversalToolsSuiteAlaAi #TutorialBlog #NgerapikBlog