Cara Membuat Kotak Referensi Otomatis di Blogspot

Daftar Isi

Menulis artikel di blog itu kadang mirip-mirip kayak bikin tugas akhir waktu kuliah dulu. Nggak cuma modal ketik, tapi biar argumen kita nggak dikira hasil ngibul atau sekadar asal cuap, mencantumkan daftar pustaka atau referensi otomatis di blogspot pada akhir tulisan itu hukumnya wajib mugaladah. Selain bikin tulisan jadi lebih kredibel, pembaca juga bakal lebih respek karena tahu tulisan kita punya dasar yang jelas. 

Foto oleh Jackson Sophat di Unsplash

Atau jangan-jangan karena saya berkecimpung di dunia akademik ya jadinya dikit-dikit kadang ingin mencantumkan referensi.

Apapun alasannya, tapi ketika nulis referensi kalau cuma pakai format bullet atau numbering bawaan Blogger yang standar banget, jujur aja tampilannya kelihatan monoton dan kurang sedap dipandang.

Nah, di tutorial kali ini, saya mau membagikan cara membuat daftar pustaka di blog menjadi Kotak Referensi Modern & Clean pakai sentuhan CSS khusus. Kode CSS ini dibekali fitur otomatis. Jadi, kita nggak perlu ngetik kata "Referensi" berulang-ulang di setiap artikel, karena sistem bakal memunculkannya secara ajaib!

Yuk, langsung kita eksekusi langkah-langkahnya di bawah ini.

Langkah 1: Pasang Kode CSS di Tema Blogspot

Langkah awal, kita pasang dulu styling-nya ke dalam template blog agar kotak referensi ini aktif secara permanen di seluruh artikel.

1. Buka dashboard Blogger.
2. Masuk ke menu Tema (Theme) > klik tanda panah kecil di sebelah tombol "Sesuaikan" > pilih Edit HTML.
3. Cari kode </style> atau ]]></b:skin> (Biar cepat, gunakan pintasan Ctrl + F).
4. Copy kode CSS di bawah ini, lalu paste tepat di atas kode </style> atau ]]></b:skin> tersebut:

/* Kotak Referensi Modern & Clean - Qowim.net */
.box-referensi {
  background-color: #f8f9fa; /* Warna latar belakang abu-abu sangat muda */
  border-left: 4px solid #007bff; /* Garis aksen biru di sebelah kiri */
  padding: 20px;
  margin: 25px 0;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Otomatis memunculkan tulisan Referensi */
.box-referensi::before {
  content: "Referensi";
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  color: #333333;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mengatur list di dalam kotak (bisa UL maupun OL) */
.box-referensi ul, 
.box-referensi ol {
  margin: 0;
  padding-left: 20px; /* Jarak teks dari angka/bullet */
  color: #555555;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Mengatur jarak antar item referensi */
.box-referensi li {
  margin-bottom: 8px;
}

.box-referensi li:last-child {
  margin-bottom: 0;
}

/* Gaya opsional jika di dalam referensi ada link (URL) */
.box-referensi a {
  color: #007bff;
  text-decoration: none;
  word-break: break-all; /* Agar URL panjang tidak merusak tata letak di mobile */
}

.box-referensi a:hover {
  text-decoration: underline;
}

Tanda /* ... */ merupakan keterangan tambahan saja agar mudah dimengerti. Jika ada yang ingin disesuaikan bisa dilakukan sendiri.
5. Jangan lupa klik SIMPAN

Cara Penggunaannya di Postingan

Kalau CSS sudah nangkring di template, sekarang setiap kali kamu selesai bikin artikel berbobot, kamu tinggal panggil kodenya lewat mode HTML Editor.

1. Di akhir artikel tempat kamu mau naruh daftar rujukan, ubah mode menulis dari Tampilan Menulis (Compose View) ke Tampilan HTML (HTML View) lewat ikon pensil di pojok kiri atas.
2. Gulir sampai baris paling bawah, lalu tempelkan kode pemanggil berikut ini:

<div class="box-referensi">
  <ol>
    <li>Nama Penulis. (Tahun). Judul Buku/Artikel. Penerbit/Link.</li>
    <li>Referensi kedua kamu di sini.</li>
  </ol>
</div>

Silakan isi sesuai dengan kebutuhan data yang akan ditampilkan di referensi, jika ada tautan yang perlu disematkan, anda tinggal insert link seperti biasanya.
3. Lihat hasilnya terlebih dulu dengan klik preview. Hasilnya seperti di bawah ini
   

Kenapa Sih Mending Pakai Trik Ini?

Biar tulisan kita makin disayang pembaca, sekaligus ramah pas dirayapi sama Google dan AI, struktur semacam ini penting banget:

• Anti-Ribet (Otomatis): Cukup bungkus daftarnya pakai <div class="box-referensi">. Kata "REFERENSI" dengan huruf kapital tebal otomatis nongol di paling atas. Konsisten di semua artikel tanpa perlu kamu ketik manual tiap bikin postingan.
• Aman dari Link Panjang Ngaco: Kadang kita nemu link rujukan yang panjangnya kayak kereta api. Kalau nggak diantisipasi, link itu bisa jebol keluar dari tata letak layar HP pembaca. Berkat magic dari fungsi word-break: break-all, link sepanjang apa pun bakal patah dan turun ke baris baru dengan rapi.
• Visualisasi Data Lebih Enak: Kombinasi warna latar abu-abu kalem (#f8f9fa) dan garis aksen biru tegas di sisi kiri bikin blok referensi ini kelihatan eksklusif, rapi, dan sedap dipandang mata pembaca.

Sekian tutorial tentang CSS cara membuat kotak referensi otomatis di blogspot. Saya sendiri akan menggunakannya untuk artikel-artikel yang memang butuh mencantumkan sumber.