Minggu, 10 November 2013

Cara Membuat Efek Link Bertabur Bintang di Blog

Cara Membuat Efek Link Bertabur Bintang di Blog – Beberapa waktu yang lalu saya pernah membagikan trik memasang efek link membesar otomatis saat disentuh di blog. Efek yang akan saya bagikan kali ini tidak jauh – jauh dari manipulasi link. Yup, dari judulnya saja tentu sudah terlihat. Saya akan membagikan efek link bertabur bintang di blog. Efek taburan bintang ini akan terlihat apabila pointer mouse diletakkan diatas link. Masih belum terbayang bagaimana efek link bertabur bintang ini? Silahkan lihat gambar berikut :
Gambar preview link berabur bintang yang sudah dipasangkan di blog
Cara memasangnya cukup mudah. Ikuti beberapa langkah berikut :
1.     Buka Blogger, dan masuk ke Template.
2.     Buat sebuah backup dari template blog Anda, lalu lanjutkan dengan mengklik tombol Edit HTML.
3.     Cari kode a:hover {  (gunakan tombol sakti, CTRL+F). Kurang lebih kodenya seperti dibawah ini :
a:hover {
color:#325C1C;
text-decoration:underline;
text-shadow:5px 5px 5px #000;
}
Catatan : Kode CSS link pada setiap template blog berbeda – beda. Jika Anda tidak menemukan kode yang sama, cari yang mirip.
4.     Sisipkan kode berikut tepat disebelah/setelah kode a:hover { .
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH6atWRN84AQUAENcPR58W4AGTWrqvdoyo0ZS3nGNO5rR7KHiwkwFw_g17s1wKI2uvvM66HhXDqferdVUrn_JLMBnnodDKcwFKZYdF7tmZ3msxjToSZCame_b8iedo9TmRSI6nCdq1_ati/s1600/bertabur-bintang.gif);
Sehingga kodenya akan menjadi :
a:hover {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH6atWRN84AQUAENcPR58W4AGTWrqvdoyo0ZS3nGNO5rR7KHiwkwFw_g17s1wKI2uvvM66HhXDqferdVUrn_JLMBnnodDKcwFKZYdF7tmZ3msxjToSZCame_b8iedo9TmRSI6nCdq1_ati/s1600/bertabur-bintang.gif);
color:#325C1C;
text-decoration:underline;
text-shadow:5px 5px 5px #000;
}
5.     Terakhir, klik Simpan, dan buka blog Anda untuk menguji efek link bertabur bintang ini.
Bagaimana? Oh, iya! Setelah melakukan trik memasang efek link bertabur bintang di blog, jangan lupa untuk men-share artikel ini, baik itu di Google+, Facebook, ataupun Twitter. Ikuti juga RSS blog Tips SEO + Blog – PC 123, untuk mendapatkan update seputar dunia tips trik blogging yang akan saya kirimkan langsung ke alamat e-mail Anda. Terima kasih, dan selamat mencoba!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

2 komentar:

  1. makasih bro atas informasi yanng bermanfaat ini salam kenal brooo

    BalasHapus
  2. saya cari-cari script ini ketemunya malah disini. Makasih ya gan !

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!

Internet Blogs