Cara Custom Label pada Blogger dengan CSS/Javascript: Tombol Bergerak jika Disentuh

Dalam dunia blogging, tampilan yang menarik tidak hanya memikat pengunjung, tetapi juga meningkatkan kualitas pengalaman mereka. Salah satu elemen penting yang sering diabaikan adalah label pada Blogger. Label-label ini tidak hanya berfungsi sebagai kategori, tetapi juga dapat menjadi elemen visual yang menarik jika didesain dengan baik. 

Dalam tutorial ini, kita akan membahas cara membuat label custom dengan menggunakan kode CSS/Javascript untuk memberikan sentuhan estetika yang lebih pada blog kamu. Selain terlihat estetik, label ini akan bergerak jika kursor diarahkan pada masing-masing tombol, bisa dilihat pada gambar GIF di atas. 

CSS/JAVASCRIPT

Langkah pertama, kita harus menyiapkan terlebih dahulu kode CSS/Javascript-nya, kamu bisa menggunakan kode CSS/Javascript di bawah ini: 

<p> <style>
.Label li {
        background: linear-gradient(to bottom, #27c699 0%, #27c699 0%, #27c699 100%, #27c699 0%) repeat scroll 0 0 transparent;
        border: 0px solid;
        border-radius: 30px 30px 30px 30px;
        float: left;
        font-size: 100%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
    .Label li:hover {
        transform: rotate(10deg);
    }
.Label a {
    color: #ffffff;
    text-decoration: none;
}
</style> </p>

Silakan sesuaikan disain label dengan kebutuhan di blog masing-masing. Kamu bisa mengubah warna, radius pada sudut tombol, besar rotasi tombol ketika disentuh, durasi transisi/putar, dan lainnya. 

CARA MEMASANG KODE CSS/JAVASCRIPT PADA BLOG

Selanjutnya silakan salin dan pasang kode CSS/Javascript di atas pada blog kamu. Caranya, bisa melalui 'Edit HTML,' bisa juga melalui meni 'Tambahkan CSS'. Mari kita bahas satu per satu: 

1. Melalui 'Edit HTML'

• Masuk ke Dashboard Blogger;
• Pilih tab 'Tema';
• Pada menu 'custom (Dibah)' lalu pilih pada tombol orange-panah kecil menghadap ke bawah;
• Namun kita harus 'Cadangkan' terlebih dahulu untuk mengantisipasi apabila kita mengalami masalah dalam proses edit HTML.
• Pilih 'Edit HTML';
• Letakkan kode CSS/Javascript di atas tag </head>
• Jika tidak ada masalah, pilih SAVE!

Atau lihat di bawah:

2. Melalui Menu 'Tambahkan CSS' 

• Masuk ke Dashboard Blogger;
• Pilih tab 'Tema';
• Pilih 'SESUAIKAN' pada tombol orange.
• Pilih 'Lanjutan';
• Pada drop down cari tab 'Tambahkan CSS'
• Paste kode CSS pada kolom yang tersedia
• SAVE!

Atau lihat di bawah:

Catatan: Jika tidak berhasil menggunakan cara melalui menu 'Tambahkan CSS', maka harus menggunakan cara 'Edit HTML'.

Dengan penerapan kode CSS/Javascript yang tepat, label-label di Blogger kamu dapat berubah dari sekadar elemen teks menjadi fitur visual yang memperkuat identitas dan tema blog kamu. Penggunaan label custom ini tidak hanya meningkatkan estetika, tetapi juga memperbaiki navigasi bagi pengunjung, membuat mereka lebih mudah menemukan konten yang relevan. 

Teruslah bereksperimen dengan desain dan kode untuk menemukan kombinasi yang paling sesuai dengan gaya dan kebutuhan blog kamu. Dengan pemahaman yang lebih baik tentang CSS/Javascript dan bagaimana menggunakannya untuk mempercantik label, kamu dapat membawa blog kamu to the next level!