JQuery Find and Highlight Text

ini seperti ctrl + f di blogger ya mas??
terus yang aku mau tanyain,semisal, text-finder yang berada di atas,itu dihide dulu
terus baru dimunculkan bisa mas??

Ini fungsinya buat apa mas ? :D

minta penjelasan dong mas,, masih pemula nieh saya :D

Terima kasih mas,, 0:)

oiya mas, dipasangnya dimana yaa?? :D

Keren sekali mas text-finder nya,...
semisal saya ingin menerapkannya diatas postingan gimana tu mas...???

simpan aja kode itu di atas <div class="post-body entry-content"

Jadinya seperti ini:

<style>
body {
background-color:white;
padding:40px 10px 10px;
font:normal normal 13px/1.4 Arial,Sans-Serif;
color:black;
}
.text-finder {
position:fixed;
top:0;
right:0;
left:0;
z-index:999;
background-color:white;
border-bottom:1px solid gray;
padding:5px 6px;
box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.highlight {
background-color:yellow; /* highlight color */
font-weight:bold;
}
</style>
<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script>
/*!
highlight v4
Highlights arbitrary terms.
<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
MIT license.
Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>
*/
//<![CDATA[
(function($) {
jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
} else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.length && pat && pat.length ? this.each(function() {
innerHighlight(this, pat.toUpperCase());
}) : this;
};
jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
})(jQuery);

// Text finder form function
$(document).ready(function() {
var $finder = $('#text-finder'),
$field = $finder.children().first(),
$clear = $field.next(),
$area = $(document.body),
$viewport = $('html, body');
$field.on("keyup", function() {
$area.removeHighlight().highlight(this.value); // Highlight text inside `$area` on key up
$viewport.scrollTop($area.find('span.highlight').first().offset().top - 50); // Jump the viewport to the first highlighted term
});
$clear.on("click", function() {
$area.removeHighlight(); // Remove all highlight inside `$area`
$field.val('').trigger("focus"); // Clear the search field
$viewport.scrollTop(0); // Jump the viewport to the top
return false;
});
});
//]]>
</script>

<form id="text-finder" class="text-finder" action="javascript:;">
<input type="text" placeholder="Find...">
<input type="reset" value="&times;">
</form>

<div class="post-body entry-content" id="xxx">

Waduh Terimaksih banyak mas Dzulmar Ismail Hijra atas pencerahannya,
saya ijin praktek

ya sama sama mas

mas, kok sya belum dikirimi email dari mas terkait pemesanan template ? ._.

email saya ivanmantovani7@gmail.com

MINAL AIDIN WALFAIDZIN MOHON MAAF LAHIR DAN BATIN
SELAMAT HARI RAYA IDUL FITRI

duh.. ane kagak ngerti mas :D

Tampilan demo nya sangat menarik kang, tapi klw js nya sebanyak itu saya rasa hnya akan memperlambat blog....

srius ngga ngerti gw apa yg dimaksud dgn post diatas :v

yah saya kurang nerti mas :D
- salam damai -

tak coba dulu mas

saya coba integrasikan dengan pencarian

akhirnya sudah bisa...

Mas Taufik, kalau find next gimana caranya ya? Nggak cuma dipindah ke hasil pencarian pertama, tetapi dapat digulirkan ke teks selanjutnya yang sama dengan isian formulir? Mohon bantuanya mas saya nggak paham script.

Nyimak..