13 de ago. de 2014
⋆ Efeito Rock
Ō1 - Abra a foto e cliqe em AVIVAR :
Tipo : (eu usei o obscurecido, mais vc pode usaro qe ficar melhor na foto ) deixe tudo como está e de okŌ2 - Alto nivel - altoŌ3 - Clique em BRILHO, COR e ajuste assim :× Brilho - 100× Escurecer - 100× Exposição - 0.91× Gamma briho - 1.60× Contraste - 63× Saturação - 14 e de Ok;
((OPCIONAL):
Brilho,cor - sépia
Filtro - efeito filme - processo cruzado - baixo
Filtro - vinheta - #2Brilho,cor - sépiaFiltro - efeito filme - processo cruzado - baixoFiltro - vinheta - #2
Resultado:
Tipo : (eu usei o obscurecido, mais vc pode usaro qe ficar melhor na foto ) deixe tudo como está e de okŌ2 - Alto nivel - altoŌ3 - Clique em BRILHO, COR e ajuste assim :× Brilho - 100× Escurecer - 100× Exposição - 0.91× Gamma briho - 1.60× Contraste - 63× Saturação - 14 e de Ok;
((OPCIONAL):
Brilho,cor - sépia
Filtro - efeito filme - processo cruzado - baixo
Filtro - vinheta - #2Brilho,cor - sépiaFiltro - efeito filme - processo cruzado - baixoFiltro - vinheta - #2
Resultado:
Foto de : Minha Vida , Tuto de : Blog da Laah
Efeito Fake-Doll Scape - PhotoScape
O1. Abra o seu PhotoScape, clique em "Editor" e fique na ala "Início".
O2. Abra uma foto e clique em:
× Filtro > Redução de Ruído (Apaga Visual) > Alto
× Brilho, cor {Clique no centro do botão}. Ponha a "Exposição" em 1.40 e dê "OK".
× Filtro > Efeito Filme > Cinema - Baixo
× Filtro > Efeito Filme > Velvia - Baixo
× Filtro > Efeito Filme > Portra - Baixo
× Brilho, cor > Melhora o Contraste > Médio
× Filtro > Efeito Filme > Provia - Baixo
× Afina > 7
× Filtro > Desfoque Inteligente (Apaga Visual) > 4.0
× Filtro > Redução de Ruído (Apaga Visual) > Alto
× Brilho, cor {Clique no centro do botão}. Ponha a "Exposição" em 1.40 e dê "OK".
× Filtro > Efeito Filme > Cinema - Baixo
× Filtro > Efeito Filme > Velvia - Baixo
× Filtro > Efeito Filme > Portra - Baixo
× Brilho, cor > Melhora o Contraste > Médio
× Filtro > Efeito Filme > Provia - Baixo
× Afina > 7
× Filtro > Desfoque Inteligente (Apaga Visual) > 4.0
O3. Pronto!
Foto e tuto : Minha Vida
Modelo de Data - Faixinha Virada + Faixinhas
Alguém me pediu modelos de data mas eu estava sem criatividade, então, resolvi postar esse que eu já usei muito...
Preview:
Eu simplesmente amo esse modelo de data, sem contar que dá pra colocar até mesmo em templates de duas sides, que não fica estranho nem atrapalha. Inclusive, estou colocando ele aqui no BC agora. -q Se quiserem usá-lo, é só seguir os passos:
Primeiro, abra o seu HTML e procure por .main-inner h2.date-header {. Apague esse código todo e substitua-o por este:
.main-inner h2.date-header {
position: absolute;
color: #fff; /* cor da fonte */
font-size: 10px; /* tamanho da fonte */
font-family: Tahoma; /* fonte */
text-shadow: 1px 1px 0px #ffb5b9; /* sombra da fonte */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGRoEVVsiDuodDvRoPIP8K022ZWsYKQv2Fwvo6Rn6Sn1BD-4cRjgEO9lzlOSRLl0ysKe4oE34HpZhj_6IdJiGXzzSwbxtKv6MmZYsYiz_Zpfd3aF-tH_in-QKP6CRDyuHg0fcXzJRuU8G/s65/1.png) no-repeat; /* imagem da faixinha */
height: 32px; /* altura da faixinha */
width: 65px; /* largura da faixinha */
padding-top: 8px;
padding-left: 5px;
z-index: 1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
margin-top: 11px; /* desce a faixinha */
margin-left: 555px; /* ajusta a faixinha à direita */
}
position: absolute;
color: #fff; /* cor da fonte */
font-size: 10px; /* tamanho da fonte */
font-family: Tahoma; /* fonte */
text-shadow: 1px 1px 0px #ffb5b9; /* sombra da fonte */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGRoEVVsiDuodDvRoPIP8K022ZWsYKQv2Fwvo6Rn6Sn1BD-4cRjgEO9lzlOSRLl0ysKe4oE34HpZhj_6IdJiGXzzSwbxtKv6MmZYsYiz_Zpfd3aF-tH_in-QKP6CRDyuHg0fcXzJRuU8G/s65/1.png) no-repeat; /* imagem da faixinha */
height: 32px; /* altura da faixinha */
width: 65px; /* largura da faixinha */
padding-top: 8px;
padding-left: 5px;
z-index: 1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
margin-top: 11px; /* desce a faixinha */
margin-left: 555px; /* ajusta a faixinha à direita */
}
Escolha a sua imagem dentre as que eu disponibilizei neste post e substitua o link no local indicado. Arrume a fonte e as cores como preferir, e utilizando as margins, posicione a faixinha à direita do seu post. Quando estiver bem posicionado, salve.
E pronto, sua data está prontinha. Lembrem-se de não modificar nada além do que foi indicado, certo? Senão, pode acabar ficando uma bagunça. As cores das faixinhas são variadas, mas caso nenhuma delas se adeque ao seu blog, podem ser mudadas à vontade no Photoshop ou em qualquer outro editor.
Faixinhas:
Espero que tenham gostado! E não se esqueçam de dar os créditos caso usem esse tutorial, okay?
See ya! ~♡
Feito por : Black Cherry
Modelos de Bordas para Postagem e Sidebar :3
Hey ya! ~♡
Por agora, trago dois modelos de bordas em CSS que podem ser usadas tanto na área de postagem quanto na sidebar. Eu as achei bem bonitas e gostei de fazê-las. Espero que curtam tanto quanto eu.
Preview:
Título do Post
Modelo de Bordas 1Título do Post
Modelo de Bordas 2Para usar qualquer um dos modelos na área de postagem, basta encontrar no HTML do Blogger o seguinte código:
.main-inner .column-center-outer {E substitui-lo por este (modelo de bordas 1) ou este (modelo de bordas 2).
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
Para usar na sidebar, procure por este código:
.sidebar .widget {E entre as chaves { e }, cole este código (modelo de bordas 1) ou este aqui (modelo de bordas 2).
Lembrem-se de não alterar nada além das cores, certo?See ya! ~♡
Feito por : Mari Mysteria
Menu - Outline ♡
trago para vocês um menuzinho, o primeiro de muitos que ando pensando em fazer. Ele é bem bonitinho, fica bom pra se usar acima da área de posts ou mesmo numa faixinha no topo, mas não recomendo muito pra side, por ser meio grandinho.
Querem ver como fica?
Demo (tem hover, passem o mouse em cima! \o/):
Para usar esse menu, siga os passinhos abaixo:
Primeiro, procure no seu HTML pela tag ]]></b:skin>. Achou? Ótimo, agora, é só colar o código a seguir imediatamente acima dessa tag:
Dê uma olhada no seu blog para ver se está tudo bem, e se estiver, salve as alterações. Depois, é só criar um gadget HTML/Javascript onde quiser que o menu apareça e colar o seguinte dentro dele:
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
Pode repetir o código do gadget quantas vezes forem necessárias para ocupar todas as suas páginas, e é só substituir os # pelos links e onde está escrito Menu pelos nomes das suas páginas. ^3^'
Espero que tenham gostado. Lembrem-se apenas de não modificar nada além das cores, certo?
See ya! ~♡
por : Mari Mysteria
Querem ver como fica?
Demo (tem hover, passem o mouse em cima! \o/):
Primeiro, procure no seu HTML pela tag ]]></b:skin>. Achou? Ótimo, agora, é só colar o código a seguir imediatamente acima dessa tag:
.outline {
background: #EFCDCC;
border: 1px solid #E3BABE;
font-size: 12px;
font-family: Open Sans;
color: #fff;
padding: 1px 10px 1px 10px;
width: 60px;
text-align: center;
text-shadow: 1px 1px 0px #E3BABE;
margin: 1px;
display: inline-block;
outline: 1px solid #F8E4D9;
outline-offset: -2px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
}
.outline:hover {
background: #F5DDD3;
border: 1px solid #F8E4D9;
color: #E3BABE;
padding: 1px 10px 1px 10px;
text-align: center;
text-shadow: 1px 1px 0px #FEF4EF;
margin: 1px;
display: inline-block;
outline: 1px solid #F8F2EE;
outline-offset: -2px;
}
background: #EFCDCC;
border: 1px solid #E3BABE;
font-size: 12px;
font-family: Open Sans;
color: #fff;
padding: 1px 10px 1px 10px;
width: 60px;
text-align: center;
text-shadow: 1px 1px 0px #E3BABE;
margin: 1px;
display: inline-block;
outline: 1px solid #F8E4D9;
outline-offset: -2px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
}
.outline:hover {
background: #F5DDD3;
border: 1px solid #F8E4D9;
color: #E3BABE;
padding: 1px 10px 1px 10px;
text-align: center;
text-shadow: 1px 1px 0px #FEF4EF;
margin: 1px;
display: inline-block;
outline: 1px solid #F8F2EE;
outline-offset: -2px;
}
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
Pode repetir o código do gadget quantas vezes forem necessárias para ocupar todas as suas páginas, e é só substituir os # pelos links e onde está escrito Menu pelos nomes das suas páginas. ^3^'
Espero que tenham gostado. Lembrem-se apenas de não modificar nada além das cores, certo?
See ya! ~♡
por : Mari Mysteria
11 de ago. de 2014
Ooooi cats !
Bom Amoores ,Eu acabei de criar o blog , então vi ter uma coisinha chata ali outras Legais ali , Bom em fim Eu já criei varios blos,sites,fã clubes mais era em editores mais facies de se mexer ... Então ficava bonitinho com toques de profissionais ... Só que cansei deles oque eu usava era o Webnode , Weebly , Wix Vcs podem usar , Eu recomendo mais o Webnode é mais facil e fica a sua cara por que vc coloca o que vc quiser Okk ! Bom só vim avisar que sou novata ! . Obrigado espero que gostem do Blog ! .
Assinar:
Postagens
(Atom)
