Post Top Ad

Your Ad Spot

الاثنين، 14 يناير 2013

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

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



















الأجمل من ذلك بأنك سوف تتحكم بعدد الحروف على سبيل المثال اذا افترضنا ان نضع عدد الأحرف 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- كلمة محرك بحث كينج نت المحددة باللون الأخضر قم بتغيرها الى اى اسم تريدة .

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

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

  1. يوجد استاذي كود قديم .. للبحث المخصص بشكل احترافي

    تمنيت وجوده بهذا الصرح .. تحيه طيبه

    ردحذف
    الردود
    1. بالفعل يا اخى الكريم يوجد اكواد بشكل احترافى لكن هذه الخاصية وجدها بأحدى المدونات الاجنبية واحببت ان اضعها هنا لمن يحتاجها ممكن يا اخى الكريم يكون الكود القديم الذى تتحدث عنة من خلال هذا الرابط لان هذا الرابط يوجد بها خاصية رائعة فهو مدعوم من جوجل قد تجد ما تمنيتة ان شاء الله
      http://www.kingnt.com/2013/02/google-custom-search.html

      حذف
  2. مشكل في الكود لا يعمل ويعطل المدونة

    ردحذف

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

Post Top Ad