Widget Label Blogger dengan Thumbnail, Solusi Percantik Tampilan Artikel

GalaPos ID, Pandeglang.
Tampilan blog yang rapi bukan hanya soal estetika, tetapi juga berpengaruh terhadap kenyamanan pembaca dan optimasi mesin pencari (SEO).
Salah satu cara yang masih banyak digunakan oleh pengguna Blogger adalah menampilkan artikel terbaru berdasarkan label tertentu lengkap dengan thumbnail di bagian bawah postingan.

Widget Label Blogger dengan Thumbnail, Solusi Percantik Tampilan Artikel
Blog sudah rajin diisi, tapi pembaca malah kabur setelah selesai membaca satu artikel? Mungkin yang kurang bukan kontennya, melainkan jalur agar mereka betah berkeliling. Widget label dengan thumbnail bisa jadi solusi sederhana yang sering terlupakan. Foto: ilustrasi

 

"SEO bukan cuma soal mengejar Google. Kalau pembaca sendiri bingung mencari artikel terkait, siapa sebenarnya yang sedang dimanjakan?"

Baca juga:

Gala Poin:
1. Widget label dengan thumbnail membantu menampilkan artikel terbaru berdasarkan kategori tertentu di bagian bawah postingan.
2. Script yang digunakan telah mendukung standar HTML5 sehingga aman dipasang pada template Blogger modern.
3. Selain mempercantik tampilan blog, widget ini meningkatkan internal linking, pengalaman pengguna, dan potensi optimasi SEO.


Widget ini dirancang untuk menampilkan daftar artikel terbaru dari kategori yang dipilih sehingga memudahkan pengunjung menemukan konten yang masih berkaitan. Selain meningkatkan pengalaman pengguna (user experience), fitur tersebut juga membantu memperkuat internal linking yang disukai mesin pencari.

Script yang digunakan dalam tutorial ini telah mendukung standar HTML5, sehingga relatif aman dipasang pada template Blogger modern tanpa menimbulkan error akibat validasi kode.

Widget ini sangat cocok diterapkan pada blog bertema magazine, portal berita, maupun blog pribadi yang memiliki banyak kategori artikel.


Cara Memasang Widget Label dengan Thumbnail di Blogger

1. Masuk ke Dashboard Blogger
Login ke akun Blogger, kemudian buka menu Tema (Template) lalu pilih Edit HTML.

Baca juga:
INI Kota Semarang Perkuat Aksi Kemanusiaan, Donor Darah Bantu Jaga Ketersediaan Stok Darah


2. Tambahkan CSS
Cari kode:

</style>

atau

</b:skin>

Kemudian letakkan kode CSS yang tersedia tepat di atasnya.

(Gunakan kode CSS sesuai tutorial asli.)


3. Tambahkan Kerangka Widget
Cari kode:

<b:section class='main' id='main' showaddelement='no'>

Lalu kecilkan (collapse) bagian tersebut hingga menjadi:

<b:section class='main' id='main' showaddelement='no'>...</b:section>

Setelah itu, letakkan kerangka widget tepat di bawahnya sesuai kode pada tutorial.

Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blogger
Widget label dengan thumbnail membantu menampilkan artikel terbaru berdasarkan kategori tertentu di bagian bawah postingan. Script yang digunakan telah mendukung standar HTML5 sehingga aman dipasang pada template Blogger modern.

 

4. Tambahkan Script JavaScript
Cari kode:

</head>

Kemudian tempelkan script JavaScript yang tersedia tepat di atasnya.

Script ini berfungsi mengambil artikel terbaru berdasarkan label yang dipilih beserta thumbnail dan tanggal publikasinya.


5. Tambahkan Script Pendukung
Cari kode:

</body>

Lalu letakkan script jQuery yang tersedia tepat di atasnya.

Script tersebut akan mengubah ukuran thumbnail agar tampil lebih besar dan proporsional pada halaman.

 

Baca juga:
Peti Jenazah Ayatollah Ali Khamenei Diarak, Dunia Soroti Masa Depan Politik Iran


6. Simpan Template
Setelah seluruh kode berhasil dipasang, simpan perubahan template Blogger.


7. Tambahkan Gadget Baru
Masuk ke menu Tata Letak, kemudian pilih Tambahkan Gadget → HTML/JavaScript.

Masukkan script pemanggil widget yang tersedia pada tutorial.

Perhatikan bagian berikut:

Black

Kata tersebut merupakan nama label artikel. Gantilah sesuai label yang ingin ditampilkan pada blog Anda.

Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blog
Tutorial kali ini tentang cara membuat widget label atau kategori tertentu dengan thumbnail yang akan diletakkan di bagian bawah postingan. Unsur script untuk pembuatan widget ini sudah valid HTML5, sehinggal anda tidak perlu khawatir akan error script yang bakal terjadi saat memasangnya.

 

8. Sesuaikan Ukuran Thumbnail
Apabila ukuran gambar dirasa terlalu kecil atau terlalu besar, pengaturannya dapat dilakukan melalui kode CSS pada langkah kedua agar sesuai dengan lebar template blog.

Dengan mengikuti langkah-langkah tersebut, widget artikel berdasarkan label akan muncul otomatis di bagian bawah setiap postingan dan menampilkan artikel terbaru sesuai kategori yang telah ditentukan.

 

 

 

Baca juga:
Dari Bandung ke Dunia: Diplomasi, AI, dan Anak Muda Jadi Sorotan Festival KAA 2026

Percuma nulis ratusan artikel kalau pengunjung cuma mampir satu halaman. Blog bukan kos-kosan, pembaca jangan dibiarkan cepat angkat kaki.

#GalaPosID #MediaPublikasiIndonesia #Blogger #TutorialBlogger #SEO #WidgetBlogger #BloggingIndonesia

Lebih baru Lebih lama

Nasional

نموذج الاتصال