dah berapa hari aku tengok Claude dengan ChtGPT tak dapat buang container untuk blog. Sebenarnya kedua2 AI tu create code untuk project Database (HTML code je). Tapi bila css dia masuk campur dalam blogpost, keseluruhan blog template jadi kacau bilau.

Tanya punya tanya, AI still tak dapat nak solve.

tengok kat keliling tu, ada ruang, ada padding. Asal blog ni full width.

Lepas aku buang css body, elok je dia.

ikutkan buang yang padding and margin tu je.

Ikutkan aku perlu buang yang margin dan padding tu je, tapi aku buang semua css utk body tu biar tak clonflicting dengan existing css code untuk template blog tu.

Camni jadinya.

Alhamdulillah, dah jadi penuh.

Boleh tengok kat url blog rengking untuk carian plate number.

Dulu masa zaman-zaman Dreamweaver, aku cukup pakar guna benda target link ni. Tapi tak tau kenapa platform blog takde fungsi tu yang simplified. Means kena buat secara manual. Ke aku yang tak jumpa caranya? ahahah!

Ok, terus ke topik.

Kalau kita nak klik kat link dan link tu pergi ke specific area dalam sesuatu page tu, kita perlu letak id=target. Contoh;

letak code ni:

<div id="target-section">
    <!-- Content of the target section goes here -->
</div>

kat mana-mana bahagian yang kita nak target.

Lepas tu letak masa nak buat link tu, kena modified sket link tu camni;

<a href="your-webpage-url#target-section">Go to Target Section</a> 

jadinya user akan dibawak ke area yang kita dah set id="target-section" tu tadi.

Itu kalau berlainan page, kalau same page buat camni pulak.

<h2 id="target">This is the Target Section</h2>
    <p>This is the content of the target section.</p>

Pastu link tu buat camni. Jadi dalam page tu dia akan terus teleport ke area target tu. eceawah.

    <!-- Link to the Target Section -->

    <a href="#target">Go to Target Section</a>

 Rupanya blogspot ni boleh je nak design Squeeze page. Dah namanya squeeze page mestilah tak nak libatkan header, footer, menu dan lain lain yang ada pada template blog tu kan? Kita nak cuma ada content squeeze page tu je. Lain semua tak nak.

Jadi camni cara nak buat.

Kena hidden kan semua perkara yang aku sebut tu satu persatu. Caranya kena klik kanan kat paparan standart blog tu, dan pilih element mana yang nak di hidden kan.

<style>
  /* Hide header */
  header {
      display: none;
  }
  /* Hide footer */
  footer {
      display: none;
  }
  /* Hide sidebar */
  .sidebar {
      display: none;
  }
  /* Expand content width */
  .content {
      width: 100%;
      height: 100vh; /* Make content fullscreen */
      display: flex;
      justify-content: center;
      align-items: center;
  }

  /* Hide specific sections */
  .custom.al-center.f.section,
  .menu.f.r.s.section,
  .post-info.al-center.f.just-center,
  .comments,
  .f,
  .footer-inner.g {
      display: none;
  }
</style>

Dengan code ni, semua yang ko pilih akan hilang, dan page ko yang satu-satu tu akan jadi macam kanvas kosong, ready untuk didesign squeeze page

 1st time tengok effect ni kat blog onexoxplan.com by khairul anarm. Dalam tu ada text effect yang guna <kbd></kbd>. Dalam template2 blogger yang dibuat oleh Indonesian, kebanyakan memang akan guna fungsi kbd ni.

Cumanya sekarang, kalau nak buat sendiri effect tu aku tak pandai, rasanya guna CSS. Tapi tak pasti camna boleh simply guna <kbd>text</kbd> untuk dapat effect tu.

Ketepikan dulu kerumitan tu. Aku cuba buat sendiri guna CSS, tapi nak apply dia agak panjang.

Langkah 1, kena buat CSS dulu.

.butang-effect {
  display: inline;
  padding: 0.1em 0.2em; /* Adjusted padding */
  background-color: #dddddd; /* Grey color for the button */
  color: #666666; /* Text color */
  border: 1px solid #bbbbbb; /* Button border */
  border-radius: 4px; /* Rounded corners */
  box-shadow: 0 1px 0 #999999; /* 3D effect */
  text-shadow: 0 0 2px #ffffff; /* Text shadow for 3D effect */
}

<span class="butang-effect">text</span>

Hasilnya jadi seperti ini;

Effect tu digunakan ke atas perkataan Butang sahaja.

 laa. simple je sebenarnya. aku bagi step.

1. add wigdet contact form, letak la kat mana-mana pun, pastikan wigdet ni visible.
2. kemudian view balik blog yang ada paparan contact form yang kau dah buat tadi. Klik kanan mouse tu untuk inspect element kat bahagian contact form tu. Bila dah jumpa yang form tu, klik kanan lagi kat code tu, klik Edit as HTML.
3. Copy code form tu, dan masukkan ke page Contact Us. Kalau belum buat, boleh buat page tu ye.
4. Sekarang, masukkan code kat bawah ni, ke dalam template dengan cara masuk ke Theme, edit HTML dan paste code ni betul2 atas </head>

<style>
   #ContactForm1{display:none;}
</style>

lepas tu dah letak tu terus tekann save. siap.

 Untuk domain yang ada dalam cloudflare, terus pegi bahagian website.

masuk kat bahagian DNS, 

buat CNAME. Setel.

Segala info tu dapat kat blogger dashboard. Kat bahagian custom url. Masukkan custom url, lepastu akan keluar info tu.

Untuk TTL jangan letak AUTO. letak 5 minutes.