Google Custom Search blogger

Hello one and all , in this article we will learn how to create a custom Google search field using the widget proposed by blogger called Search field.


 






1. Add the widget:

Connect to blogger , go to presentation >> Add a Gadget and then select Search Box

Here , you can view your blog and test the new field .

1. Customize the widget:

The rendering of the search area does not meet your expectations? ok , I propose to add this CSS code just before ]] > </ b: skin > in the html code of your blog.
















 /* ---- Recherche Google ---- */
input.gsc-search-button {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcCgrrU6HHUm2cJeODVCSYFXRWpazvoyntgGicgVypbApZRyrllv1wbFusU11HVGQ-1e8nju8Gj1cYqpZdyJ4Fq061HJKmeNce7jwzC_TjB4trzPSMZS6wgnwRODSWDiUWME_iNyFb3JI_/s1600/bg2.png") repeat scroll 0 0 transparent;
    border:1px solid #DFDFDF;
    padding:5px 1px;
    color:#999;
    cursor:pointer;
    text-align:center;
    text-decoration:none
}
.gsc-search-button input:hover {
    background:#FFF;
}
input.gsc-input {
    border:1px solid #DFDFDF !important;
    padding:6px !important;
}
.gsc-branding-text, .gsc-branding-img-noclear, .gsc-branding-img, #searchform label.screen-reader-text {
    display:none
}