Elemen Pendukung Blogger

Elemen Pendukung Blogger

Elemen

Setting Robots.txt di Blogger.com

Setting robots.txt di Blogger.com adalah salah satu hal penting untuk mengontrol bagaimana mesin pencari merayapi dan mengindeks blog Anda. File robots.txt berisi perintah untuk "robot" mesin pencari (seperti Googlebot). Berikut adalah panduan lengkapnya, dari yang dasar hingga setting yang lebih advance.

• Login ke Dashboard Blogger Anda.
• Pilih blog yang ingin Anda atur.
• Pergi ke menu Settings (Pengaturan) > Crawlers and indexing (Perayap dan Pengindeksan) > Custom robots.txt.
• Di sinilah Anda bisa mengedit isi file robots.txt Anda. Pastikan statusnya "Enabled" (Diaktifkan).

Struktur dasar robots.txt blogger.com

User-agent: [Nama Robot]
Disallow: [Path yang diblokir]
Allow: [Path yang diizinkan]

Template dasar robots.txt

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://domainanda.com/feeds/posts/default?orderby=UPDATE

Penjelasan:

• User-agent: * : Perintah ini berlaku untuk semua robot mesin pencari.
• Disallow: /search : Meminta robot untuk tidak merayapi halaman hasil pencari internal blog Anda. Halaman ini biasanya berisi konten duplikat, jadi lebih baik diblokir.
• Allow: / : Memperbolehkan robot untuk merayapi seluruh halaman lain di blog Anda. Ini adalah pengaturan default, tapi dengan menuliskannya secara eksplisit, perintahnya menjadi lebih jelas.
• Sitemap : Ini adalah petunjuk untuk mesin pencari tentang di mana menemukan peta situs (sitemap) blog Anda. URL feed Blogger berfungsi sebagai sitemap.

Note: domainanda.com ubah dengan alamat blog anda, penulisan boleh dengan www atau tanpa www. Contoh

• https://domainanda.com menjadi https://cherbonnews.com
• https://domainanda.com menjadi https://www.cherbonnews.com

Kode Tabel dengan Styling

Kode Anda Disini

<div class="blogger-table">
<table style="width:100%; border-collapse: collapse; margin: 20px 0;">
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th style="border: 1px solid #ddd; padding: 12px; text-align: left;">Nama Produk</th>
      <th style="border: 1px solid #ddd; padding: 12px; text-align: left;">Harga</th>
      <th style="border: 1px solid #ddd; padding: 12px; text-align: left;">Stok</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 12px;">Laptop ASUS</td>
      <td style="border: 1px solid #ddd; padding: 12px;">Rp 8.500.000</td>
      <td style="border: 1px solid #ddd; padding: 12px;">15</td>
    </tr>
    <tr style="background-color: #f9f9f9;">
      <td style="border: 1px solid #ddd; padding: 12px;">Mouse Wireless</td>
      <td style="border: 1px solid #ddd; padding: 12px;">Rp 250.000</td>
      <td style="border: 1px solid #ddd; padding: 12px;">30</td>
    </tr>
  </tbody>
</table>
</div>

Tampilan dari kode di atas

Nama Produk	Harga	Stok
Laptop ASUS	Rp 8.500.000	15
Mouse Wireless	Rp 250.000	30

Kode Tabel Responsif untuk Mobile

<div style="overflow-x:auto;">
<table style="width:100%; min-width: 600px; border-collapse: collapse;">
  <tr style="background-color: #4CAF50; color: white;">
    <th style="padding: 15px; text-align: left;">Nama</th>
    <th style="padding: 15px; text-align: left;">Email</th>
    <th style="padding: 15px; text-align: left;">Telepon</th>
  </tr>
  <tr>
    <td style="padding: 12px; border-bottom: 1px solid #ddd;">Andi Wijaya</td>
    <td style="padding: 12px; border-bottom: 1px solid #ddd;">andi@email.com</td>
    <td style="padding: 12px; border-bottom: 1px solid #ddd;">08123456789</td>
  </tr>
</table>
</div>

Tampilan dari kode di atas

Nama	Email	Telepon
Andi Wijaya	andi@email.com	08123456789

Tips untuk Blogger

• Gunakan inline CSS karena lebih mudah diatur di Blogger
• Tambahkan div wrapper untuk kontrol yang lebih baik
• Gunakan border-collapse untuk garis tabel yang rapi
• Padding yang cukup untuk keterbacaan
• Warna alternating untuk baris yang mudah dibaca

Kode

Untuk menampilkan kode HTML di postingan Blogger, Anda perlu menggunakan HTML Entities karena kode HTML biasa akan dieksekusi oleh browser.

<div class="code-container" style="position: relative; background: #f4f4f4; border: 1px solid #ddd; border-radius: 5px; margin: 15px 0;">
  <button onclick="copyCode(this)" style="position: absolute; top: 10px; right: 10px; background: #3366ff; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 12px;">Copy</button>
  
  <pre style="padding: 40px 15px 15px 15px; overflow-x: auto; margin: 0;">Kode Anda Disini</pre>
</div>

<script>
function copyCode(button) {
    const codeContainer = button.parentElement;
    const pre = codeContainer.querySelector('pre');
    const textArea = document.createElement('textarea');
    textArea.value = pre.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    
    // Ubah teks button sementara
    const originalText = button.textContent;
    button.textContent = 'Copied!';
    button.style.background = '#28a745';
    
    setTimeout(() => {
        button.textContent = originalText;
        button.style.background = '#3366ff';
    }, 2000);
}
</script>

Kode