<h3>Como adicionar Barra de pesquisa</h3>

Hello amigos(a) gostaria de agradecer o carinho dos novos visitantes. Como recebi o pedido para ajudar nas pesquisas aqui no DP coloquei uma barra de pesquisas e aproveitei para deixar o tutorial de como adicionar no seu blog também. Simples , Fácil e rápido!

------------------------------------------------------------------------------------------
Copie o código do modelo desejado abaixo e cole em
HTML/Java Script.

<style> #w #search { } #w #search input[type="text"] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsaDiv5jawxdlyz_KA_DPOYw_69VKjcPvkugmjEt0ZjElsbXZlBw0BX8vC2XYzuSX2eGltE6MMKi2_Lix27t9mod526S9tZD5Uz0yA3bZMUF3FE6qAE8rr6OkCUmfSCmNPeA52iNTrOcB/s1600/04.gif) no-repeat 7px 6px #FFF5EE; border:2px double#FFC0CB ; font: bold 10px Arial,Helvetica,Sans-serif; color: #CDB7B5; width: 180px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -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; } #w #search input[type="text"]:focus { width: 210px; } </style> <div id="w"><form method="get" action="/search" id="search"><input name="q" type="text" size="40" placeholder="O QUE PROCURA?" /> </form></div>

<style> #w2 #search { } #w2 #search input[type="text"] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInhFaXE3IhVaDQcQXvKR-CqSw8lEZtXDP9KBjAiNinwyOq-J4guO9SJSp3Q6ocR44Z3PwZG1fq_ckfL72IaraVq6XwjvHT6UTyOT44d-Uf92Un_8IKRmHx_PVRlTvNFc6I8wy8_7pJiX2/s1600/01.gif) no-repeat 7px 6px #F8F8FF; border:2px solid transparent; font: bold 10px Arial,Helvetica,Sans-serif; color: #CDB7B5; width: 180px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -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; } #w2 #search input[type="text"]:focus { width: 210px; } </style> <div id="w2"><form method="get" action="/search" id="search"><input name="q" type="text" size="40" placeholder="O QUE PROCURA?" /> </form></div>

<style> #w3 #search { } #w3 #search input[type="text"] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgff6EgpI9sEtE_-aYVR2FI2_pQfmISg8yMTkI1PUE7w9NeWqnBJpD7lU62fvf6SUp6K3hE0GkgL3H-hmrSXHm4t9wMV7F1nakJW-ueLdM3yf60PPWODOv-wKkddLRV5jommYOWB0frLTmT/s1600/02.gif) no-repeat 7px 6px #F0F8FF; border:4px double #BFEFFF ; font: bold 10px Arial,Helvetica,Sans-serif; color: #CDB7B5; width: 180px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -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; } #w3 #search input[type="text"]:focus { width: 210px; } </style> <div id="w3"><form method="get" action="/search" id="search"><input name="q" type="text" size="40" placeholder="O QUE PROCURA?" /> </form></div>

<style> #w5 #search { } #w5 #search input[type="text"] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDvuIAh6-Wg_HN8zHykD0n_7fqWiXt-NN5Mj6F5cmAtfzrXZCefRZ4dDRa7vZA19sRb8RqQtjqEDxaGLfo2XQXqEbHD5jBMtb-UCDXG2wtX55FWEoRp3mJQZGMx2PyAv-b74OijZt8EQPn/s1600/03.gif) no-repeat 7px 6px #F0FFF0; border:2px dashed #C1FFC1; font: bold 10px Arial,Helvetica,Sans-serif; color: #CDB7B5; width: 180px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -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; } #w5 #search input[type="text"]:focus { width: 210px; } </style> <div id="w5"><form method="get" action="/search" id="search"><input name="q" type="text" size="40" placeholder="O QUE PROCURA?" /> </form></div>