03 setembro 2015

Picbox #2

| |
Olá! Queria me desculpar pela demora para postar alguma coisa. Eu estou um muito pouco estressada por causa da escola, então me afastei um pouco do blog. Quero entrar em uma escola militar, por isso preciso estudar muito nesse semestre.

Bem, vamos parar com esse papo depressivo e vamos falar de coisas boas \o/ Aqui estou eu, trazendo outro modelo de picbox que eu fiz séculos atrás, mas acabei não postando por preguiça. (x)

Antes de ir direto ao assunto, gostaria de avisar que eu estou preparando alguns templates que em breve estarão disponíveis no EAH T&T. Estão ficando legais, então estou ansiosa para disponibiliza-los ;-;



1. Procure por ]]>< . Acima do trecho que achou, cole este código:

.nomee-isa {
height: 100px; /* Coloque o tamanho da imagem */
width: 100px; /* Coloque o tamanho da imagem */
font: 13px trebuchet ms; /* Tamanho e tipo de fonte */
text-transform: uppercase;
background: transparent;
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
.nomee-isa b {
margin-right: -1px; /* Muda o título de posição */
color: #a7d7e9; /* Cor do negrito */
text-shadow: 1px 1px 1px #; /* sombra do negrito, se quiser */}
.nomee-isa a {
background: transparent;
margin-right: -1px; /* Muda  link de posição */
color: #b3d6e9; /* Cor do link */
text-decoration: none;
font-size: 11px; /* Tamanho da fonte do link */
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
#caixa-isa .boxx-isa {
-webkit-border-radius:7px;
-moz-border-radius:7px;
-o-border-radius:7px;
-ie-border-radius:7px;
-border-radius:7px;
text-align: center;
width: 100px; /* Largura da imagem*/
height: 100px; /* Altura da imagem */
margin-top: -103px; /* Posicao do quadrado - Mude até estar no centro */
-webkit-transform: scale(0.9);
-mox-transform: scale(0.9);
-o-transform: scale(0.9);
-ie-transform: scale(0.9);
opacity: 0;
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;
}
#caixa-isa .boxx-isa:hover {
-webkit-transform: scale(0.9);
-mox-transform: scale(0.9);
-o-transform: scale(0.9);
-ie-transform: scale(0.9);
-webkit-border-radius:7px;
-moz-border-radius:7px;
-o-border-radius:7px;
-ie-border-radius:7px;
-border-radius:7px;
text-align: center;
width: 100px; /* Largura da imagem*/
height: 100px; /* Altura da imagem */
margin-top: -103px;  /* Posicao do quadrado - Mesma de cima */
opacity: 0.9;
background: #efefef; /* Cor do fundo hover */
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;
}

2. Após modificar tudo que está destacado no código acima, vá em 'Layout' > 'Adicionar um Gadget' > 'HTML/JavaScript' e cole:

<div id="caixa-isa">
<img src="http://40.media.tumblr.com/c364e7944d3a82d1380ae9554ad234c9/tumblr_inline_npnlkb0jdD1t0yr27_540.png" style="-webkit-border-radius: 7px; -moz-border-radius: BORDApx; -o-border-radius: BORDApx; -ie-border-radius: 7px;"><div class="boxx-isa"><br><center><div class="nomee-isa"><b>Isa Souza</b><br><a href="http://link">euamohtml</a></div>
$ $ $

Espero que tenham gostado do tutorial. Se encontrarem algum problema com o código ou o exemplo, peço que vá até a minha ask e me avise. Obrigada <3

5 comentários:

  1. Oi Iza, como vai?
    Entendo muito bem seu afastamento, a escola militar cobra muito de seus alunos mas sempre recebe uma boa educação. Espero de coração que você consiga entrar 'u'
    Sobre a Picbox, gostei muito <3
    Kisu ~ Bleeding

    ResponderExcluir
  2. Oláa! Adorei o post e seu blog super fofo ~^-^~ e o tuto ótimo ^^ adorei!
    beijos!

    http://cloundforhtml.blogspot.com.br/

    ResponderExcluir
  3. Olá Isa ♡
    De verdade, eu não sei como funciona as escolas militares, e é até bom você se esforçar para fazer aquilo que você quer, e não o que te obrigam a fazer e você não goste. Se você acha que uma escola militar está boa para você, então vá em frente! Estude muito e passe! Espero muitas sortes para você! Que lindo esse modelo de Picbox, nunca vi. Achei legal o efeito, bem raro. Oba, templates! Eu gosto muito de ve-los, acho que vou usar mesmo sem saber como ele é! Hahahahah~ Sei que você fará um bom trabalho!

    ♡ cake-sugar.blogspot.com ♔ - ✌ Cake Sugar - 최고의 블로그 중 하나

    ResponderExcluir
  4. Olá Isa, tudo bem? Vish, boa sorte com a sua escola e com os seus estudos, sei que você vai conseguir. Não consigo imaginar como é uma escola militar mas creio que seja bem rígido -q.

    Adorei a picbox, ela é tão fofa. É uma coisa bem útil e pratica de usar ><.

    Chu~ Sugar Free

    ResponderExcluir
  5. Oi, Isa~ Woah, escola militar? Deve ser algo bem rígido, não? Boa sorte! Estou ansiosa para ver os layouts que irá disponibilizar, seus layouts são sempre tão lindos e agradáveis, aposto que estes também estarão.
    Que amor essa picbox, é bem fácil de usar. Como sempre, ótimo tutorial ♡

    strawpanic.blogspot.com.br

    ResponderExcluir

« »