02 July 2015

Cara Membuat Logo Berkilau Saat disentuh Cursor

Logo Berkilau Idblanter.com

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)

Informasi Pemasangan
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..
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic