Cara Menambahkan Link Blog dengan Widget dan HTML Kreatif di Blogspot

Updated: 26 Jul, 2025 • 0 • min read

Table of Contents

Ilustrasi: Menambahkan Link Blog dengan Widget dan HTML Kreatif di Blogspot

Asik-Belajar - Fitur "Link ke Blog" pada Blogspot memungkinkan Anda menampilkan daftar link blog atau website favorit di sidebar, footer, atau area lainnya.

Selain menggunakan gadget bawaan, Anda juga bisa membuat daftar link kustom dengan kode HTML agar tampilannya lebih menarik.

1. Menambahkan Widget "Link ke Blog" Bawaan

Langkah-Langkahnya:

Masuk ke Blogger: Login ke Blogger dengan akun Google.
Buka Tata Letak: Pilih menu Tata Letak (Layout).
Tambahkan Gadget: Klik "Tambahkan Gadget" di area yang diinginkan.
Pilih "Daftar Link" (Link List): Cari gadget "Daftar Link" lalu klik tambah (+).
Isi Data Link:
- Judul widget: Misalnya "Blog Rekomendasi".
- Tambah link baru: Masukkan nama blog dan URL.
Simpan & Lihat Hasil: Klik Simpan lalu Simpan Tata Letak.

2. Menambahkan Link Blog dengan HTML

Jika Anda ingin tampilan lebih fleksibel, gunakan gadget HTML/Javascript.

Kode Dasar HTML Link:

<a href="https://contoh-blog.com" target="_blank">Nama Blog</a>

href adalah alamat URL.
target="_blank" agar link terbuka di tab baru.

3. Variasi Tampilan Link Menggunakan List

Buat daftar link seperti menu blog:

<ul>
  <li><a href="https://contoh-blog1.com" target="_blank">Blog 1</a></li>
  <li><a href="https://contoh-blog2.com" target="_blank">Blog 2</a></li>
  <li><a href="https://contoh-blog3.com" target="_blank">Blog 3</a></li>
</ul>

4. Variasi Link dengan Warna dan Hover

Tambahkan CSS sederhana agar link terlihat menarik:

<style>
.custom-links a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}
.custom-links a:hover {
  color: #ff6600;
  text-decoration: underline;
}
</style>

<div class="custom-links">
  <a href="https://contoh-blog1.com" target="_blank">Blog 1</a><br>
  <a href="https://contoh-blog2.com" target="_blank">Blog 2</a><br>
  <a href="https://contoh-blog3.com" target="_blank">Blog 3</a>
</div>

5. Variasi Link dengan Ikon

Anda juga bisa menambahkan ikon menggunakan Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<ul class="custom-links">
  <li><a href="https://contoh-blog1.com"><i class="fas fa-link"></i> Blog 1</a></li>
  <li><a href="https://contoh-blog2.com"><i class="fas fa-link"></i> Blog 2</a></li>
</ul>

6. Kapan HTML Digunakan?

Jika Anda ingin desain link yang lebih kreatif dibanding widget bawaan.
Untuk menampilkan ikon, warna, atau efek hover.
Untuk mengatur posisi link sesuai keinginan.

7. Coba Langsung di Blog Anda

Jika ingin mencoba membuat widget link yang menarik, Anda bisa menggunakan gadget HTML/Javascript pada Blogspot. Untuk panduan lebih detail, Anda juga dapat melihat contoh di:
👉 Signature Generator

Asik belajar blog