CSS Tips

Tutorial

CSS Blogspot • 12 Januari 2025 • 5 menit baca

Custom Scrollbar & Efek Border CSS untuk Blogspot

Pelajari cara mengganti scrollbar standar dengan desain minimalis dan menambahkan efek border mengalir pada gambar blog Anda. Tutorial lengkap dengan kode siap pakai!

A

Admin Blog

Web Developer & Blogger

Daftar Isi

1. Custom Scrollbar (Scrollbar Keren) 2. Efek Border Mengalir pada Gambar 3. Cara Memasang di Blogspot 4. Tips Tambahan

1

Custom Scrollbar (Scrollbar Keren)

Mengganti scrollbar standar dengan desain yang lebih minimalis dan berwarna.

💡 Mengapa Custom Scrollbar? Scrollbar default browser terlihat membosankan. Dengan CSS custom, Anda bisa membuat scrollbar yang sesuai dengan tema blog dan memberikan kesan profesional.

CSS

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

DEMO - Scroll area di bawah ini

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation.

Duis aute irure dolor in reprehenderit in voluptate.

Excepteur sint occaecat cupidatat non proident.

Sunt in culpa qui officia deserunt mollit anim id est laborum.

2

Efek Border Mengalir pada Gambar

Memberikan garis tepi yang bergerak saat kursor berada di atas gambar.

CSS

.image-border {
    border: 3px solid transparent;
    transition: border-color 0.5s;
    border-radius: 8px;
}

.image-border:hover {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0,123,255,0.5);
}

DEMO - Arahkan kursor ke gambar

3

Cara Memasang di Blogspot

Ikuti langkah-langkah berikut untuk memasang kode CSS di blog Anda.

1

Masuk ke Blogger Dashboard

Buka blogger.com dan login dengan akun Google Anda.

2

Pilih Tema (Theme)

Klik menu Tema di sidebar kiri dashboard.

3

Edit HTML

Klik tanda panah di sebelah "Sesuaikan (Customize)" → pilih Edit HTML.

4

Cari Kode CSS

Gunakan Ctrl+F untuk mencari ]]></b:skin> atau </style>.

5

Tempel Kode CSS

Salin kode CSS di atas dan tempel tepat di atas kode yang Anda temukan.

6

Simpan Perubahan

Klik tombol 💾 Simpan (Save) di pojok kanan atas.

✓

Gunakan Class di HTML

Tambahkan class="image-border" pada elemen gambar yang ingin diberi efek.

4

Tips Tambahan

Beberapa tips untuk hasil yang lebih optimal.

🎨

Warna

Gunakan kode HEX seperti #FF6347 untuk menyesuaikan tema blog Anda.

📱

Responsif

Selalu uji efek CSS di tampilan mobile untuk memastikan kompatibilitas.

⚡

Ringan

Hindari terlalu banyak animasi berat agar blog tetap cepat loading.

🎉 Kesimpulan

Dengan menerapkan kode CSS di atas, blog Anda akan terlihat lebih profesional dan menarik. Custom scrollbar memberikan sentuhan modern, sementara efek border pada gambar menambah interaktivitas yang menyenangkan bagi pengunjung.

Jangan ragu untuk bereksperimen dengan warna dan timing animasi sesuai selera Anda. Selamat mencoba! 🚀

Tags: #CSS #Blogspot #Tutorial #WebDesign #Scrollbar

© 2025 CSS Tips Blog. Dibuat dengan ❤️ untuk blogger Indonesia.

Kode berhasil disalin!