اضافة محرك بحث خاص لمدونة بلوجر مع ظهور مواضيع المدونة بقائمة منسدلة

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

الأجمل من ذلك بأنك سوف تتحكم بعدد الحروف على سبيل المثال اذا افترضنا ان نضع عدد الأحرف 3 مثلا فعندما يأتى الزائر ويكتب كلمة الحروف الأولى من كلمة اضافة ستظهر له القائمة المنسدلة (( اضا )) مثل موقع جوجل اسف على الأطالة لكنى احببت ان اضع لكم امثلة لذلك ندخل الأن الى صلب الموضوع وهى كيفية التركيب وكما تعودنا قبل تركيب اى كود يجب اخذ نسخة احتياطية لتفادى اى خطاء بالنسبة للمبتدئين ادخل الى هذا الرابط لتعرف طريقة اخذ نسخة احتياطية :  درس للمبتدئين اخذ نسخة احتياطية لقالب المدونة الان قم بتخريب القالب كما تشاء لان يوجد لدينا نسخة احتياطية تابع معى الشرح لطريقة تركيب الأضافة :

فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالبالأن اضغط على تحرير HTML

الان اضغط على زر متابعة

الان قم بتوسيع القالب كما واضح لتا بالصورة التالية

الان اضغط على CTRL + F من الكيبورد لظهور عملية البحث عن الأكود بالمتصفح
ابحث عن هذا الكود :

</head>

اضف بعدة مباشرة هذا الكود :

 <script src='http://jmulans.free.fr/blogger/jquery.js' type='text/javascript'/>
<link href='http://jmulans.free.fr/blogger/blogger-instant-search/style.css' media='screen' rel='stylesheet' title='Design' type='text/css'/>

الأن قم بحفظ النموذج وتوجهة الى قائمة التخطيط وقم بأضافة اداء جديدة ومنها اختار اداء Html/Javascript وقم بالصق هذا الكود التالى :

<script type="text/javascript">
// PARAMETRES
var defaultText = "البحث عن مواضيع المدونة... "; // texte de la zone de recherche
var noResultText = "Pas de résultat"; // texte affiché quand il n'y a pas de résultat dans la recherche
var publishText = "Publié le"; // texte affiché avant la date de publication de l'article
var tagText = "Libellés"; // texte affiché à la présentation des libellés
var creditText = "محرك بحث كينج نت http://kingnt.com";
var displayImg = true; // affiche ou non l'image de l'article dans le resultat
var useTag = true; // utilise ou non les tags des articles dans la recherche
var defaultImgUrl = "https://lh4.googleusercontent.com/-1qVxCbfjCjM/TnBvBQuiK5I/AAAAAAAACFc/t2t6wqdPzBI/article.png" // url de l'image par defaut
var minChar = 3; // nombre minimum de lettres pour commencer la recherche
var myfeed;var myfeed2;var $auto=jQuery.noConflict();var monthFR=new Array();monthFR[1]="Janvier";monthFR[2]="Février";monthFR[3]="Mars";monthFR[4]="Avril";monthFR[5]="Mai";monthFR[6]="Juin";monthFR[7]="Juillet";monthFR[8]="Août";monthFR[9]="Septembre";monthFR[10]="Octobre";monthFR[11]="Novembre";monthFR[12]="Décembre";
var pattern_accent = new Array("é","è","ê","ë","ç","à","á","â","ä","ã","å","ì","í","î","ï","ù","ú","û","ü","ò","ô","ó","ö","õ","œ","æ","ñ","ý","ÿ");
var pattern_replace_accent = new Array("e","e","e","e","c","a","a","a","a","a","a","i","i","i","i","u","u","u","u","o","o","o","o","o","oe","ae","n","y","y");
</script>
<script src="http://jmulans.free.fr/blogger/blogger-instant-search/search.js" type="text/javascript"></script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://kingnt.com &Order=alphabet
 &_id=401e43055731c1a29f1e1d3eb5e8e13f&_callback=getList&_render=json"
type="text/javascript"></script>
<div id="postListSearch">
<div id="addtomyblogContainer"></div>
<input type="text" id="autocomplete" value=""/>
<div id="postListResult"></div>
<img id="newPostSearch" src="https://lh5.googleusercontent.com/-4QFskv5kNJo/Tm4XUhN43xI/AAAAAAAAB_E/Y6ZQnmv_Dnc/new48.png" alt="" title="Nouveau !"/>
</div>
<script>$auto("#autocomplete").keypress(function(e){search(e,$auto(this).val())});$auto("#autocomplete").keydown(function(e){search(e,$auto(this).val())});$auto("#autocomplete").keyup(function(e){search(e,$auto(this).val())});$auto("#autocomplete").val(defaultText).addClass('default').focus(function(){if($auto(this).val()==defaultText){$auto(this).val('').removeClass('default')}});</script>

ملحوظة :

1- الكلمة الذى تحتوى على لون اصفر (( البحث عن مواضيع المدونة )) قم بتغيرها الى اى كلمة تريدها حيث هذه الكلمات ستظهر بخانة البحث كما تلاحظونها بمدونتى بأعلى الصفحة .
2- روابط المواقع المشار اليها باللون السماوى kingnt.com اضف مكانها روابط موقعك
3- الرقم الذى يحتوى على لون احمر رقم 3 ضع الرقم الذى تريدة او اتركه كما هو وهذا هو الافضل بأن تتركة كما هو فهذا الرقم يخص بعدد الأحرف الذى يتم كتابتها داخل خانة البحث لظهور القائمة المنسدلة كما ذكرنا .
4- كلمة محرك بحث كينج نت المحددة باللون الأخضر قم بتغيرها الى اى اسم تريدة .

انتهى الشرح وارجو بأن الشرح نال اعجابكم واسف على الأطالة
(( لا خير فى كاتم العلم ))