Cara Membuat Logo Blog Berkilau Saat Disentuh Pointer

Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu tentang cara membuat logo blog berkilau saat disentuh pointer, sebagai tutorial silakan simak di bawah ini;

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard blog, pilih menu edit template,

3. Setelah itu cari kode </b:skin> dengan cara

Ctrl

+

F

,

4. Setelah itu copy script di bawah ini lalu paste tepat di atas kode </b:skin>,

 .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: 55px;width: 249px;bottom:0;}
.logo a:hover .spanning{background-position: 300px 0px;} 

Pada tag .logo di sesuaikan dengan tag logo blog anda mungkin di setiap blog mempunyai tag logo yang berbeda.

Untuk tag logo ubah dengan class atau id pada tag div logo blog anda, jika id berarti menjadi pagar # dan jika class tetap titik.

Contoh untuk tag logo class :

CSS     : .logo a:hover .spanning{background-position: 300px 0px;}
HTML : <div class='logo'>
<a href='/'><span class='spanning'/><img alt='Renaldy Ways' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJpNgBI-ppLR4ls6L6L5ypQRsfqSmt6TOfP0ryYuzPI6FVLaAYBfz1dYUQbKArqWc9EJa-TD0AFE_qnhiOcQFBY5PpYrQ1VJj2aLUaIe4aEeIIhnwUTNDiZltYZdt7alFXnTCluNfSQrJ/s1600/LogoNew.png'/></a>
</div>

Pada tag div logo menggunakan class, jadi .logo tetap titik / tidak berubah!

Contoh untuk tag logo id :

CSS     : #logo a:hover .spanning{background-position: 300px 0px;}
HTML : <div id ='logo'>
<a href='/'><span class='spanning'/><img alt='Renaldy Ways' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJpNgBI-ppLR4ls6L6L5ypQRsfqSmt6TOfP0ryYuzPI6FVLaAYBfz1dYUQbKArqWc9EJa-TD0AFE_qnhiOcQFBY5PpYrQ1VJj2aLUaIe4aEeIIhnwUTNDiZltYZdt7alFXnTCluNfSQrJ/s1600/LogoNew.png'/></a>
</div>

Pada tag div logo menggunakan id, jadi .logo diubah menjadi #logo!

5. Setelah itu cari div tag logo blog anda, setelah itu selipkan script di bawah ini pada div tag logo blog anda seperti di bawah ini,

 <span class='spanning'/> 

diselipkan pada div tag logo blog anda seperti ini,

6. Simpan lalu lihat hasilnya.

Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Referensi www.idblanter.com/2015/07/membuat-logo-berkilau-saat-disentuh-cursor.html

Share this