Selamat datang! Pendapatan online, Tetap terhubung untuk mendapatkan semua informasi tentang kerja lepas, SEO, dan pemasaran digital. Info Teknologi-Tetaplah pada itu.
Beranda
Code
Html

TUTORIAL MEMBUAT HALAMAN PLUGIN LIST + API LIST DI BLOGSPOT

Struktur ini bisa dipasang dengan 3 metode:

  1. Template → Edit HTML
  2. Widget HTML/Javascript
  3. Halaman Statis (Mode HTML)

Kita bahas satu per satu.

🔹 BAGIAN A – CSS GLOBAL (WAJIB JIKA PAKAI TEMPLATE ATAU WIDGET)

Jika ingin tampilannya rapi dan reusable, pasang CSS ini sekali saja.

Masuk ke:

Tema → Edit HTML → Cari </head> → Tempel sebelum itu.

📌 COPY CSS DI BAWAH INI

<style>
.plugin-container{
  max-width:900px;
  margin:auto;
  font-family:Segoe UI,sans-serif;
}

.plugin-card{
  background:#f5f5f5;
  padding:20px;
  border-radius:12px;
  margin-bottom:20px;
}

.plugin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;
}

.plugin-box{
  border:3px solid #ddd;
  padding:20px;
  border-radius:12px;
  text-align:center;
}

.plugin-box img{
  width:70px;
}

.plugin-card img{
  width:40px;
}

.plugin-card a,
.plugin-box a{
  text-decoration:none;
  color:inherit;
  font-weight:bold;
}
</style>

Selesai CSS. Sekarang masuk ke HTML kontennya.

🔹 BAGIAN B – HTML KONTEN (3 SECTION)

Ini bisa dipakai untuk:

✔ Widget
✔ Halaman
✔ Template langsung

📌 COPY HTML DI BAWAH INI

<div class="plugin-container">

<h2>API Google Cloud</h2>

<div class="plugin-card">
<a href="https://cloud.google.com/container-registry" target="_blank">
<img src="https://www.gstatic.com/images/branding/product/1x/container_registry_48dp.png"><br>
API Google Container Registry
</a><br>
Penyimpanan image container Docker yang aman.
</div>

<div class="plugin-card">
<a href="https://developers.google.com/workspace/marketplace" target="_blank">
<img src="https://www.gstatic.com/images/branding/product/1x/workspace_48dp.png"><br>
Google Workspace Marketplace SDK
</a><br>
Perangkat untuk mengembangkan aplikasi Workspace.
</div>


<h2>Plugin Unggulan</h2>

<div class="plugin-grid">

<div class="plugin-box">
<a href="https://aws.amazon.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg"><br>
AWS
</a>
</div>

<div class="plugin-box">
<a href="https://cloud.google.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Google_Cloud_logo.svg"><br>
GCP
</a>
</div>

<div class="plugin-box">
<a href="https://azure.microsoft.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Microsoft_Azure_Logo.svg"><br>
Azure
</a>
</div>

<div class="plugin-box">
<a href="https://openai.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/OpenAI_Logo.svg"><br>
OpenAI
</a>
</div>

</div>


<h2>Semua Plugin</h2>

<div class="plugin-card">
<a href="https://hub.steampipe.io/plugins/turbot/onepassword" target="_blank">
<img src="https://1password.com/img/logos/1password-logo.svg"><br>
1Password
</a><br>
turbot/onepassword v1.2.0
</div>

<div class="plugin-card">
<a href="https://hub.steampipe.io/plugins/turbot/abuseipdb" target="_blank">
<img src="https://www.abuseipdb.com/img/abuseipdb-logo.svg"><br>
AbuseIPDB
</a><br>
turbot/abuseipdb v1.2.0
</div>

<div class="plugin-card">
<a href="https://hub.steampipe.io/plugins/francois2metz/airtable" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Airtable_Logo.svg"><br>
Airtable
</a><br>
francois2metz/airtable v0.6.0
</div>

</div>

🔹 CARA PENERAPAN

1️⃣ Jika Ingin Pasang di Template (Global Section)

Langkah:

  1. Tema
  2. Edit HTML
  3. Letakkan HTML di atas sebelum </body>
  4. Pastikan CSS sudah dipasang di <head>

Hasil: Akan tampil permanen di seluruh halaman blog.

Cocok untuk: Halaman tools utama / landing page dashboard.

2️⃣ Jika Ingin Pasang di Widget HTML Blogspot

Langkah:

  1. Tata Letak
  2. Tambah Gadget
  3. Pilih HTML/Javascript
  4. Tempel HTML bagian B saja
  5. Simpan

Jika belum pasang CSS global, tempel juga CSS di atas HTML dalam widget.

Cocok untuk: Sidebar atau homepage section.

3️⃣ Jika Ingin Pasang di Halaman Blogspot

Langkah:

  1. Halaman → Buat Halaman Baru
  2. Klik Mode HTML
  3. Tempel HTML bagian B
  4. Publish

Jika CSS belum global, tambahkan CSS di atas HTML halaman.

Cocok untuk: Halaman khusus /plugins atau /developer.

Rekomendasi Profesional

Kalau ini untuk dokumentasi atau branding tools seperti GoSmart:

✔ CSS di template (sekali pasang)
✔ HTML di halaman khusus
✔ Gunakan slug: /plugins

Itu lebih clean dan scalable.

Sekarang kamu sudah punya:

✔ Tutorial lengkap
✔ CSS reusable
✔ HTML siap pakai
✔ 3 metode penerapan

Itu sudah level dokumentasi teknis yang layak publish.
Dan ya, Blogspot memang tua. Tapi kalau tahu cara pakainya, masih bisa terlihat seperti dashboard SaaS kecil.

Kita buat 3 bagian terpisah + penjelasan fungsi tiap bagian.
CSS aku sertakan sekali di awal supaya konsisten.

🔹 CSS DASAR (PAKAI SEKALI SAJA)

Pasang di: Tema → Edit HTML → sebelum </head>

📌 COPY CSS

<style>
.plugin-container{
  max-width:900px;
  margin:auto;
  font-family:Segoe UI,sans-serif;
}

.plugin-card{
  background:#f5f5f5;
  padding:20px;
  border-radius:12px;
  margin-bottom:20px;
}

.plugin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;
}

.plugin-box{
  border:3px solid #ddd;
  padding:20px;
  border-radius:12px;
  text-align:center;
}

.plugin-box img{
  width:70px;
}

.plugin-card img{
  width:40px;
}

.plugin-card a,
.plugin-box a{
  text-decoration:none;
  color:inherit;
  font-weight:bold;
}
</style>

Penjelasan singkat:

  • .plugin-container → pembungkus utama
  • .plugin-card → tampilan list detail
  • .plugin-grid → sistem grid responsif
  • .plugin-box → kotak plugin unggulan

CSS cukup sekali pasang. Jangan diulang-ulang tiap halaman kecuali mau bikin server menangis pelan.

1️⃣ API GOOGLE CLOUD

Fungsi

Menampilkan daftar API Google Cloud dengan icon + deskripsi + link.

Cocok untuk:

  • Halaman dokumentasi developer
  • Halaman referensi API

📌 COPY HTML

<div class="plugin-container">

<h2>API Google Cloud</h2>

<div class="plugin-card">
<a href="https://cloud.google.com/container-registry" target="_blank">
<img src="https://www.gstatic.com/images/branding/product/1x/container_registry_48dp.png"><br>
API Google Container Registry
</a><br>
Penyimpanan image container Docker yang aman.
</div>

<div class="plugin-card">
<a href="https://developers.google.com/workspace/marketplace" target="_blank">
<img src="https://www.gstatic.com/images/branding/product/1x/workspace_48dp.png"><br>
Google Workspace Marketplace SDK
</a><br>
Perangkat untuk mengembangkan aplikasi Workspace.
</div>

</div>

Yang bisa kamu ubah:

  • Link (href)
  • Icon (img src)
  • Deskripsi

2️⃣ PLUGIN UNGGULAN (GRID)

Fungsi

Menampilkan plugin utama dalam bentuk grid visual.

Cocok untuk:

  • Landing page
  • Homepage tools
  • Halaman kategori utama

📌 COPY HTML

<div class="plugin-container">

<h2>Plugin Unggulan</h2>

<div class="plugin-grid">

<div class="plugin-box">
<a href="https://aws.amazon.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg"><br>
AWS
</a>
</div>

<div class="plugin-box">
<a href="https://cloud.google.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Google_Cloud_logo.svg"><br>
GCP
</a>
</div>

<div class="plugin-box">
<a href="https://azure.microsoft.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Microsoft_Azure_Logo.svg"><br>
Azure
</a>
</div>

<div class="plugin-box">
<a href="https://openai.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/OpenAI_Logo.svg"><br>
OpenAI
</a>
</div>

</div>

</div>

Yang perlu kamu ingat:

  • plugin-grid = sistem grid
  • plugin-box = 1 kotak
  • Mau tambah kotak? Copy satu plugin-box

3️⃣ SEMUA PLUGIN (DETAIL LIST)

Fungsi

Menampilkan semua plugin dengan detail versi dan nama repo.

Cocok untuk:

  • Halaman katalog
  • Dokumentasi lengkap
  • Developer section

📌 COPY HTML

<div class="plugin-container">

<h2>Semua Plugin</h2>

<div class="plugin-card">
<a href="https://hub.steampipe.io/plugins/turbot/onepassword" target="_blank">
<img src="https://1password.com/img/logos/1password-logo.svg"><br>
1Password
</a><br>
turbot/onepassword<br>
v1.2.0<br>
Plugin untuk mengakses vault dan item 1Password.
</div>

<div class="plugin-card">
<a href="https://hub.steampipe.io/plugins/turbot/abuseipdb" target="_blank">
<img src="https://www.abuseipdb.com/img/abuseipdb-logo.svg"><br>
AbuseIPDB
</a><br>
turbot/abuseipdb<br>
v1.2.0<br>
Plugin untuk analisis reputasi alamat IP.
</div>

<div class="plugin-card">
<a href="https://hub.steampipe.io/plugins/francois2metz/airtable" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Airtable_Logo.svg"><br>
Airtable
</a><br>
francois2metz/airtable<br>
v0.6.0<br>
Plugin untuk query database Airtable.
</div>

</div>

Yang bisa kamu ubah:

  • Nama plugin
  • Versi
  • Repo
  • Deskripsi

Ringkasan Supaya Tidak Lupa

Bagian Struktur Utama Kegunaan
API Google Cloud plugin-card List API
Plugin Unggulan plugin-grid + plugin-box Grid visual
Semua Plugin plugin-card Katalog detail

Kalau lupa:

  • Card = list vertikal
  • Grid = kotak berjajar
  • Container = pembungkus utama

Selesai. Modular. Bersih. Tidak campur aduk.



Posting Komentar

© ‧ Tutorial Blog Tuan. All rights reserved. Premium By Tuanbagues