Rabu, Juli 25, 2012

Mengubah Semua Teks Postingan di Tag CODE Menjadi Link Searchable

Penulis Day Milovich | Rabu, Juli 25, 2012 | 02.15.00 |

Javascript dan jQuery memiliki kemampuan mengubah teks (misalnya URL) atau tag (misalnya tag <code> menjadi teks baru sesuai keinginan. Artikel ini membahas cara mengubah semua teks postingan di dalam tag <code> menjadi link yang bisa menampilkan hasil pencarian untuk teks itu.
---
Prinsip Dasar:
Kalau mencari "facebook" di search form blogspot milik sendiri, maka URL menjadi begini:
http://daymilovich.blogspot.com/search/?q=facebook
Semua keyword atau query "facebook" akan ditampilkan pada hasil pencarian di blog. Pada contoh di atas, "facebook" adalah "keyword" yang kita pilih untuk pencarian.
Semakin sering orang mencari kata kunci tertentu di blog kita, maka rating blog menaik pula.
---
Bayangkan, jika pada beberapa keyword tertentu kita buat secara otomatis: menjadi "bisa di-klik" (clickable) dan mengarah pada hasil pencarian.
Maksud saya begini: beberapa keyword yang relevant, di dalam postingan, yang sudah dimodifikasi, bisa diklik pengunjung dan akan ditampilkan hasilnya. Itu berarti, tingkat "pencarian internal" (di blog kita) pada keyword itu akan meningkat.
---
Technical Details
Secara teknis, kita akan mengubah baris ini:
---
Sebuah kalimat dengan <code>keyword</code> dan <code>kata kunci tertentu</code>
---
Menjadi begini:
---
Sebuah kalimat dengan <a href="http://namablog.blogspot.com/search/?q=keyword"><code>keyword</code></a> dan <a href="http://namablog.blogspot.com/search/?q=kata%20kunci%20tertentu"><code>kata kunci tertentu</code></a>.
---
Kalau setiap keyword harus dituliskan code pencariannya, tentu melelahkan. Ada kemungkinan salah ketik, ada kemungkinan penulisan posting menjadi lama.
Pertanyaannya: Bisakah konversi ini dilakukan secara otomatis?
Maksud saya, begitu Anda menuliskan <code>keyword</code> lalu klik tombol Publish (atau Terbitkan),, hasilnya akan menjadi <a href="http://namablog.blogspot.com/search/?q=keyword"><code>keyword</code></a> seperti contoh saya di atas?
Tentu saja bisa.
---
Sebenarnya yang dibutuhkan adalah kombinasi fungsi ".replaceWith()", ".html()" dan ".text()" untuk mengitari elemen <code> dengan elemen <a href= berisi URL pencarian yang mengandung "keyword" di dalam tag <code> secara otomatis.
Benar, secara otomatis.
---
Source Code Javascript:
---
$('div.post-body').children('code').each(function() {
$(this).replaceWith(function() {
return $('<a href="/search/?q=' + $(this).text() + '"><code>' + $(this).html() + '</code></a>');
});
});
---
Atau lebih efisien menggunakan .wrapInner() jQuery seperti ini:
---
$('div.entry-content').children('code').each(function() {
$(this).wrapInner('<a href="/?s=' + encodeURIComponent($(this).text()) + '&submit=Search"></a>');
});
---
Implementasi
1. Pasang code javascript di atas sebelum </head>
2. Pastikan melakukan posting dalam format HTML.
3. Saat menulis postingan,, kalau ada "keyword" yang perlu ditampilkan agar bisa di-klik, misalnya: "facebook", Anda cukup mengetikkan <code>facebook</code>. Tentu saja bisa dilanjutkan dengan keyword yang relevant, sesuai niche blog Anda.
4. Setelah selesai menulis, klik tombol Publish atau Terbitkan. Hasilnya, kata "facebook" bisa di-klik dan akan menghasilkan pencarian semua postingan yang mengandung keyword "facebook".
Gagasan yang cukup menguntungkan dari sisi efisiensi posting dan search engine optimization.
---
Source and Demo :
http://jsfiddle.net/tovic/RSEny/
---

Tidak ada komentar:

Posting Komentar

Anda bisa berkomentar tanpa perlu login.

 
Day Milovich (c) 2013. Diberdayakan oleh Blogger.