22/03/2013

Widget do ask.fm personalizado


Boa noite, pessoas da Terra

Estou fazendo esta postagens nas pressas porquê vou para uma festa de 15 anos daqui a pouco. Bem, estou em pé, e não é legal postar em pé, por isso, não reparem nos erros ortográficos. Bem, desculpem pelo sumiço, minha rotina anda meio puxada e estou super sem inspiração. Bom. . . Eu tinha muita coisa para falar mas não vai dar para digitar então vão lá no Rain Of Thoughts para saberem o que aconteceu comigo esse tempos. Gostaram do novas ilustrações?, OK, ficou brega mas não deu tempo de fazer outra com efeito porque, como eu disse, estou em pé o.k.?

Trouxe um tuto por causa da pressa e falta de inpiração. Próximo post trarei um utilitário, vou tentar transformar um efeito de tumblr para blogger para vocês. Lembrando, que esse tutorial é totalmente do Cherry Bomb





Depois clique na opção widget, e quando a página carregar, clique em "Editar CSS" lá no final.


Vai abrir uma janelinha com o código CSS. Apague tudo que tiver lá, e no lugar cole o código a seguir:

body {
  margin: 0;
  padding: 0;
  background-color: none;
  overflow: hidden;
  font-family: Arial; /*Fonte geral do widget*/
}
.askAnywhere-link {
  color: #d24858; /*Cor dos links do widget*/
}
.askAnywhere-username {
  padding: 5px;
font-size: 11px; /*Fonte do nome de usuário*/
 background: #4b2512; /*Fundo do nome de usuário, apague essa linha se não quiser*/
  word-wrap: break-word;
}
.askAnywhere-username-link {
  display: block;
  color: #fff; /*Cor do nome de usuário*/
  text-decoration: none;
}
.askAnywhere-slogan {
  padding-top: 3px;
  font-weight: normal;
  color: #f85761; /*Cor da mensagem*/
  word-wrap: break-word;
font-size: 11px; /*Tamanho da fonte da mensagem*/
font-family: Verdana; /*Fonte da mensagem*/
}
.askAnywhere-box {
  padding: 10px;
  font-size: 11px;
}
.askAnywhere-input {
  display: block;
  width: 250px; /*Largura da caixa de texto*/
  max-width: 250px; /*Largura da caixa de texto (repita)*/
  height: 55px; /*Altura da caixa de texto*/
  max-height: 160px;
  padding: 0px;
  border: solid 1px #000; /*Borda da caixa de texto*/
  text-align: left;
  overflow: auto;
}
.askAnywhere-button {
background: #f85761; /*Fundo do botão "perguntar"*/
color: #fff; /*Cor da fonte do botão*/
border: none;
display: block;
padding: 3px 3px;
margin-top: 10px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
.askAnywhere-button:hover {
background: #cdeb8e; /*Fundo do botão quando passar o mouse*/
color: #000; /*Cor da fonte do botão quando passar o mouse*/
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
#askAnywhere_question_form {
  margin: 0;
  padding: 0;
}
#askAnywhere_input_layer,
#askAnywhere_captcha_layer {
  padding-top: 3px;
  color: #fff;
}
#captcha {
  display: block;
  width: 90px;
  padding: 8px 4px;
  margin-top: 5px;
  border: solid 1px #000000;
  font-size: 14px;
}
div.fieldWithErrors input,
div.fieldWithErrors textarea {
  background: #fff;
}

 Quando terminar as modificações, clique no botão salvar.
Para por o widget no blog, é só copiar o código que aparece logo abaixo da palavra "Código" e colar ele em um gadget de HTML/Javascript.

Atenção: Se você por o código do jeito que copiou, pode ser que a caixinha fique "cortada" e com um espaço em branco embaixo dela. Isso pode ser resolvido de maneira simples. Veja:

O código que você colou no widget é mais ou menos assim:

<iframe src="http://ask.fm/widget/dfdcbb4a12787c9467bf2bdeb549b292d58c2efb?stylesheet=custom&lang=21" frameborder="0" scrolling="no" width="120"height="275" style="border:none;"></iframe>

Onde está escrito width, altere o número 120 por um valor que seja um pouco maior que a largura que você colocou no css. Por exemplo, no meu a largura foi 250 então eu coloquei 270 no lugar de 120.

Onde está escrito height, troque o número 275 por 150.

6 comentários:

  1. Gostei do novo estilo de imagem ^.^ Ficou diferente..
    E gostei do tutorial.
    Ah , mandei um e-mail para todas as postadoras com a textura de pixel e com a onda d'água , que usamos lá no blog , ok ?

    Abraços!

    http://pensamento-jhenny.tk/

    ResponderExcluir
    Respostas
    1. Que bom que gostou, eu estava até com medo de pagar mico!.
      Ótimo, e perguntinha: onde achou essas ondinhas? são tão lindas *-*

      Excluir
  2. Não tenho ask hehe, mas adorei o tuto >.<
    http://novajuventudexxi.blogspot.com.br

    ResponderExcluir
  3. Amei o tuto, eu uso o widget do ask, mas agr vou personalizar ele *u*
    Ajudou muito. Amei o Blog, já to seguindo, pode seguir de volta? Por favor.

    E pode passar lá? Bj

    http://ithe-clouds.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Bem, não aceito seguindo segue de volta. . . Mas como gostei muito do seu blog. . .

      Excluir



Por favor, não peça nada pelos comentários, para isso temos a nossa Ask.

Os comentários daqueles que não se indentificarem seram publicados, mas não serão respondidos.

A moderação de comentários está ativa, tome cuidado com o que fala!

Pedidos de afiliação só ná página de afiliados

Não respondo mais comentários do tipo "seguindo segue de volta?"

Nao tenha preguiça de comentar, comentar nã vai fazer seus dedos caírem.