12.9.13

Caixa da Ask personalizada


Ahoy!

Gente, vocês estão votando na enquete lá em baixo certo? Está bem acirrada a de cima. OBS: Ignorem a opção sal e açúcar, não esta valendo pra nada. Nem tentem votar lá, porque não vai adiantar(um voto foi meu só de zueira) enfim, vocês já devem ter clicado nos outros itens do painel de navegação não é?(menu deslizante) O primeiro item é a ask pra vocês perguntarem e tals. Vocês devem ter percebido que ela é bem bonitinha, com letra em pixel, botão hover e etc. Hoje vou ensinar exatamente  o mesmo modelo que eu uso, porém só tirei as cores, pra você poder personalizar como quiser, desta forma fica bem melhor, porque logicamente(eu acho) que não tem como ver o código fonte do ask, mas vai saber né? Ok, vejam a
  preview:


1. Vá no ask.fm/settings/widget/setup para configurar seu widget, e se você não estiver logado, logue sua conta.

2. Você verá mais ou menos isto[xxxx] e então, como destacado, clique em Editar CSS, você verá o 'Mini HTML' da tua caixinha da ask. Apague tudo aquilo que esta lá e substitua por isso, mas antes recomendo editar no bloco de notas para não sair nada de errado. Edite as cores, onde destaquei com /*xxx*/;

body {
  margin: 0;
  padding: 0;
  background-color: #ccc; /*Cor do fundo da ask, mude*/
  overflow: hidden;
 color: #fff;  /*cor da fonte em geral*/
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
}
@font-face {font-family: "Pf Arma Five"; src: url('http://static.tumblr.com/lq2ha19/sgwmq3hab/pf_arma_five.ttf');}/*Ask personalizada pelo Sweeet-flower.blogspot.com*/
.askAnywhere-link { /*links*/
  color: #fff; /*Cor dos links*/
}
.askAnywhere-username { /*nome de usuario*/
  padding-bottom: 3px;
  border-bottom: dotted 1px #fff; /*bordinha baixo do nome*/
  word-wrap: break-word; /*não mexa*/
color: #fff; /*cor do nome de usuário*/
background:#ccc; /*cor de fundo do nome de usuário(caso queira) se não quiser apague esta linha*/
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
}
.askAnywhere-username-link { /*Link do nome de usuário sem hover*/
  display: block; /*não mexa*/
  color: #fff; /*cor do link do nome de usuário*/
  text-decoration: none; /*não mexa*/
transition-duration:1s; /*não mexa*/
}
.askAnywhere-username-link:hover { /*Link do usuário Hover, ao passar o mouse */
color: #fa6955; /*cor do link hover*/
transition-duration:1s; /*não mexa*/
}
.askAnywhere-slogan { /*Área do cabeçalho(faça me uma pergunta)*/
  padding-top: 3px;
  font-weight: bold;
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
  color: #fff; /*cor da fonte do ""Faça me uma pergunta""*/
  word-wrap: break-word;
}
.askAnywhere-box {
  padding: 10px;
  font-size: 11px;
}
.askAnywhere-input { /*local da área de digitar1*/
  display: block;
  width: 100%;
  max-width: 100%;
  height: 65px;
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
  max-height: 160px;
  padding: 0px;
  border: solid 1px #fff;
  text-align: left;
  overflow: auto;
}
.askAnywhere-button {  /*Botão "Perguntar"*/
  display: block; /*não mexa */
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
  padding: 3px; /*espaço interno*/
  margin-top: 10px; /*espaço entre o topo*/
background: #fff;  /*cor de fndo do botão perguntar*/
color: #FA8072; /*cor da fonte do botão perguntar*/
border:1px solid #fcafc0; /*bordinha do botão perguntar*/
box-shadow:none; /*não mexa */
border-radius: 9px; /*bordas arredondadas, aumente ou diminua!*/
;transition-duration:1s;/*não mexa */
}
.askAnywhere-button:hover {/*Botão "Perguntar" hover*/
background: #fff;/*cor de fndo do botão perguntar hover*/
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
color: #999; /*cor da fonte do botão perguntar hover*/
border-radius: 0px; /*bordas arredondadas em hover*/
transition-duration:1s; /*não mexa*/
cursor:pointer; /*não mexa*/
}
#askAnywhere_question_form { /*área de digitar2*/
  margin: 0;
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
  padding: 0;
}
#askAnywhere_input_layer,
#askAnywhere_captcha_layer { /*área de digitar3*/
  padding-top: 3px;
  color: #ccc; /*cor da fonte ao digitar*/
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
}
#captcha { /*não mexa*/
  display: block;
  width: 90px;
  padding: 8px 4px;
  margin-top: 5px;
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
  border: solid 1px #000000;
}
div.fieldWithErrors input,
div.fieldWithErrors textarea { /*área dos 'erros', tipo se caso der errado sua pergunta*/
  background: #FA8072; /*não mexa*/
  font-family: pf arma five; /*Tipo de fonte(para que fique igual a minha deixe assim)*/
  font-size:8px; /*tamanho da fonte (para que fique igual a minha deixe assim)*/
}

Pronto gente, só isso. É um código grande eu sei. Mas isso é como se fosse o HTML de um blog, mas é pra uma caixinha da Ask, deem um desconto. E lembre-se você muda o tamanho na hora de pegar o código para colocar na sidebar. Aonde vocês virem   width="120" height="275" é só trocar os valores pelo tamanho da caixinha que você quer. Lembrando que width é largura e height é altura, depois é só ajustar e ser feliz :) e aproveitando podem pedir algo na minha ask aqui u.u ? Ficaria agradecida. Ah, não repasse sem creditar, exclusivo u.u 

10 comentários:

  1. Não sei se já tinha dito mas já tinha votado quando pediste pela primeira vez.
    É um bom tutorial mas não tenho tumblr nem ask
    querosabertudo-k.blogspot.com

    ResponderExcluir
    Respostas
    1. Já disse sim Cátia.
      Obrigada, então cria uma, eles são bem prestativas!

      Excluir
  2. HUE eu já tinha votado na enquete.


    Gostei do tuto acho que vou mudar a ask lá do blog ahua gostei bastante desse modelo.

    forever-teens-89.blogspot.com

    ResponderExcluir
    Respostas
    1. LoL Obrigada!

      Muda sim, fica super fofo :33

      Excluir
  3. Respostas
    1. *0* Pois é, é exclusivo daqui u.u

      Usa sim, fica super lindo :33

      Excluir
  4. Vou usar esse tuto no lay que estou fazendo muito útil ♥_♥

    Beijos ♡
    Sweet World ~Aguardo sua visita

    ResponderExcluir
  5. Já votei :3
    Amei essa caixinha da ask, usarei no próximo layout :33
    Beijos ♡
    Garotas Atrevidas ❤ ~estou aguardando sua visita!

    ResponderExcluir
  6. Amei!! Muito lindinha!! Aceita afiliação? coisinhasdegarotas01.blogspot.com.br Beijoos

    ResponderExcluir
  7. Eu não uso a ask, mas se tivesse, usaria. Fica muito fofinho, bem melhor personalizado ♥
    Seguindo aqui, segue lá se gostar?
    Beijos ♡
    Sim Senhorita (Clique aqui ou no perfil)
    @SiimSenhorita

    ResponderExcluir

Hey, que bom que irá comentar! Mas, leia as regras;

- Comente sobre o post >3<
- Deixe o link do seu blog no final, retribuirei
- Respondo todos os comentários
- Retribuo todos os comentários
- Não comente besteira, nem seja racista :3
- Criticas construtivas são bem vindas :D
- Sigo de Volta todos que me seguirem primeiro.