Contoh Kode Iklan Html Lokerlokal

Berikut beberapa contoh kode iklan format html untuk Lokerlokal, yang bisa anda pasang pada Customizer – Pengaturan iklan / widget / pada home elementor:

After navbar:

<div style="text-align:center;margin-bottom:8px;">
    <span style="font-size:10px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;background:#f1f5f9;padding:3px 10px;border-radius:20px;">
        Iklan oleh LokerLokal
    </span>
</div>

<div style="
    background:linear-gradient(135deg,#f5f3ff 0%,#e0f2fe 100%);
    border-radius:16px;
    padding:16px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    border:1px solid rgba(99,102,241,0.1);
">

    <!-- ICON -->
    <div style="
        width:40px;
        height:40px;
        background:linear-gradient(135deg,#6366f1,#8b5cf6);
        border-radius:12px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
    ">
        <i class="fa-solid fa-file-lines" style="color:#fff;font-size:16px;"></i>
    </div>

    <!-- TEXT -->
    <div style="flex:1;min-width:200px;">
        <p style="font-size:14px;font-weight:700;color:#1e293b;margin:0 0 2px;">
            CV Kamu Sudah ATS-Friendly?
        </p>
        <p style="font-size:12px;color:#64748b;margin:0;">
            Buat CV profesional dalam 5 menit. Lolos filter ATS perusahaan besar.
        </p>
    </div>

    <!-- BUTTON -->
    <a href="#" target="_blank" rel="noopener" style="
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        padding:10px 16px;
        background:linear-gradient(135deg,#6366f1,#8b5cf6);
        color:#fff;
        border-radius:10px;
        font-size:13px;
        font-weight:600;
        text-decoration:none;
        flex-shrink:0;
        width:100%;
        max-width:180px;
    ">
        Buat CV Gratis
        <i class="fa-solid fa-arrow-right" style="font-size:11px;"></i>
    </a>

</div>

Burger menu:

<div style="background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(139,79,255,0.1);">
    <span style="display:inline-block;font-size:9px;font-weight:600;color:#a78bfa;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">Iklan oleh LokerLokal</span>
    <div style="width:36px;height:36px;background:linear-gradient(135deg,#8b4fff,#6366f1);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;">
        <i class="fa-solid fa-file-pdf" style="color:#fff;font-size:14px;"></i>
    </div>
    <p style="font-size:13px;font-weight:700;color:#1e293b;margin:0 0 4px;">Tips Interview Gratis</p>
    <p style="font-size:11px;color:#64748b;margin:0 0 12px;">Download panduan lengkap persiapan interview kerja 2025.</p>
    <a href="#" style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#8b4fff,#6366f1);color:#fff;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;">
        <i class="fa-solid fa-download" style="font-size:11px;"></i> Download PDF
    </a>
</div>

Sebelum Paragraf Pertama:

<!-- Ads Native -->
<div class="loker-card loker-card--ads">
    <span class="ads-label">Sponsored</span>
    <div class="ads-native__slot">
        <div class="ads-placeholder ads-placeholder--vertical">
            <i class="fa-solid fa-rectangle-ad"></i>
            <p>Ruang Iklan</p>
            <span>300 × 250</span>
            <a href="#" class="ads-placeholder__cta">Pasang Iklan</a>
        </div>
    </div>
</div>

Akhir Paragraf / Setelah Konten:

<div style="
    background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);
    border-radius:16px;
    padding:16px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    border:1px solid #e2e8f0;
    margin:8px 0;
">

    <!-- ICON -->
    <div style="
        width:42px;
        height:42px;
        background:linear-gradient(135deg,#3b82f6,#6366f1);
        border-radius:12px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
    ">
        <i class="fa-solid fa-code" style="color:#fff;font-size:16px;"></i>
    </div>

    <!-- TEXT -->
    <div style="flex:1;min-width:200px;">
        <span style="
            display:inline-block;
            font-size:9px;
            font-weight:600;
            color:#94a3b8;
            text-transform:uppercase;
            letter-spacing:0.06em;
            background:#f1f5f9;
            padding:2px 8px;
            border-radius:20px;
            margin-bottom:6px;
        ">
            Iklan oleh LokerLokal
        </span>

        <p style="font-size:14px;font-weight:700;color:#1e293b;margin:0 0 3px;">
            Butuh Website Profesional untuk Bisnis Anda?
        </p>

        <p style="font-size:12px;color:#64748b;margin:0;">
            Jasa pembuatan website company profile, toko online, landing page. Cepat, modern, & SEO friendly.
        </p>
    </div>

    <!-- BUTTON -->
    <a href="https://digitalkit.id" target="_blank" rel="noopener" style="
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        padding:10px 16px;
        background:linear-gradient(135deg,#3b82f6,#6366f1);
        color:#fff;
        border-radius:10px;
        font-size:13px;
        font-weight:600;
        text-decoration:none;
        flex-shrink:0;
        width:100%;
        max-width:180px;
    ">
        <i class="fa-solid fa-globe" style="font-size:12px;"></i>
        Digitalkit.id
    </a>

</div>

Before Footer:

<div style="background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);border-radius:16px;padding:32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;">
    <div style="flex:1;min-width:240px;">
        <p style="font-size:11px;font-weight:600;color:#a78bfa;text-transform:uppercase;letter-spacing:0.05em;margin:0 0 8px;">Sponsored</p>
        <p style="font-size:18px;font-weight:700;color:#fff;margin:0 0 6px;">Upgrade Skill, Naikkan Gaji</p>
        <p style="font-size:13px;color:rgba(255,255,255,0.6);margin:0;">Kursus online bersertifikat: Digital Marketing, Data Analyst, UI/UX Design. Mulai dari Rp 50rb.</p>
    </div>
    <a href="#" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;backdrop-filter:blur(8px);">
        <i class="fa-solid fa-graduation-cap"></i> Lihat Kursus
    </a>
</div>

Pada saat pop up tombol Apply di klik:

<span class="ads-label">Ad</span>
<div class="ads-placeholder ads-placeholder--vertical" style="min-height:150px;">
    <i class="fa-solid fa-rectangle-ad"></i>
    <p>Ruang Iklan</p>
    <span>300 × 250</span>
    <a href="<?php echo esc_url( home_url( '/kontak' ) ); ?>" class="ads-placeholder__cta">Pasang Iklan</a>
</div>

Setelah Post ke-X di Archive:

<div style="background:#fff;border-radius:16px;padding:20px;border:1px solid #e2e8f0;text-align:center;">
    <span style="display:inline-block;font-size:10px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;background:#f1f5f9;padding:3px 10px;border-radius:20px;margin-bottom:12px;">Iklan oleh LokerLokal</span>
    <div style="width:40px;height:40px;background:linear-gradient(135deg,#f59e0b,#f97316);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
        <i class="fa-solid fa-laptop-code" style="color:#fff;font-size:16px;"></i>
    </div>
    <p style="font-size:14px;font-weight:700;color:#1e293b;margin:0 0 4px;">Belajar Coding dari Nol</p>
    <p style="font-size:12px;color:#64748b;margin:0 0 14px;">Kelas online gratis untuk pemula. HTML, CSS, JavaScript, React.</p>
    <a href="#" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;">
        Mulai Belajar <i class="fa-solid fa-arrow-right" style="font-size:10px;"></i>
    </a>
</div>