Ada kalanya kita merasa tidak enak jika ingin menyisipkan banyak link di dalam sebuah artikel/posting blog yang akan kita publish. Di satu sisi, ada niat untuk membangun jejaring backlink agar posisi semakin kuat di SERP (pada keyword tertentu yang kita targetkan).
Namun di sisi lain, kadang itu berbenturan dengan keinginan untuk mengutamakan kenyamanan pembaca.
Adakah solusi atau jalan tengah untuk itu?
Tentu saja ada. Caranya yaitu membuat link tersembunyi yang tidak kelihatan. Mengapa bisa tidak kelihatan? Sebab link tersebut tampak seperti teks biasa yang berwarna sama dengan warna teks utama paragraf dan sama sekali tidak bergaris bawah.
Konsepnya yaitu kita membuat sebuah ‘anchor-link’ dengan
class
(kelas) khusus yang disetting via CSS. Nanti ketika ingin digunakan, kita tinggal menambahkan keterangan berupa nama class khusus tersebut pada link tertentu yang ingin kita sembunyikan dari pengamatan pembaca.Bagaimana cara membuat kode CSS-nya?
- Coba Anda cari tahu dulu kode HTML warna teks utama pada bagian body theme yang Anda gunakan. Saya beri contoh saja pada theme blog ini. Kode CSS yang mengatur warna teks utama konten blog ini yaitu berupa:
body {font-size:100%; font-family:Verdana,Helvetica,Arial,sans-serif; color:#333; line-height:1.55em; text-align:center; background:#14606C }
Perhatikan kode berwarna pink! Itu adalah settingan kode CSS untuk mengatur tampilan warna teks
utama konten blog ini. Ya, kode warnanya yaitu#333
(hitam lembut).
- Coba cari kode CSS yang mengatur tampilan link di dalam
post-body
. Kalau pada blog ini berupa:div.post-body a:link{color:#071585;border-bottom:1px solid #666}
Kode di atas berarti bahwa untuk link di dalam tubuh konten utama (pada area posting) disetting berwarna biru (#071585) dan berbatas-bawah berupa garis solid berwarna abu-abu (#666) sebesar 1 pixel. Pada theme lainnya, secara umum link disetting bergaris-bawah dengan kode berupaa:link {text-decoration:underline}
ataua {text-decoration:underline}
.
Saya lebih memilih menggunakan batas bawah ketimbang garis bawah. Silakan baca tentang perbedaan antara underline dan border-bottom pada link.
- Saatnya membuat kode CSS khusus untuk menyembunyikan link. Kodenya yaitu berupa:
a.c8 {color:#333;border-bottom:none}
Kode di atas artinya kita membuat sebuah link khusus dengan nama class berupa “c8″, dengan warna teks#333
(hitam lembut) dan tidak berbatas-bawah.
Jika setelan link blog Anda menggunakan dekorasi garis bawah, maka ganti saja kode CSS-nya menjadi :
a.c8 {color:#333;text-decoration:none}
Tentu saja nama class-nya tidak harus c8. Anda bisa ganti sesuka Anda. Kode warnanya juga harus disesuaikan dengan kode warna HTML teks utama sesuai theme yang Anda gunakan. Lihat contohnya pada langkah pertama di atas ↑.
- Nah, coba tambahkan kode tersebut pada file CSS theme yang Anda gunakan. Kalau pada WordPress biasanya ada pada
style.css
. Jika pada blogspot, tinggal tambahkan pada menu edit HTML. Jangan lupa klik tombol setelah penambahan kode itu. - Saatnya membuat link khusus yang tidak kelihatan pada posting. Caranya yaitu tinggal menyisipkan nama
class
link khusus tersebut pada kode HTML link yang mengapit keyword/frase tertentu pada postingan Anda. Tentunya harus dalam mode ‘edit HTML’.Kita misalkan saja, saya ingin menyisipkan link menuju URLhttp://kafegue.com/cara-mengganti-theme-wordpress/
pada teks berupa “cara mengganti theme wordpress” dalam salah satu paragraf posting yang akan saya publish. Maka kode HTML untuk link tersembunyi itu berupa:<a class="c8" href="http://kafegue.com/cara-mengganti-theme-wordpress/">cara mengganti theme wordpress</a>
Kode berwarna pink adalah kode yang mengatur tampilan link tersebut agar tidak kelihatan. Soalnya sudah kita setting via CSS pada langkah ketiga sebelumnya ↑ (agar berwarna sama dengan teks biasa dan tidak bergaris-bawah). Itulah kode yang harus Anda tambahkan.
Jadi, konsep umumnya begini:
- Cari tahu dulu kode warna HTML pada bagian body atau teks utama blog Anda.
- Cari tahu apakah settingan linknya bergaris-bawah atau tidak.
- Buat kode CSS yang isinya menyetting agar tampilan warna link sama dengan warna teks utama dan tidak bergaris-bawah.
- Masukkan nama
class
link khusus yang sudah dibuat pada keyword/frase tertentu yang ingin kita sisipkan link tersembunyi.
Contoh nyata link tersembunyi
Coba Anda arahkan kursor layar komputer Anda pada frase/teks berupa “cara membuat screenshot video” dalam kutipan paragraf di bawah ini.Salah satu cara membuat screenshot video pada halaman web yaitu dengan menggunakan ekstensi Lightshot dari browser Google Chrome. Anda tinggal menginstall ekstensi tersebut dan kemudian mengklik iconnya untuk melakukan proses capture serta memotong bagian pinggir kotak video.Setelan link tersembunyi tersebut saat dihover sengaja saya setting bergaris-bawah dan tetap berupa icon tangan pada kursornya. Sebenarnya bisa dibuat tetap tidak bergaris-bawah dan bahkan tidak ada efek tangan saat hovering. Namun untuk sekedar agar tidak terlihat, cukuplah kita setting tampilan secara umum saja.
Pengecualian!
Trik di atas tidak bisa menyembunyikan tampilan link ketika user membaca via ‘RSS reader’ (misalnya via google reader dan halaman feedburner) atau ketika user membaca via email. Termasuk ketika user menonaktifkan CSS pada browser yang digunakannya.Link tersembunyi itu pun akan bisa terdeteksi/terlihat ketika user menggunakan tombol Tab untuk menelusuri navigasi halaman blog kita. Termasuk ketika user menggunakan ekstensi readability untuk menyimak postingan Anda.
Jadi?
Jika blog Anda sudah punya begitu banyak pelanggan RSS yang melakukan subscribe via email atau via google reader, ada baiknya menggunakan link tersembunyi seperlunya saja. Khawatirnya mereka lebih memilih membaca postingan Anda secara tidak langsung (sehingga link yang ingin Anda sembunyikan tetap akan terlihat oleh mereka) dan dikhawatirkan akan mengganggu kenyamanan membaca mereka :)
benar benar tak kelihatan mas linknya :D
BalasHapus