كمبيـوتــر وأنتــرنت: شرح إضافة محرك بحث للمدونة blogger

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

هل تريد محرك بحث لمدونتك جميل ويساعد الزائر على البحث بسهولة فهو أساسي ومهم للبلوجر ومحرك البحث هذا رائع حيث أنه يعرض نتائج البحث في نفس الصفحة الرئيسية وأنت تختار أي موضوع

وعند الضغط على كلمة بحث يعطيك النتائج بصيغة جميلة كالآتي :

ولتركيب الكود نضغط على قالب ثم تحرير HTML ونبحث عن الوسم التالي </b:skin> ونضيف قبله مباشرة الكود التالي :

"/*-------ajax-form---------*/
.search {
overflow: hidden;
position: absolute;
left: 10%;
float: none;
z-index: 000;
width:300px;
}
#ajax-search-form {
position:relative;
font:normal normal 13px/GESSTwoMediumRegular,Sans-Serif;
float:right;
margin-top: 2px;
}
#ajax-search-form a {
color:#741F27;
text-decoration:none;
}
#ajax-search-form .searchbox {
border: none;
padding: 5px;
font: normal 12px GESSTwoMediumRegular;
border-radius: 0 3px 3px 0;
transition: 0.4s;
background: #D6D7E9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7xgeLF-TAM3t5I4Of0_oYcjiMpBbXDcXv6R4JBWaYZw4UMRnbpkm2X0qNL_KbBCJki7amS00DI9FLiV__xSLA3ZeUfC-HP9zqfLzHQEux4WZ8C3vy5vo08gB47ATQs1xYtrn7t9LJIQS/s1600/search.png) no-repeat 4%;
width: 160px;
margin: 0;
}
#ajax-search-form input::-moz-focus-inner {
margin:0;
padding:0;
border:none;
outline:none;
}
#ajax-search-form .searchbtn {
width: auto;
background-color: #04bcbc;
border: none;
font: normal 12px GESSTwoMediumRegular;
cursor: pointer;
padding: 5px 10px;
margin: 0 -4px 0 0;
border-radius: 3px 0 0 3px;
color: #000;
}
#ajax-search-form .searchbtn:hover{background-color:#444}
#search-result {
border-top: none;
background-color: #fff;
padding: 10px;
margin: 10px 0;
width: 278px;
height: auto;
position: relative;
top: 0;
left: 0;
max-height:310px;
overflow:auto;
z-index: 99;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
display: none;
}
#search-result li {
padding: 10px;
border: 2px dotted #040ABD;
color: #aaa;
font-size: 0px;
line-height: 1em;
margin: 0 0 5px 5px;
overflow: hidden;
}
#search-result img {
float:right;
margin: 0 0 0 8px;
border: 3px solid #010581;
}
#ajax-search-form a {
color: #888;
line-height: 1.9em !important;
font: normal 12px GESSTwoMediumRegular;
text-decoration: none;
padding: 0;
}
#search-result ol,
#search-result h4 {
margin:0;
padding:0;
}
#search-result h4, #search-result strong {
display: block;
margin: 0 0 10px 0;
font: normal 12px ges,GESSTwoMediumRegular;
color: #BF4247;
}
#search-result ol {margin:0;
text-align:right;
}
#search-result ol a:hover {
color: #BF4247;
text-decoration: underline;
background: none;
}
#search-result .close {
display: block;
position: absolute;
top: 0;
left: 10px;
line-height: normal;
color: #f00;
font-size: 18px;
}
#search-result strong {color:#B75252}
#blog-pager {
margin: 1em 0;
text-align: center;
overflow: hidden;
clear: both;
}"

ثم نبحث عن الوسم التالي <body/> ونضع الكود التالي قبله أي فوقه مباشرة

"<script type='text/javascript'>
//<![CDATA[
(function($) {
var $form = $('#ajax-search-form'),
$input = $form.find(':text');

// Append a search result container to the search form
$form.append('<div id="search-result"></div>');
var $result_container = $('#search-result');

// When the keyword is submitted...
$form.on("submit", function() {
// Get the input value
var keyword = $input.val();
// Show the search result container and insert a `Loading...` text
$result_container.show().html('جاري عملية البحث...');
// Get the blog JSON via $.ajax() to show the search result
// The URL format: http://kinas29.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
$.ajax({
url: 'feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
type: 'get',
dataType: 'jsonp',
// If success, grab the search result list...
success: function(json) {
var entry = json.feed.entry,
link, summary, thumbnail, skeleton = "";
if (entry !== undefined) {
skeleton = '<h4> البحث عن مقالات حسب التصنيف “' + keyword + '”</h4>';
skeleton += '<a class="close" href="/">×</a><ol>';
for (var i = 0; i < entry.length; i++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s40-c") + '" width="40" height="40">' : "";
summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
summary = summary.length > 100 ? summary.substring(0, 100) + '…' : summary;
skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t + '</a><br>' + summary + '</li>';
}
skeleton += '</ol>';
$result_container.html(skeleton);
} else {
// If the JSON is empty ... (entry === undefined)
// Show the `not found` or `no result` message
$result_container.html('<a class="close" href="/">×</a><strong>ربما ماتبحث عنه غير موجود :(</strong>');
}
},
error: function() {
// If error, show an error message
$result_container.html('<a class="close" href="/">×</a><strong>حاول مرة أخرى.</strong>');
}
});
return false;
});
// Fade out the search result container if the close button is clicked
$form.on("click", ".close", function() {
$result_container.fadeOut();
return false;
});
})(jQuery);
//]]>
</script>"

قم بإستبدال الرابط الملون بالأزرق برابط مدونتك http://kinas29.blogspot.com/
والآن في المرحلة التالية نبحث عن الوسم التالي <head> ونضيف بعده الكود التالي

"<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>"

ثم إبحث عن الوسم التالي div id='search'> فإن وجدته فلاداعي لإلصاق الكود التالي وربما وجدته بهذ الشكل <div id='header-inner'> فقم بإلصاق الكود التالي أسفله

"<div id='search'>
<form action='/search' id='ajax-search-form'>
<input class='searchbox' name='q' placeholder='بحث' type='text'/><input class='searchbtn' type='submit' value='بحث'/>
</form>
</div>"

الآن إضغط على حفظ النموذج وهكذا أصبح لديك محرك بحث جميل وأنيق

بالتـــــــوفيـــــــــــق

Posted in: البلوجر

كمبيـوتــر وأنتــرنت

الاثنين، 29 ديسمبر 2014

شرح إضافة محرك بحث للمدونة blogger

0 التعليقات:

إرسال تعليق

المشاركات الشائعة