Cara Membuat Logo Berkilau Saat disentuh Cursor

Cara Membuat Logo Berkilau Saat disentuh Cursor

Rio Ilham Hadi

02 July 2015

Tutorial ini saya buat karena request dari sobat atau pengunjung idblanter.com, mungkin pada tutorial kali ini saya tidak usah panjang lebar karena tutorial ini mudah dan gampang (sama aja), Logo ini akan berkilau jika di hover atau disentuh oleh cursor, dan jika dilepas (tidak disentuh cursor) kilau pada logo ini akan berbalik arah.

Untuk demonya sobat bisa lihat dengan cara sentuh logo pada atas kiri blog ini.

Jika sobat tertarik untuk membuat Logo pada blog sobat menjadi berkilau ikuti tutorial dibawah ini.

Pertama sobat ke : Blogger > Template > Edit HTML

Letakan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

.spanning {z-index: 9999;display: block;position: absolute;background: url("http://4.bp.blogspot.com/-vyNT11VOT4Q/VAKp8n9oEtI/AAAAAAAADtU/kIEbA9m6bmg/s800/shine.png") -300px 0px no-repeat;transition-property: all;transition-duration: .8s;-webkit-transition-property: all;-webkit-transition-duration: .8s;background-size: 100%;height: 49px;width: 249px;bottom:0;}
.logo a:hover .spanning{background-position: 300px 0px;}

.logo ubah dengan class atau id pada tag div logo sobat, jika id berarti menjadi pagar # dan jika class berarti tetap titik . (selengkapnya lihat gambar 1)

Jika Kilau tidak sesuai pada logo hapus bottom:0; pada CSS.

dan Langkah terakhir adalah HTML, (Lihat Gambar 1)

Gambar 1

<span class='spanning'></span>

Letakan HTML dengan cara (Lihat Gambar 1) cocokan pada HTML logo pada blog sobat.

Selesai. lalu Simpan Template.

Baca Juga : Cara Menggunakan Emoji Pada Postingan Blogger

Semoga Tutorial ini bermanfaat..

Share This