Como colocar uma caixa de pesquisa no blogger

Para que seus visitantes localizem com mais facilidade algum conteúdo do seu blog, você pode colocar uma caixa de pesquisa (ou busca), simples porém muito útil. 

Leia também: 
Como criar um blog utilizando o Blogger

1. Acesse sua conta no blogger: www.blogger.com.

2. Layout.

3. Adicionar gadget.

4. HTML/JavaScript.

5. Copie e cole um dos seguintes códigos:

<style> #ba-cuadrobusq .ba-textobusq { border: 1px solid #AAAAAA; box-sizing: border-box; color: #000000; font-family: 'Lora', serif; font-size: 14px; padding:9px; width: 200px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; } #ba-cuadrobusq .ba-textobusq:hover { box-shadow:inset 1px 1px 8px gainsboro; } #ba-cuadrobusq .ba-textobusq:focus { background-image: -webkit-linear-gradient(white,white); background-image: -moz-linear-gradient(white,white); background-image: -ms-linear-gradient(white,white); background-image: -o-linear-gradient(white,white); background-color:white; outline:1px solid #0F5820; color: #000000; font-style:normal; box-shadow:inset 1px 1px 8px gainsboro; border:1px solid #3E00C4; } #ba-cuadrobusq .ba-enviar { background:#099721; border: 1px solid #099721; color: white; cursor: pointer; font-family: 'Droid Sans', sans-serif !important; color: #fff; cursor: pointer; line-height: 19px; padding: 8px 10px; text-decoration: none; } #ba-cuadrobusq .ba-enviar:hover { background:#0F5820; /*-- cor do botão Buscar--*/ } </style> <form action="search/" id="ba-cuadrobusq"> <input class="ba-textobusq" name="q" /> <input class="ba-enviar" type="submit" value="Buscar" /> </form>

<style>#search {float:right; height: 30px; margin:10px 0 0 0; } #search input.field {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-position:top right; background-repeat:no-repeat; width: 200px; padding:15px; outline: none; font-size: 13px; border: none; z-index: 1; height:16px; float:left; padding-right:30px;} #search input.field:focus {background-position:top right; background-repeat:no-repeat;} #search input.submit {width:70px; height:30px; font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px;} #search input.field {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHD-_D0pRZl_d0EQMcundKFAfyl6wXTMIs8N7evBT-U0lHcW1kT3ZJGSsoltjEd7qb0HvM6UaJzj-3OGA3sglL09TuSIE5X_xcRxOj3P64S-qdFpLQEymr0f4d2VR3Nc1rCMnOJ09kn0a9/s30/search_icon.png); background-color:#2c2c2c; color: #FFF;} #search input.field:focus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHD-_D0pRZl_d0EQMcundKFAfyl6wXTMIs8N7evBT-U0lHcW1kT3ZJGSsoltjEd7qb0HvM6UaJzj-3OGA3sglL09TuSIE5X_xcRxOj3P64S-qdFpLQEymr0f4d2VR3Nc1rCMnOJ09kn0a9/s30/search_icon.png); background-color:#404040;} #search input.submit {background-color:#E92020; color:#fff;}</style> <div id='search'> <form action='/search' id='searchform' method='get'> <div> <input class='field' id='s' name='q' onblur='if (this.value == '') {this.value = 'Digite Aqui...';}' onfocus='if (this.value == 'Digite Aqui...') {this.value = '';}' type='text' value='Digite Aqui...'/> <input class='submit' name='submit' type='submit' value='Buscar'/></div> </form> </div>

6. Salvar.

Pronto, espero que tenha conseguido e qualquer dúvida deixe nos comentários.

Obrigado!