Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

31/01/2013

NOVO: Tutorial - Personalizar resultados da pesquisa + Desenho:

Por padrão, quando pesquisamos no nosso blog, os resultados aparecem numa caixa muito sem-graça. Hoje vamos aprender como personalizar os resultados da pesquisa de seu blog para que eles tenham um aspecto bem mais apresentável, que combine com seu blog. Se você seguir o tutorial da forma correta, seus resultados da pesquisa ficarão mais ou menos assim:



Também postarei hoje um novo desenho meu. Não é lá grandes coisas, mas espero que vocês gostem, pois fiz com carinho. Vamos ao tuto, então?

Personalizar resultados da pesquisa:

Antes de seguir esse tutorial, salve uma cópia do seu template para o caso de algo dar errado. Para personalizar a área dos resultados da pesquisa, tudo o que você precisa fazer é:
  1. Entre no seu Painel do Blogger;
  2. Clique em Modelo > HTML (botão branco abaixo da miniatura de seu template);
  3. Clique em qualquer parte do seu HTML e aperte Ctrl + F no seu teclado;
  4. Na caixa que abriu, cole o seguinte código: ]]></b:skin> e aperte a tecla "Enter";
  5. ACIMA do trecho que ficou em destaque, cole o seguinte código:
#uds-searchControl .gsc-results {
background-color: #ffffff !important; /*Fundo do resultado da pesquisa*/
border-radius: 20px 20px 20px 20px !important;
-moz-border-radius: 20px 20px 20px 20px !important;
-webkit-border-radius: 20px 20px 20px 20px !important;
box-shadow: 3px 3px 3px #ccc inset !important;
-moz-box-shadow: 3px 3px 3px #ccc inset !important;
-webkit-box-shadow: 3px 3px 3px #ccc inset !important;
margin: 20px !important;
margin-top: 0px !important;
border-color: #cccccc !important;
}

.gsc-control div {
position: static;
font: 1.0em Arial Black !important; /*Tamanho e fonte sem link*/
color: #666666 !important; /* Cor da Fonte sem link*/
}

div.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible {
padding-top: 10px !important;
}

#uds-searchControl .gsc-tabHeader {
float: none !important;
text-align: center !important;
font: 1.3em Arial Black !important; /*Tamanho e fonte dos links de cima*/
color: indigo !important; /*Cor dos links de cima*/
text-decoration: underline !important;
}

.gsc-above-wrapper-area {
border-bottom: 0px solid rgb(233, 233, 233) !important;
}

#uds-searchControl .gs-result .gs-title, #uds-searchControl .gs-result .gs-title *, #uds-searchControl .gsc-results .gsc-trailing-more-results, #uds-searchControl .gsc-results .gsc-trailing-more-results * {
color: mediumpurple !important; /*Cor dos títulos das postagens*/
text-decoration: none !important;
text-align: center !important;
font: 1.1em Arial Black !important; /*Tamanho e fonte dos títulos das postagens*/
}

#uds-searchControl .gs-relativePublishedDate, #uds-searchControl .gs-publishedDate {
visibility: hidden !important;
}

.gsc-results .gsc-cursor-box {
margin-bottom: 10px !important;
font: 1.3em Arial Black !important; /*Tamanho e fonte dos números de baixo*/
text-align: center !important;
}

#uds-searchControl .gsc-tabHeader.gsc-tabhActive {
border-width: 2px 10px 0px !important;
color: black !important;
text-decoration: none !important;
border-style: solid;
}

div.gsc-tabHeader.gsc-inline-block.gsc-tabhActive { color: black !important; text-decoration: none !important;}

#uds-searchControl .gsc-cursor-current-page {
color: hotpink !important; /*Cor do número selecionado*/
}

Os trechos que você pode editar estão em negrito, a explicação de cada um está logo ao lado.
Não precisa visualizar, pois não aparecerá nada de diferente, apenas clique em " Salvar Modelo ".
Pronto. Agora vá no seu blog e faça um teste para ver como sua pesquisa aparece!!!

Desenho:

Já faz um bom tempo que eu não tenho postado um desenho, tenho alguns guardados mas venho acumulando por falta de tempo para digitalizar.
Aproveitando que hoje eu estou postando um, devo acrescentar que assim que a loja estiver pronta, recolocarei todas as imagens dos desenhos aqui do blog (houve um problema de hospedagem) e que a partir de hoje os desenhos do blog só serão à lápis de cor, pois os digitalizados tomam muito o meu tempo #TrueStory.
Enfim, o desenho de hoje veio de um rascunho que gostei muito e que decidi recuperar. Eu sei que está meio torto, mas lá vai:


Espero que tenham gostado do tuto e do desenho, amanhã teremos capas do Twitter!!!

Mil Sweetkisses,
8 Comentários
Comentários

8 comentários:

  1. Sheila, adoro os seus desenhos! O seu traço é bem diferente, gosto muito deles! Continue postando-os aqui!

    Beijos,
    Caroline, do Criticando por Aí.

    ResponderExcluir
  2. Como eu disse uma vez, você é muito criativa!!!!!!!!!!!!!!


    http://www.powerinred.blogspot.com.br/2013/01/resenha-blush-mac-frankly-scaltet.html

    ResponderExcluir
  3. Muito lindo o desenho.. fofa..adoro quando posta seus desenhos....
    adorei as dicas pra pesquisa.. eu não tinha porque achava sem graça...
    Quem sabe agora com seu Tutorial não arrisco um? bjs

    http://simplesmasessencial.blogspot.com.br/

    ResponderExcluir
  4. Eu nunca tinha pensado em personalizar a área de pesquisa. Gostei de sua dica.
    E o desenho ficou lindo. Bjus!!!

    galerafashion.blogspot.com.br

    ResponderExcluir
  5. Obrigada Sheila!! Me ajudou muito
    mmencantado.blogspot.com

    ResponderExcluir
  6. Ótima dica e o desenho ficou legal, eu como só desenho boneco palito... rs

    www.reticenciando.com

    Milhões de beijos

    ResponderExcluir
  7. Adoro seu blog, Deus te ama muito amada! S2

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados