Link Download dengan Image Rollover CSS

Link Download  dengan Image ini menggunakan css, karena gambar yang dipakai hanya satu (normal, hover, klik) sehingga browser cukup satu kali meload gambar, tinggal menentukan area lokasi untuk tiap-tiap efek rollover yang di inginkan. Jika ingin membuat image rollover link download, langkah pertama yang dilakukan adalah kita membuat dahulu tombol background gambar menggunakan aplikasi pengolah gambar seperti misalnya Corel Draw.

Contoh lihat gambar di bawah (lebar 107px, tinggi 75px).

‘Normal’. Gambar muncul sebagai background jika link tidak disorot mouse.

‘Hover’. Gambar muncul sebagai background ketika mouse diarahkan ke object.

‘Klik’. Gambar muncul ketika objek link diklik.

Selanjutnya kita buat properties css untuk download dengan ketentuan ukurun gambar 107px lebar, 75px tinggi dibagi menjadi tiga masing-masing 25px (seperti contoh gambar di atas)

.rollimage a {  
display: block;  
width: 107px;  
height: 25px;  
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8CqLM5wvwcwMnvxGpKAw-WSt7KTd9qr9pJq98L8pwqea27kiOP5zjf-6g7V8HtoXNjhLKq9giTZoy3hdbPzfc1qIuTo6Ts422gtfUEXf7r5-FiZrPw-Epo4aB-nI_KVfO8pz4vtDX9JM/s800/donwload_1.png") left top no-repeat;  
text-decoration: none;  
}     

.rollimage a:hover {  
background-position: 0 -25px;  
}  

.rollimage a:active {  
background-position: left bottom; 

Jika kita ingin menambahkan kode css di atas pada blogger caranya copy dan paste di atas kode ]]></b:skin> pada tab LayOut (Tata Letak)/design > Edit HTML

Selanjutnya membuat link HTML nya seperti di bawah ini (cara memasukkan pada posting dengan mode Edit HTML);

<div class="rollimage"><a href="URL yang dituju" title="download"></a></div> 

Warna merah ganti dengan link URL yang dituju milik Anda
Hasilnya akan seperti dibawah ini, coba Anda sorot dengan mouse dan klik;

Selesai, Anda tertarik? ...silahkan dicoba.