Skip to main content

HTML Eureka of the Day: Always on Top Banner in Blogger๐Ÿ“Œ (Sumber: CoPilot)

๐Ÿ“Œ Always on Top Banner in Blogger

1. Open Theme Editor

  • Go to Blogger Dashboard → Theme → Edit HTML.

2. Find the Main Posts Loop

Search for one of these lines in your template:

<b:section id='main' class='main' maxwidgets='1' showaddelement='no'>

or

<b:section id='main'/>

This is where your blog’s main post loop starts.

3. Insert the Banner Snippet Above the Loop

Paste this code above the <b:section id='main'/> line:

<!-- Sticky Banner / Always on Top -->
<div class="latest-post-banner" style="clear: both; text-align: center; 
    margin-bottom: 20px;">
  <a href="YOUR-LATEST-POST-URL">
    <img 
     src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg
        CbFoYKEr3HO2cqu-3SCD5cuhmcvHhpcdsZRNY2YA3L83IGBgOVJ8QvAlQYhVYk61A
        6RzILHyGEmf2XT6NHxAUVyKDlX9wn5AlX8oSm6yoZgnjky3Cabswif7WYMuFKQNoA
        XwFovYhJoju1EOa91PdLCVTEFgHDgDG6YErpkUlUSKN7l4Ku6pLmV4mWtQ-/s1600
        0/%5EBLOG%20HEADER.png" 
      alt="Latest Post" 
      style="width:100%; height:auto; border:0;" />
  </a>
</div>

<!-- Main posts loop starts here -->
<b:section id='main' class='main' maxwidgets='1' showaddelement='no'>

CATATAN PENTING:

Codingan utk dicari aka Codingan Loop Semua Post/Main Posts bisa tidak sama tapi akan ditemukan tetap serupa
Unsur yg akan sama: <b: section .. 
Unsur yg akan mirip: id='main' dan class='main'

Tentukan dgn hati-hati dan teliti!!

pada kasus blog saya:
<b:section class='main' id='main' name='Main' showaddelement='no'>

4. What This Does

  • Always places your chosen banner (with link) above the post list, regardless of publish date.

  • The link (YOUR-LATEST-POST-URL) should point to your latest post manually.

  • If you want the banner to update automatically, you’ll need a script that fetches the newest post dynamically.

✅ Result

Each time Blogger loads your homepage, the banner will appear before the first post, linking to your newest content. 

SUMMARY:

<!-- Sticky Banner / Always on Top -->
<div class="latest-post-banner" style="clear: both; text-align: center;
    margin-bottom: 20px;">
  <a href="YOUR-LATEST-POST-URL">
    <img
     src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg
        CbFoYKEr3HO2cqu-3SCD5cuhmcvHhpcdsZRNY2YA3L83IGBgOVJ8QvAlQYhVYk61A
        6RzILHyGEmf2XT6NHxAUVyKDlX9wn5AlX8oSm6yoZgnjky3Cabswif7WYMuFKQNoA
        XwFovYhJoju1EOa91PdLCVTEFgHDgDG6YErpkUlUSKN7l4Ku6pLmV4mWtQ-/s1600
        0/%5EBLOG%20HEADER.png"
      alt="Latest Post"
      style="width:100%; height:auto; border:0;" />
  </a>
</div>

<!-- Main posts loop starts here -->
<b:section id='main' class='main' maxwidgets='1' showaddelement='no'>

Responsive image

Responsive image

Comments

Popular posts from this blog

RAD PROTOTYPE Web-App: Post-Video & Comments [program]

Video List — JP Kanji Ultra Translation CONTROL SECTION — Login (Admin) Username: Password: Login CONTROL SECTION — Admin Panel Enable Comments Disable Comments Logout Activity Log Show Video COMMENTS DISABLED BY ADMIN Leave a Comment: Additional Comment Show Video COMMENTS DISABLED BY ADMIN Leave a Comment: Additional Comment Show Video COMMENTS DISABLED BY ADMIN Leave a Comment: Additional Comment Show Video COMMENTS DISABLED BY ADMIN Leave a Comment: Additional Comment

Tips mengeprint POSISI AKURAT!! Microsoft Excel

Gan Kadang mo buat header aka title pada cover sulit membuat PAS posisi Berikut tips dr gw: Buat dulu kerangka di spreadsheet kemudian dibongkar setelah selesai melakukan pengukuran PREPARING (setting Margin + tinggi dan lebar CELL) catatan:  SpreadsheetOffice gw menggunakan satuan milimeter (mm) dalam penentuan jarak margin NUMBERING and BORDERING STEP 1 PRINT PREVIEW CALCULATION to determine CENTER POINT! STEP 2 Setelah gw Print dan Cek  Entah lah  Hasil ukur gw dgn PENGGARIS (biasa)  Menunjukkan bahwa settingan 20mm untuk ukuranTABLE di Microsoft Excel dipresentasikan dgn 21mm pada HasilPrint  Ga tau kenapa begitu Yauwes terima saja! Lanjut dgn perhitungan utk menentukan titik tengah yg penting utk pembuatan Title yg benar-benar berposisi: Ingat ya Gan!   di HASIL PRINT ! Mencari patokan utk   di atas permukaan lembaran Kertas (hasil print) !!   CREATE HEADER aka COVER TITLE STEP 3 CLEANSING  STAGE 4 REMOVE BORDER and NUMBER RESULT

REPOST!! (Doh! Internet lagi lemot2 gimana gitu! Butuh Tool utk Monitor Kecepatan Internet (Download Speed)!!) → Gw ganti dgn nperf.com

KOMPARASI by nperf.com 4 OKTOBER 2025 19.00WIB OXYGEN 4 OKTOBER 2025 19.00WIB XL MACET GAN pake Networx !!! Alternatif dgn menggunakan nperf.com ! #  ChatGPT explain : nPerf adalah aplikasi dan layanan web untuk mengukur kualitas koneksi internet (baik Wi-Fi, data seluler, maupun jaringan kabel). ๐Ÿ” Fungsi utama nPerf nPerf digunakan untuk: Speed Test → mengukur kecepatan unduh (download), unggah (upload), dan latensi (ping) . Browsing Test → menilai kecepatan membuka situs web umum (misalnya Google, Facebook, YouTube). Streaming Test → menguji performa streaming video (buffering, resolusi, fps). Coverage Map → peta cakupan jaringan (4G, 5G, Wi-Fi) berdasarkan hasil uji pengguna di seluruh dunia. ๐Ÿ’ป Cara Menggunakan Via Website Buka https://www.nperf.com → Klik “Start Test” untuk langsung menjalankan pengu...