اضافة أداة البحث في المدونة بتقنية جوجل -غاية في الروعة-

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

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

نمر لتطبيق الاضافة:

الخطوة الأولى:

1.لوحة التحكم
2.إضغط على قالب
3. ثم تحريرhtml
4.إضغط على متابعة
5.إختار توسيع القالب إختار
6.إبحث بالضغط على   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'/>

الخطوة الثانية:

1.اذهب للوحة التحكم
2. تخطيط
3.عناصر الصفحة
4.إضاف اداة
5.اختار  Html/Javascript
6.أضف هذا الكود :

<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://trucsinformatiques.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://trucsinformatiques.blogspot.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>

7.قم بتغير ما كتب بالأحمر برابط مدونتك.
8.قم بتغيرما كتب بالوردي بأي عبارة من إختيارك.
9. var minChar = 3 تحدد عدد الحروف التي يجب كتابتها حتى نتائج للبحث.
10.يمكنك إضافة إسم للأداة ثم قم بحفظ الأداة .


و مبروك عليك.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.