Ola pessoal... como vao voces?!
Vim aqui disponibilizar alguns materiais em PNG (com fundo transparentes) para serem utilizados em layouts, capas, cabeçalhos, header e etc.
Voce ainda nao conhecia o meu blog? é a primeira vez que vem aqui? Então, não perca mais tempo, siga e fique por dentro de todas as novidades que rola por aqui... Sou apaixonada por blogs e layouts, sempre que posso disponibilizo uma personalização da minha autoria especialmente para os seguidores e visitantes assíduos! Clique em Leia mais e confira...
Você pode gostar também:
Imagens em PNG:
Bem, espero que vocês tenham gostado!
Pegou alguma imagem? Deixe um comentário!!!
Pegou alguma imagem? Deixe um comentário!!!
Os créditos desse tutorial vai para Elaine Gaspareto.
Então, vamos começar...
Va no painel do blog e clique na aba "Layout", a seguir clique em "Adicionar um gadget", escolha a opçao "HTML/JAVASCRIPT" e na janela que expandir cole o código:
Ola meu povo lindo, tudo bem com vocês?! Bem... como eu estou numa correria danada... vim compartilhar com vocês mais um tutorial para organizar os links do seu blog abaixo do titulo da postagem, como esta na imagem abaixo:
Os créditos vão para Cherry Bomb ♥
Entao, vamos começar:
Primeiro Passo:
Aperte Ctrl+F e procure por: <div class='post-footer-line post-footer-line-1'>
Irá mostrar dois resultados, o que queremos para este tutorial é o primeiro (1 de 2)
Você verá vários códigos depois deste que procurou. Selecione a partir de <div class='post-footer-line post-footer-line-1'> até </div> e apague.
Segundo Passo:
Agora aperte Ctrl+F novamente e procure por: <div class='post-header'>
Novamente teremos dois resultados, mas o que nos interessa é o primeiro.
Abaixo dessa linha que você procurou, cole o seguinte código:
Ola meu povo lindo, hoje vim compartilhar com voces algo que eu acho muito importante para o blog, que sao as assinaturas do autor com imagem, elas são muito importantes para o blog, principalmente se possui colaboradoras, pois assim cada uma recebe o crédito da sua postagem, ficando tudo mais facil.
O credito desse tutorial vai para Menina Nerd ♥
Então vamos começar:
No photoscape produza uma assinatura com fundo transparente em png e hospede-a em algum site de hospedagem gratuito, eu uso o TinyPic.
Agora va no HTML do seu blog dê Ctrl+F e procure por:
<div class='post-footer'>
Se for só você que posta no blog, cole logo acima dele o seguinte código:
<div align='right'>
<img src='URL DA IMAGEM' style='border:0px;'/></div>
Coloque a url da sua imagem na parte destacada do código. Depois visualize, se aparecer tudo certinho, salve.
Se seu blog possui colaboradores, o código é esse:
<div align='right'><b:if cond='data:post.author == "ESCREVA_AQUI_O_NOME_DO_AUTOR1"'>
<img src='URL da assinatura do 1º autor' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == "ESCREVA_AQUI_O_NOME_DO_AUTOR2"'>
<img src='URL da assinatura do 2º autor' style='border:0px;'/>
</b:if></div>
Obs: o Nome do Autor tem que ser escrito exatamente igualzinho como estar na Opção Autor no seu Blog. Exemplo:
Meu nome no Blog esta: Renata Massa
Se colocar no código: renata massa
Pode da algum erro! Por isso preste atenção!
Substitua os links. Depois visualize, se aparecer tudo certo, salve.
Bem, espero que isso ajude a manter seu blog mais Organizado e visível.
um forte abraço a todos!
Ola meu povo lindo!!!
Como vão vocês?
Como todos sabem, sempre que posso trago uma novidade para vocês;
E como prometido, trago mais um layout free exclusivo em agradecimento aos 300 seguidores ♥ Eêêêêê \o/
Observação:
♥ Cabeçalho prontos >> Clique Aqui <<
Como vão vocês?
Como todos sabem, sempre que posso trago uma novidade para vocês;
E como prometido, trago mais um layout free exclusivo em agradecimento aos 300 seguidores ♥ Eêêêêê \o/
Me ajudem SEGUINDO aqui o Blog, NÃO CUSTA nada,
fazendo isso você estará me ajudando a divulga-lo ♥
Layout simples em Degradê
Layout simples em Degradê
Quer um Layout Personalizado Exclusivo para seu blog? >>> CLIQUE AQUI
- A foto de perfil arredondadas com os ícones de redes sociais, confiram no link abaixo.
- Mesmo que você for mudar alguma coisa no layout, Nao retirem os créditos.
- Se você gostou e vai usa-lo, me mande o link para eu ver como ficou no seu blog ♥
- O titulo do Blog estar personalizado com a font "Quicksand"
- Na parte do cabeçalho onde tem escrito "Feito por Renata Massa" , você troca pelo
- Para quem não sabe instalar layout no arquivo XML, basta clicar AQUI e fazer o download dos códigos no bloco de notas, basta selecionar tudo (ctrl+A), depois copiar (ctrl+C) e por fim, la no modelo html do seu blog, depois de ter feito o BACKUP, apague todo o código e substitua por esse ai em cima. (
dessa forma você perde algumas gadget da sidebar)
♥ Cabeçalho prontos >> Clique Aqui <<
♥ Personalizar a Gadget com ícones das redes sociais >> Clique Aqui <<
♥ Outros Layouts Free >> Clique Aqui <<
Ate o próximo post!!! ♥
In
Beleza,
Dicas
Repostagem: Aprenda a Cachear o cabelo em poucos minutos. Simples, pratico e rápido.
Bem meninas, ontem eu vi no facebook do cabeleireiro Paulinnho , ele compartilhando essa dica maravilhosa, eu amei, e não pensei duas vezes em testar e vim compartilhar com vocês!!
Para isso, vai precisar de:
- Uma chapinha
- Pedaços de papel laminado (já cortados)
A técnica é muito simples...
Com o cabelo já lavado e escovado, divida em duas partes e vá envolvendo mechas por mechas no papel laminado.
Depois de todas as mechas enroladas no papel alumínio, passe a chapinha em cada mecha demorando uns 10 segundo em cada uma, depois espere esfriar, como mostra o vídeo.
Confira o Resultado:
Espero que tenham gostado da dica. Inscrevam-se no canal ou sigam o Blog para receber todas atualizações!
Olá meus amores, hoje eu trago para vocês mais um tutorial de como colocar um Menu Fixo no Topo do Blog, igual ao meu como vocês podem conferir ai no topo...
Sempre quis coloca-lo assim, porem nao sabia como, tentei algumas vezes e dava erro nos link, mas agora funcionou e vou compartilhar com vocês.
Obs: Testei no Modelo Travel
Faça um Backup do seu layout caso alguma coisa dê errado!
Os créditos vão para Place Style
#mymenuda {
background: #CD6090; /* Cor do background */
border-left: 200px solid #CD6090; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
width: 100%;
height: 34px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#mymenu {
background: #fff; /* Cor da fonte */
font-family: 'Arial', corsiva; /* Nome da fonte */
font-size: 16px; /* Tamanho da fonte */
text-transform: uppercase;
}
#mymenu li {
list-style-type: none;
display: inline;
float: left; /* Posicionamento do menu */
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 37px;
}
#mymenu a:hover {
color: #EED5D2; /* Cor da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul,
#mymenu li:hover ul ul ul,
#mymenu li.sfhover ul ul,
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul,
#mymenu li li:hover ul,
#mymenu li li li:hover ul,
#mymenu li.sfhover ul,
#mymenu li li.sfhover ul,
#mymenu li li li.sfhover ul {
left: auto;
}
#mymenuright {
float: right;
color: #fff;
}
/* BARRA DE PESQUISA */
.search{
float: left; /* Flutuando a esquerda */
font-family: Georgia, Tahoma; /* Nome da fonte */
}
.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo */
}
.searchbut{
background: url('http://i43.tinypic.com/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */
width:20px;
height:20px;
border: 0;
padding:6px;
}
________________________________________________________
Bem, todas as linhas que tem uma descrição em vermelho,
podem ser alterada como quiserem, de acordo com sua preferencia.
OBS: se você não entende muito de HTML recomendo que não altere nada
além do que está indicado.
Caso queiram conferir a lista de cores em HTML (Clique Aqui)
________________________________________________________
- Feito isso, salve o modelo.
- Agora vá em " Layout"
- Adicionar um Gadget
- HTML/JavaScript
<div id="mymenuda">
<div id="mymenu">
<li><a href=" Link ">Título</a></li>
<li><a href="Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li></div>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
<div id='mymenuright'>
</div></div>
___________________________________________________________
No caso do meu blog (não sei se acontece com todos), a parte em negrito escrito LINK, nao vai o link completo...
Exemplo:
A pagina "SOBRE" do meu blog tem esse link:
http://renatamassa.blogspot.com/p/sobre_1.html
Mas no codigo onde tem a Opção para botar o link, coloca-se apenas tudo que vem depois do .COM
Como ta ai em cima em vermelho, somente essa parte colocamos na opção do link.
Bem, espero que vocês tenham entendido.
Qualquer duvida, pode deixar aqui nos comentários que responderei a todos!
Ola meu povo!!!
Hoje trago para vocês mais um tutorial bem simples pois não precisa mexer no html do seu blog...
Sabe aqueles ícones de redes sociais flutuantes? Pois é...
Esse tipo de Gadgets é muito bacana, porque mesmo quando o visitante do seu blog desce toda barra de rolagem os ícones descem junto, sendo sempre visualizado, tendo assim mais chances de ser seguido também pelas redes sociais.
Esse tutorial peguei no site Prodeveloper, fiz apenas algumas alteraçoes deixando apenas os icones do facebook, twitter e Google plus ( pois sao as redes mais usadas) , tirei o tumblr e o Rss... nesse codigo nao tinha o youtube.
Bom entao vamos la...
Acesse o Blogger e vá em "Layout".
Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".
Dentro do conteúdo do gadget, cole o código a seguir:
<style type='text/css'>
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #cccccc;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
</style>
<div id='social-sidebar'> <ul>
<li><a class='entypo-facebook' href='URL FACEBOOK' target='_blank'>
<span>facebook</span></a></li>
<li><a class='entypo-twitter' href='https://twitter.com/USUÁRIO DO TWITTER' target='_blank'>
<span>Twitter</span></a></li>
<li><a class='entypo-gplus' href='URL GOOGLE+' target='_blank'>
<span>google+</span></a></li></ul></div>
Subistitua as URL das redes selecionadas,
No inicio do codigo onde tem "background: #cccccc;" substitua pela cor de fundo desejada (no caso desse codigo esta conza claro)
Se voce gostou desse tutorial, deixe um comentario para que eu fique sabendo.
Ah... e nao se esqueça de seguir o blog para ficar por dentro das novidades!!!
Quer ver mais Tutoriais Bacanas para seu Blog? Clique Aqui
