Caixa de busca personalizada

Quer uma caixa de busca como esta?


Coloque o código que se encontra na caixa abaixo em um widget, html/javascript,

</p><p><span class="Apple-style-span" style="color: rgb(83, 100, 130); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; "><li><a class="</span><span class="Apple-style-span" style="color: rgb(83, 100, 130); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; "><font color="red" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">nome</font></span><span class="Apple-style-span" style="color: rgb(83, 100, 130); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; ">_menu" href="#" onclick="showhide(document.getElementById('</span><span class="Apple-style-span" style="color: rgb(83, 100, 130); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; "><font color="red" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">nome</font></span><span class="Apple-style-span" style="color: rgb(83, 100, 130); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; ">_menu')); return false;"></span><span class="Apple-style-span" style="color: rgb(83, 100, 130); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; "><font color="green" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Buscar</font></span><span class="Apple-style-span" style="color: rgb(83, 100, 130); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; "></a></span></p><span class="Apple-style-span" style="color: rgb(83, 100, 130); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; "><script type="text/javascript">//<!ert_<font color="red" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">nome</font>_menu_new();//]]><br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "></script><div class="overview row3" id="<font color="red" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">nome</font>_menu" style="display:none;position:absolute;width:350px;z-index:10000"><p class="title-overview row2"><font color="blue" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Título do menu</font></p><p class="center-overview"><font color="cyan" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Mensagem</font></p><hr class="dashed"><p class="center-overview"><font color="yellow" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Rodapé</font></p></form></div></li>

Resultado final: