Menu

Citations

Babelfish

Babelfish :
EnglishEnglishespañolItalianodeutschPortuguês
Oversæt denne side til danskÖversätt webbplatsen på svenskaالعربية中文Русский日本語한국어СрпскиNederlandsSuomenTürkçePolska
Follow Me on Pinterest
clear

mercredi 5 octobre 2011

47 [Blogger] Widget de recherche instantanée des articles

[Blogger] Widget de recherche instantanée des articles What you search is what you get.


Voici un widget Blogger qui vous permettra d'effectuer une recherche instantanée sur tous les articles de votre blog. 

Il s'agit d'une simple barre de recherche, sous laquelle vous verrez apparaître les articles correspondant pendant même que vous tapez.

Vous souhaitez l'installer sur votre blog ? rien de plus simple.





La recherche instantanée est très à la mode actuellement, notamment grâce à Google Instant, cette  amélioration du célèbre moteur de recherche qui vous permet de voir se rafraîchir votre page au fur et à mesure que vous tapez votre requête.

Je suis assez déçu par le widget de recherche proposé par défaut sur Blogger, qui a vraiment du mal à retrouver certains articles, même en tapant son titre. De plus son esthétique et son ergonomie laissent vraiment à désirer.

C'est pour cette raison que j'ai entreprit de développer moi-même un système de recherche d'article. Il fallait que celui-ci soit rapide et agréable à utiliser. Il se présente donc comme ceci :

[Blogger] Widget de recherche instantanée des articles

Une simple barre de recherche, que vous pouvez apercevoir au dessus de cet article. Commencer à taper le nom d'un article à trouver. Par exemple, je cherche l'excellent film "Dragons", voici le résultat que j'obtiens instantanément :

[Blogger] Widget de recherche instantanée des articles

J'obtiens donc l'article sur le film Dragon, mais aussi l'article sur le webcomic Dragon Ball Multiverse.
Voici un autre exemple. En tapant "moi", j'obtiendrai ces 3 articles, qui apparaissent pendant que je tape :

[Blogger] Widget de recherche instantanée des articles

EDIT (5 octobre 2011) : La recherche s'effectue dorénavant aussi sur les libellés de vos articles. Si vous avez déjà installé ce widget sur votre blog et que vous souhaitez disposer de cette nouveauté, il faudra recommencer toutes les étapes depuis le début (eh oui, c'est comme ça).

---

Pour l'installer sur votre blog, c'est très simple. Procedez comme suit.

1 - Préparer le code
  • Connectez vous à votre compte Blogger.
  • Allez dans "Présentation" ou "Modèle" selon votre version
  • Cliquez sur "Modifier le code HTML"
Recherchez (ctrl+f) la balise </head>, et juste AVANT, copiez le code suivant : 
<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'/>

2 - Installer le widget
  • Connectez vous à votre compte Blogger.
  • Allez dans "Mise en page".
  • Cliquez sur "Ajouter un gadget".
  • Choisissez "HTML/Javascript".
  • Collez-y le code suivant :
<script type="text/javascript">
// PARAMETRES
var defaultText = "Rechercher un article par nom"; // 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 = "Développé par L'Univers et le Reste";
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://www.luniversetlereste.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f&_callback=getList&_render=json" 
type="text/javascript"></script>

<div id="postListSearch">
<div id="addtomyblogContainer"><a href="http://www.luniversetlereste.com/2011/09/blogger-widget-de-recherche-instantanee.html" id="addtomyblog">Ajouter à mon blog !</a></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>

Oui je sais, c'est un beau pâté, mais il faut ce qu'il faut.
Pour changer l'ordre d'apparition des articles, remplacer alphabet (ordre alphabétique) par chrono (par date, les plus récents en premier).

2 - Ajoutez l'adresse de votre blog

Remplacer le texte figurant en rouge et en gras par l'adresse de votre blog.

3 - Personnalisez le widget (optionnel)

Cette partie n'est pas obligatoire, mais vous pouvez changer certains paramètres de la barre de recherche si ça vous chante. Ça se passe là où il y a écrit PARAMETRES :
  • defaultText : c'est le texte qui s'affiche dans la barre de recherche lorsuqe vous n'y avez encore rien tapé.
  • displayImg : vous pouvez choisir d'afficher ou non les images dans le résultat de la recherche. Mettez "true" pour afficher l'image, "false" pour ne pas l'afficher.
  • useTag : vous pouvez choisir si la recherche s'effectuera également sur les libellés de votre article. Mettez "true" pour utiliser les libellés, "false" pour ne pas les utiliser.
  • defaultImgUrl : Si vous avez choisit d'afficher les images, il se peut que certains article de votre blog n'en possèdent pas. Vous pouvez inscrire ici l'url de l'image qui s'affichera s'il n'y en a pas.
  • minChar : C'est le nombre de lettre à partir duquel démarre la recherche. Par défaut ce chiffre est à 3, mais vous pouvez l'augmenter au le diminuer.

Voilà, le widget est installé ! Si vous avez le moindre problème, contactez-moi par l'intermédiaire des commentaires, sur mon twitter ou sur la page facebook du blog. Je suis également à l'écoute de toute idée d'amélioration.


Si vous avez des connaissances en CSS et HTML, vous pouvez bien entendu modifier ce widget comme bon vous semble, pour le faire correspondre aux couleurs de votre blog. Si vous n'avez pas ces connaissances , je vous invite à en obtenir via les cours HTML / CSS de l'excellent Site du Zéro.

47 commentaire:

Félix a dit…

Merci !

jmulans a dit…

merci pour quoi ? tu a essayé de l'installer ?

Félix a dit…

oui j'ai fait un test pour voir et c'est pas mal :)

Xapur a dit…

Essayé et adopté ! Bon boulot ;)
sur http://marvelverse.blogspot.com

jmulans a dit…

merci ;)

Admin a dit…

Moi ça ne marche absolument pas, il y a une barre blanche et rien d'autres...

Je ne comprend pas

Merci

jmulans a dit…

As-tu bien effectué l'étape 1 ?
Puis-je voir le site sur lequel tu l'a installée pour voir ?

Glumy girl a dit…

super merci

ReggaeTubeWatcher a dit…

Incroyable widget!
Merci bcp pour le boulot!

Pastaarj a dit…

Bonjour! est il possible de faire apparaître les résultats par ordre de publication (du plus récent au plus ancien)? J'ai bien essayé de remplacer "alphabet" dans le code, mais sans succès...
Help me please!
Merci

jmulans a dit…

Bonjour, c'est tout a fait possible.
Il suffit de remplacer "alphabet" dans le code par "chrono". Tu étais sur la bonne piste, j'imagine qu'il te manquait le bon mot.
Je l'ai rajouté dans l'article.

Pastaarj, ReggaeTubeWatcher a dit…

Hello!
Merci pour la réponse. JE n'aurais effectivement pas pensé à mettre ce mot là! ... Ceci-dit, je constate malheureusement que quand je remplace "alphabet" par "chrono", le widget ne fonctionne plus (affiche NO RESULTS FOUND pour chaque recherche effectuée..). J'ai tout essayé: installer, ré-installer, dés-installer, etc!
Au secour! Ce widget est LA solution de recherche pour mon blog, d'autant plus avec cette ordre d'apparition des résultats.. C rageant!
Merci pour ton aide.

Pastaarj, the ReggaeTubeWatcher a dit…

Re-!
Toujours pas réussi à faire fonctionner l'engin.. Mais je vois qu'il ne fonctionne pas non plus sur ton blog.. Bug avec le script? Je reste attentif, car trop interressé! PS: j'ai mis le widget "in repair" sur mon blog! http://reggaetubewatcher.blogspot.com

jmulans a dit…

Effectivement il y a un soucis avec le script. IL dépend d'un service yahoo qui visiblement a été déréglé (par moi je suppose). Actuellement ça ne marche plus pour personne.
Je suis en train de chercher comment le remettre en place. Je manque un peu de temps en ce moment, j'essaierai de le refaire fonctionner dans les prochains jour, je te tiens au courant.

Pastaarj, the ReggaeTubeWatcher a dit…

Pas de soucis: prends le temps qu'il faut!
Remarques que, ce matin, le widget fonctionne parfaitement sur mon blog! (avec l'affichage selon "chrono"!)..
Je reste tout de même à l'écoute de tes remarques éventuelles.
Encore MERCI pour tout le boulot effectué!

jmulans a dit…

mmm, c'est très bizarre parce que ça fonctionne de nouveau. Je ne comprend pas du tout là. J'ai vu que ça fonctionne sur ton blog aussi, tu confirme ?

Pastaarj a dit…

Confirmé! ça fonctionne parfaitement depuis ce matin @ http://reggaetubewatcher.blogspot.com

les Paris DLD a dit…

Merci pour ce widget qui fonctionne à merveille. Beau travail !

http://www.lesparisdld.com

les Paris DLD a dit…

j'ai parlé trop vite, il ne fonctionne pas sous IE et sous Chrome... uniquement sous Firefox

TriPick a dit…

Je n'aime pas voir Développé par l'univers et le reste avec un lien cliquable sur votre site.
(même si il est supprimable en changeant le .js)

Le taulier a dit…

Du beau boulot. J'ai passé un bon moment à chercher ce genre de boite de recherche et pour blogger c'est ce que j'ai vu de plus beau.

C'est vrai que comme le fait remarquer avec peu de délicatesse tripick le "Développé par..." est un peu intrusif mais vu que ce widget est gratuit c'est bien le minimum qu'on doit accepter.

j'ai une critique tout de même:
J'ai l’impression que la recherche ne porte que sur les titres et les libellés pas sur les les mots des textes.

J'ai aussi une question comment modifier l'apparence du widget (couleur de fond par exemple) je ne pense pas que cela doit être la mer à boire (un peu de css et de html) mais pour des non-geeks c'est insurmontables.

Merci

jmulans a dit…

Bonjour Le taulier, et merci.

Effectivement la recherche ne porte que sur les titres et les libellés. Faire une recherche sur le contenu de l'article est prévu un jour mais il je me suis heurté à plusieurs problèmes. Peut-être pour une version 2.
EN revanche personnaliser les couleurs pourrait-être quelque chose de plus facile à mettre en place, je vais y réfléchir.

Dakota Cullen a dit…

Ce gaget est super merci :D Je voulais juste savoir si on pouvais changer la police du texte

NathL a dit…

j'adore ! d'une grande finesse, très joli :)

merci :)
Nathalie

NathL a dit…

- impeccable sous chrome
- le lien vers cet article est vraiment très discret et utile !
ça me semble très bien au contraire, sans parler du (tout petit et toujours discret) lien en fin de liste : développé par... je ne le trouve pas intrusif du tout car vraiment très discret et parler du développeur... pour une fois, c'est bien :).

Jean Deschamps a dit…

Parfait sous firefox !
Merci

Anonyme a dit…

bonjour, merci pour mon blog blogger il fonctionne trés bien, le seul problème il n'affiche pas les images de mes articles.

vous avez peut-etre une solution ?

cordialement

Wladimir Garnier a dit…

Bonjour,

Est ce normal que cela ne fonctionne pas si le blog est invisible et non répertorié par les moteurs de recherche?

AH dessinateur a dit…

Merci, super!

Jean Deschamps a dit…
Ce commentaire a été supprimé par l'auteur.
Jean Deschamps a dit…

Bonjour,
Telle que la recherche est effectuée, sur les libellés et les titres des billets, le widget est très bien car il oblige les rédacteurs à renseigner correctement leurs libellés et à trouver le titre le plus efficace possible.

Mounette a dit…

Bonjour,

Pourriez vous regarder sur mon site
www.lespetitesbullesdemavie.blogspot.com
Parce que j'ai bien la barre mais je ne peux pas cliquer dans recherche...
J'ai bien fait toutes les étapes, je ne comprends pas pourquoi..

Pensez vous que ca puisse avoir avec le fait que le clic droit est interdit sur mon blog?
je rencontre ce soucis avec tous les gadgets à barre comme le votre :/
merci de votre aide!

celine Aud a dit…

bonjour,
donc j'ai fais toutes les etapes sur mon blogtest,
le gadget super sympa
par contre quand je tape par exemple la lettre "A", tout s'affiche avec image mais le champ qui entoure l'image est trop étroit.
je vous laisse l adresse de mon blogtest.
merci
http://celineblogtest.blogspot.fr/

Cerise a dit…

Bonjour,

La barre de recherche de fonctionne pas sur mon blog, pouvez vous m'aider ?
Est-il possible d'allonger la barre ?

Merci de votre réponse,
Cerise

Bibliothèque Pour Tous de Rupt sur Moselle a dit…

Bonjour,
Merci beaucoup pour vos instructions très claires et détaillées.
J'ai installé le widget de recherche instantanée mais n'étant pas douée en html je n'ai pas vraiment ce que je voudrais. Le champ de recherche me trouve le titre des articles alors que je voudrais effectuer ma recherche sur le titre des livres, en fait le contenu de l'article. Pouvez-vous m'aider ?
Merci beaucoup.
Vous pouvez voir ce que ça donne sur mon blog bibliothequepourtous.blogspot.fr

Sophie a dit…

Merci beaucoup pour cette solution qui m' a permis de remplacer le widget fournis par Blogger et qui ne fonctionne pas souvent, les explications sont très claires et le résultat est génial encore merci c'est vraiment le résultat que je voulais.

Amine El-Orche a dit…

Bonjour Julien,

Merci bcp pour ce Gadget bien sympathique. Bien installé sur le blog et fonctionne comme du tonnerre.

J'ai cependant un petit problème pour lequel j'ai besoin de ta précieuse aide :). J'essaye d'installer ce même gadget sur un 2ème blog qui est privé (non référencé sur les moteurs de recherche et seuls qlq utilisateurs y ont accès) mais il ne fonctionne pas du tout.
En respectant l'étape 1 et en prenant le même code HTML que mon premier blog, ça fonctionne très bien (avec les résultats du 1er blog bien évidemment). Or dès que je modifie l'adresse en mettant l'adresse de mon blog privé et bien il n'y a plus aucun résultat.

Merci par avance de ta réponse, j'ai vraiment besoin de ton expertise.

Anonyme a dit…

bjr tres ce gadget seul hik c qui ton adresse en sposor domage

Anonyme a dit…

kel domage qui a ton adresse en sposor

mimiche85 a dit…

salut l'ami.
merci pour ce gadget qui déchire, mais j'ai un tout petit problème.
Je n'arrive pas à afficher les images lors de la recherche malgré la sélection true sur afficher les images.
Une solution à cela ??
merci encore

Anonyme a dit…

moi je dit pas stable j en est fait les frais aujourdhuit quand luniversetlereste ram ben votre site aussi donc je conseille pas d installer a moin qui modifier certaine chose

Anonyme a dit…

je confirme tout vient de jmulans.free.fr qui dans le gadget dè que sa ram votre site aussi donc pas térrible

Anonyme a dit…

je suis d acord avec les deux dernier commentaire jmulans.free.fr
pose un probleme et fait beuger nos blog a mon avi faut qui change d adresse car marre des beug

Jean Deschamps a dit…

Bonsoir
je confirme les trois commentaires ; un ralentissement très important est constaté à partir de "jmulans".

Serait-il possible de revoir l'adresse qui ralentit le code de ce widget par ailleurs excellent ?
Cordialement.

Anonyme a dit…

voici l'adresse qui ralentie le gadget sur nos blogger.. jmulans.free.fr

Anonyme a dit…

je suis d acord avec les commentaire en dessus ton gadget fait trop beugé faut le modifier ou l'enlever c + qu un patté c un kaka

Anonyme a dit…

d'accord avec les autres com ne pas installer surtout pas si vous voulez que votre blogger ram pas.voici un site gadget blogger..http://www.softglad.com/ il est en anglais mais vous pouvr le traduire,mais attention enlever la traduction en en francais apres si un gadget vous plais car ne va pas s'installer..