Olá pessoal, bem vindos a mais um tutorial do Uncomplicated Works e hoje irei ensinar-vos como modificar a caixa de pesquisa do vosso blog. A caixa de pesquisa é algo que tem de estar sempre presente no vosso blog, irá ajudar o leitor a encontrar o que procura de uma forma mais simples, e por isso tem de estar a condizer com o blog, assim sendo hoje trago-vos alguns exemplos de caixas de pesquisa para o vosso blog.
1º Passo: Esquema -> Adicionar uma Miniaplicação -> Caixa de Pesquisa
 |
| Personalizar caixa de pesquisa do Blogger |
2º Passo: Modelo -> Editar HTLM -> Crtl +F e pesquisar por ]]></b:skin>
3º Passo: Antes da tag encontrada adicionar o código CSS desejado para o nosso botão de pesquisa do Blog
Modelo 1:
input.gsc-input {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvHXKH3YLAQyvyYUuRSDIHxA5k6LuWgy9LTv6UVd8RjWeUi2V5fZnztQe_u2eMIoTWfaQFA_cGV8ki8xsl9Mxv9fp_1GAyTdbleAhMUYFCKJu8PdeLWN9XK1eisz0tQCTdBHG74b_GDeW/s30/search_icon.png);
background-color: #2c2c2c;
color: #FFF;
background-repeat: no-repeat;
background-position-x: 100%;
border: 0px!important;
background-position-y: 2px;
height: 30px;
}
input.gsc-search-button {
height: 32px;
margin-left: -2px!important;
background: #DC5050;
border: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.2em;
}
input.gsc-search-button:hover {
cursor: pointer;
}
Modelo 2:
input.gsc-input {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvHXKH3YLAQyvyYUuRSDIHxA5k6LuWgy9LTv6UVd8RjWeUi2V5fZnztQe_u2eMIoTWfaQFA_cGV8ki8xsl9Mxv9fp_1GAyTdbleAhMUYFCKJu8PdeLWN9XK1eisz0tQCTdBHG74b_GDeW/s30/search_icon.png);
background-color: #2c2c2c;
color: #FFF;
background-repeat: no-repeat;
background-position-x: 100%;
border: 0px!important;
background-position-y: 2px;
height: 30px;
border-radius: 20px;
}
input.gsc-search-button {
height: 32px;
margin-left: -2px!important;
background: transparent;
border: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.2em;
}
input.gsc-search-button:hover {
cursor: pointer;
}
div#CustomSearch1_form {
border: 1px solid rgba(0,0,0,0.5);
border-radius: 30px;
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
background: rgba(0,0,0,0.25);
padding: 8px;
padding-left: 15px;
}
form.gsc-search-box {
margin-top: 5px!important;
}
Espero que tenham gostado do tutorial de como personalizar caixa de pesquisa do Blogger, e que acima de tudo tenham conseguido colocar no vosso blog, se não estiverem a conseguir ou preferirem de outro género com outras cores ou outras formas, não hesitem a pedir nos comentários eu certamente irei ajudar, até ao próximo tutorial!
Sem comentários:
Enviar um comentário