JustAnimeku

Docs v2.1

Cara Menginstal Template

Ikuti panduan di bawah ini untuk memasang template JustAnimeku di blog Blogger Anda.

Peringatan Penting!

Sebelum mengganti template, sangat disarankan untuk mem-backup (mencadangkan) template Anda yang lama untuk menghindari hilangnya kode kustom atau widget penting.

Ekstrak File Unduhan

Setelah Anda mengunduh paket tema, ekstrak file .zip tersebut. Di dalamnya Anda akan menemukan file dengan ekstensi .xml (Contoh: JustAnimeku-v2.xml).

Masuk ke Dashboard Blogger

Pulihkan (Restore) Tema

Klik ikon dropdown (panah bawah) di sebelah tombol Sesuaikan (Customize). Pilih opsi Pulihkan (Restore), lalu klik Upload. Pilih file .xml JustAnimeku yang sudah Anda ekstrak tadi.

Tips Instalasi

Jika mengalami error saat upload, coba buka file XML dengan Notepad, copy semua kodenya, dan paste secara manual di menu Edit HTML Blogger.

Post Code (Kode Posting)

Kumpulan struktur HTML (Syntax) untuk membuat post Anime, Daftar Episode, dan Link Download yang rapi.

1. Detail Info Anime

Gunakan kode ini di dalam mode tampilan Tampilan HTML saat membuat postingan baru. Ini akan menampilkan cover, sinopsis, dan info anime.

HTML

<div class="anime-wrap">
  <div class="anime-cover">
    <img src="URL_GAMBAR_COVER_DISINI" alt="Judul Anime" />
  </div>
  <div class="anime-details">
    <div class="synopsis">
      Tuliskan sinopsis anime di sini. Ceritakan alur ceritanya...
    </div>
    <ul class="info-list">
      <li><b>Judul Alternatif:</b> Nama Lain Anime</li>
      <li><b>Status:</b> Ongoing</li>
      <li><b>Studio:</b> MAPPA</li>
      <li><b>Rilis:</b> Fall 2023</li>
      <li><b>Durasi:</b> 24 Min. per ep.</li>
    </ul>
  </div>
</div>

2. Daftar Episode & Download

Kode untuk membuat list episode interaktif dengan resolusi download.

HTML

<div class="eps-list">
  <div class="eps-item">
    <div class="eps-title">Episode 01</div>
    <div class="dl-links">
      <span class="reso">720p</span>
      <a href="#" target="_blank">Google Drive</a>
      <a href="#" target="_blank">Zippyshare</a>
    </div>
    <div class="dl-links">
      <span class="reso">1080p</span>
      <a href="#" target="_blank">Google Drive</a>
      <a href="#" target="_blank">Mega</a>
    </div>
  </div>
</div>

Konfigurasi Firebase (Login/Bookmark)

Template JustAnimeku menggunakan Firebase agar user bisa login dan menyimpan bookmark anime mereka.

Kenapa Butuh Firebase?

Blogger tidak memiliki fitur database member bawaan. Dengan Firebase (gratis dari Google), pengunjung web Anda bisa login via Akun Google dan mem-bookmark anime favorit secara real-time ke akun mereka.

Langkah Mendapatkan Config:

Buka Firebase Console dan buat Project Baru.
Tambahkan aplikasi Web (ikon </>).
Buka menu Authentication > Sign-in method, aktifkan provider Google.
Buka menu Firestore Database > Buat Database (Pilih Test Mode terlebih dahulu, lalu ubah rules nantinya).
Buka Project Settings (Ikon Gir), scroll ke bawah temukan script firebaseConfig Anda.

Cara Memasang di Blogger:

Masuk ke Tata Letak (Layout) Blogger > cari widget "Firebase Config" > Edit dan masukkan JSON sesuai format di bawah ini:

JSON

{
  "apiKey": "AIzaSyDOCXxxxxxxxxxxxxxxxxxx",
  "authDomain": "namaproject.firebaseapp.com",
  "projectId": "namaproject",
  "storageBucket": "namaproject.appspot.com",
  "messagingSenderId": "1234567890",
  "appId": "1:1234567890:web:xxxxxxxxxxxxxxxxx"
}

Kode Halaman Statis (Page Code)

Kode untuk membuat halaman statis fungsional seperti Halaman Bookmark atau History.

Halaman Bookmark

Buat Halaman (Page) baru di Blogger, beri judul "Bookmark", pindah ke mode Tampilan HTML, dan paste kode berikut:

HTML

<!-- Kontainer untuk merender anime yang dibookmark -->
<div id="user-bookmark-wrapper" class="grid-anime-layout">
  <div class="loading-state">
    Memuat data bookmark Anda...
  </div>
</div>

<!-- Jangan hapus script pemanggil di bawah -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if(typeof initBookmarkPage === 'function') {
      initBookmarkPage();
    }
  });
</script>

Halaman Jadwal Rilis (Schedule)

Untuk halaman jadwal rilis otomatis berdasarkan label Hari.

HTML

<div class="schedule-container" data-labels="Senin,Selasa,Rabu,Kamis,Jumat,Sabtu,Minggu">
   <!-- Script template akan memproses ini otomatis -->
</div>

Kustomisasi Lanjutan & FAQ

Pertanyaan yang sering diajukan dan cara mengubah warna tema.

Bagaimana cara mengganti Warna Utama (Ungu)?

Buka menu Tema > Sesuaikan (Customize) > Tingkat Lanjut (Advanced). Anda akan menemukan palet Theme Colors. Ubah warna Primary Color sesuai keinginan Anda, lalu simpan.

Cara mengganti Logo di Header?

Masuk ke menu Tata Letak (Layout). Cari widget bernama Header Logo. Edit widget tersebut, upload gambar logo Anda (direkomendasikan ukuran tinggi 45px berformat PNG transparan), centang "Selain judul dan keterangan", dan Simpan.

Apakah template ini SEO Friendly?

Ya. Meta tag, Open Graph, dan Schema Markup sudah disematkan otomatis ke dalam template. Pastikan Anda mengisi Deskripsi Penelusuran di setiap postingan untuk hasil maksimal.

Punya Pertanyaan Lain?

Kunjungi forum dukungan kami atau hubungi developer langsung.

Hubungi Developer