Panduan Kontributor Template

🛠️

Mulai Berkontribusi Desain

Sistem template Tauts.id sangat sederhana dan dirancang agar siapa saja yang memahami HTML, CSS, dan sedikit PHP dasar bisa langsung membuat tema yang keren.

Setiap template pada dasarnya adalah satu file .php yang menerima data profil pengguna lalu merendernya sesuka Anda. Kami juga sudah menyisipkan standar SEO otomatis agar karya Anda tampil memukau saat dibagikan ke sosial media.

📦 Variabel PHP yang Tersedia

File template Anda akan otomatis mewarisi (inherit) variabel-variabel berikut sebelum di-render. Gunakan variabel ini untuk memunculkan data user.

$user (Array)

$user['username'] : Nama pengguna (contoh: "alex")
$user['bio_description'] : Deskripsi profil / bio
$user['profile_image'] : Path foto profil (bisa kosong)

$links (Array of Arrays)

Berisi daftar tautan. Loop dengan foreach($links as $link)
$link['id'] : ID unik tautan
$link['title'] : Judul tautan
$link['url'] : URL tujuan (gunakan klik tracking: <?= BASE_URL ?>/click.php?type=link&id=<?= $link['id'] ?>)

$products (Array of Arrays)

Berisi daftar produk etalase. Loop dengan foreach($products as $prod)
$prod['id'] : ID unik produk
$prod['name'] : Nama produk
$prod['image_url'] : Gambar produk
$prod['grade'] : Grade/kualitas

Variabel Konfigurasi Lainnya

$role : 'basic', 'plus', 'pro', atau 'god' (Berguna untuk membatasi tab produk/store)
$default_tab : 'links' atau 'products' (pilihan tab pertama yang terbuka)
$character_color : Hex color (contoh: '#ff0000') yang diatur user
BASE_URL : URL root website

📝 Kerangka Dasar Template (Boilerplate)

📥 Download .txt

<?php
/*
  Template Name: Nama Template Anda
  Category: Kategori (contoh: Beauty & Fashion, Gaming)
  Tier: basic / plus / pro
  Price: 0 (Isi 0 jika gratis)
  Description: Deskripsi singkat tentang template ini.
*/
?>
<!DOCTYPE html>
<html lang="id" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <?php
        // ==========================================
        // BLOK SEO DINAMIS - JANGAN DIHAPUS
        // ==========================================
        $page_title = '@' . htmlspecialchars($user['username']) . ' - Tauts.id';
        $page_desc = !empty($user['bio_description']) ? htmlspecialchars($user['bio_description']) : 'Lihat koleksi tautan dan etalase produk dari @' . htmlspecialchars($user['username']) . ' di Tauts.id.';
        
        $og_image = BASE_URL . '/icon.jpg'; 
        if (!empty($user['profile_image'])) {
            $og_image = (strpos($user['profile_image'], 'http') === 0) ? $user['profile_image'] : BASE_URL . '/' . ltrim($user['profile_image'], '/');
        }
        
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $current_url = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    ?>

    <title><?= $page_title ?></title>
    <meta name="description" content="<?= $page_desc ?>">
    
    <meta property="og:type" content="profile">
    <meta property="og:profile:username" content="<?= htmlspecialchars($user['username']) ?>">
    <meta property="og:url" content="<?= $current_url ?>">
    <meta property="og:title" content="<?= $page_title ?>">
    <meta property="og:description" content="<?= $page_desc ?>">
    <meta property="og:image" content="<?= htmlspecialchars($og_image) ?>">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?= $page_title ?>">
    <meta name="twitter:description" content="<?= $page_desc ?>">
    <meta name="twitter:image" content="<?= htmlspecialchars($og_image) ?>">

    <link rel="icon" href="<?= BASE_URL ?>/icon.jpg" type="image/jpeg">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 min-h-screen text-gray-900 dark:text-gray-100">
    <main class="max-w-md mx-auto px-4 py-12">
        
        <header class="text-center mb-8">
            <div class="w-24 h-24 mx-auto rounded-full overflow-hidden mb-4 shadow-md bg-white border-2 border-transparent" style="border-color: <?= htmlspecialchars($character_color) ?>;">
                <?php if(!empty($user['profile_image'])): ?>
                    <img src="<?= htmlspecialchars($og_image) // Reuse variabel SEO agar link absolut ?>" class="w-full h-full object-cover">
                <?php else: ?>
                    <div class="w-full h-full flex items-center justify-center text-4xl text-gray-400 bg-gray-200">
                        <?= strtoupper(substr($user['username'], 0, 1)) ?>
                    </div>
                <?php endif; ?>
            </div>
            <h1 class="text-xl font-bold mb-1">@<?= htmlspecialchars($user['username']) ?></h1>
            <p class="text-sm text-gray-600 dark:text-gray-400"><?= htmlspecialchars($user['bio_description']) ?></p>
        </header>

        <?php if ($role !== 'basic' && in_array($default_tab, ['links', 'products'])): ?>
            <div class="flex justify-center gap-4 mb-6 border-b border-gray-300 dark:border-gray-700 pb-2">
                <button onclick="switchTab('links')" id="btn-tab-links" class="pb-2 px-2 text-sm font-bold uppercase transition-colors <?= $default_tab === 'links' ? 'border-b-2 border-['.$character_color.'] text-['.$character_color.']' : 'text-gray-500' ?>">
                    Links
                </button>
                <button onclick="switchTab('products')" id="btn-tab-products" class="pb-2 px-2 text-sm font-bold uppercase transition-colors <?= $default_tab === 'products' ? 'border-b-2 border-['.$character_color.'] text-['.$character_color.']' : 'text-gray-500' ?>">
                    Store
                </button>
            </div>
        <?php endif; ?>

        <div id="content-links" class="tab-content <?= in_array($default_tab, ['links', 'links_only']) ? 'active' : '' ?> space-y-3">
            <?php foreach($links as $link): ?>
                <a href="<?= BASE_URL ?>/click.php?type=link&id=<?= $link['id'] ?>" target="_blank" 
                   class="block w-full py-4 px-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm text-center font-medium hover:scale-[1.02] transition-transform border border-transparent" style="hover:border-color: <?= $character_color ?>">
                    <?= htmlspecialchars($link['title']) ?>
                </a>
            <?php endforeach; ?>
        </div>

        <?php if ($role !== 'basic' && $default_tab !== 'links_only'): ?>
        <div id="content-products" class="tab-content <?= in_array($default_tab, ['products', 'products_only']) ? 'active' : '' ?> space-y-4">
            <?php foreach($products as $prod): ?>
                <a href="<?= BASE_URL ?>/click.php?type=product&id=<?= $prod['id'] ?>" target="_blank" 
                   class="flex w-full p-2 bg-white dark:bg-gray-800 rounded-xl shadow-sm items-center gap-4 hover:scale-[1.02] transition-transform">
                    <div class="w-16 h-16 rounded-lg bg-gray-100 overflow-hidden shrink-0">
                        <?php if(!empty($prod['image_url'])): 
                            $img_src = str_starts_with($prod['image_url'], '../') ? BASE_URL . '/' . substr($prod['image_url'], 3) : $prod['image_url'];
                        ?>
                            <img src="<?= htmlspecialchars($img_src) ?>" class="w-full h-full object-cover">
                        <?php endif; ?>
                    </div>
                    <div class="text-left flex-1 py-2 pr-2">
                        <h3 class="font-medium text-sm line-clamp-2"><?= htmlspecialchars($prod['name']) ?></h3>
                        <span class="text-xs text-white mt-1 inline-block px-2 py-0.5 rounded-full" style="background-color: <?= htmlspecialchars($character_color) ?>">Grade <?= htmlspecialchars($prod['grade']) ?></span>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
        
        <footer class="mt-12 text-center pb-8">
            <a href="<?= BASE_URL ?>" class="text-xl font-bold tracking-tighter opacity-30 hover:opacity-100 transition-opacity">Tauts.id</a>
        </footer>
    </main>
    
    <script>
        function switchTab(tabName) {
            document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
            document.getElementById('content-' + tabName).classList.add('active');
            
            const btnL = document.getElementById('btn-tab-links');
            const btnP = document.getElementById('btn-tab-products');
            
            if(btnL) btnL.className = "pb-2 px-2 text-sm font-bold uppercase transition-colors text-gray-500";
            if(btnP) btnP.className = "pb-2 px-2 text-sm font-bold uppercase transition-colors text-gray-500";
            
            const activeBtn = document.getElementById('btn-tab-' + tabName);
            if(activeBtn) activeBtn.className = "pb-2 px-2 text-sm font-bold uppercase transition-colors border-b-2 border-[<?= $character_color ?>] text-[<?= $character_color ?>]";
        }
    </script>
</body>
</html>

🚀 Cara Menyerahkan Template

Download file boilerplate.txt melalui tombol di atas.
Ubah ekstensinya menjadi .php saat melakukan koding secara lokal (misalnya tema_ku.php).
Isi blok komentar Meta Data di bagian paling atas file PHP tersebut (Nama Template, Kategori, Tier, dan Harga).
Penting: Jangan hapus blok PHP penyusun SEO dan Meta Tags di dalam tag <head>. Biarkan sistem kami bekerja otomatis.
Modifikasi kode HTML dan CSS sesuai imajinasi Anda. Kami merekomendasikan Tailwind CSS karena praktis dan cepat.
Pastikan semua variabel data diri pengguna tampil dengan baik (Foto, Bio, List Link, List Produk).
Kirimkan file .php hasil desain Anda ke tim Tauts.id.
Tim kami akan me-review kode Anda. Jika disetujui, template akan ditambahkan ke Template Store!