.

sábado

Textual description of firstImageUrl

Caixa de Pesquisa Com Ajax JQuery que Pesquisa de Tudo

ACESSOS:
Deixe seu comentário



Nesta postagem compartilho com vocês que acompanham o DicasHot está caixa de pesquisa inteligente, semelhante a do Google. Ela é capaz de pesquisar por imagens, videos, etc. 

Para coloca-lo no blogger... Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código
<style type='text/css'>
# SearchForm {background-color: # 4C5A65; position: relative; margin: 0 0 80px 0; padding: 10px;}
fieldset {border: none}
# SearchInputContainer {width: 420px; height: 34px; background: # fff; float: left; margin-right: 12px}
# S {border: 1px solid # 52e052; color: # 888; background: # f1f1f1 none; text-shadow: 1px 1px 0 # FFF; width: 385px; padding: 0 0 0 25px}
Ícones. {list-style: none; height: 19px; position: relative; margin: 10px 0 0 425px}
Ícones. no-repeat; float: left; height: 19px; text-indent:-9999px; cursor: pointer; margin-right: 5px}
li.web {width: 15px}
li.images {width: 22px; background-position:-18px 0}
li.images.active, li.images: hover {background-position: bottom-18px}
li.news {width: 14px; background-position:-44px 0}
li.news.active, li.news: hover {background-position: bottom-44px}
li.videos {width: 17px; background-position: right 0}
li.videos.active, li.videos: hover {background-position: bottom right}
no-repeat; left: 0; margin: 15px 0 0 5px;}
32CD32 solid #; esboço: 1px solid # 228B22; cursor: pointer}
# SearchInContainer {float: left; margin-top: 5px; width: 400px; text-align: Importante esquerda;}
label{color:#DDD;cursor:pointer;font-size:11px;position:relative;right:-2px;top:-2px;margin-right:10px;white-space:nowrap}
input [type = radio] {cursor: pointer}
. PageContainer {margin-bottom: 50px;}
p.notFound {text-align: center; padding: 0 0 40px}
. WebResult {text-shadow: 1px 1px 0 # 586a75; margin-bottom: 20px}
. WebResult h2 {background-color: # 5D6F7B; font-size: 18px; font-weight: 400; padding: 20px 8px}
. WebResult b h2 {color: # fff}
. WebResult h2 a {color: # eee; border: none}
. WebResult p {line-height: 1.5; padding: 15px 20px; color: # 222;}
. WebResult pb {color: # 000}
. WebResult> a {margin-left: 20px}
. ImageResult {float: left; height: 180px; text-align: center; width: 152px; overflow: hidden; margin: 20px 0 0 20px}
. ImageResult img {display: block; border: none}
. ImageResult A.IMAGEM {border: 2px solid # 333; esboço: 1px solid # 777; display: block; margin: 0 auto 15px}
no-repeat; cursor: pointer; margin: 40px auto}
li.web.active, li.web: hover, # SubmitButton: hover, # mais: hover {background-position: bottom left}
# Page {margin: 0 auto;}
</ Style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script>
<script type="text/javascript">
$ (Document). Ready (function () {
    função n (t) {
        . t = $ estender ({}, e, t);
        t.term = t.term | | $ ("# s") val ().;
        if (t.searchSite) {
            t.term = "site:" + t.siteURL + "" + t.term
        }
        "? v = 1.0 & callback =" var i = "http://ajax.googleapis.com/ajax/services/search/" t.type + +;
        var s = $ ("# resultsDiv");
        $. GetJson (i, {
            q: t.term,
            RSZ: t.perPage,
            start: t.page * t.perPage
        }, Function (e) {
            var i = e.responseData.results;
            . $ ("# Mais") Remove ();
            if (i.length) {
                var o = $ ("<div>", {
                    className: "pageContainer"
                });
                for (var u = 0; u <i.length; u + +) {
                    o.append (novo r (i [u]) + "")
                }
                if (t.append!) {
                    s.empty ()
                }
                . o.append ('<div class="clear"> </ div>') hide () appendTo (s) fadeIn ("lento")..;
                var a = e.responseData.cursor;
                if (+ a.estimatedResultCount> (t.page + 1) * t.perPage) {
                    $ ("<div>", {
                        id: "mais"
                    }). AppendTo (s). Clique (function () {
                        n ({
                            acrescentar: true,
                            página: t.page + 1
                        });
                        (Este) $. FadeOut ()
                    })
                }
            Else {}
                s.empty ();
                $ ("<p>", {
                    className: "NotFound",
                    html: "Nenhum resultado foi encontrado!"
                }). Esconder (). AppendTo (s). FadeIn ()
            }
        })
    }
    função r (e) {
        var t = [];
        switch (e.GsearchResultClass) {
        case "GwebSearch":
            t = ['class="webResult"> <div', '<h2> <a href="', e.unescapedUrl,'" target="_blank">', e.title, "</ a> </ h2> "," <p> ", e.content," </ p> ',' <a href="', e.unescapedUrl,'" target="_blank"> ', e.visibleUrl ", </ a> "," </ div> "];
            break;
        case "GimageSearch":
            estilo t = ['<div class="imageResult">', '<a target = href "_blank" = "', e.unescapedUrl," "title =" ", e.titleNoFormatting '" class = "pic" = "width: 'e.tbWidth", px, altura: "e.tbHeight", px,'> ',' <img src = "", e.tbUrl "," width = "", e.tbWidth '"height =" ", e.tbHeight'" /> </ a> ',' <div class="clear"> </ div> ',' <a href = "', e.originalContextUrl' "target =" _blank "> ', e.visibleUrl," </ a> "," </ div> "];
            break;
        case "GvideoSearch":
            estilo t = ['class="imageResult"> <div', '<a target = "_blank" href = "', e.url," "title =" ", e.titleNoFormatting '" class = "pic" = "width: 150px; height: auto; '>', '<img src="', e.tbUrl,'" width="100%" /> </ a>', '<div class =" clear " > </ div> ',' <a href="', e.originalContextUrl,'" target="_blank"> ', e.publisher, "</ a>", "</ div>"];
            break;
        case "GnewsSearch":
            t = ['class="webResult"> <div', '<h2> <a href="', e.unescapedUrl,'" target="_blank">', e.title, "</ a> </ h2> "," <p> ", e.content," </ p> ',' <a href="', e.unescapedUrl,'" target="_blank"> ', e.publisher, "</ a> "," </ div> "];
            pausa
        }
        this.toString = function () {
            retorno t.join ("")
        }
    }
    var e = {
        siteurl: "http://dicashot.blogspot.com",
        SearchSite: true,
        digite: "web",
        acrescentar: false,
        PerPage: 8,
        página: 0
    };
    var t = $ ("<span>", {
        className: "seta"
    }) AppendTo ("ul.icons").;
    $ ("Ul.icons Li"). Clique (function () {
        var n = $ (this);
        if (n.hasClass ("ativo")) {
            return false
        }
        n.siblings () removeClass ("ativo").;
        n.addClass ("ativo");
        t.stop (). animate ({
            esquerda: n.position () esquerda,.
            MarginLeft: n.width () / 2-4
        });
        e.type = n.attr ("data-searchType");
        $ ("# Mais"). FadeOut ()
    });
    . $ ("# SiteNameLabel") Anexar ("" + e.siteURL);
    $ ("# SearchSite") Clique em ().;
    $ ("Li.web") Clique em ().;
    . $ ("# S") Foco ();
    $ ("# SearchForm"). Submit (function () {
        n ();
        return false
    });
    $ ("# SearchSite, # searchWeb"). Change (function () {
        e.searchSite = this.id == "SearchSite"
    })
})
</ Script>
<div id="page">
<FORM Id="searchForm" method="post">
<fieldset>
id = "s" <input type="text" />
<input type="submit" value="Search" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" verificado />
<label for="searchSite" id="siteNameLabel"> Search </ label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb"> pesquisar na web </ label>
</ Div>
<ul class="icons">
<li local class="web" title="Web Search" data-searchType="web"> </ li>
<li class="images" title="imagem Search" data-searchType="images"> Images </ li>
<li class="news" title="News Search" data-searchType="news"> Notícias </ li>
<li class="videos" title="Video Search" data-searchType="video"> Vídeos </ li>
</ Ul>
</ Fieldset>
</ Form>
</ Div>
<div id="resultsDiv"> </ div>
Ao ter colado o código, substitua a parte destacada de azul no código pela URL do seu site. Tendo feito isto, basta salvar e pronto!!!

Cursos On-line 24 Horas - Educação a Distância de Qualidade
RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}


 
.