terça-feira, 12 de fevereiro de 2013

Tedência: Shorts Coloridos

         Não é de hoje que essa moda existe, o short colorido volta e meia dá as caras quando o verão se aproxima. Com certeza a peça é super querida de muitas mulheres. Tanto em cor única como degradê, essa já é uma aposta para os dias quentes!

shorts coloridos

A opção é ótima pra variar as cores tradicionais de jeans preto, azul e branco. A melhor parte fica por conta das muitas possibilidades de looks diferentes que você pode montar. Os shorts coloridos combinam com blusas lisas ou estampadas.

Um grande diferencial para o verão 2013 está na customização. Aplicações de aviamentos, tachas, spikes, pedras, strass ou tingimento nos estilos de tie dye ou ombré estão em evidência.
Estilo ARCO-ÍRIS
Como fazer: 
1)Mergulhe um short jeans num balde com pó descolorante(aquele que você usa para descolorir os pelos) diluído em água, retire e ponha no sol, deixe lá por três horas,      até ficar totalmente branco.

2)Agora você vai pintar, use o tanto de cores de tecido que desejar para colorir seu short.

3)Com uma bisnaga, faça as faixas de cor em pé de uma vez só.

Estilo VINTAGE


Como fazer:
1)Coloque seu short em um balde com pó descolorante diluído em água , retire rápido e estenda no sol por poucos minutos. Fique olhando para não ficar branco, depois lave ele para tirar o produto.

2)Ponha um short num balde de tinta de tecido que desejar, deixe lá por cinco minutos ou até na cor que você goste.

3)Tire o excesso de tinta com água e deixe secar.Cole tachas se desejar.

Estilo DIP DYE


Como fazer:
1)Mergulhe seu short jeans no balde com água e pó descolorante diluído, retire e estenda no sol até ficar branquinho.
2)Amarre o short ao meio com um barbante para fazer a divisão das cores que você escolheu.
3)Mergulhe o short até alcançar o barbante na água com tinta de tecido.

4)Repita o passo anterior nas outras metades do short com a outra cor, tire o excesso de tinta em água corrente e deixe secar.



Estilo BANDEIRA AMERICANA 


Como fazer:
1)Com a tinta de tecido e um pincel faça as listras de um lado do seu short. Para ficar mais fácil cole fita nas espaços que você não vai usar e depois retire elas.





2)Pegue um papel duro e corte estrelas vazadas, serão o molde para o outro lado do short.


3)Deixe secar e depois com uma lixa, desfie o jeans nas laterais e na barra se preferir.


Estilo BLACK ROCK 



1)Preencha um ou os dois lados do short com tachas.


2)Do outro lado você pode fazer desenhos como cruz.
3)Para finalizar desfie as barras.


Estilo COLORIDO


Como fazer:
1)Pegue um balde com pó descolorante diluído e mergulhe o seu short, depois de um tempo retire o short e estenda no sol até que fique totalmente branco.


2)Pegue outro balde com tinta de tecido que preferir e mergulhe o short novamente.

3)Depois é só por no sol e está pronto.


               As saias também ficam lindas...









Hehehehe .. Volta as Aulas !

Chegou fevereiro: carnaval, volta as aulas e depois tudo volta a ser um tédio



Últimos dias de férias, é nessa hora que você percebe o quanto o tempo se passou. Você está louco para voltar, reencontrar seus amigos e até voltar a estudar. Mas é só chegar na escola que todo esse sentimento acaba, você até fica feliz em poder rever todos os seus “companheiros de bagunça”, mas é quando o professor entra na sala, com aquela cara de quem brigou em casa e quer aproveitar a raiva para começar a “pegar no pé” de alguém pelo ano todo, que você percebe que, na verdade, o que você sempre quis foram as férias, e então, bate aquela vontade louca de voltar correndo para casa, ligar o computador, entrar no twitter, no facebook, no msn, e todas as outras redes sociais e sites que você gosta e não sair de lá nunca mais.


quinta-feira, 17 de janeiro de 2013

Ribbons nas postagens





Ribbons são aquelas faixinhas que geralmente ficam nos gadgets, mais agora você pode colocar nas postagens. Vamos começar:


1°. Vá no HTML do seu blog
2°. Dê um Ctrl +F e procure por ]]></b:skin>
3°. Acima dessa Tag cole o código abaixo:

.ribbon {
background: url('url_da_imagem') no-repeat right;
width: 270px; /*Largura da imagem*/
height:52px; /*Altura da imagem*/
float: right; /*Posição do título (right-direita, left-esquerda)*/
text-align: center; /*Alinhamento do texto*/
font-family: Verdana; /*Fonte*/
color: #fff; /*Cor da fonte*/
font-size: 22px; /*Tamanho da letra*/
line-height: 60px; /*Altura da linha - coloque a altura da imagem ou numero maior*/
margin-right: -38px; /*Margem direita*/
margin-left: 0px /*Margem esquerda*/
}


Entendendo



Altere a altura e largura, fonte e etc onde se pede. Em float, você escolhe se quer o titulo alinhado a esquerda ou á direita. No código acima, está alinhado a direita (right), então se quiser alinhado á esquerda, troque right por left. 
Em margin-right, você ajusta os valores para "puxar" a ribbon mais para o lado e deixá-la alinhada com a borda da área das postagens. Como ela está posicionada á direita, colocamos uma margem direita negativa, para puxá-la mais para a direita. Se você decidir alinhar á esquerda, deverá deixar o valor demargin-right em 0px e colocar um valor negativo em margin-left para puxar a ribbon mais para esquerda, entendeu?




Aplicando



Para funcionar você precisa fazer o seguinte: Quando for fazer uma postagem, clique em HTML lá encima e coloque a palavra que você quer destacar entre as Tags <div class="ribbon"> e </div> como no exemplo:

          

Bom, é isso gente. Nem é tão difícil né? Espero que tenham gostado.
                                                                                                                                  

quarta-feira, 16 de janeiro de 2013

Marquee: Textos, Símbolos e Imagens em Movimento




Hoje trouxe um tuto bem legal e super simples, com efeito que com certeza você já viu em muitos sites, inclusive os crédito vai pra Flashvars, para quem deseja deixar frases, links, imagens ou recadinhos em destaque, tipo lá no topo, em que as coisas ficam deslizando. Basta colar os códigos onde quiser que apareça o marquee.
Para isso vamos utilizar o que é conhecido em HTML como marquee. Usando a criatividade dá para criar lindos efeitos; quem entende de arquivos em flash, pode até criar lindos marquees, ou como vejo pela web, flashvars (marquee em flash).
O código básico de um marquee é mais ou menos assim:

Conteúdo
<span style="color: COR DA FONTE;"><marquee direction="DIREÇÃO" style="background: #PLANO DE FUNDO;">CONTEÚDO</marquee></span>
Agora é só substituir algumas coisinhas para ficar como a gente quiser:
- caso queiram pegar os códigos das cores, clique aqui;
- em direção você escolhe para que lado o conteúdo vai se movimentar, que pode ser para a direita (right), esquerda (left), para cima (up), para baixo (down), estilo vai-e-volta (alternate), e por aí vai;
- o plano de fundo pode ser imagem ou cor e o conteúdo pode conter imagens e textos.
Exemplos:
Marquee para a esquerda...
<span style="color: yellow;"><marquee direction="left" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span> ...ou para a direita
<span style="color: yellow;"><marquee direction="right" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span> Marquee para cima...
<span style="color: yellow;"><marquee direction="up" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span> ...ou para baixo.
<span style="color: yellow;"><marquee direction="down" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span> ...Vai e vem ou vem e vai...
<span style="color: yellow;"><marquee behavior="alternate" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span>

A direção "alternate" funciona um pouquinho diferente, conforme vocês devem ter visto. Agora é só ir adicionando algumas coisinhas, estilos e moldando seu marquee. No código há espaço para add imagens; colocando uma ao lado da outra fica muito lindinho também. Por exemplo, se quiser colocar uma lista de links, afiliados, sites, redes sociais...use este código:
<center><marquee direction="left" style="background: #ffffff; border: 1px solid #fcc;"><a href="URL DO LINK1"><img src="URL DA IMAGEM1" target="_blank" title="Título" /></a><a href="URL DO LINK2"><img src="URL DA IMAGEM2" target="_blank" title="Título" /></a><a href="URL DO LINK3"><img src="URL DA IMAGEM3" target="_blank" title="Título" /></a></marquee></span></center>



Créditos dos Flashvars

segunda-feira, 14 de janeiro de 2013

Tutorial - Menu deslizante


Tumblr_ma04n1fvmf1qhurlto1_500_large

Oi gente, hoje eu vou postar o tutorial, todos os créditos vai ao Kawaii World,



 1 - Vá em Design > Editar HTML e procure por:


 ]]></b:skin>

2 - Acima da tag, cole:

/* Aqui definimos as propriedades CSS para a lista do menu */
ul#navigation {
    position: absolute;
    margin: -25px;
    padding: 0px;
    top: 0px;
    right: 150px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#d4d4d4; /*---cor de fundo---*/
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px dashed #8d898b;  /*---cor da borda---*/
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:13px;
    color:#3e3d3e; /*---cor do link---*/
    text-shadow: 0 -1px 1px #fff;
}
/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/
ul#navigation .home a{
background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/homee.png);
}
ul#navigation .sobre a      {
background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);
}
ul#navigation .foryou a    {
background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/fpryou.png);
}
ul#navigation .tutoriais a   {
    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/tuto.png);
}
ul#navigation .png a     {
    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/png.png);
}

Explicar o código levaria muito tempo, vou dar a vocês o básico:

position: absolute;

Se você trocar por fixed o seu menu vai acompanhar a rolagem da página.

opacity: 0.8;

Aumente o número se quiser diminuir a opacidade do fundo.

    margin: -25px; 

Aumente o número MANTENDO o - se tiver algum espacinho quando você passar o mouse. Vai fazer subir mais.

O resto está explicado entre "/*" no código.

3 - Procure por:
 </head>

4 - Acima da tag cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var d=300;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);
    });
    $(&#39;#navigation &gt; li&#39;).hover(
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-2px&#39;
        },200);
    },
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);
    }
);
});
</script>
5 - Agora procure por:
<header>
6 - Acima da tag cole:

<ul id='navigation'>
 <li class='home'><a href='URL-AQUI'><span>Home</span></a></li>
 <li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li>
 <li class='foryou'><a href='URL-AQUI'><span>For You</span></a></li>
 <li class='tutoriais'><a href='URL-AQUI'><span>Tutoriais</span></a></li>
 <li class='png'><a href='URL-AQUI'><span>Png's</span></a></li>
</ul>
Visualize e se estiver tudo certo salve, beijos!

Tutorial: Como remover o gadget "Attribution" do rodapé do blog


É para tirar aquele gadget chatinho do final do blog.
Vamos lá?
1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML e, em seguida, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

<b:section class='foot' id='footer-3' showaddelement='no'>

3. Ao encontrar o código que foi citado acima, você deverá mudar a palavra "no" para "yes".

4. Logo abaixo deste código, você verá este outro código:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
  ...altere a palavra "true" para "false". 

5. Clique em Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.
6. Agora acesse o menu Layout, e você verá que no final do seu template, o gadget de atribuição ficará disponível para ser excluído. Clique no link Editar e, em seguida, no botão Excluir, como mostra a imagem abaixo.

É isso pessoal :D Bem facinho.

Por hoje é só então,  Tchau o/

domingo, 13 de janeiro de 2013

Caixinha para Pão de Mel no Palito


      A caixinha foi elaborada, quando recebi uma sugestão para criar uma embalagem para pão de mel no palito.   Elas também podem ser usadas para bolo e outros doces no palito.


As caixinhas devem ser produzidas sob medida para se adequarem aos mais variados tamanhos dos doces no palito.  Espero que Gostem   , até o próximo.