Conjunto para layout: Azul turquesa

Hey!

Trouxe acessórios para seu layout da cor azul turquesa:

Gostou da cor?! Então bora lá!

Faixa para título do gadget:

Para coloca-lá, procure por /* Mobile e acima dessa tag cole:

.sidebar .widget h2{
background: url(URL da faixinha)  no-repeat left;
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
padding:15px;
width:150%;
overflow:hidden;
}

 Fonte para título do post:

Saiba como colocar no título do post aqui.

Cor hexadeciamal: 

#10c9c1

Leia Mais:

(tutorial aqui)

Backgrounds

(Primeiro)

(Segundo)

 Tutorial de como aplica-los ao blog aqui.

Caramba, essas coisas ficaram tão lindas que eu acho que até eu vou usar haha!

xoxo

Debate: "Seguindo, segue de volta?"

Muitas blogueiras tem um certo problema com o famoso "seguindo, segue de volta?". Eu sei lá, mas eu não tenho nada contra isso. Eu criei o blog em 2010, no começo de 2012, criei um fc da Avril Lavigne no Twitter, e percebi que lá é completamente diferente aqui. 

Lá as pessoas te seguem e lascam um 'sdv?' ou 'seguindo meu cupcake de amora, segue de volta diva?'. E é assim que as pessoas conseguem mais de dez mil seguidores sem problema algum de pintar um follow no seu fc, e elogiar sua capa ou icon, dizer que ama o famoso e que vai te colocar no #FF na sexta feira. Perguntar de onde você é, qual o seu nome, sua idade, que outros artistas você gosta, e ai você fica tão amiga da pessoa que não abandona o seu fc. Recebe dezenas de rts, avalia o fc dos outros, e até xinga, porquê as pessoas não estão nem ai!

Já no blog é diferente. Você lê a postagem, segue o blog e é só chegar com um 'segue de volta' que a blogueira (o) já explode num post com até leia mais sobre a falta de consideração dos seus leitores, e faz campanhas, quase denuncia você. Agora me responde: Como eu vou conseguir seguidores sem pedir para seguir de volta? 

É estranho, porque o dono do blog já acha uma coisa meio ofensiva, sendo que é uma coisa tão simples seguir um blog! Por exemplo: O Helping HTML já está com quase 300 seguidores (\o/). Se eu visitar outros blogs e pedir para seguir de volta qual é o problema? Ahá! Parece que tem sim um problema! Ainda não descobri qual, mas segundo as blogueiras mais revoltadinhas tem e é um problema muito grave! 

Qualquer um pode chegar aqui e comentar: "Adorei o post, seguindo, segue de volta?". Provavelmente a pessoa leu pelo menos o título da sua postagem e olhou por cima, ela sabe do que se trata, tanto que se o título da postagem for 'Vou deixar o blog' ela não vai mais comentar ali porquê ela sabe que a blogueira (o) não vai mais ler seus comentários. O comentarista não seguiu seu blog? Não contribuiu para sua alegria de quando alcançar sua meta? Qual o problema de você contribuir em alcançar a dele?

Pense bem!

xoxo

Background na barra lateral

Bom dia/tarde/noite! 

Como vão vocês?

Estou postando pouco né? :/ Enfim, para compensar isso vim com um tutorial muito útil para a personalização do seu blog na área da sidebar, onde ficam os gadgets. Talvez, não funcione se sua sidebar ser editada com algum modelo, mas vale a pena tentar :)

1. Abra o seu html e dê ctrl F. 

Atenção! 

Se sua barra lateral for na direita, procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Se sua barra lateral foi na esquerda, procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {  

Depois de achar, faça o que pede aqui.

E substitua por: 

url(LINK DA IMAGEM) repeat; 

Substitua (link da imagem) pela url do seu background.
Indico um simples, no máximo um floral com leve opacidade ;)
xoxo
Créditos do post: Kawaii World

Ilustrações para post - Variados

Ezria *--*

Hey! 

Tudo bom com vocês? 

Hoje eu trouxe ilustrações para post não editadas, porquê estou sem tempo...

Enfim, let go!

Dois backgrounds + Backgrounds de icons

Visitem o blog: Cute Teen :)

Bom dia/tarde/noite! 

No post passado, me pediram para postar com eu coloquei o background no banner. Na verdade, isso não nada mais nada menos do que o famoso tutorial de dois backgrounds no blog, mas em vez de um bg normal, um de icons, que são aqueles com várias fotinhos de famosos ou até mesmo coisas. 

Exemplos:

Deu para entender, né?

Então vamos ao tutorial!

1 - Vá até o seu html, presione Ctrl F e procure por

body {

Lá terá algo assim:

body {  font: $(body.font);  color: $(body.text.color);  background: $(body.background);

} 

2- Apague todo o código acima e substitua por:

body, html {

 height: 300px;

 margin: 0;

 padding: 0;  }

body {

 font: $(body.font);

color: $(body.text.color);

background: url("URL do 1º background") repeat; }

html {

 background: url("URL do 2º background") repeat; }

O primeiro background seria o de icons, o que vai ficar no fundo do banner.
E o segundo é o normal.

Backgrounds de icons:
Resolvi fazer alguns para vocês usarem.
Proibido reblogar!

Os backgrounds foram feitos com os icons do Inside Icons :)

xoxo

Menu com efeito autores

Aiww Alison...

Hey!

Vi um menu lá no Kawaii World e achei muito lindo, quis compartilhar com ocês aqui >.<

Vamos lá?

 1. Abra no seu html, precione Ctrl F ou F3 e procure por:

]]></b:skin>

2. Antes dessa tag, cole:

view {
cursor: pointer;
height: ALTURApx;
margin: 1px;
overflow: hidden;
position: relative;
text-align: center;
width: LARGURApx;
display: inline-block;
}
.view img { /* a imagem */
display: inline-block;
position: relative;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img { /* se "anima quando passamos o mouse em cima */
-moz-transform: rotate(620deg) scale(0);
-webkit-transform: rotate(620deg) scale(0);
-o-transform: rotate(620deg) scale(0);
-ms-transform: rotate(620deg) scale(0);
transform: rotate(620deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask {
background-color: #CORDOFUNDO;
height: ALTURApx;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: LARGURApx;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask {
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);}
.view h4 {
background-color: #CORDAFAIXA;
opacity: 0.8;
color: #CORDOTÍTULO;
text-align: center;
position: relative;
font-family: handy;
text-transform: uppercase;
font-size: 8px;
margin: 9px 0 0 0;
padding: 5px 0;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* título é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* o texto permanece oculto */
color: #fd0505;
font-family: pf arma five;
font-size: 8px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* texto é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* o link permanece oculto */
background-color: #CORDOBOTÃO;
border-radius: 5px;
box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset;
color: #FFF;
display: inline-block;
padding: 2px 10px;
text-decoration: none;
margin-top: 8px;
font-family: handy;
font-size: 8px;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #968ca3;
}
.view:hover a.info { /* link é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}

Depois desse código gigante, save o modelo.
3. Vá em layout e adicione um gadget de html e cole:

<div class="view">
<img src="URL DA FOTO" />
<div class="mask">
<h4>NOME</h4>
<a href="LINK" class="info">Visite!</a>
</div></div>

O resultado será assim:

Aqui é o efeito hover,/ e aqui é o normal 

Ilustrações para posts - Coreanas

Yoo ~~

Percebi que vocês gostaram bastante das ilustrações para post de doces, então decidi postar de coreanas. 

As coreanas são muito bonitas e bem famosas em fotos na internet, tanto em fotos quando no layout de alguns blog. 

Let go?

Pouquinhas, né?

Amanhã tem mais :)

xoxo

Paleta de cores

Yoo >.<

O que acharam do novo layout? Eu achei que ficou bem bonito u.u

Enfim, hoje eu trouxe algumas cores para vocês usarem em layouts. Proibido reblogar!

Fontes + Como baixar

Yoo!

Fico feliz que tenham gostado das imagens do último post ^.^ também gostei do resultado u.u

Hoje temos fontes super lindas que achei no site que eu baixo mesmo, o FontSpace.

Antes da fonte tem um mini tutorial de como baixar (super fácil).

Tutorial:

Nesse tutorial eu vou baixar a fonte Isabelle Layner. 

Clique no link da sua fonte e clique em Download. Irá aparecer uma abinha tipo essa:

Clique nela. Vai aparecer um monte de 'fileirinhas', clique na que estiver com esse ícon , clique nele e em seguida, clique em 'Instalar'. Quando o botão de Instalar estiver bloqueado, é que o download está pronto! >.< 

Fontes: 

Agora que já aprendemos a baixar, vamos as fontes! 

Espero que tenham gostado!

xoxo