Cara Mengubah Efek Hover Untuk Teks Link Blog - Semalam Master Chef sudah sukses hare Update Template Terbaru dari Dapur Tutorial Blogspot dan Seo yaitu
Template Blog Dapur Happy New Year. Dalam kesempatan kali ini Master Chef punya koleksi Efek-efek Hover yang menurut Master Chef lumayan keren. sebelumnya sobat blogger tau apa itu Hover ?, Master Chef sendiri tidak begitu tau arti secara ilmiah dalam blogger tapi Master Chef tau maksutnya.. karna itu Master Chef jelaskan dengan Versi Dapur Tutorial Saja.
Efek Hover yaitu efek yang ada pada teks link blogspot ketika mouse anda berada diatas teks link tersebut.
Itu dia sekilas pengertian dari Efek Hover. Nah Jika kamu ingin merasa beda dengan efek hover milik blog orang lain Mister Complete punya triknya untuk mengubahnya. Berikut
Cara Mengubah Efek Hover Untuk Teks Link Blog.
- Silahkan kamu login terlebih dahuli ke blogger kamu
- Jika sudah silahkan masuk kehalaman Edit HTML (Baca : Cara mengakses halaman Edit HTML Blogger)
- Jangan Lupa untuk Download Template Lengkap terlebih dahulu untuk antisifasi kesalahan dalam edit HTML ( Baca : Cara Back-Up dan Upload Template Blogspot)
- Jika Sudah cari kode penyusun Warna Link blogsopt kamu. Pada umunya ada empat struktur kode CSS yang mengatur link style atau stylesheet dasar Blogspot yaitu :
a:link { } link yang normal, belum dikunjungi
a:visited { } link yang telah dikunjungi
a:hover { } link ketika user mengarahkan mouse di atasnya
a:active { } link yang pada saat itu diklik
- Secara umum kode yang tersusun dalam template blogspot seperti berikut :
a:link{color:#A9F5F2;text-decoration:none;}
a:visited{color:#A9F5F2;text-decoration:none;}
a:hover{color:#01DF01;text-decoration:none;}
- Nah kamu cari kode-kode yang mirip seperti diatas(Gunakan CTRL + F dan F3 untuk mempermudah pencarian kode). Biasanya kode tidak jauh dari kode body{
- Jika sudah menemukan kodenya, Hapus kode tersebut dan ganti dengan kode dibawah ini :
a.type1:link { color:black;text-decoration: none;}
a.type1:visited { color:grey; }
a.type1:hover {
-webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363);
background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image: -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image: -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image: -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}
- Kode yang berwarna merah tersebut adalah kode warna yang bisa kamu ganti sesuka hatimu. kamu bisa berkreasi untuk memiliki efek hover milik kamu sendiri.
- Jika sudah semua sekarang klik Simpan Template
- Selesai dan Lihat hasilnya.
Note : Penggunaan Efek Hover ini akan sempurna menggunakan Brouser Google Crome, karena pada browser lain ada sebagian efek yang tidak support, seperti efek blur, efek rainbow, efek shadow
Demikian
Tutorial blog mengenai
Cara Mengubah Efek Hover Untuk Teks Link Blog. semoga bisa bermanfaat. selamat mencoba dan semoga berhasil.
