Contact Us

Name

Email *

Message *

» » Cara Mengganti Cursor Blog dan Efek Link Di Blog

Cara Mengganti Cursor Blog dan Efek Link Di Blog

Cara Mengganti Cursor Blog dan Efek Link Di Blog

Setelah sebelumnya saya posting tentang Cara Buat Blog Anti Copas pada pelajaran blogger, kali ini saya juga ingin share ilmu tentang 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.
Baca Juga



Back To Top