SIAP4D - Banner & Logo Placement Guide

📁 Struktur Folder Assets

Organisasi file yang rapi untuk mengelola semua aset visual SIAP4D:

/assets/
├── /banners/
│   ├── hero-banner-1920x600.jpg (Hero utama)
│   ├── hero-banner-1200x400.jpg (Tablet)
│   ├── hero-banner-600x300.jpg (Mobile)
│   ├── promo-banner-970x250.jpg (Top banner)
│   ├── promo-banner-728x90.jpg (Leaderboard)
│   └── footer-banner-1200x400.jpg (Footer)
├── /logos/
│   ├── logo-horizontal.png (Full horizontal)
│   ├── logo-horizontal@2x.png (Retina)
│   ├── logo-vertical.png (Vertikal)
│   ├── logo-icon-only.png (Icon mark)
│   ├── logo-icon-only-sm.png (Small icon)
│   ├── favicon-32x32.png
│   ├── favicon-64x64.png
│   ├── favicon-180x180.png (Apple touch)
│   └── favicon.ico (All browsers)
├── /backgrounds/
│   ├── gradient-purple-dark.jpg
│   ├── gradient-purple-light.jpg
│   ├── pattern-geometric.png
│   └── texture-subtle.png
├── /icons/
│   ├── bonus-icon.svg
│   ├── security-icon.svg
│   ├── support-icon.svg
│   ├── payment-icon.svg
│   └── game-icon.svg
└── /social/
    ├── og-image-1200x630.jpg (OpenGraph)
    ├── twitter-card-1200x675.jpg (Twitter)
    ├── facebook-cover-1200x628.jpg
    └── linkedin-banner-1200x627.jpg

💡 Tips: Buat folder ini di hosting dalam direktori /assets/ atau /public/assets/ untuk organisasi yang baik.

🔷 Logo Placement Guide

📍 Header Logo

Lokasi: Navbar bagian kiri (sticky header)

Ukuran: Tinggi 40-50px (responsive)

File: logo-horizontal.png atau logo-icon-only.png

Spesifikasi:

Desktop: 160-180px lebar
Tablet: 120-140px lebar
Mobile: 100-120px lebar

<img src="/assets/logos/logo-horizontal.png" 
     alt="SIAP4D" 
     class="logo" 
     width="160" 
     height="50" />
        

📍 Footer Logo

Lokasi: Footer bagian atas (sebelum links)

Ukuran: Tinggi 50-60px

File: logo-horizontal.png

Spesifikasi:

Desktop: 180-200px lebar
Tablet: 140-160px lebar
Mobile: 120-140px lebar

<img src="/assets/logos/logo-horizontal.png" 
     alt="SIAP4D" 
     class="footer-logo" 
     width="180" 
     height="60" />
        

📍 Favicon

Lokasi: Browser tab & bookmarks

Ukuran: 32x32px minimum

File: favicon.ico atau favicon-32x32.png

Spesifikasi:

16x16px (legacy)
32x32px (standard)
64x64px (desktop)
180x180px (Apple)

<link rel="icon" type="image/x-icon" 
      href="/assets/logos/favicon.ico">
<link rel="apple-touch-icon" 
      href="/assets/logos/favicon-180x180.png">
        

📍 Mobile App Icon

Lokasi: Home screen mobile

Ukuran: 180x180px (Apple), 192x192px (Android)

File: logo-icon-only.png

Spesifikasi:

PNG dengan background solid
Padding minimum 10%
Warna sesuai brand guide

📍 Logo Dalam Konten

Lokasi: Artikel, blog post, email

Ukuran: Fleksibel sesuai konteks

File: logo-horizontal.png atau logo-vertical.png

Spesifikasi:

Email header: 150-200px
Blog banner: 200-300px
Watermark: 100px atau lebih kecil

📍 Loading Screen

Lokasi: Saat loading halaman

Ukuran: 80-120px

File: logo-icon-only.png (animated)

Spesifikasi:

Format: PNG/SVG
Bisa dianimasikan
Background transparan

🖼️ Banner Placement Guide

📍 Hero Banner (Main)

Lokasi: Bagian utama setelah header

Ukuran: Full-width (responsive)

Standar: 16:9 ratio

Ukuran File:

1920x1200px (Desktop HD)
1200x400px (Tablet)
600x300px (Mobile)

<section class="hero">
  <img src="/assets/banners/hero-banner.jpg" 
       alt="SIAP4D - Toto Slot Gacor"
       class="hero-image"
       srcset="/assets/banners/hero-banner-1920x600.jpg 1920w,
               /assets/banners/hero-banner-1200x400.jpg 1200w,
               /assets/banners/hero-banner-600x300.jpg 600w">
</section>
        

📍 Promo Banner (Top)

Lokasi: Atas halaman (di bawah hero)

Ukuran: 970x250px (desktop), 728x90px (mobile)

Format: Static atau animated

Spesifikasi:

File: JPG/PNG/GIF
Max size: 200KB
Include CTA button

<div class="promo-banner">
  <img src="/assets/banners/promo-banner-970x250.jpg" 
       alt="Promo SIAP4D"
       loading="lazy">
</div>
        

📍 Sidebar Banner

Lokasi: Sidebar kanan halaman

Ukuran: 300x600px (half page) atau 160x600px (wide skyscraper)

Format: Static image

Spesifikasi:

Format: JPG/PNG
Max: 150KB per image
Responsive fallback

📍 Footer Banner

Lokasi: Footer section

Ukuran: 1200x400px (full width), 400x300px (card)

Format: Static atau teaser promo

Spesifikasi:

File: JPG/PNG
Dark background recommended
High contrast text

📍 Email Banner

Lokasi: Email marketing campaigns

Ukuran: 600px width (mobile-first)

Format: Static JPG/PNG

Spesifikasi:

Width: 600px fixed
Max height: 400px
File size: < 100KB
Alt text required

📍 Social Media Banner

Lokasi: Facebook, Twitter, LinkedIn, Instagram

Ukuran: Sesuai platform

Format: Optimized untuk setiap platform

Spesifikasi Per Platform:

Facebook: 1200x628px
Twitter: 1200x675px
LinkedIn: 1200x627px
Instagram: 1080x1350px

📱 Responsive Banner Breakpoints

Device	Width	Hero Banner Size	Promo Banner Size	Logo Size
Desktop (Large)	1920px+	1920x1200px	970x250px	180-200px
Desktop (Normal)	1024-1919px	1200x600px	970x250px	160-180px
Tablet	768-1023px	1200x400px	728x90px	120-140px
Mobile (Large)	480-767px	800x400px	320x50px	100-120px
Mobile (Small)	< 480px	600x300px	300x50px	80-100px

💻 Code Implementation

Logo di Header (HTML)

<header class="header">
  <div class="header-inner">
    <a href="/" class="logo-link">
      <img 
        src="/assets/logos/logo-horizontal.png"
        srcset="/assets/logos/logo-horizontal@2x.png 2x"
        alt="SIAP4D - Situs Toto Slot Gacor"
        class="logo"
        width="160"
        height="50"
        loading="eager"
      />
    </a>
    <!-- Navigation -->
  </div>
</header>
    

Hero Banner (HTML)

<section class="hero">
  <picture>
    <source media="(min-width: 1920px)" 
            srcset="/assets/banners/hero-banner-1920x1200.jpg">
    <source media="(min-width: 1024px)" 
            srcset="/assets/banners/hero-banner-1200x600.jpg">
    <source media="(min-width: 768px)" 
            srcset="/assets/banners/hero-banner-1200x400.jpg">
    <img src="/assets/banners/hero-banner-600x300.jpg"
         alt="SIAP4D - Daftar Sekarang"
         class="hero-image"
         loading="eager"
         width="1920"
         height="1200"
    />
  </picture>
</section>
    

Favicon Setup (HTML)

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/assets/logos/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/logos/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/assets/logos/favicon-64x64.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/logos/favicon-180x180.png">

<!-- Android Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/assets/logos/favicon-192x192.png">

<!-- Microsoft Tile -->
<meta name="msapplication-config" content="/assets/logos/browserconfig.xml">
<meta name="msapplication-TileColor" content="#1a1a2e">
<meta name="msapplication-TileImage" content="/assets/logos/favicon-144x144.png">
    

CSS untuk Logo Responsive

/* Header Logo */
.logo {
  height: 50px;
  width: auto;
  max-width: 180px;
  display: block;
}

/* Tablet */
@media (max-width: 1023px) {
  .logo {
    max-width: 140px;
    height: 45px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .logo {
    max-width: 120px;
    height: 40px;
  }
}

/* Hero Banner */
.hero-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 600px;
  object-fit: cover;
}

/* Footer Logo */
.footer-logo {
  height: 60px;
  width: auto;
  max-width: 200px;
  margin-bottom: 20px;
}
    

Open Graph Meta Tags (SEO)

<!-- Facebook / LinkedIn / General -->
<meta property="og:url" content="https://siap4d.com">
<meta property="og:type" content="website">
<meta property="og:title" content="SIAP4D | Situs Toto Slot Gacor">
<meta property="og:description" content="Daftar SIAP4D dan dapatkan bonus 100%">
<meta property="og:image" content="/assets/social/og-image-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SIAP4D | Situs Toto Slot Gacor">
<meta name="twitter:description" content="Daftar SIAP4D dan dapatkan bonus 100%">
<meta name="twitter:image" content="/assets/social/twitter-card-1200x675.jpg">
    

⚡ Optimization Tips

🖼️ Image Optimization

Gunakan WebP format untuk desktop (fallback ke JPG)
Compress images dengan TinyPNG atau ImageOptim
Target ukuran file: < 200KB untuk banner
Use srcset untuk responsive images
Lazy load banner yang tidak di viewport utama

📊 Performance

Gunakan CDN untuk delivery cepat
Minify CSS/JS yang berkaitan
Enable browser caching (1 tahun untuk static assets)
Monitor dengan Google PageSpeed Insights
Target: LCP < 2.5s, CLS < 0.1

🎨 Design Consistency

Gunakan color palette yang sama di semua banner
Maintain typography dan spacing yang konsisten
Include CTA button yang prominent di setiap banner
Test contrast ratio untuk accessibility
Gunakan brand guidelines untuk semua aset

📱 Mobile-First

Design banner dengan mobile-first approach
Ensure text readable di ukuran kecil
CTA button mudah di-tap (min 44x44px)
Test di berbagai screen size
Prioritas logo dan judul di mobile

✅ Implementation Checklist

📤 Upload ke Hosting

Untuk Hostinger (cPanel/File Manager):

1. Buat folder struktur:
Masuk ke File Manager → public_html → Buat folder "assets"

2. Upload file:
assets/ ├── banners/ (upload semua banner files)
├── logos/ (upload semua logo files)
└── social/ (upload OG images)

3. Update HTML:
Sesuaikan path di HTML: /assets/banners/hero-banner.jpg

4. Test:
Buka browser → https://siapnakama.com/assets/banners/hero-banner.jpg

Untuk WordPress:

1. Upload via Media Library:
Dashboard → Media → Add New → Upload files

2. Organize:
Create folders: Banners, Logos, Social

3. Get URL:
Copy URL dari media library

4. Use in pages:
Insert image atau gunakan plugin image lazy load

🚀 Next Steps

✨ Siap Deploy?

Untuk melanjutkan, Anda perlu:

Download semua aset (banner + logo)
Upload ke folder /assets/ di hosting
Update path di HTML file
Test di semua breakpoint
Submit ke search engine

📞 Butuh Bantuan?

Hubungi kami untuk:

Custom banner design
Optimization consultation
Setup di hosting Hostinger
SEO audit & improvement
Performance tuning

🎨 SIAP4D - Banner & Logo Placement Guide

📁 Struktur Folder Assets

🔷 Logo Placement Guide

📍 Header Logo

📍 Footer Logo

📍 Favicon

📍 Mobile App Icon

📍 Logo Dalam Konten

📍 Loading Screen

🖼️ Banner Placement Guide

📍 Hero Banner (Main)

📍 Promo Banner (Top)

📍 Sidebar Banner

📍 Footer Banner

📍 Email Banner

📍 Social Media Banner

📱 Responsive Banner Breakpoints

💻 Code Implementation

Logo di Header (HTML)

Hero Banner (HTML)

Favicon Setup (HTML)

CSS untuk Logo Responsive

Open Graph Meta Tags (SEO)

⚡ Optimization Tips

🖼️ Image Optimization

📊 Performance

🎨 Design Consistency

📱 Mobile-First

✅ Implementation Checklist

Sebelum Launch:

📤 Upload ke Hosting

Untuk Hostinger (cPanel/File Manager):

Untuk WordPress:

🚀 Next Steps

✨ Siap Deploy?

📞 Butuh Bantuan?