DéveloppementsMulti-versions

Boîte de recherche des articles du blog


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Gadget Version Template Version
Ajouter la boîte de recherches des articles du blog de Blogger. Multiples configurations.
Blog
HTML
1
1
2
La boite de recherche Blogger
Ajouter la boîte de recherche des articles du blog de Blogger.
Avec ou sans l'option de triage par date ou pertinence.
Choix entre la version gadget et le code HTML.
Les 2 versions proposées sont validées HTML5.

Présentation de la boîte de recherche

Il s'agit de la même fonction de la boîte de recherche intégrée à gauche dans la navbar sur les modèles web standards.

Les résultats apparaissent dans les pages index (sous-type : recherche).


En savoir plus :



Développements :



Boîte simple


Boîte avec option de triage


Haut de page


Configuration de la boîte

Choisissez les paramètres dans le tableau ci-dessous et suivez les indications.




Haut de page


Apparence

L'apparence dépend principalement des CSS contenus dans chaque modèle.

Si votre modèle ne contient pas de styles pour les éléments HTML suivants : input, input[text], input[submit], input[radio] ou encore label, la boîte apparaîtra comme sur cette représentation :



Apparence normale


Pour ajouter de nouveaux styles :


  • Tableau de bord
  • Modèle
  • Personnaliser
  • Avancé
  • Ajouter fichier CSS

Vous pouvez utiliser les classes attribuées à certains éléments :

  • bc-search-box : Nom de la classe du tableau contenant les éléments.
  • bc-query : Nom de la classe de la cellule contenant la boîte de requêtes.
  • bc-searchbtn : Nom de la classe de la cellule contenant le bouton qui envoie la requête.
  • bc-option : Nom de la classe de la cellule contenant l'option de tri.

Si vous n'avez pas la patience de styliser vous-même, vous pouvez utiliser ce fichier CSS :


Fichier CSS
/* SearchBox Google Theme - Blogger CSS
   Ref.: http://goo.gl/Asdvi4
   ==================================== */
.bc-search-box {
  width: 100%;
  padding: 0px;
  margin: 0px;
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0;
}

.bc-search-box tr, .bc-search-box td {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.bc-query input {
  padding: 0px;
  margin: 0px;
  background: #fff;
  vertical-align: top;
  height: 28px;
  border-width: 1px 0px 1px 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.15);
  text-indent: 9px;
  color: rgb(34, 34, 34);
  font: 16px arial,sans-serif;
  line-height: 18px;
}

.bc-query input:hover {
  border-color: rgba(0, 0, 0, 0.3);
}

.bc-query input:active, .bc-query input:focus {
  border-color: rgb(66, 133, 244);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) inset;
  outline: medium none;
}

.bc-searchbtn input {
  border: none;
  height: 30px;
  padding: 0px;
  margin: 0px;
  width: 60px;
  box-shadow: none;
  background-color: rgb(67, 135, 253);
  text-indent: -99999px;
  background-image: url("http://www.google.com/uds/css/v2/search_box_icon.png");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 0px 2px 2px 0px;
}

.bc-searchbtn input:hover {
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
}

.bc-searchbtn input:active {
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15) inset;
}

.bc-option {
  text-align: right;
}

.bc-option input {
  vertical-align: middle;
  cursor: pointer;
}

.bc-option label {
  font: 10px arial,sans-serif;
  padding: 0px 5px 0px 0px;
  cursor: pointer;
  vertical-align: middle;
}
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Populaire