Colocar imagem mapeada no cabeçalho

Vocês já sabem como mapear imagem online. Hoje irei explicar como colocar uma imagem mapeada no cabeçalho do blog.
Já adianto que, não são em todos os templates que isso é possível ser feito. Testei em todos os modelos do blogger, inclusive nos antigos e, deu certinho. Portanto, se não aplicar-se ao seu template, a culpa não é minha.

Em design >> Editar HTML, procure por:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display: none;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
display: none;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
display: none;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
display: none;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
display: none;
}

#header a:hover {
color:$pagetitlecolor;
display: none;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
display: none;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
display: none;
}

E em cada trecho, coloque display: none; Fazendo isso, o cabeçalho ficará escondido. Visualize e salve o modelo.

Pegue o código da sua imagem mapeada e coloque como elemento de página, em HTML/Javascript.

Continue lendo >>

Mapear imagem online

Uma imagem mapeada nada mais é que, uma área clicável em uma imagem. Existem várias maneiras de mapear uma imagem, inclusive empregando CSS. Uma delas, bem prática e fácil é utilizando um mapeador online.
Mapeei a imagem do cabeçalho do blog e, substitui a nuvem de tag, por uma imagem também mapeada. É essa imagem que vou tomar como base para o tutorial de hoje.

Criei essa imagem no photoshop, mas é possível fazê-la em qualquer editor de imagem. É bem simples, fui adicionando os marcadores de forma aleatória. Não vou entrar muito em detalhe sobre a criação da imagem, porque o objetivo do post não é esse.

Acesse image maps, você terá a opção de abrir a imagem do seu PC, ou à partir de uma URL. Recomendo que hospede sua imagem no servidor de sua preferência (imageshack, picasa, tinypic…), pois, o risco de sua magem desaparecer é bem menor.

Cole a URL na área destinada e clique em ‘’start mapping your image’’. Na próxima página, clique em ‘’continue to next step’’.

Vai abrir uma página parecida com esta: Deixe selecionada a caixa ‘’base URL’’ e desmarque ‘’Show Text Links’’. Mantendo ‘’show text links’’ marcada, aparecerá as ligações de texto embaixo da imagem e, esteticamente não é nada bonito. Para adicionar os links, clique em ‘’rectangle’’ e selecione a palavra ou imagem que receberá o link.

Clique em ‘’save’’ e vá repetindo se necessário. Quando terminar, clique em ‘’get your code’’.

Quer sua iimagem como elemento de página, basta, copiar o ‘’HTML code’’. No próximo post, vou ensinar como colocar uma imagem mapeada no cabeçalho do blog. Portanto, fiquem atentos :p e até a próxima! ;)

Continue lendo >>

Wallpaper aquarela

Passei esse final de semana brincando com o photoshop. Adoro tutoriais estrangeiro e, foi em um desses sites maravilhosos, que aprendi uma nova técnica. Fiz 4 papéis de parede e, disponibilizo pra vocês.

resolução 1024x768

Mas, se vocês querem aprender a fazer o seu, segue o link do tutorial.Creating an Abstract Watercolor Wallpaper. Qualquer dúvida nessa técnica é só perguntar.

Continue lendo >>

Botão de retweet flutuante

Tenho notado uma procura muito grande no meu blog, oriunda do google, procurando por botão de retweet flutuante. Procura grande= ideia para um novo post. O que é muito bom, pois às vezes me falta ideias. Bom, então, chega de enrolação e vamos ao que interessa.

Antes de qualquer modificação, faça um backup do seu modelo atual.

Primeiro, esteja com o código do seu botão de retweet. Se ainda não tem o seu, sugiro que leia Tweet button – Botão de retweet do twitter

Em design >> Editar HTML e com ajuda do CTRL+F procure pelo seguinte trecho:

</body>

E ANTES cole o código.

<div id='floatingimage'>
CÓDIGO_DO_BOTÃO_RETWEET</div> 

Agora, procure por:

]]></b:skin>

E imediatamente ANTES cole o código abaixo.

#floatingimage {
bottom:260px;
left:0px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#floatingimage a img {border:0}

Esse código é para dar estilo. Você pode modificar a posição e a altura do botão. Na parte rosa do código mude a altura, se quiser o botão no rodapé, mude para 10px. Vá mudando e pre-visualizando a mudança, até o botão ficar na posição ideal. E onde marquei de amarelo, mude para ‘’right’’ se quiser o botão à direita. Se tudo der certo, salve o modelo.

Dúvidas e sugestões, é só deixar seu comentário. :)

Continue lendo >>

Tweet Button – Botão de retweet do twitter

O twitter disponibilizou em sua página de complementos, 3 modelos de botão retweet para seu blog. Acesse http://twitter.com/goodies/tweetbutton escolha o seu botão, personalize (opcional) e, pegue o código.
Para quem já tem um botão topsy ou twetmeme, apenas substitua o código. E para quem ainda não tem, vou ensinar como colocar esse do twitter, que na minha opinião, é bem mais bonito que os outros.

Antes, decida se quer alinhar seu botão à esquerda ou à direita.

Código para alinhar à direita

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:right; margin-left:5px;">CÓDIGO_DO_BOTÃO</div>
</b:if>

Código para alinhar à esquerda

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:left; margin-right:5px;">CÓDIGO_DO_BOTÃO</div>
</b:if>

E coloque o código do botão na área destinada.
Agora, se quer que seu botão fique entre o título e a postagem.´Vá em ‘’design’’>>> ‘’editar HTML’’ marque ‘’expandir modelos de widgets’’. E com a ajuda de CTRL+F procure por:

<div class='post-header-line-1'/>

E imediatamente DEPOIS, coloque o código escolhido acima. Ficando assim:

A outra opção, é colocar o botão embaixo da postagem. Vá em ‘’design’’>>> ‘’editar HTML’’ marque ‘’expandir modelos de widgets’’. E com a ajuda de CTRL+F procure por:

<div class='post-footer'>

E ABAIXO coloque o código escolhido.
É isso! Dúvidas e sugestões, é só deixar seu comentário.

Continue lendo >>