Merubah Tampilan Kursor pada Blog WordPress

2010 January 28
by casrudi

Karena sering bermain-main dengan kode html dan css serta kode2 lain untuk kebutuhan membuat blog, Kang Yayat melalui telepon meminta pendapat saya untuk dibelikan buku apa olehnya. Tak pikir panjang sayapun memohonnya untuk dibelikan buku yang membahas tentang html/xhtml.

Alhamdulillah bukunya sudah tiba dua hari yang lalu, langsung di buka dan dilihat-lihat isinya. Dan memang banyak sekali yang bisa saya dapatkan dari buku mungil ini. Tak habisnya saya mengucapkan terima kasih untuk Kang Yayat, dan Mamahnya Arka yang mungkin sudah turut membantu membungkus dan membingkis. Terima kasih.

Buku karya Sugiri, A.Md, S.Pd. dan Budi Kurniawan, S.Kom. diatas secara khusus membedah HTML dan CSS untuk mendesain web. Berisikan dasar-dasar CSS, cara kerja CSS, sampai pengaturan tampilan dalam CSS.

Bersyukur sekali Kang Yayat memberikan buku ini, mungkin untuk kebutuhan dasar-dasar CSS tak perlu lagi browsing mencari referensi. Masih ingat dulu sewaktu mencari jenis kursor yang tampilannya seperti lambang “tambah” alias +. Belakangan baru tahu kalau nama kursor yang saya cari disebut crosshair dalam buku ini. Blog ini memang menggunakan kursor crosshair ketika mouse berada diatas tautan/link.

Contohnya : “Buku ini didapat karena memenangi kategori artikel ter-SEO dalam acara kemeriahan Leysbook Manfaat Blog Menurut Anda dan pengumuman pemenang-nya sudah diumumkan beberapa waktu yang lalu. Kini dihadapan kita terdapat beberapa ajang lomba yang bisa dikuti oleh pemilik blog, salah satunya di blog Humberqu, Pengalaman mengesankan dalam bersepeda. Mau coba? Silahkaaan… Sangat ditunggu partisipasinya.”

Kan, nampak ketika kursor melayang diatas sebuah tautan/link berubah bentuk menjadi tanda + (crosshair). Selain itu masih banyak tampilan lainnya, seperti Move, Pointer, atau Help. Supaya seluruh halaman di blog kita memiliki tampilan kursor sekehendak hati, kita perlu menyisipkan sedikit kode PHP pada stylesheet (style.css) themes yang dipakai. Jika ingin coba-coba silahkan pada CSS masukkan kode berikut ini :

.style-type a
{
cursor: pointer;
}
a:hover {
cursor: crosshair;
}

Kursor lain kita tinggal ganti nama kursornya, berikut ini daftarnya.

Tampilan Nama Cursor
Default cursor:default
Crosshair cursor:crosshair
Move cursor:move
Pointer cursor:pointer
Text cursor:text
Wait cursor:wait
Help cursor:help
n-resize cursor:n-resize
ne-resize cursor:ne-resize
e-resize cursor:e-resize
se-resize cursor:se-resize
Progress cursor:progress
not-allowed cursor:not-allowed
vertical-text cursor:vertical-text
all-scroll cursor:all-scroll
col-resize cursor:col-resize
row-resize cursor:row-resize

Nah itu salah satu yang bisa diambil dari buku tali asih pemberian Kang Yayat, sekali lagi sangat berguna untuk panduan saya kedepannya. Terima kasih Kang Yayat.

Salam dan semoga bermanfaat…

2 Responses leave one →
  1. January 30, 2010

    boleh minta e-book nya ndak bang?kayae memang berguna nih……jadi tertarik……macam2 css memang sangat sulit di cari tutorialnya…klo pun ada pasti bukan dasar2nya melainkan css jadi yang tinggal pake….

  2. May 26, 2010

    salam kenal….
    wah..makasih ya atas infonya…
    infonya top banget dec….
    ah ya…kalo boleh aQ juga minta e-booknya donk…kalou boleh chie…..
    makasih…

Leave a Reply

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS