Image Map

30 de jan. de 2013

Personalizando o cursor

Tumblr_mg5lxdnsad1rv83roo1_500_large

Eu usava esse efeito no meu outro blog, basicamente é: você está com um cursor de joaninha, por exemplo, ai quando esse cursor passar por um link, ele se transforma magicamente em um cursor de flor. Quando sai de cima do link, ele volta a ser uma joaninha. Entenderam mais ou menos como é? Espero que sim, o tutorial é bem fácil.

1- Vá em Desing > Layout > Adicionar um Gadget > HTML/Javascript.

2- Dentro do gadget (HTML/Javascript), cole:
<style>
body {
cursor:url("URL DA IMAGEM 1 - CURSOR NORMAL"),default
}
/***efeito quando passa o mouse em link ***/
body a:hover {
cursor:url("URL DA IMAGEM 2 - CURSOR NO LINK"),pointer
}
</style>

3- Agora penas façam as alterações necessárias.

Espero que tenham gostado. Beijos!

26 de jan. de 2013

Seleção Colorida

Tumblr_mg5owpbac81rx9zjto1_500_large

Eu simplesmente adoro o efeito da seleção colorida. Basicamente, você retira aquele azul morto de todos os blogs e coloca uma cor própria para quando alguém seleciona alguma palavra em seu blog.

1- Modelo > Editar HTML > Aperte Ctrl+F e procure por:
]]></b:skin>

2-  Cole antes do código achado, o seguinte:
::-moz-selection {
background:#FFF5EE; /*Cor do fundo*/
color:#FF69B4; /*Cor da fonte*/
}
::selection {
background:#FFF5EE;/*Cor do fundo*/
color:#FF69B4; /*Cor da fonte*/
}

3- Subistitua as cores e salve as alterações.

É isso, até a próxima. Beijos!

21 de jan. de 2013

Sombra no texto de blog

Tumblr_mg5or6u02i1rm1k2do1_500_large

Olá gente, quero avisar que eu estou viajando e esse post é programado. Eu não sei se onde estou tem internet, então, se eu demorar para responder os comentários é por esse motivo. Bom, o tutorial de hoje ensina a colocar um sombreado em todo o texto de blog. Na minha opinião, fica bem bonito. Créditos.

1- Design > Modelo > Editar HTML. Aperte Ctrl + F e procure por:
body {

2- Cole o seguinte código abaixo do que você acabou de encontrar.
text-shadow: 1px 1px 3px #b5b5b5;
-moz-text-shadow: 1px 1px 3px #b5b5b5;
-webkit-text-shadow: 1px 1px 3px #b5b5b5;

3-  Edite a cor e o tamanho da sombra como preferir. Visualize e salve.

Espero que tenham gostado. Beijos!

17 de jan. de 2013

"Leia Mais" com imagem.

Tumblr_maz8mytidn1rzdnklo1_500_large

Olá, me pediram esse tutorial e aqui eu estou com ele. Bom, é bem simples de se fazer. Siga os passos:

1- Crie uma imagem para usar (de preferencia, não muito grande). Depois, hospede esse imagem em algum site;

2- Vá no HTML de seus blog e marque a caixinha "explandir modelos de widgets". Aperte Ctrl+F e procure por:
<data:post.jumpText/>

3-  Apague somente o código achado, e no lugar dele cole isso:
<p align='right'><a expr:href='data:post.url'><img src='Link da imagem aqui'/></a></p>

4- Coleque a URL da imagem onde se pede e salve as alterações. Para utiliza-lo em sua postagem, somente clique nesse botão e aparece-rá a sua imagem no lugar desejado.

Espero que tenha sido útil. Créditos pelo segundo código, Cherry Bomb. Qualquer dúvida e pedidos, venha nos comentários ou na página de contato. Beijos!

13 de jan. de 2013

Retirar a navbar e o espaço dela

Photo-photography-fan-32054239-500-331_large

Olá! Utilizando desse tutorial, conseguimos remover a navbar (a barra que tem no topo do blog) e ainda tirar o espaço que ela ocupa, assim, o seu cabeçalho ficara no topo - literalmente- do blog.

1- Vá em Modelo > Editar HTML > Aperte Ctrl+F e procure por:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

2- Acima do trecho achado, cole esse código:
 <!-- Navbar-->
<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
<!-- Navbar-->

3- Visualize e se estiver com o resultado esperado, salve as alterações. Crédito ao Cherry Bomb.

Qualquer dúvida venham nos comentários. Até logo, beijos.


9 de jan. de 2013

Png's

Tumblr_mfsp23fmo11ry6vdqo1_500_large

Oi, vamos combiar que toda blogueira adora ter os mais diversos png's salvos no seu computador, certo? Bom, eu tenho uma pasta só disso no meu computador. Separei alguns aqui para vocês, espero que gostem.

5 de jan. de 2013

Título das postagens centralizados

Img1456693108_large

Oi! Não sei se vocês repararam mas, o título das postagens aqui do blog são centralizados. Na minha opinião, o blog fica muito mais bonito com os títulos assim (bom, depende muito do layout também). Vamos aprender a como centralizar o título das postagens.

1- Vá em Editar HTML > Ctrl+F > Procure por:
h3.post-title {

2-  Abaixo do código abaixo, cole o seguinte código:
 text-align: center;
 3- Visualize e se estiver tudo certo, salve.

Até a próxima, qualquer dúvida venham nos comentários ou na página contato (clicando em extras). Créditos do tutorial ao Material Extra. Beijos!