Maintenant que l'introduction et les bases du code ont été vues, on va pouvoir coder à proprement parler ! Et pour ce premier vrai Girls Can Code, on va se créer une magnifique barre de recherche pour notre blog.
Pour mettre les codes, il vous suffit d'aller dans votre interface Blogger et de cliquer sur "Mise en page". On va tomber sur le squelette de votre blog et on va aller chercher le rectangle sidebar. Si vous avez votre sidebar à gauche, ce sera sidebar-left, si votre sidebar est à droite, ce sera sidebar-right. En cliquant sur "+ Ajouter un gadget".
Une fenêtre pop-up s'ouvre et propose une liste de gadgets. On va cliquer sur le petit + à côté de HTML/Javascript et une autre fenêtre s'ouvre.
Dans "Titre", il vous suffit de marquer "Recherche". Le code des barres de recherche seront à mettre dans "Contenu". Passons aux codes à proprement parler (tout le texte qui est entre /* et */ sont des commentaires et ne seront jamais affichés à l'écran) :
<div id="searchbox1">
<form action="/search" id="searchthis" method="get">
<input id="search1" name="q" type="text" placeholder="Tu cherches...">
<button id="button1-submit">Chercher</button>
</form>
</div>
<style>
#searchbox1 {
width: 250px; /* Taille du widget */
}
#searchbox1 input[type="text"] { /* Design de la barre de recherche */
border: 1px solid #DCDCDC; /* Bordure: épaisseur, forme, couleur*/
border-radius: 2px; /* Arrondi de la bordure */
font: bold 12px Arial,Helvetica, Sans-serif; /* Police: type, taille, police */
color: #bebebe; /* Couleur de la police */
width: 55%; /* Taille de la barre de recherche */
padding: 10px; /* Espace de la barre */
}
#button1-submit { /* Design du bouton */
background: #6A6F75; /* Couleur de fond du bouton */
padding: 9px; /* Espace haut/droit/bas/gauche du bouton */
width: 30%; /* Taille du bouton */
font: bold 12px Arial,Helvetica; /* Police du bouton */
color: #fff; /* Couleur du texte du bouton */
}
#button1-submit:hover { /* Design du bouton au passage souris */
background: #fff; /* Couleur de fond du bouton */
color: #6A6F75; /* Couleur du texte du bouton */
border: 1px solid #6A6F75; /* Bordure du bouton */
}
#button1-submit:active { /* Design du bouton au clic souris */
background: #fff; /* Couleur de fond du bouton */
color: #6A6F75; /* Couleur du texte du bouton */
border: 1px solid #6A6F75; /* Bordure du bouton */
}
</style>
<div id="searchbox2">
<form action="/search" id="searchthis" method="get">
<input id="search2" name="q" type="text" placeholder="Tu cherches...">
<button id="button2-submit">Chercher</button>
</form>
</div>
<style>
#searchbox2 {
width: 250px; /* Taille du widget */
}
#searchbox2 input[type="text"] { /* Design de la barre de recherche */
border: 1px solid #DCDCDC; /* Bordure: épaisseur, forme, couleur*/
border-radius: 2px; /* Arrondi de la bordure */
font: bold 12px Arial,Helvetica, Sans-serif; /* Police: type, taille, police */
color: #bebebe; /* Couleur de la police */
width: 55%; /* Taille de la barre de recherche */
padding: 10px; /* Espace de la barre */
}
#button2-submit { /* Design du bouton */
background: #F2DBDD; /* Couleur de fond du bouton */
padding: 9px; /* Espace haut/droit/bas/gauche du bouton */
width: 30%; /* Taille du bouton */
font: bold 12px Arial,Helvetica; /* Police du bouton */
color: #fff; /* Couleur du texte du bouton */
}
#button2-submit:hover { /* Design du bouton au passage souris */
background: #fff; /* Couleur de fond du bouton */
color: #F2DBDD; /* Couleur du texte du bouton */
border: 1px solid #F2DBDD; /* Bordure du bouton */
}
#button2-submit:active { /* Design du bouton au clic souris */
background: #fff; /* Couleur de fond du bouton */
color: #F2DBDD; /* Couleur du texte du bouton */
border: 1px solid #F2DBDD; /* Bordure du bouton */
}
</style>
<div id="searchbox3">
<form action="/search" id="searchthis" method="get">
<input id="search3" name="q" type="text" placeholder="Tu cherches...">
<button id="button3-submit">Chercher</button>
</form>
</div>
<style>
#searchbox3 {
width: 250px; /* Taille du widget */
}
#searchbox3 input[type="text"] { /* Design de la barre de recherche */
border: 1px solid #DCDCDC; /* Bordure: épaisseur, forme, couleur*/
border-radius: 2px; /* Arrondi de la bordure */
font: bold 12px Arial,Helvetica, Sans-serif; /* Police: type, taille, police */
color: #bebebe; /* Couleur de la police */
width: 55%; /* Taille de la barre de recherche */
padding: 10px; /* Espace de la barre */
}
#button3-submit { /* Design du bouton */
background: #ABC8E2; /* Couleur de fond du bouton */
padding: 9px; /* Espace haut/droit/bas/gauche du bouton */
width: 30%; /* Taille du bouton */
font: bold 12px Arial,Helvetica; /* Police du bouton */
color: #fff; /* Couleur du texte du bouton */
}
#button3-submit:hover { /* Design du bouton au passage souris */
background: #fff; /* Couleur de fond du bouton */
color: #ABC8E2; /* Couleur du texte du bouton */
border: 1px solid #ABC8E2; /* Bordure du bouton */
}
#button3-submit:active { /* Design du bouton au clic souris */
background: #fff; /* Couleur de fond du bouton */
color: #ABC8E2; /* Couleur du texte du bouton */
border: 1px solid #ABC8E2; /* Bordure du bouton */
}
</style>
<div id="searchbox4">
<form action="/search" id="searchthis" method="get">
<input id="search4" name="q" type="text" placeholder="Tu cherches...">
<button id="button4-submit"></button>
</form>
</div>
<style>
#searchbox4 {
width: 250px; /* Taille du widget */
padding: 20px 10px; /* Espace du widget */
}
#search4 { /* Design de la barre de recherche */
border: 1px solid #DCDCDC; /* Bordure: épaisseur, forme, couleur*/
border-radius: 2px; /* Arrondi de la bordure */
width: 55%; /* Police: type, taille, police */
padding: 14px; /* Espace de la barre */
}
#button4-submit { /* Design du bouton */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #DCDCDC;/* Couleur de fond du bouton */
border-radius: 3px; /* Espace haut/droit/bas/gauche du bouton */
width: 18%; /* Taille du bouton */
padding: 25px 0px 14px 0px; /* Espace haut/droit/bas/gauche du bouton */
}
#button4-submit:hover { /* Design du bouton au passage souris */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #5b5d60; /* Fond au passage souris */
border-radius: 3px; /* Espace haut/droit/bas/gauche du bouton */
width: 18%; /* Taille du bouton */
padding: 25px 0px 14px 0px; /* Espace haut/droit/bas/gauche du bouton */
}
#button4-submit:active { /* Design du bouton au clic souris */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #5b5d60; /* Fond au clic souris */
}
</style>
<div id="searchbox5">
<form action="/search" id="searchthis" method="get">
<input id="search5" name="q" type="text" placeholder="Tu cherches...">
<button id="button5-submit"></button>
</form>
</div>
<style>
#searchbox5 {
width: 250px; /* Taille du widget */
padding: 20px 10px; /* Espace du widget */
}
#search5 { /* Design de la barre de recherche */
border: 1px solid #DCDCDC; /* Bordure: épaisseur, forme, couleur*/
border-radius: 2px; /* Arrondi de la bordure */
width: 55%; /* Police: type, taille, police */
padding: 14px; /* Espace de la barre */
}
#button5-submit { /* Design du bouton */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #FFDA8C;/* Couleur de fond du bouton */
border-radius: 3px; /* Espace haut/droit/bas/gauche du bouton */
width: 18%; /* Taille du bouton */
padding: 25px 0px 14px 0px; /* Espace haut/droit/bas/gauche du bouton */
}
#button5-submit:hover { /* Design du bouton au passage souris */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #F2B942; /* Fond au passage souris */
border-radius: 3px; /* Espace haut/droit/bas/gauche du bouton */
width: 18%; /* Taille du bouton */
padding: 25px 0px 14px 0px; /* Espace haut/droit/bas/gauche du bouton */
}
#button5-submit:active { /* Design du bouton au clic souris */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #F2B942; /* Fond au clic souris */
}
</style>
<div id="searchbox6">
<form action="/search" id="searchthis" method="get">
<input id="search6" name="q" type="text" placeholder="Tu cherches...">
<button id="button6-submit"></button>
</form>
</div>
<style>
#searchbox6 {
width: 250px; /* Taille du widget */
padding: 20px 10px; /* Espace du widget */
}
#search6 { /* Design de la barre de recherche */
border: 1px solid #DCDCDC; /* Bordure: épaisseur, forme, couleur*/
border-radius: 2px; /* Arrondi de la bordure */
width: 55%; /* Police: type, taille, police */
padding: 14px; /* Espace de la barre */
}
#button6-submit { /* Design du bouton */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #CDDC94;/* Couleur de fond du bouton */
border-radius: 3px; /* Espace haut/droit/bas/gauche du bouton */
width: 18%; /* Taille du bouton */
padding: 25px 0px 14px 0px; /* Espace haut/droit/bas/gauche du bouton */
}
#button6-submit:hover { /* Design du bouton au passage souris */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #B9CD67; /* Fond au passage souris */
border-radius: 3px; /* Espace haut/droit/bas/gauche du bouton */
width: 18%; /* Taille du bouton */
padding: 25px 0px 14px 0px; /* Espace haut/droit/bas/gauche du bouton */
}
#button6-submit:active { /* Design du bouton au clic souris */
background: url(http://bit.ly/2GAdA7U) no-repeat 13px #B9CD67; /* Fond au clic souris */
}
</style>
Voilà pour ce premier vrai Girls Can Code ! J'espère que ça vous aura plu, que c'est assez clair et que vous utiliserez ce code ! N'hésitez pas à me dire si vous avez utilisé ces codes dans les commentaires avec le lien de votre blog pour que je puisse aller voir ! Si vous avez un souci, envoyez-moi un mail ou laissez-moi un commentaire : je réponds assez rapidement en général.
À très bientôt !
♡
♡