Looker Style

 

Berikut penjelasan cara membuat style seperti kode HTML di Looker Studio (Google Data Studio) serta contoh kode yang sudah kompatibel dengan Looker Studio Community Visualization / HTML box.

---

✅ 1. Prinsip Looker Studio HTML Styling

Looker Studio tidak mengizinkan CSS eksternal
→ Jadi Anda harus menuliskan inline style seperti yang sudah Anda lakukan.

Looker Studio juga tidak mengizinkan tag <style> atau script JS.
Namun tag HTML, inline style, dan dynamic field seperti {{Nama}} tetap bisa.

---

✅ 2. Format Template HTML di Looker Studio

Jika Anda memakai Community Visualization > HTML, Anda perlu menggunakan format:

<div>

  <p>{{field}}</p>

</div>

Jika Anda memakai Feature "Community Visualization → HTML editor", Anda bisa langsung tempelkan kode berikut.

---

✅ 3. Versi Kode HTML Anda yang Sudah Diperbaiki & Compatible untuk Looker Studio

✔ Aman

✔ Tidak menggunakan CSS eksternal

✔ Full inline style

✔ Cocok untuk Looker Studio HTML

---

🔧 Tempelkan Kode Ini di Looker Studio → Community Visualization → HTML Editor

<div style="padding: 10px; font-family: Arial, sans-serif;">

 

  <!-- Header Identitas -->

  <header>

    <div style="color: #4f4f4f; text-align: center; font-size:20px; font-weight:bold;">

      {{Nama}}

    </div>

 

    <div style="text-align: center; font-size:14px; color:#333;">

      <i>Sekolah <strong>{{AsalSekolah}} {{Kabupaten}}</strong></i>

      <span style="font-size:16px; vertical-align:middle;">📍</span>

    </div>

  </header>

 

  <hr style="width: 100%; height: 2px; background-color: #4f4f4f; margin-bottom: 20px;" />

 

  <!-- Foto / Banner -->

  <div style="text-align: center;">

    <img src="{{Image}}" style="max-width:200%; border-radius:5px;" />

  </div>

 

  <!-- Informasi Detail -->

  <table style="border:none; padding-left: 60px; border-spacing: 10px; width:100%;">

    <tbody>

      <tr>

        <td style="vertical-align: top;">

 

          <p><strong style="color:#4f4f4f;">Deskripsi:</strong> {{Topik}}</p>

          <p><strong style="color:#4f4f4f;">Ketua Rintisan Usaha:</strong> {{Ketua}}</p>

          <p><strong style="color:#4f4f4f;">Anggota:</strong> {{Anggota}}</p>

 

          <!-- Link-link -->

          <p><strong style="color:#4f4f4f;">Link Produk:</strong> <a href="{{UploadPicture}}" target="_blank">Klik Produk</a></p>

          <p><strong style="color:#4f4f4f;">Link Logo:</strong> <a href="{{Logo}}" target="_blank">Klik Logo</a></p>

          <p><strong style="color:#4f4f4f;">Link Social Media:</strong> <a href="{{Socmed}}" target="_blank">Klik Social Media</a></p>

          <p><strong style="color:#4f4f4f;">Link Foto Tim:</strong> <a href="{{FotoTim}}" target="_blank">Klik Tim</a></p>

          <p><strong style="color:#4f4f4f;">Link Video:</strong> <a href="{{LinkVideo}}" target="_blank">Klik Video</a></p>

          <p><strong style="color:#4f4f4f;">Link Website:</strong> <a href="{{LinkWebsite}}" target="_blank">Klik Website</a></p>

          <p><strong style="color:#4f4f4f;">Link Katalog:</strong> <a href="{{LinkKatalog}}" target="_blank">Klik Katalog</a></p>

          <p><strong style="color:#4f4f4f;">Etalase Produk:</strong> <a href="{{LinkEtalase}}" target="_blank">Klik Etalase</a></p>

          <p><strong style="color:#4f4f4f;">PPT Usaha:</strong> <a href="{{BMCRencana}}" target="_blank">Klik PPT</a></p>

 

          <!-- Box Transaksi -->

          <div style="background-color:#4f4f4f; color:white; border-radius:5px; padding:6px 10px; margin-top:10px; display:inline-block;">

            💰 Transaksi : Rp {{Transaksi}}

          </div>

 

        </td>

      </tr>

    </tbody>

  </table>

 

  <hr style="width: 100%; height: 2px; background-color: #4f4f4f; margin-top: 15px;" />

</div>

---

✅ 4. Catatan Penting untuk Looker Studio

✔ Ikon Material tidak bisa dipanggil langsung

→ Gunakan emoji seperti “📍”, “💰”
Jika tetap ingin Material Icons, Anda harus pakai:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

❌ Tapi Looker Studio tidak mengizinkan <link>, jadi emoji adalah solusi terbaik.

---

✅ 5. Tips Style Biar Lebih Bagus

Jika mau tampilan lebih rapi di Looker Studio:

• Gunakan font-family: Arial, sans-serif (yang paling aman)
• Gunakan padding & border radius
• Hindari CSS kompleks seperti position:absolute
• Jangan pakai javascript
• Hindari <style>...</style> untuk menghindari error

---

Mau dibuatkan versi:

✔ warna tema lain
✔ layout 2 kolom
✔ ditambahkan QR Code
✔ ditambahkan logo sekolah di header
✔ diubah jadi tampilan kartu (card style)

Cukup bilang: "buatkan versi tema ..." atau "buatkan layout 2 kolom".

You said:

buatkan layout 2 kolom

ChatGPT said:

Berikut versi layout 2 kolom yang bersih, aman, dan kompatibel untuk Looker Studio (tanpa CSS eksternal & tanpa <style> tag).

✔ Kolom kiri = Foto / Gambar

✔ Kolom kanan = Informasi usaha & link-link

✔ Responsif & tetap rapi di Looker Studio

---

✅ HTML Layout 2 Kolom (Siap Tempel di Looker Studio)

<div style="padding: 15px; font-family: Arial, sans-serif;">

 

  <!-- Header -->

  <div style="text-align:center; margin-bottom:10px;">

    <div style="color:#4f4f4f; font-size:20px; font-weight:bold;">

      {{Nama}}

    </div>

    <div style="font-size:14px; color:#555;">

      <i>Sekolah <strong>{{AsalSekolah}} {{Kabupaten}}</strong></i> 📍

    </div>

  </div>

 

  <hr style="width: 100%; height:2px; background-color:#4f4f4f; margin-bottom:15px;" />

 

  <!-- GRID 2 KOLOM -->

  <table style="width:100%; border-spacing:15px;">

    <tr>

      <!-- KOLOM 1 (Gambar) -->

      <td style="width:40%; vertical-align:top; text-align:center;">

        <img src="{{Image}}" style="width:100%; max-width:350px; border-radius:6px;" />

      </td>

 

      <!-- KOLOM 2 (Data) -->

      <td style="width:60%; vertical-align:top;">

 

        <p><strong style="color:#4f4f4f;">Deskripsi:</strong> {{Topik}}</p>

        <p><strong style="color:#4f4f4f;">Ketua Rintisan Usaha:</strong> {{Ketua}}</p>

        <p><strong style="color:#4f4f4f;">Anggota:</strong> {{Anggota}}</p>

 

        <!-- Link-link -->

        <p><strong style="color:#4f4f4f;">Link Produk:</strong> <a href="{{UploadPicture}}" target="_blank">Klik Produk</a></p>

        <p><strong style="color:#4f4f4f;">Link Logo:</strong> <a href="{{Logo}}" target="_blank">Klik Logo</a></p>

        <p><strong style="color:#4f4f4f;">Social Media:</strong> <a href="{{Socmed}}" target="_blank">Klik Social Media</a></p>

        <p><strong style="color:#4f4f4f;">Foto Tim:</strong> <a href="{{FotoTim}}" target="_blank">Klik Tim</a></p>

        <p><strong style="color:#4f4f4f;">Video:</strong> <a href="{{LinkVideo}}" target="_blank">Klik Video</a></p>

        <p><strong style="color:#4f4f4f;">Website:</strong> <a href="{{LinkWebsite}}" target="_blank">Klik Website</a></p>

        <p><strong style="color:#4f4f4f;">Katalog:</strong> <a href="{{LinkKatalog}}" target="_blank">Klik Katalog</a></p>

        <p><strong style="color:#4f4f4f;">Etalase Produk:</strong> <a href="{{LinkEtalase}}" target="_blank">Klik Etalase</a></p>

        <p><strong style="color:#4f4f4f;">PPT Usaha:</strong> <a href="{{BMCRencana}}" target="_blank">Klik PPT</a></p>

 

        <!-- Box Transaksi -->

        <div style="background-color:#4f4f4f; color:white; padding:6px 10px; border-radius:5px; margin-top:15px; display:inline-block;">

          💰 Transaksi : Rp {{Transaksi}}

        </div>

 

      </td>

    </tr>

  </table>

 

  <hr style="width:100%; height:2px; background-color:#4f4f4f; margin-top:20px;" />

 

</div>

---

✅ Tampilannya seperti ini:

| Foto Produk (kiri) | Informasi + Link Usaha (kanan) |

Struktur rapi, profesional, cocok untuk kartu profil, katalog usaha, dan showcase project SMK.

---

Mau versi lain?

Saya bisa buatkan:

✔ Versi 3 Kolom

✔ Versi Card Style seperti Instagram Profile

✔ Versi Dark Theme

✔ Versi Minimalist

✔ Versi dengan QR Code otomatis

✔ Versi Grid Galeri 3 Foto

Cukup katakan: "buatkan versi ... "