Bom, aqui vou ensinar como colocar o efeito opaco na imagem e arredondar quando passamos o mouse, é muito fácil, vá em Editar HTML > Ctrl + F > ]]></b:skin> > Acima deste código, coloque:
.post img{ filter:alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;-border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;-webkit-border-radius: 40px 40px 40px 40px;-transition-duration: 1.90s;-webkit-transition-duration: 1.90s;-moz-transition-duration: 1.90s; } .post a:hover img{ filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;-border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px 0px 0px;-webkit-border-radius: 0px 0px 0px 0px;-transition-duration: 1.90s;-webkit-transition-duration: 1.90s;-moz-transition-duration: 1.90s; }
Pronto, agora, poste uma imagem, e você verá que a imagem vai ter um efeito opaco e as pontas arredondadas, só que após você colocar o mouse encima a ponta fica normal e o efeito também, vejam um modelo:
Antes de passar o mouse:
Depois de passar o mouse:
Gostaram? Coloque no seu blog!
Como fazer as páginas ao lado direito.
Como fazer páginas ao lado direito, bom tem duas páginas ao lado direito, mas de um jeito diferente, assim:
Primeiro, pegue esse código:
<a href="URL DO INICIO"><ct>INICIO</ct></a>
<a href="URL DE OUTRA PAGINA QUE VOCÊ CRIOU"><ct>NOME DA PAGINA</ct></a>
Coloque HTML/Java Script, cole esse código fazendo as alterações nas URLs.
Depois, vá em Adicionar CSS (Design > Personalizar > Avançado) depois, coloque esse código:
/*---Início do Menu Cute trasition By: www.tutoriar.com---*/
ct {
font-family: century gothic; /* Fonte do Menu */
width: 44%; /* Tamanho do Menu */
float: left;
background:#FF69B4; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 11px;
-webkit-border-top-left-radius: 1px;/* Efeito das bordas */
border-radius: 11px;
border-top-left-radius: 1px;
-webkit-transition-duration: .80s; /* efeito trasition */
font-size: 10pt; /* Tamanho da fonte */
color: #FFFFFF; /* Cor da fonte */
}
ct:hover {
font-family: century gothic; /* Fonte do Menu quando passa o mouse */
width: 44%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#FFB6C1; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 22px;
border-radius: 22px;
-webkit-transition-duration: .80s; /* efeito trasition */
font-size: 10pt; /* Tamanho da fonte do Menu quando passa o mouse */
font-style:bold; /* Fica em negrito quando passa o mouse */
color: #FF69B4; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu Cute trasition By: www.tutoriar.com---*/
Fazendo alterações como vai querer, resultado:
Quando terminar terá um lindíssimo menu!
De qualquer cor que você quiser!
Se quiser adicionar mais páginas, só copie o código e cole novamente com o nome da página e o link.
*Código feito pelo: Tutoriar.com
Fazendo um favicon no PhotoFiltre Studio X + Como deixar a imagem transparente no PhotoFiltre Studio X.
Então, quem fez o favicon do meu blog foi eu, peguei uma imagem da internet e fiz, para fazer, abra o PhotoFiltre, depois, abra a imagem desejada, clique em Redim Layer, diminua ela até ficar do tamanho de 40x30, quando acabar, você salva a imagem o tamanho 40x30 é um tamanho essencial, eu já testei e deu certo, até porque o Blogger.com só aceita imagens quadradas e, 40x30 é uma imagem quadrada, coloque no favicon (Não sabe como colocar um favicon? Aprenda aqui). Se você não sabe deixar a imagem transparente, aqui está alguns prints em sequência para você aprender:
Ah, antes de tudo, coloque a transparência na imagem, se não sabe, após ensinar a imagem transparente, ensinarei a transparência também.
Depois vá em:
Coloque a cor que você quer que desapareça.
Pronto, clique em Preview, se tiver tudo "ok" você coloca "ok", quando você acabar, pronto!
Como deixar o fundo transparente
Abra o PhotoFiltre, clique em "New", vai aparecer o recado:
Clique em:
Automatic Transparency e pronto!
Mudando o nome de comentários para outro + Retirando os comentários.
Bom, sabe quando você vê "0 comentários", "3 comentários" e etc. Pois é, sabia que dá para mudar? Você já deve ter visto em alguns blogs que as vezes aparecem por exemplo: "6 Florzinhas" "4 apaixonados" e etc. Pois então, sabe como mudar? Vou ensinar.
Primeiro, vá em Design > Layout > Postagens do blog > Editar, quando você fizer isso, faça o seguinte:
E troque pelo nome que deseja.
Retirando os comentários
Bom, você pode ter visto, ou não, que alguns não tem a opção comentários, mas pode mudar de dois jeitos!
Só retire o "Vezinho" do comentários, assim, a opção comentários vai desaparecer.
Tem outro jeito, que é pelas postagens, vá em Criar Nova Postagem, depois faça o seguinte, do lado direito, vai ter essas opções:
Clique no "Opções", vai aparecer mais ou menos isso:
Clique aqui:
Clique em concluído e pronto, os seus seguidores não vão poder postar.
Retirando o navbar do blog
Bom, esse vai ser um tutorial rápido, até porque é uma coisa muito fácil.
Primeiro, vá em Design > Layout > Navbar > Editar, então, você vai fazer a mesma rota que você faz quando quer mudar o estilo do navbar, só que agora, no novo modelo, não precisa de código para retirar, é só clicar aqui:
Primeiro, vá em Design > Layout > Navbar > Editar, então, você vai fazer a mesma rota que você faz quando quer mudar o estilo do navbar, só que agora, no novo modelo, não precisa de código para retirar, é só clicar aqui:
Ou seja, onde estava marcado, você tira e coloca desativado.
Colocando um favicon no blog
Bom, nesse tutorial, você vai aprender como colocar um favicon* no seu blog, separei uns prints para ficar mais fácil.
Primeiro, clique em Design > Layout > Favicon > Editar, depois clique aqui:
Primeiro, clique em Design > Layout > Favicon > Editar, depois clique aqui:
Depois, selecione a imagem que você vai querer como seu favicon.
Quando achar, coloque em salvar e pronto!
*Favicon: É aquele B que fica na guia.
Nenhum comentário:
Postar um comentário