Seis modelos de caixa de pesquisa para Blogger

Seis modelos de caixa de pesquisa para Blogger
Olá amigos Mult-focos, temos aqui seis modelos de caixa de pesquisa para Blogger.
Todos eles de fácil adição e visuais que podem combinar com o template do seu blog.

Veja demo de cada um clicando em result do Box de códigos correspondente.

Como adicionar em seu blog

Copie o código HTML no Box de códigos e faça os mesmos procedimentos de adicionar um gadget se não sabe aprenda AQUI.

Caixa de pesquisa para Blogger I
<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyW1d1A5aSmTGCEdfKOlmlkeqkQrsQ8QsLXy1A3Bil0cV64hNbkPUDKDNXcIMSmMYwhLB6BLiV_iMEyJbLc3sTA8r1OCByjdC8nRd3ReR7Gx-b8qDedC1_x0VojenhbxYa3aXnJgk04t9/s15-no/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Digite aqui..." />
<input id="button-submit" type="submit" value="Pesquisar" />
</form>
See the Pen Caixa de pesquisa para Blogger I by Mairink (@Oemes) on CodePen.

Caixa de pesquisa para Blogger I
<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyW1d1A5aSmTGCEdfKOlmlkeqkQrsQ8QsLXy1A3Bil0cV64hNbkPUDKDNXcIMSmMYwhLB6BLiV_iMEyJbLc3sTA8r1OCByjdC8nRd3ReR7Gx-b8qDedC1_x0VojenhbxYa3aXnJgk04t9/s15-no/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Digite aqui..." />
<input id="button-submit" type="submit" value="Pesquisar" />
</form>
See the Pen Caixa de pesquisa para Blogger I by Mairink (@Oemes) on CodePen.

Caixa de pesquisa para Blogger II
<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyW1d1A5aSmTGCEdfKOlmlkeqkQrsQ8QsLXy1A3Bil0cV64hNbkPUDKDNXcIMSmMYwhLB6BLiV_iMEyJbLc3sTA8r1OCByjdC8nRd3ReR7Gx-b8qDedC1_x0VojenhbxYa3aXnJgk04t9/s15-no/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZcNH8NJJ6-XdytpL7IL2q71mNGd_hhmszSX3paz2grJdKh0-DDJ9_jVHNDx-B0YuZfGp8mDbbttSu8TsF3rEFaeTEOm7XH7vkZVaswNxMMwMSKmqCjcp2BJf1MexaiiM2aVoDZGF2n3X/w43-h45-no/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite aqui..." />
<input id="button-submit" type="submit" value=" "/>
</form>
See the Pen Caixa de pesquisa para Blogger II by Mairink (@Oemes) on CodePen.

Caixa de pesquisa para Blogger III
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs4cBJboYsxkGVkQaC_cWBQWRUC434WM5bRW2_c2-6HV-JHAC0UrYWZfmyz3BFRcC-prus_Co5DRgyK_5n9gBz8xU-LZgON05zIDuJX1Jyl50mjjzM_qbuqgQnqj14-MuUutRBvl6rg3Mk/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyW1d1A5aSmTGCEdfKOlmlkeqkQrsQ8QsLXy1A3Bil0cV64hNbkPUDKDNXcIMSmMYwhLB6BLiV_iMEyJbLc3sTA8r1OCByjdC8nRd3ReR7Gx-b8qDedC1_x0VojenhbxYa3aXnJgk04t9/s15-no/search-dark.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BamdJuJQLVkmNwsMtR-BBPhLVBVOfmEJevlqRhJya2bTpaRX6MbCE2AT5vP7tJWea0kXNQIb1SeOwOXH11X638WK-z1vw4qEdTPrLW1weFfJ5nC2aR5HK9tEts_XwM_Z2YMBq0SGQg44/w21-h22-no/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BamdJuJQLVkmNwsMtR-BBPhLVBVOfmEJevlqRhJya2bTpaRX6MbCE2AT5vP7tJWea0kXNQIb1SeOwOXH11X638WK-z1vw4qEdTPrLW1weFfJ5nC2aR5HK9tEts_XwM_Z2YMBq0SGQg44/w21-h22-no/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="Pesquisa..." />
    <input id="button-submit" type="submit" value="" />
</form>
See the Pen Caixa de pesquisa para Blogger III by Mairink (@Oemes) on CodePen.

Caixa de pesquisa para Blogger IV
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMqvpLOJXl-g1Fj5ibDixfDj7PAZCkLePbo9CPU15-j3Zk1r8qgbfeGOE8XpO-viDHJjr9pT_mXmOAhZQsnLCkp6u-WnEHyAvC091Qgt3_v5M7Jmo6sG2wS71cDj271sJLl9Z2twDaf6WH/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhppdsro_qmq73mZpN58XK73tFVaXmWb3fLg24X5HcQXhqgAgtZKhba_54WO7VQUPm8Gbl3xXJi6EONDK7JxmycLE9_XKGrkw6JnxDsT7MSCWwj2TrkTb2z5adC0iQ9izaWWsitQvB5Vlo0/w30-h25-no/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzh-Q6h2GIuIhqnBRTshXtoJCJFAFgZX1bdjE-7MUOPTBn4Wojk4cryyHXjhbvXDZqF-Q3vYtbZF0Fbf2TQjGI4cH9_SOlsMOjMkqbEfo-whJLh2aN0UdevP-tcfcA3Ou8AT1f77KQmWV/w30-h25-no/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Pesquisa..." />
<input id="button-submit" type="submit" value="" />
</form>

See the Pen Caixa de pesquisa para Blogger IV by Mairink (@Oemes) on CodePen.

Caixa de pesquisa para Blogger V
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFeMGCzQfln78inyCFs7Jz-PwfhC9ShFbeFTRhwklPkXlU6grBQ4FPRfS5552f1zWktnS8N-RRW3nkieZtWFpJB1pIBrJAMdUaWoJqjBWYK_Dt68IYEH1kqciakJseK9UXKbFz1PXmeA-Y/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyW1d1A5aSmTGCEdfKOlmlkeqkQrsQ8QsLXy1A3Bil0cV64hNbkPUDKDNXcIMSmMYwhLB6BLiV_iMEyJbLc3sTA8r1OCByjdC8nRd3ReR7Gx-b8qDedC1_x0VojenhbxYa3aXnJgk04t9/s15-no/search-dark.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYwsHLxYVp8U1fIZ3on8e3HyEh0NqbXmTygptyzroNEISVcqLALG2Ac-auccEEVaeTY0apW6ij5Kf5xCLLtpsU5nwnOIW_vg4-6j8IWaubo_2H_7mCGH_-EWX8lr7LdtLLKur6gg_m-3Yf/w19-h26-no/magnifier-hover+(1).png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYwsHLxYVp8U1fIZ3on8e3HyEh0NqbXmTygptyzroNEISVcqLALG2Ac-auccEEVaeTY0apW6ij5Kf5xCLLtpsU5nwnOIW_vg4-6j8IWaubo_2H_7mCGH_-EWX8lr7LdtLLKur6gg_m-3Yf/w19-h26-no/magnifier-hover+(1).png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Procure aqui..." />
    <input id="button-submit" type="submit" value="" />
</form>
See the Pen Caixa de pesquisa para Blogger V by Mairink (@Oemes) on CodePen.

Caixa de pesquisa para Blogger VI
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEtyeM5zSxYtV0xutTI0qTE_Z4uQCVuFqSkOTv_cBfYdOTw9A99qzEaw8nsGcWTqGa3JumUAs4X7XTATYFgQ944zWwWzuhK3cHz3ZIhlV10UFXIIH5kPF6xIr3lYP2nzprpyYUsdGt4_6/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQFE0gS90s70fsXBf0hikFI4olLmG25tB6Ytg2vpwFKh7Y35L8uNdwZbIFhDrmvs7rVIIOMsNFcl5jsPTzlIZAukeZvs2YLc564s4hjic8XLrdpiXYF2sviz9GaP-okvGB4eA3MLeCoht/w40-h50-no/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQFE0gS90s70fsXBf0hikFI4olLmG25tB6Ytg2vpwFKh7Y35L8uNdwZbIFhDrmvs7rVIIOMsNFcl5jsPTzlIZAukeZvs2YLc564s4hjic8XLrdpiXYF2sviz9GaP-okvGB4eA3MLeCoht/w40-h50-no/search-icon.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="12" placeholder="Digite palavras-chave..." />
<input id="button-submit" type="submit" value=" "/>
</form>
See the Pen Caixa de pesquisa para Blogger VI by Mairink (@Oemes) on CodePen.

Bem pessoal isto é tudo.

Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter