Tutorial - Gadget de Autoras atual


Yoo~

Queria dizer que já achei uma postadora para o blog ela se chama Carol Azevedo e é do desse blog, ela já está na equipe mais só vai começar a postar daqui uma semana por que nessa semana ela entra em provas e eu respeito isso.

Bom foi a Carol que pediu na ask o tutorial de como se faz esse efeito que eu uso no gadget de autoras e eu vou amostrar para vocês como é, espero que usem.

Enjoy~




Vá até o HTML seu blog e pesquise por ]]></b:skin> acima desta tag cole:
figure { margin: 3px;width: 70px; height: 100px; /*Tamanho da imagem*/overflow: hidden; position: relative;border: 2px solid #EE0456; /*Borda da imagem*/margin-right: 3px;float: left;}figcaption {font-family: calibri; /*fonte do nome da postadora*/font-size: 14px; /*tamanho da fonte*/position: absolute;display: block;width: 50px; height: 20px; left: 80px;bottom: 5px;text-align: center;color: #000000;  /*cor da fonte*/text-shadow: none;background: #fff;   /*fundo do nome da postadora*/border: 3px solid #EE0456;  /*Borda*/line-height: 20px; box-shadow: rgba(0,0,0,.5) 0 2px 8px;-webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg); transition-duration: 70s; -webkit-transition-duration:0.70s;}figure:hover figcaption { left: 20px;bottom: 2px; }
Edite as partes em negrito se quiser. Pronto visualize se estiver tudo ok salve.

Agora vá em "Layout" e adicione um gadget HTML/Javascript e cole:

<a href="URL DO BLOG DA AUTORA1"><figure><img src="IMAGEM DA AUTORA1" width="75" alt=""/><figcaption>NOME DA AUTORA1</figcaption></figure></a><a href="URL DO BLOG DA AUTORA2"><figure><img src="IMAGEM DA AUTORA2" width="75" alt="" /><figcaption>NOME DA AUTORA2</figcaption></figure></a><a href="URL DO BLOG DA AUTORA3"><figure><img src="IMAGEM DA AUTORA3" width="75" alt="" /><figcaption>NOME DA AUTORA3</figcaption></figure></a>
O código está muito bem explicado, as imagens vocês mesmos podem fazer de acordo do tamanho que vocês botaram logo no inicio do código mais se quiserem que eu faça peçam na ask e digam de quem.

Espero ter ajudado e os créditos do tutorial vai ao blog Garota Estranha.

7 comentários:

  1. Eu tava doida com esse tuto! *O* favoritei!
    xoxo, vickie♥
    ~~>Chiclete Violeta//Clica no Perfil

    ResponderExcluir
  2. Rafaela, o meu e-mailé esse: caroline_azevedo@rocketmail.com, não pude colocá-lo todo na ask!

    ResponderExcluir
  3. own eu achei super fofo, mas eu prefiro o perfil normal sabe... mas arrasou! lelusantos.blogspot.com

    ResponderExcluir
  4. Adorei a dica, vou usar em um novo projeto com certeza ;)

    maio97.blogspot.com
    (sege que sigo de volto, aceito parcerias.)

    ResponderExcluir