Kamis, 06 Agustus 2009

170. Membuat Warna Link Berkedip Warna Warni

 Up date : 11 Juni 2010. Berhubung posting yg dahulu mengalami byk kendala, maka posting ini saya update sebagai berikut:

Ketika sebuah link di sorot, link tersebut akan dikelilingi bintang yang berkedip-kedip. Emang bisa? bisa saja,kenapa nggak? Ingin tahu caranya? silahkan ikuti langkah-langkah berikut ini :

  1. Silahkan login ke hosting tempat biasa anda menyimpan/upload gambar/image atau foto dll, lalu upload lah gambar yg ada pd link di bawah ini :

    http://i27.tinypic.com/2626vyh.jpg 

    Cara uploadnya, saya ambil contoh menyimpan di http://s567.photobucket.com/. Setelah saya login ke photobucket.com, muncul tampilan spt berikut:




     
    Arahkan mouse/cursor ke link "MORE UPLOAD TOOLS" sehingga muncul shorcut. Pilih dan klik pada pilihan "from the web".Pada kotak isian yg ada tulisan : "Paste URL to an image", copy URL warna merah diatas dan pastekan pd kotak tsb, lalu klik "Start Uploading". Kemudian klik "Save". Geser layar kebawah dan cari gambar yg barusan anda upload, lalu arahkan cursor pada gambar sehingga muncul shorcut spt berikut:




     Perhatikan pada kotak : "Direct Link" (yg di lingkarin merah). Nanti URL tsb yg akan dicopy. Tp sebelum mengcopy URL tsb, ikuti dulu langkah ke dua berikut ini.


  2. Silahkan login ke blogger dengan ID dan :



    • Klik Rancangan.
    • Klik tab Edit HTML.
    • Cari kode yg mirip spt dibawah ini:


      a : hover {
      color: red;
      text-decoration: underline;
      cursor: hand;
      }



  3. Jika sudah ketemu, tambahkan kode berikut ini tepat diatas tanda " }":



    background-image:url(http://i567.photobucket.com/albums/ss114/fatiasa/pb.jpg)

    Kembali ke langkah 1 diatas dan copy lah URL yg dilingkaran merah tsb. Gantilah alamat URL yg berwarna biru, dgn URL yg dilingkaran merah tsb ( krn kode diatas ini hy contoh saja, jangan di pakai)

  4. Sehingga kode tersebut diatas menjadi seperti ini :


    a : hover {
    color: red;
    text-decoration: underline;
    cursor: hand;
    background-image:url(http://i567.photobucket.com/albums/ss114/fatiasa/pb.jpg)
    }
Catatan:
Tulisan "red" pada kode tsb adalah warna merah sehingga saat link disorot, maka link akan berubah warna menjadi merah. anda dpt merubah dgn warna lain misalnya "blue" atau "yellow". demikian juga "underline" adalah kode garis bawah sehingga saat link disorot, maka link akan berubah menjadi bergaris bawah. Ini jg dapat anda rubah dengan "italic" atau "bold".

Sekarang coba lihat blog anda dan sorot link nya, jika berhasil maka linknya akan dikelilingi bintang yg berkedip-kedip.

Selamat mencoba.

6 komentar:

  1. kakak ga bisa,,,da coba brulang kali tp ga bisa,,,gimana sih caranya???

    BalasHapus
  2. iya sy juga sudah coba di www.3spulsa.com,tapi tetap kagak bisa,apakah mungkin ada solusi lain ?

    BalasHapus
  3. @Retno dan Team : mhn maaf atas kegagalannya. Semoga cara yg baru saya update ini dpt mengobati walau hy sedikit dari kegagalan tsb.

    BalasHapus
  4. kok kode HTML yang Ini
    a : hover {
    color: red;
    text-decoration: underline;
    cursor: hand;
    }
    gak ada?

    BalasHapus
  5. @belajar blog: yg didlm kurung tdk mesti sama,tiap blog bisa berbeda-beda, yg penting u/dilihat adalah kode "a:hover" nya (tanpa tanda petik)

    saya lihat kode yg ada diblog anda seperti berikut (cari yg spt dibwh ini):

    a:hover {
    text-decoration: underline;
    color: #cccccc;
    }

    maka rubah/buat aja spt dibawah ini:


    a:hover {
    text-decoration: underline;
    color: #cccccc;
    background-image:url(http://i567.photobucket.com/albums/ss114/fatiasa/pb.jpg)
    }

    BalasHapus
  6. Thx You gan ane udh bisa .. coba kunjungi di http://kress-daily2.blogspot.com/

    BalasHapus

Kembali ke atas

Kembali ke atas