Cara Mengedit Template Essential Agar Lebih SEO, Terstruktur, dan Epic

Template Essential versi ketiga adalah salah satu template resmi dari Blogger yang ringan dan populer di kalangan pemula. Tapi tahukah kamu? Template ini bisa ditingkatkan tampilannya agar lebih menarik, SEO-friendly, dan lebih profesional!

🔍 Mengapa Memilih Template Essential?

• Struktur Lengkap: Header, sidebar, konten utama, dan footer tersedia.
• Desain Minimalis: Simpel, bersih, dan tidak membingungkan.
• Siap Edit: Gampang diakses via Edit HTML.
• Widget Siap Pakai: Dukungan navigasi, sidebar, dan pengaturan lanjutan.
• Stabil: Jarang terjadi error saat dimodifikasi.

⚙️ Langkah Rombak Template Essential

1. Tambahkan Breadcrumb (Navigasi untuk SEO)

Breadcrumb membantu Google memahami struktur situs kamu.

1. Buka Dasbor Blogger
2. Pilih menu Tema → Klik panah ▼ → Edit HTML
3. Cari kode <data:post.body/>
4. Letakkan kode berikut di bawahnya:

<script type='application/ld+json'>{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "<data:blog.homepageUrl.canonical/>"
    <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'>
    {
      "@type": "ListItem",
      "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>,
      "name": "<data:label.name/>",
      "item": "<data:label.url.canonical/>"
      <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
  ]
}</script>

2. Tambahkan Foto Profil Penulis

1. Cari kembali <data:post.body/>
2. Letakkan kode ini di atasnya:

<!-- startprofile -->
<span class='Sofyan'>
  <div class='post-author-profile-pic-container'>
    <b:include data='{ image: data:post.author.authorPhoto.image, imageRatio: "1:1", imageSizes: [84, 168], sourceSizes: "99px", imageClass: "post-author-profile-pic" }' name='responsiveImage'/>
    <div class='author-name'>
      <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
        <span><strong>Oleh: <data:post.author.name/></strong></span>
      </a>
    </div>
  </div>
</span>
<!-- endprofile -->

3. Tambahkan Efek CSS Foto Profil

Letakkan CSS ini tepat sebelum </head>:

<style>
  .post-author-profile-pic {
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 100, 100, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.4);
    background-color: #fff0f0;
    border: 2px solid #ffcccc;
    transition: box-shadow 0.6s ease;
  }

  .post-author-profile-pic:hover {
    box-shadow:
      0 0 10px #ff5f6d,
      0 0 20px #ffc371,
      0 0 30px #47e6b1,
      0 0 40px #6a82fb,
      0 0 50px #fc5c7d,
      0 0 60px #f9d423,
      inset 0 0 10px rgba(255, 255, 255, 0.5);
  }
</style>

🎨 Kustomisasi Tambahan

• Masuk ke menu Tema → Sesuaikan untuk ubah warna, font, dan tata letak.
• Gunakan CSS :first-letter jika ingin memberi warna unik pada huruf pertama judul blog kamu.

---

📌 FAQ (Klik untuk membuka)

Apa itu Breadcrumb dan mengapa penting?

Breadcrumb adalah navigasi yang membantu pembaca (dan Google) memahami posisi halaman dalam struktur blog.

Apa efek dari menambahkan foto profil penulis?

Meningkatkan kredibilitas dan kepercayaan pembaca, terutama untuk artikel informatif atau tutorial.

Apa template ini cocok untuk AMP?

Template Essential bisa dibuat AMP-friendly dengan sedikit penyesuaian tambahan seperti mengganti script dan img biasa ke versi AMP.

Bisakah template ini otomatis Dark Mode?

Bisa. Tinggal tambahkan media query CSS @media (prefers-color-scheme: dark) dan atur warna latar dan teks sesuai kebutuhan.

---

✍️ Penutup

Dengan sedikit modifikasi, template Essential bisa naik level menjadi blog yang lebih profesional dan SEO friendly. Jangan takut bereksperimen, dan kalau ada pertanyaan, silakan tulis di kolom komentar ya!

Semoga blog kamu makin keren dan powerful!