إضافة صندوق بحث عن العبارات النصية داخل تدوينات بلوجر

السلام عليكم ورحمة الله وبركاته

اليوم سوف نقوم بشرح طريقة تركيب صندوق بحث عن العبارات النصية داخل التدوينة ، بناء على طلب الأخوة الأفاضل .

- طريقة التركيب :

1- أدخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : </head>

3- ضع الكود التالي فوقه .

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/><style>
/* CSS - Widget Find Text on this page! */
.kr-text-finder {
position:relative;
background-color:#f2f2f2;
border:5px solid #f2f2f2;
-webkit-box-shadow:0px 4px 0px #ccc;
-moz-box-shadow:0px 4px 0px #ccc;
-ms-box-shadow:0px 4px 0px #ccc;
-o-box-shadow:0px 4px 0px #ccc;
box-shadow:0px 4px 0px #ccc;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
padding:5px 6px;
}
/* Highlighter Style */
.kr-highlight {
background-color:yellow;
font-weight:bold;
}
/* Input Style */
input.find-form {border:1px solid #ccc;padding:3px;outline:0px;width:200px;}
input.find-form:focus { border:1px solid #ccc;box-shadow:0px 0px 3px 5px #fafafa; background:#444;color:#fff; }
/* kr-button */
.kr-button { display:inline-block; text-decoration:none; outline:none; padding:6px 11px; font:normal 11px/1em "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif; color:#464646; background:#fff; background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1)); background:-moz-linear-gradient(top, #fff, #f1f1f1); border:1px solid #bbb; -webkit-border-radius:11px; -moz-border-radius:11px; border-radius:11px;}
.kr-button:hover,
.kr-button:focus { color:#000; border-color:#666;}
.kr-button:active { background:#eee; background:-webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fbfbfb)); background:-moz-linear-gradient(top, #ededed, #fbfbfb); color:#000; border-color:#666;}
</style>

- إذا كود جيكوري الملون باللون الأحمر موجود في مدونتك فلا داعي له .

4- إبخث أيضاً عن الوسم : </body>

5- ضع الكود التالي فوقه .

<script type='text/javascript'>
// JavaScript - Widget Find Text on this page!
//<![CDATA[
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 = 'kr-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.kr-highlight").each(function () {
this.parentNode.firstChild.nodeName;
with(this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
/* end plugin */
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 keyup
$viewport.scrollTop($area.find('span.kr-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>

6- احفظ القالب .

7- إذهب إلى تخطيط | ثم أختر إضافة أداة : HTML/JavaScript .

8- اللصق الكود التالي في صندوق الأداة ثم إحفظ .

<form id="text-finder" class="kr-text-finder" action="javascript:;"><input type="text" placeholder="Find text on this page.." class="find-form" /><input type="reset" value="Clear" class="kr-button"/></form>

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .

قوالب بلوجر

آخر الأخبار

إضافة صندوق بحث عن العبارات النصية داخل تدوينات بلوجر

ليست هناك تعليقات:

إرسال تعليق