Tip: Mengubah Semua Teks di dalam Tag CODE menjadi Tautan Pencarian

Tabel Konten
  1. Mengubah Teks di dalam Tag <code> menjadi Link Aktif 
  2. Pembaharuan 
Tip: Mengubah Semua Teks di dalam Tag CODE menjadi Tautan Pencarian

Jika Anda terbiasa menyisipkan elemen <code> di dalam posting tutorial Anda, jangan sia-siakan kebiasaan rajin dan disiplin tersebut menjadi sesuatu yang tidak memberikan arti khusus. Akan sangat memberikan informasi yang lebih besar jika Anda mengubah semua elemen tersebut menjadi link aktif. Dalam hal ini, kita akan membuat setiap teks yang berada di dalam tag <code> menjadi kata kunci untuk halaman hasil penelusuran dalam situs Anda. Pada intinya konsep ini masih tidak begitu jauh dari konsep Memanfaatkan jQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Kometar Blogger. Hanya saja di sini kita harus memahami satu hal penting, yaitu format URL penelusuran di blog Anda:

Blogspot memiliki bentuk URL pencarian seperti ini:

http://www.namablog.com/search/?q=Kata Kunci

Wordpress biasanya memiliki format URL pencarian yang berbeda seperti ini:

http://www.namablog.com/?s=Kata Kunci&submit=Search

Tampilan-tampilan URL seperti itu bisa Anda temukan saat Anda mengetik kata kunci pada kotak pencarian blog, kemudian menekan tombol Submit atau Enter pada keyboard:

Search Box
Kotak Penelusuran Posting

Oke, kita akan menggunakan format standar URL penelusuran tersebut sebagai bahan nilai atribut href pada elemen <a> yang akan kita sisipkan menggunakan JavaScript setelah ini.

Caranya sederhana, kita hanya memerlukan kombinasi fungsi .replaceWith(), .html() dan .text() untuk mengitari elemen <code> dengan elemen <a> yang mengandung nilai href berupa URL pencarian yang mengandung kata kunci teks yang berada di dalam tag <code> secara otomatis. (Tulisan yang cukup panjang).

Pada intinya inilah yang kita inginkan. Kita ingin mengubah kumpulan teks ini:

Lorem ipsum dolor sit <code>amet</code> jabang bayi
oek-oek consectetur <code>kampuang</code> nan jauh dimato
ambo-ambo tempe goreng enak rasanya.

Menjadi seperti ini:

Lorem ipsum dolor sit <a href="//namablog.blogspot.com/search/?q=amet"><code>amet</code></a> jabang bayi
oek-oek consectetur <a href="//namablog.blogspot.com/search/?q=kampuang"><code>kampuang</code></a> nan jauh dimato
ambo-ambo tempe goreng enak rasanya.

Dan dengan metode yang sama persis dengan ini, kita akan mengubah semua teks di dalam elemen <code> menjadi link aktif:

$('div.post-body').children('code').each(function() {
    $(this).replaceWith(function() {
        return $('<a href="/search/?q=' + $(this).text() + '"><code>' + $(this).html() + '</code></a>');
    });
});

Kode di atas akan mengubah semua elemen <code>abc</code> yang merupakan anak level pertama dari elemen div.post-body menjadi <a href='/search/?q=abc'><code>abc</code></a>

Mengapa harus anak pertama? Oke, Anda bisa saja menuliskan kodenya seperti ini:

$('div.post-body code').each(function() {
    $(this).replaceWith(function() {
        return $('<a href="/search/?q=' + $(this).text() + '"><code>' + $(this).html() + '</code></a>');
    });
});

Tapi terkadang, selain menuliskan teks di dalam <code>, mungkin Anda juga suka/harus menulis teks di dalam tag <pre><code> ... </code></pre>. Jika kita tidak menargetkan elemen <code> yang merupakan anak level pertama saja, maka kemungkinan besar kita akan mengalami masalah seperti ini:

Pre Tag
Semua teks yang berada di dalam tag <pre> akan berubah menjadi tautan

Itulah sebabnya mengapa di sini Saya menggunakan fungsi .children() yang hanya akan mencari anak elemen level pertama saja, sehingga elemen <code> yang berada di dalam elemen <pre> tidak akan ikut menjadi tautan karena elemen <code> yang berada di dalam elemen <pre> merupakan anak pertama dari <pre> namun akan menjadi anak ke dua dari <div class='post-body'>.

Atau bisa juga menggunakan metode selektor CSS3 seperti ini:

$('div.post-body > code').each(function() {
    ...
});

Untuk situs tutorial Wordpress bisa menggunakan konsep ini:

$('div.entry-content').children('code').each(function() {
    $(this).replaceWith(function() {
        return $('<a href="/?s=' + $(this).text() + '&submit=Search"><code>' + $(this).html() + '</code></a>');
    });
});

Pembaharuan: 16 Juli 2012Lebih efisien menggunakan jQuery .wrapInner():

$('div.entry-content').children('code').each(function() {
    $(this).wrapInner('<a href="/?s=' + encodeURIComponent($(this).text()) + '&submit=Search"></a>');
});

Tapi Saya rasa Wordpress tidak memerlukan ini karena mereka bisa melakukan itu dengan PHP. Untuk melihat hasilnya, di sini Saya sudah membuat ilustrasi sederhana menggunakan JSFiddle. Coba Anda klik salah satu teks berupa kode di posting tersebut maka Anda akan langsung diarahkan ke halaman hasil penelusuran posting yang terkait dengan kata kunci itu. Seperti halnya Wikipedia (kurang lebihnya begitu).

Lihat Demo

Pembaharuan 

Saat kita menggunakan tanda petik yang tidak terduga di dalam tag <code>, hal-hal aneh semacam ini seringkali akan terjadi:

JavaScript Conflict
Konflik kecil karena kesalahan browser di dalam membaca simbol petik ganda yang sama antara fungsi dan karakter biasa.

Itu adalah konflik tanda petik. Jika kita menerapkan satu tipe tanda petik yang sama (petik ganda/petik tunggal) sebagai karakter dan juga sebagai penanda string dalam JavaScript, maka itulah yang akan terjadi. Masalahnya ada di sini, saat JavaScript telah selesai memanipulasi elemen <code>:

<a href="/search/?q=<div id="mama">"><code>&lt;div id="mama"&gt;</code></a>

dan ini adalah apa yang seharusnya terjadi:

<a href="/search/?q=<div id='mama'>"><code>&lt;div id="mama"&gt;</code></a>

Cara paling sederhana untuk mengatasi konflik tersebut adalah dengan menerapkan method .replace() tambahan untuk memastikan bahwa tidak ada tanda petik ganda di dalam atribut href yang bertanda petik ganda Cara paling sederhana untuk mengatasi konflik tersebut adalah dengan memparse konten menjadi karakter URI:

$('div.post-body').children('code').each(function() {
    $(this).replaceWith(function() {
        return $('<a href="/search/?q=' + $(this).text().replace(/\"/g, "'") + '"><code>' + $(this).html() + '</code></a>');
    });
});
$("div.post-body").children("code").each(function() {
    $(this).replaceWith(function() {
        return $("<a href='/search/?q=" + encodeURIComponent($(this).text()) + "'><code>" + $(this).html() + "</code></a>");
    });
});

9 Komentar

  • Beben Koben

    saya penulisan kodenya begini bos!
    <pre><codec> .... </codec></pre>
    gimana dong...xixixi

  • Beben Koben

    @Beben Koben Menyiasatinya, kita melencong saja dari penulisan code atau pre!
    Bikin tagging sendiri/terpisah saja bos...wekekekekkkk
    Intinya kan search kata kunci toh..hohohoho

  • Taufik Nurrohman

    @Beben Koben Wkwkwk... emang XML??

  • Beben Koben

    @Taufik Nurrohman Malah ngakak!!!
    Sy dah bikin bos, pakek tagging <q>
    Dgn search ke google custome search!
    Salah tanggep ini mah...qiqiqiqi
    Yg penting kan tagging dari si jQuery pluginnya kan? eik eik eik :P

  • Taufik Nurrohman

    @Beben Koben Saya malah belum tahu soal format URL Google custom search. Tapi kalau untuk URL Google normal bisa mudah dibuat seperti ini:

    $('q').each(function() {
    $(this).replaceWith(function() {
    return $('<a href="http://www.google.com/search?q=' + $(this).text() + '"><q>' + $(this).html() + '</q></a>');
    });
    });

    Saya sudah coba dan berhasil.

    • Beben Koben

      brarti masih canggihan sayah..wekekekekkkk \m/

  • Ivan Niblesim

    mantap, mas gan. boss beben dan hompimpaalaihumgambreng ... mantap. like this,,,

  • IRIL SAGITA

    Selamat pagi kak, aku menemui kendala dengan metode begini :
    $('div.post-body').children('code').each(function() {
    $(this).replaceWith(function() {
    return $('<a class="allow" title="Telusuri Posting Dengan Kata Kunci : ' + $(this).text() + '" href="http://www.google.com/search?sitesearch=www.sagitasoft.com&q=' + $(this).text() + '" target="_blank"><code>' + $(this).html() + '</code></a>');
    });
    });

    aku coba di halaman demo bisa, tapi berulang kali aku terapkan di blog aku tetep saja gagal, mohon penjelasannya ?

    untuk lebih jelasnya silahkan buka di : SAGITA COM

    • IRIL SAGITA

      Alahamdulillah sudah bisa kak, cuma salah penempatan script nya saja.

Komentar telah ditutup.