Dokumentasi IG Frosted Tema Blogger

Panduan IG Frosted Blogger

Dokumentasi ini merangkum shortcode aktif di ig-frosted-theme-blogger.html dan snippet halaman tambahan:

• cod-sitemap.html
• feeds-lebel-in-page.html
• my_product.html

Gunakan mode HTML view saat menempel shortcode atau snippet ke halaman Blogger.

Template Utama

File: ig-frosted-theme-blogger.html

Template ini berisi tampilan utama blog, mobile bottom navigation, shortcode post/page, related posts, komentar, mode Explore, dan mode Author mobile.

Mobile Bottom Navigation

Menu mobile aktif:

• HOME: menuju homepage.
• Kategori: membuka slide menu kategori.
• Search: membuka pencarian.
• Explore: membuka panel feed label komputer sementara.
• Product: menuju /p/product.html.
• Author: memakai ikon user dan membuka panel profil author via #author.

Explore mobile mengambil data dari:

url: "/feeds/posts/default/-/komputer?alt=json&orderby=updated&max-results=50"

Nanti kalau label sponsored sudah siap, bagian ini bisa diganti ke label Sponsored.

Shortcode Artikel dan Page

Shortcode diproses oleh JavaScript template setelah halaman dimuat.

Layout

Gunakan tag <b> di HTML view.

<b>{fullwidth}</b>
<b>{leftsidebar}</b>
<b>{rightsidebar}</b>

Keterangan:

• {fullwidth} menghilangkan sidebar dan membuat konten lebih fokus.
• {leftsidebar} memindahkan sidebar ke kiri.
• {rightsidebar} memindahkan sidebar ke kanan.

Table of Contents

<b>{toc}</b>

TOC otomatis dibuat dari heading di area artikel.

Form Kontak

<b>{contactform}</b>

Shortcode ini memindahkan widget ContactForm1 ke posisi shortcode.

Alert Box

Gunakan <blockquote>.

<blockquote>{alertInfo}Ini pesan informasi.</blockquote>
<blockquote>{alertSuccess}Berhasil diproses.</blockquote>
<blockquote>{alertWarning}Perlu diperhatikan.</blockquote>
<blockquote>{alertError}Terjadi kesalahan.</blockquote>

Code Box

<blockquote>{codeBox}
const message = "Halo SEOPro";
console.log(message);
</blockquote>

Output akan menjadi elemen:

<pre class="code-box">...</pre>

Tombol Button

Button dibuat dari link yang teksnya mengandung getButton.

<a href="https://example.com">getButton $text={Buka Link}</a>
<a href="https://example.com">getButton $text={Download} $icon={download}</a>
<a href="https://example.com">getButton $text={Buka Sekarang} $icon={link} $color={#007aff}</a>

Icon yang tersedia dari CSS template:

• preview
• download
• link
• cart
• info
• share
• contact

Tabel

Tabel tidak memakai shortcode khusus. Tulis tabel langsung dengan HTML di HTML view.

Contoh tabel sederhana:

<table>
  <thead>
    <tr>
      <th>Fitur</th>
      <th>Keterangan</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Desain responsif</td>
      <td>Tampilan menyesuaikan mobile dan desktop.</td>
      <td>Aktif</td>
    </tr>
    <tr>
      <td>Feed otomatis</td>
      <td>Mengambil postingan dari label Blogger.</td>
      <td>Aktif</td>
    </tr>
  </tbody>
</table>

Contoh tabel perbandingan:

<table>
  <thead>
    <tr>
      <th>Paket</th>
      <th>Cocok Untuk</th>
      <th>Benefit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>Blog personal</td>
      <td>Layout ringan dan cepat.</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>Website bisnis</td>
      <td>SEO, katalog, dan halaman feed.</td>
    </tr>
  </tbody>
</table>

Catatan:

• Tulis tabel di HTML view agar struktur <table>, <thead>, <tbody>, <tr>, <th>, dan <td> tidak rusak.
• Hindari tabel terlalu lebar. Jika kolom banyak, pecah menjadi beberapa tabel kecil.
• Di tampilan mobile, CSS template akan membantu tabel lebih aman dibaca, tetapi isi sel tetap perlu dibuat ringkas.

Shortcode Widget

Related Posts

Related posts diatur dari widget HTML pada section seopro-pro-related-posts.

Contoh isi widget:

$title={Artikel Terkait} $results={3}

Keterangan:

• $title={...} mengubah judul related posts.
• $results={...} mengatur jumlah artikel terkait.

Komentar

Sistem komentar memakai shortcode di setting label/comment widget Blog.

$type={blogger}

Nilai yang dibaca template:

• blogger
• disqus
• facebook

Implementasi saat ini menampilkan sistem komentar Blogger.

Mega Menu Label

Menu dengan target yang mengandung getMega memakai data shortcode untuk menentukan label.

Contoh konsep:

getMega $label={SEO}

Jika label bernilai recent, link akan menuju /search. Selain itu link akan menuju /search/label/NAMA_LABEL.

Snippet Halaman

Snippet berikut ditempel langsung ke Page Blogger lewat HTML view. Ini bukan shortcode template, melainkan blok HTML/CSS/JS siap pakai.

Sitemap

File: cod-sitemap.html

Fungsi:

• Mengambil semua postingan dari feed Blogger.
• Menampilkan sitemap bergaya frosted/macOS.
• Ada pencarian artikel.
• Ada sort: terbaru, terlama, A-Z, Z-A.
• Ada filter label horizontal.
• Memakai cache sessionStorage selama 15 menit.

Konfigurasi penting:

var feedOrigin = (root.getAttribute("data-feed-origin") || location.origin).replace(/\/$/, "");

Default-nya memakai domain halaman saat ini. Jika ingin mengambil dari domain lain, tambahkan atribut:

<div class="mac-sitemap" id="mac-sitemap" data-feed-origin="https://www.mtalkblog.com">

Catatan tampilan:

• Desktop: grid 3 kolom.
• Mobile di bawah 720px: grid 1 kolom.

Feed Artikel per Label

File: feeds-lebel-in-page.html

Fungsi:

• Menampilkan artikel dari satu label Blogger.
• Ada box “Tentang Halaman Ini”.
• Ada pencarian artikel.
• Ada tombol Lihat Lebih Banyak.
• Menambahkan schema JSON-LD ItemList.

Konfigurasi utama:

var blogURL = "https://www.mtalkblog.com";
var label = "sponsored";
var postsPerPage = 4;
var author = "Galih Enggar";
var authorURL = "https://www.mtalkblog.com/p/author-profile-galih-enggar.html";

Ubah label untuk menampilkan feed kategori lain.

Catatan tampilan:

• Desktop: grid 2 kolom.
• Mobile di bawah 720px: grid 1 kolom.

Katalog Produk

File: my_product.html

Fungsi:

• Membuat halaman katalog produk.
• Mengambil postingan dari label my product.
• Menampilkan gambar, judul, dan tiga tombol.
• Tombol See More menuju postingan produk.
• Tombol Testimoni menuju komentar postingan produk: URL_PRODUK#comments.
• Tombol Hubungi Kami menuju WhatsApp dengan pesan berisi judul dan URL produk.

Konfigurasi utama:

var label = "my product";
var limit = 12;
var whatsapp = "6281234567890";
var buttonMore = "See More";
var buttonTestimoni = "Testimoni";
var buttonWhatsapp = "Hubungi Kami";

Ganti whatsapp dengan nomor tujuan asli dalam format internasional tanpa tanda plus.

Catatan tampilan:

• Desktop: grid 3 kolom.
• Mobile: tetap grid 3 kolom, dengan kartu dan tombol dibuat compact.

Cara Pakai Snippet di Blogger

1. Buka Blogger.
2. Masuk ke Pages.
3. Buat atau edit halaman.
4. Pindah ke HTML view.
5. Tempel seluruh isi file snippet.
6. Publikasikan halaman.

Pastikan label yang dipakai snippet sudah ada di postingan Blogger. Contoh: my product, sponsored, atau komputer.

Catatan File

• ig-frosted-theme-blogger.html: template utama Blogger.
• cod-sitemap.html: halaman sitemap semua postingan.
• feeds-lebel-in-page.html: halaman feed artikel berdasarkan satu label.
• my_product.html: halaman katalog produk dari label my product.
• README-shortcode.md: dokumentasi ini.

Lokasi Kode Penting

Di ig-frosted-theme-blogger.html:

• Parser shortcode: function shortCodeIfy(...)
• Shortcode post/page: blok .post-body a, .post-body b, .post-body blockquote
• Related posts: #seopro-pro-related-posts .HTML
• Komentar: .seopro-pro-blog-post-comments
• Mobile Explore: mobileSponsoredFeed() dan mobileSponsoredLoad()
• Mobile Author: handler .bottom-nav-contact

Catatan Penting

• Shortcode dan snippet harus ditempel lewat HTML view.
• Shortcode seperti {fullwidth} memakai tag <b>.
• Alert dan code box memakai <blockquote>.
• Button memakai tag <a>.
• Snippet feed bergantung pada feed Blogger yang aktif dan label yang benar.
• Label dengan spasi ditulis apa adanya, misalnya my product.