Studio postingan SaeGreen
Lihat hasilnya, buka kodenya, lalu gunakan di artikel Anda. Panduan ini mengumpulkan komponen yang bisa dipakai untuk menulis tutorial, dokumentasi, ulasan, dan cerita visual.
Cara membuat postingan di Blogger
- Buat postingan dan tulis judulBuka Postingan → Postingan Baru. Judul akan menjadi H1 artikel secara otomatis; isi artikel dimulai dari H2.
- Pilih Tampilan HTMLBuka pilihan tampilan di toolbar editor. Tempel kode komponen pada bagian yang diinginkan, lalu ganti teks dan tautan contohnya.
- Lengkapi metadataTambahkan label, tentukan permalink yang jelas, dan isi deskripsi penelusuran jika opsi tersebut tersedia.
- Pratinjau sebelum terbitPeriksa di layar HP dan desktop. Setelah isinya siap, publikasikan dan buka alamat artikel untuk memeriksa hasil akhir.
Tipografi dan struktur tulisan
Paragraf dan pembuka
Gunakan paragraf pembuka untuk menjelaskan manfaat artikel sebelum masuk ke detail.
Tulisan yang baik dimulai dari gagasan yang jelas, kemudian memberi pembaca langkah yang bisa dilakukan.
Gunakan paragraf pendek untuk membahas satu gagasan pada satu waktu.
<p class="sg-lead">Tulisan yang baik dimulai dari gagasan yang jelas, kemudian memberi pembaca langkah yang bisa dilakukan.</p>
<p>Gunakan paragraf pendek untuk membahas satu gagasan pada satu waktu.</p>Paragraf berindentasi
Memberi jarak masuk pada baris pertama tanpa menambahkan spasi manual.
SaeGreen membantu Anda menyusun artikel yang rapi. Gunakan indentasi seperlunya pada tulisan panjang atau cerita editorial.
<p class="sg-indent">SaeGreen membantu Anda menyusun artikel yang rapi. Gunakan indentasi seperlunya pada tulisan panjang atau cerita editorial.</p>Huruf awal dekoratif
Drop cap cocok sebagai pembuka cerita; cukup gunakan pada paragraf pertama.
Setiap cerita punya titik awal. Beri pembaca konteks, lalu ajak mereka mengikuti alur tulisan dengan nyaman.
<p><span class="sg-dropcap">S</span>etiap cerita punya titik awal. Beri pembaca konteks, lalu ajak mereka mengikuti alur tulisan dengan nyaman.</p>Kode inline, sorotan, dan tombol keyboard
Bedakan nama atribut, istilah penting, dan pintasan keyboard.
Ubah showTOC menjadi true, sorot bagian penting, dan gunakan Ctrl + S saat menyimpan berkas lokal.
<p>Ubah <code>showTOC</code> menjadi <code>true</code>, sorot <mark>bagian penting</mark>, dan gunakan <kbd>Ctrl</kbd> + <kbd>S</kbd> saat menyimpan berkas lokal.</p>Daftar berurutan dan checklist
Pilih daftar bernomor untuk urutan kerja, checklist untuk pemeriksaan.
- Tentukan topik artikel.
- Susun kerangka tulisan.
- Periksa dan publikasikan.
- Judul menjelaskan isi.
- Tautan sudah diperiksa.
<ol>
<li>Tentukan topik artikel.</li>
<li>Susun kerangka tulisan.</li>
<li>Periksa dan publikasikan.</li>
</ol>
<ul class="sg-checklist">
<li>Judul menjelaskan isi.</li>
<li>Tautan sudah diperiksa.</li>
</ul>Langkah tutorial
Setiap langkah punya penanda nomor dan judul yang mudah dipindai.
- Siapkan materiKumpulkan informasi dan gambar pendukung.
- Tulis artikelSusun penjelasan dalam bagian yang singkat.
- Periksa hasilBuka pratinjau sebelum menerbitkan.
<ol class="sg-steps">
<li><strong>Siapkan materi</strong>Kumpulkan informasi dan gambar pendukung.</li>
<li><strong>Tulis artikel</strong>Susun penjelasan dalam bagian yang singkat.</li>
<li><strong>Periksa hasil</strong>Buka pratinjau sebelum menerbitkan.</li>
</ol>Tautan dan tombol aksi
Tombol utama dan outline
Gunakan satu tombol utama untuk aksi terpenting dan outline untuk pilihan pendamping.
<div class="sg-button-row">
<a class="sg-btn" href="https://saegreen.temablogger.com/2026/10/panduan-instalasi-pengaturan-saegreen.html">Buka panduan instalasi</a>
<a class="sg-btn-outline" href="https://saegreen.temablogger.com/2026/10/fitur-saegreen-template-blogger-modern.html">Jelajahi fitur</a>
</div>Tautan eksternal
Ikon panah memberi tanda bahwa tautan membuka situs lain.
Kunjungi Blogger untuk mengelola blog Anda.
<p>Kunjungi <a class="sg-external" href="https://www.blogger.com/" target="_blank" rel="noopener noreferrer">Blogger</a> untuk mengelola blog Anda.</p>Kartu berkas atau unduhan
Tampilkan nama dan informasi berkas di dekat tombol. Ganti URL contoh dengan alamat berkas Anda.
<div class="sg-file-card">
<div class="sg-file-info">
<span class="sg-file-badge">HTML</span>
<span class="sg-file-meta"><span class="sg-file-name">Komponen artikel SaeGreen</span><span class="sg-file-size">Contoh dokumentasi • bukan berkas unduhan</span></span>
</div>
<a class="sg-btn" href="https://saegreen.temablogger.com/2026/10/panduan-postingan-komponen-kode-preview-saegreen.html#tipografi">Lihat contoh</a>
</div>Kutipan dan pemberitahuan
Kutipan dengan sumber
Pisahkan kutipan dari paragraf biasa dan beri sumbernya.
Konten yang mudah dipahami memberi pembaca alasan untuk terus membaca.
Catatan editorial SaeGreen
<blockquote>
<p>Konten yang mudah dipahami memberi pembaca alasan untuk terus membaca.</p>
<cite>Catatan editorial SaeGreen</cite>
</blockquote>Catatan informasi
Gunakan untuk konteks tambahan yang membantu pembaca.
<div class="sg-callout sg-callout--info">
<b>Informasi</b>
Daftar isi muncul otomatis ketika artikel memiliki sedikitnya dua judul H2 atau H3 dan fitur tersebut diaktifkan.
</div>Catatan perhatian
Gunakan untuk langkah yang perlu diperiksa sebelum dilanjutkan.
<div class="sg-callout sg-callout--warn">
<b>Periksa sebelum menyimpan</b>
Cadangkan tema lama dan pastikan Anda memilih berkas XML yang benar.
</div>Status berhasil dan kesalahan
Variasi hijau dan merah membantu membedakan hasil sebuah proses.
<div class="sg-callout">
<b>Berhasil</b>
Konfigurasi sudah tersimpan. Muat ulang blog untuk melihat hasilnya.
</div>
<div class="sg-callout sg-callout--danger">
<b>Perlu diperbaiki</b>
URL gambar belum dapat dibuka. Periksa kembali alamatnya.
</div>Gambar dan galeri
Gambar dengan keterangan dan lightbox
Klik gambar pada preview untuk memperbesarnya. Isi alt menjelaskan gambar bagi pembaca dan teknologi bantu.
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0eBHRZWOZFogLMkwFokngCx4M5E3caUsrQFnzw8RRyZPTVT9aE6XFrz59fRN-eJl59QdMdahfMdgK6_wBALmwXY5acdOXS104Fuwd6wjxxC2GZYPrVGATf4dSskjAuNufn0MxewD5SHpFXC5lBPldLACKm8OmadbTE4pO7tjDoZhkuBX9m_Z5S9-axxPk/s1600/clipboard.png" alt="Panduan memulai SaeGreen" width="1600" height="900" loading="lazy"/>
<figcaption>Sampul dokumentasi SaeGreen. Klik gambar untuk memperbesar.</figcaption>
</figure>Galeri dua kolom
Pada HP, galeri mengikuti lebar konten agar gambar tetap nyaman dilihat.
<div class="sg-media-grid">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0eBHRZWOZFogLMkwFokngCx4M5E3caUsrQFnzw8RRyZPTVT9aE6XFrz59fRN-eJl59QdMdahfMdgK6_wBALmwXY5acdOXS104Fuwd6wjxxC2GZYPrVGATf4dSskjAuNufn0MxewD5SHpFXC5lBPldLACKm8OmadbTE4pO7tjDoZhkuBX9m_Z5S9-axxPk/s1600/clipboard.png" alt="Instalasi SaeGreen" width="1600" height="900" loading="lazy"/><figcaption>Mulai dari instalasi.</figcaption></figure>
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-xxJ95L8143z5_42RDZXxXnXGqPuXu4IVBeTIq2FobOv7S6KUzhmHQVJuUHk3xYOX6EnTPxDNPxrxnYQFjXxvKqqdilplrd_tySABFCoHOTnPgqLjV2tSb81qRs51llsu-Pv2lrlJbsQGKlC7Zje73ksk_kcUeywYc5JqDtcrj3kN3fgnV_-XG95XP8g/s1600/clipboard.png" alt="Fitur SaeGreen" width="1600" height="900" loading="lazy"/><figcaption>Lanjutkan menjelajahi fitur.</figcaption></figure>
</div>Galeri yang bisa digeser
Geser di dalam galeri untuk melihat gambar berikutnya. Area gulir terpisah dari halaman.
<div class="sg-gallery-scroll" tabindex="0" role="region" aria-label="Galeri SaeGreen, geser untuk gambar berikutnya">
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0eBHRZWOZFogLMkwFokngCx4M5E3caUsrQFnzw8RRyZPTVT9aE6XFrz59fRN-eJl59QdMdahfMdgK6_wBALmwXY5acdOXS104Fuwd6wjxxC2GZYPrVGATf4dSskjAuNufn0MxewD5SHpFXC5lBPldLACKm8OmadbTE4pO7tjDoZhkuBX9m_Z5S9-axxPk/s1600/clipboard.png" alt="Panduan instalasi" width="1600" height="900" loading="lazy"/></figure>
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC14hiYAbg6blTVE7sbtuUzIBy9q_XX7V885QP-Feu6HH4bPKMrS3Dz-V_fAlNQUsgH2Xr1S-JSDtzg2G4xSpsvuUDMS_t3UWYzyIVqGKvsK-Owd62NREWK3hj8YdSIqa10d5tz5mHDiExI2ak54uf-GQtC5rbU6g-F08ihIL9pgTj47kn4nyXhClq_MnU/s1600/clipboard.png" alt="Panduan komponen" width="1600" height="900" loading="lazy"/></figure>
<figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-xxJ95L8143z5_42RDZXxXnXGqPuXu4IVBeTIq2FobOv7S6KUzhmHQVJuUHk3xYOX6EnTPxDNPxrxnYQFjXxvKqqdilplrd_tySABFCoHOTnPgqLjV2tSb81qRs51llsu-Pv2lrlJbsQGKlC7Zje73ksk_kcUeywYc5JqDtcrj3kN3fgnV_-XG95XP8g/s1600/clipboard.png" alt="Fitur tema" width="1600" height="900" loading="lazy"/></figure>
</div>Galeri tambahan yang dapat dibuka
Gunakan details agar pembaca bisa membuka dan menutup kumpulan gambar tambahan.
Tampilkan gambar lainnya
<details class="sg-gallery-more">
<summary>Tampilkan gambar lainnya</summary>
<div class="sg-media-grid">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0eBHRZWOZFogLMkwFokngCx4M5E3caUsrQFnzw8RRyZPTVT9aE6XFrz59fRN-eJl59QdMdahfMdgK6_wBALmwXY5acdOXS104Fuwd6wjxxC2GZYPrVGATf4dSskjAuNufn0MxewD5SHpFXC5lBPldLACKm8OmadbTE4pO7tjDoZhkuBX9m_Z5S9-axxPk/s1600/clipboard.png" alt="Instalasi SaeGreen" width="1600" height="900" loading="lazy"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-xxJ95L8143z5_42RDZXxXnXGqPuXu4IVBeTIq2FobOv7S6KUzhmHQVJuUHk3xYOX6EnTPxDNPxrxnYQFjXxvKqqdilplrd_tySABFCoHOTnPgqLjV2tSb81qRs51llsu-Pv2lrlJbsQGKlC7Zje73ksk_kcUeywYc5JqDtcrj3kN3fgnV_-XG95XP8g/s1600/clipboard.png" alt="Fitur SaeGreen" width="1600" height="900" loading="lazy"/>
</div>
</details>Tabel dan blok konten
Tabel responsif
Di layar kecil, tabel lebar bergulir di dalam pembungkusnya. Gunakan header kolom agar data mudah dibaca.
| Format | Komponen utama | Cocok untuk |
|---|---|---|
| Tutorial | Langkah, kode, tabel | Panduan penggunaan |
| Ulasan | Galeri, kutipan, tombol | Penjelasan produk |
| Dokumentasi | Daftar isi, FAQ, contoh | Pusat bantuan |
<table>
<caption>Contoh pilihan format artikel</caption>
<thead><tr><th>Format</th><th>Komponen utama</th><th>Cocok untuk</th></tr></thead>
<tbody>
<tr><td>Tutorial</td><td>Langkah, kode, tabel</td><td>Panduan penggunaan</td></tr>
<tr><td>Ulasan</td><td>Galeri, kutipan, tombol</td><td>Penjelasan produk</td></tr>
<tr><td>Dokumentasi</td><td>Daftar isi, FAQ, contoh</td><td>Pusat bantuan</td></tr>
</tbody>
</table>Kartu informasi dan badge
Pakai kartu untuk merangkum satu hal, dengan badge sebagai konteks singkat.
Gunakan subjudul yang jelas dan paragraf pendek agar pembaca mudah memindai artikel.
<div class="sg-content-card">
<span class="sg-badge">Tips menulis</span>
<strong>Satu bagian, satu gagasan</strong>
<p>Gunakan subjudul yang jelas dan paragraf pendek agar pembaca mudah memindai artikel.</p>
</div>Spoiler atau detail tambahan
Konten tambahan dibuka sesuai kebutuhan pembaca.
Buka penjelasan tambahan
<details class="sg-faq-item">
<summary>Buka penjelasan tambahan</summary>
<div class="sg-faq-body">Gunakan bagian ini untuk detail teknis, catatan tambahan, atau penjelasan yang panjang.</div>
</details>FAQ interaktif
Gunakan pertanyaan yang memang membantu pembaca memahami topik.
Apakah kode harus ditempel di Tampilan HTML?
Bagaimana menonaktifkan lightbox satu gambar?
<details class="sg-faq-item">
<summary>Apakah kode harus ditempel di Tampilan HTML?</summary>
<div class="sg-faq-body">Ya. Tempel struktur HTML di Tampilan HTML agar tag dan atribut tetap sesuai dengan contoh.</div>
</details>
<details class="sg-faq-item">
<summary>Bagaimana menonaktifkan lightbox satu gambar?</summary>
<div class="sg-faq-body">Tambahkan atribut data-lightbox="false" pada gambar tersebut.</div>
</details>Rekomendasi bacaan manual
Pilih sendiri artikel yang relevan. Ganti tautan saat menambahkan artikel baru.
<aside class="sg-related">
<strong>Lanjutkan membaca</strong>
<ul>
<li><a href="https://saegreen.temablogger.com/2026/10/panduan-instalasi-pengaturan-saegreen.html">Panduan instalasi dan pengaturan</a></li>
<li><a href="https://saegreen.temablogger.com/2026/10/fitur-saegreen-template-blogger-modern.html">Jelajahi fitur SaeGreen</a></li>
</ul>
</aside>Video dan kode
Video dimuat saat diklik
Pemutar belum dimuat saat halaman dibuka. Klik tombol untuk memuat video contoh dari YouTube. Ganti data-video dengan ID video Anda.
<div class="sg-video" data-video="aqz-KE-bpKQ" data-title="Big Buck Bunny — video demonstrasi Blender">
<button type="button">Putar video contoh</button>
</div>Blok kode dengan tombol Copy
Tulis kode yang sudah di-escape di dalam pre dan code. Tema menambahkan tombol salin ketika fitur salin kode aktif.
<h2>Judul bagian</h2>
<p>Paragraf penjelasan Anda.</p><pre data-lang="HTML"><code><h2>Judul bagian</h2>
<p>Paragraf penjelasan Anda.</p></code></pre>Daftar isi dan pengaturan artikel
Daftar isi pada artikel ini dibuat oleh tema dari judul H2 dan H3. Tidak perlu menyalin seluruh daftar tautan secara manual. Di widget Fitur Artikel, gunakan konfigurasi berikut untuk mengatur perilakunya.
{
"showTOC": true,
"tocTitle": "Dalam artikel ini",
"tocOpen": true,
"showCover": true,
"showShare": true,
"showReadingTime": true,
"showProgress": true,
"showTags": true,
"showPostNavigation": true,
"showComments": true,
"enableLightbox": true,
"enableCodeCopy": true
}Checklist sebelum publikasi
- Setiap tautan dan alamat gambar sudah diganti dengan tujuan yang benar.
- Tag dibuka dan ditutup dengan lengkap.
- Artikel memakai satu H1 dari judul Blogger, lalu H2 dan H3 di dalam isi.
- Tidak ada token akun, kata sandi, atau data pribadi di kode publik.
- Preview, kode, tombol Copy, dan tabel sudah diperiksa pada HP.
- Permalink dan deskripsi penelusuran sesuai dengan isi tulisan.
Semua teks, contoh, dan sampul pada panduan ini disusun untuk dokumentasi SaeGreen. Video demonstrasi menggunakan pemutar YouTube; hak atas video tetap pada pembuatnya.
Komentar
Posting Komentar