Sabtu, 11 Juni 2011

Cara Mengganti Cursor Blog


Cara Mengganti Cursor Blog. Secara default, cursor blog berbentuk panah, namun jika sobat bosan dengan tampilan itu, sobat bisa merubahnya sesuka kehendak sobat. Pengunjung juga akan merasa sedikit terhibur ( ah, masa iya sich bisa terhibur ! ). Jika sobat berminat, silahkan ikuti tutorial berikut ini,


Cara Pertama :
  1. Log ini ke akun blogger sobat;
  2. Pilih menu Rancangan » Edit HTML;
  3. Beri tanda centang pada tulisan Expand Template Widget;
  4. Carilah kode yang kurang lebih seperti berikut ini;
body {
    margin:0;
    background:#cccccc;
    color:#000000;
    text-align: center;
    }

a:link {
    color:$linkcolor;
    text-decoration:none;
    }

a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }

a:hover {
    color:#000;
    text-decoration:underline;
    }
  1. Kemudian tambahkan kode cursor: url(http://i54.tinypic.com/97s4z7.png), progress; sehingga menjadi seperti ini;
body {
    margin:0;
    background:#cccccc;
    color:#000000;
    text-align: center;
    cursor: url(http://i54.tinypic.com/97s4z7.png), progress;
    }

a:link {
    color:$linkcolor;
    text-decoration:none;
    }

a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }

a:hover {
    color:#000;
    text-decoration:underline;
    cursor: url(http://i52.tinypic.com/2ugifqc.png), progress;
    }
    Kode cursor yang berada pada tag body { adalah untuk mengganti cursor default pada blog kita, sedangkan kode cursor yang berada pada tag a:hover { adalah untuk cursor pada link. Sobat bisa merubah url ( kode warna biru ) gambar untuk cursor pada blog sobat sesuai dengan keinginan sobat, atau sobat bisa cari url cursor di http://www.totallyfreecursors.com/, http://www.123cursors.com/ dan http://www.cursors-4u.com/;
  1. Kemudian simpan template sobat dan lihat hasilnya.

Cara Kedua :
  1. Log ini ke akun blogger sobat;
  2. Pilih menu Rancangan » Elemen Laman;
  3. Kemudian pilih Tambah Gadget, terserah mau sobat letak dimana;
  4. Pilih HTML/JavaScript;
  5. Tambahkan kode berikut ini;
<style type="text/css">
body {
    cursor: url(http://i54.tinypic.com/97s4z7.png), progress;
    }

a:hover {
    cursor: url(http://i52.tinypic.com/2ugifqc.png), progress;
    }
<style>
  1. Kemudian simpan template sobat dan lihat hasilnya.
Selamat mencoba, semoga berhasil.


Reaksi:

0 komentar:

Posting Komentar