Si vous souhaitez remplacer la barre de recherche par défaut de votre blog Blogger au look rustique et aux fonctionnalités basiques, vous êtes au bon endroit !
Je vous propose dans ce nouveau tutoriel une barre de recherche moderne dotée d'une fonctionnalité Ajax (recherche instantanée).
L'intégration de la recherche instantanée dans votre blog améliorera considérablement l'expérience utilisateur. En effet, la recherche du contenu sera plus rapide et plus pertinente ce qui va augmenter le volume de pages consultées par les visiteurs.
Vous avez le choix entre deux méthodes selon vos besoins.
La première méthode vous conviendra mieux si vous êtes dans l'une des configurations suivantes :
- Vous souhaitez garder votre barre de recherche actuelle et vous désirez uniquement l'enrichir avec la recherche instantanée Ajax
- Vous disposez d'une barre de recherche ayant une petite largeur.
- Votre barre de recherche se situe dans la barre latérale de votre blog
La deuxième méthode consiste à créer une nouvelle barre de recherche dont le design ressemblera à l’image qui suit :
Dans ce tutoriel, on l'intégrera juste après la barre de navigation (menu). Cela dit, vous pouvez choisir un autre endroit et l'ajouter librement dans les différentes sections de votre blog.
Première méthode : Ajoutez la recherche instantanée Ajax à votre barre de recherche actuelle
Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.Cliquez sur "Thème"> "Modifier le code HTML"
Une boite contenant le code HTML de votre thème s'affichera
Cliquez n'importe où à l'intérieur du code HTML
Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à droite.
Cherchez la balise </body>
Insérez le code suivant juste au-dessus de </body>
<script src='https://cdn.jsdelivr.net/gh/cctonikgf/universbloggers@master/rechercheAjax.js?live=true&image=true'/>
L’intégration de ce script permet d'afficher les résultats en direct dans votre barre de recherche.
Pour afficher les titres de vos articles sans les images, remplacez la valeur "true" par "false" dans le code image=true'/>
Le code ?live=true& signifie que la recherche en direct (live) est activée.
Si souhaitez afficher les résultats de recherche seulement quand l’internaute appuie sur la touche "Entrée" , substituez la valeur "true" à "false".
Maintenant, ajoutez le code qui suit au-dessus de la balise ]]></b:skin>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ajax-search{padding-top: 8px;background:rgb(244, 244, 247);box-shadow:0 0 15px rgba(0,0,0,0.15);max-height:450px!important}
.ajax-search h3{font-size:10px;font-weight:normal;margin:0 0 20px 0;color:rgb (189, 183, 183);}
.ajax-search li{position:relative;display:inline-blogk;float:left;width:100%;margin:0 0 10px 0;overflow:hidden}
.ajax-search li h4{font-size:14px;font-weight:normal;margin:0 15px 0 0;letter-spacing: 0.5px;}
.ajax-search li h4 a{color:#000;transition:all .3s}
.ajax-search li h4 mark{background-color:transparent;color:#000;text-decoration:underline;transition:all .3s}
.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#2c82c9}
.ajax-search-image{float:left;margin:0 10px 0 0}
.ajax-search-image img{border-radius:5px}
.ajax-search-pager a{display:inline-blogk;clear:both;overflow:hidden;background:#f44336;color:#fff;font-size:13px;padding:5px 10px;border-radius:3px;margin:15px auto 0 auto}
.ajax-search-pager a:hover{background:#333;color:#fff}
@media screen and (max-width:768px){.ajax-search li{position:relative;display:inline-blogk;float:left;width:100%;margin:0 0 10px 0;overflow:hidden}}
</style>
Enregistrez les modifications apportées à votre thème et visualisez les résultats.
Deuxième méthode : Crée une nouvelle barre de recherche instantanée
Choisir l'endroit où sera affiché votre barre de recherche et ajouter une nouvelle zone de gadget
Maintenant, il faudra créer une nouvelle zone de gadget à l'endroit où l'on
souhaite voir paraître la barre de recherche.
Si vous désirez par exemple l'afficher juste après votre barre de navigation (menu), suivez ces étapes.
Si vous désirez par exemple l'afficher juste après votre barre de navigation (menu), suivez ces étapes.
Afin de situer le code de la barre de navigation dans le code HTML du thème,
on va chercher le nom d’une catégorie de notre menu. À titre d’exemple, je
chercherai la catégorie "PORTFOLIO" qui figure dans ma barre de navigation.
<div style="clear: both;"></div>
ou
<div class="clear"></div>
<b:section id='ajax-search' name='Recherche Ajax' showaddelement='yes'></b:section>
Cliquez sur "Enregistrer le thème"
Maintenant, cliquez sur "Mise en page" dans le menu à gauche de l'écran et actualisez la page en appuyant sur F5 ou en cliquant sur le bouton "Actualiser" de votre navigateur internet.
Vous remarquerez qu'une nouvelle zone de gadget nommée "Recherche Ajax" est créée juste au-dessous de votre barre de navigation.
Ajouter les codes d’activation de la nouvelle barre de recherche
Toujours dans la section "Mise en page", cliquez sur "Ajouter un gadget" dans la nouvelle zone de gadgets que vous avez créée précédemment.Dans la boite de dialogue qui s’affichera par la suite, choisissez le gadget HTML/JavaScript.
Collez le code suivant dans le champ "Contenu" de votre gadget HTML/JavaScript puis cliquez sur "Enregistrer"
<div id='search-wrapper'>
<style type='text/css'>
#search-wrapper {
margin: 56px;
}
.search-ub {
display: blogk;
margin: 20px auto;
padding: 0;
max-width: 970px;
}
.form-wrapper {
padding: 15px 20px;
line-height: 23px;
margin: 0;
overflow: hidden;
background-color: rgb(244, 244, 247);
border: 0;
border-radius: 99em;
box-shadow: none;
outline: none;
font-size: 13px;
opacity: 1;
transition: all .9s;
border: 1px solid #dde4fd;
}
.form-wrapper #search {
background: transparent;
border: 0;
outline: none;
width: 90%;
text-indent: 10px;
}
</style> <div class='search-ub'>
<form action='/search' class='form-wrapper' method='get' role='search'>
<input id="search" name="q" oninput="setCustomValidity('')" oninvalid="this.setCustomValidity('Veuillez remplir ce champ ')" placeholder="Entrez votre recherche..." required="" type="search" />
<input name="max-results" type="hidden" value="12" />
</form>
</div></div>
Intégrer la fonctionnalité de recherche instantanée Ajax
Pour ce faire, suivez les étapes de la première méthode.Cherchez la balise </body> et collez le code suivant juste au-dessus :
<script src='https://cdn.jsdelivr.net/gh/cctonikgf/universbloggers@master/rechercheAjax.js?live=true&image=true'/>
Personnaliser la barre de recherche instantanée avec les propriétés CSS
Ajoutez le code CSS qui suit au-dessus de la balise ]]></b:skin>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ajax-search{padding:20px;background:rgb(244, 244, 247);box-shadow:0 0 15px rgba(0,0,0,0.15);max-height:450px!important}
.ajax-search h3{font-size:10px;font-weight:normal;margin:0 0 20px 0;color:rgb (189, 183, 183);}
.ajax-search li{position:relative;display:inline-blogk;float:left;width:50%;margin:0 0 10px 0;overflow:hidden}
.ajax-search li h4{font-size:14px;font-weight:normal;margin:0 15px 0 0;letter-spacing: 0.5px;}
.ajax-search li h4 a{color:#000;transition:all .3s}
.ajax-search li h4 mark{background-color:transparent;color:#000;text-decoration:underline;transition:all .3s}
.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#2c82c9}
.ajax-search-image{float:left;margin:0 10px 0 0}
.ajax-search-image img{border-radius:5px}
.ajax-search-pager a{display:inline-blogk;clear:both;overflow:hidden;background:#f44336;color:#fff;font-size:13px;padding:5px 10px;border-radius:3px;margin:15px auto 0 auto}
.ajax-search-pager a:hover{background:#333;color:#fff}
@media screen and (max-width:768px){.ajax-search li{position:relative;display:inline-blogk;float:left;width:100%;margin:0 0 10px 0;overflow:hidden}}
Enfin, sauvegardez votre thème et visualisez les résultats.
La recherche instantanée Ajax pour Blogger a été développée dans le cadre d'un projet Github, vous pouvez consulter le contenu original à cette adresse https://dte-project.github.io/blogger/search.html
Félicitations ! la nouvelle barre de recherche est à présent intégrée dans votre blog Blogger.
Merci d'avoir pris le temps de lire ce tutoriel. N'hésitez pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.