Efeito em imagem: Trocar a Imagem Quando Passa o Mouse

Respondendo uma duvida deixada em um de nossos comentários sobre como colocar um efeito no banner de parceria, tamanho 120x60. Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:

<a href="http://jornaljd.blogspot.com"target="_blank" onMouseOver="document.images['myimage'].src='http://img410.imageshack.us/img410/6580/olho2.gif';" onMouseOut="document.images['myimage'].src='http://img22.imageshack.us/img22/7136/jornal.jpg';"><img src="http://img22.imageshack.us/img22/7136/jornal.jpg" border="0" id="myimage"/></a>

Você precisará fazer duas imagens do mesmo tamanho e hospedar a imagem, sugerimos fazer isso no ImageShack se tiver dificuldades para encontrar a url certa da imagem veja essa explicação em video depois é só colocar os endereços das imagens no código acima e pronto. Mas note que uma das imagens é repetida duas vezes no código.

Apesar de falarmos em imagens para banners de parcerias esse código serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer é que esse código apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notará que ela ficou semi transparente a explicação de como fazer isso você encontra em nossa postagem sobre imagens transparentes.

Leia mais »»

Menu vertical costumizável

poderá colocar o tipo de botão de sua preferencia, fazer efeitos diferentes, bem facinho. Você precisará de um modelo de botão, ou até dois caso queira fazer efeito em seu menu.


Vá até o HTML do seu blog e procure pelo seguinte código:

]]></b:skin>


Cole acima dele o código abaixo:

{
list-style:none;
margin:0px;
padding:0px;
}#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background: url('http://img341.imageshack.us/img341/4782/image1lu2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:hover {
color: #cccccc;
background: url('http://img205.imageshack.us/img205/4131/12uw2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:active {
color: #666666;
padding: 8px 0 0 50px;
}

*ATENÇÃO: o selecionado na cor verde representa o botão, caso não goste, troque por outro de sua escolha, não retire as aspas, ok ?
O selecionado na cor azul são as cores das letras que aparecerão no botão, caso precise, mude-os para a cor desejada

depois em "Elementos de página", clique em "Adicionar . Ao abrir a tabela clique em HTML/Javascript, e cole o código abaixo, depois acrescente os links que quiser nos locais indicados. ( em cor verde é o endereço do que vai linkar e em verde, é o que vc irá esscrever que aparecerá escrito no botão)

<div id='menu'>
<ul>
<li><a href='ENDEREÇO DO LINK'>LINK 1</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 2</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 3</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 4</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 5</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 6</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 7</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 8</a></li>
</ul>
</div>

Para acrescentar mais links, é só ir acrescentando,

<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>


antes de

</ul>
</div>

Leia mais »»

Opção nativa de favicon personalizado no Blogger

O Blogger disponibilizou recentemente uma opção nativa de personalização do favicon dos blogs. Favicon é aquela pequena imagem que fica ao lado do nome da página na aba ou janela do navegador; até o lançamento deste novo recurso o favicon padrão de todos os blogs era o logo do próprio Blogger e aqueles que quisessem altera-lo precisavam fazer uso de alguns hacks.

O novo recurso, por enquanto, pode ser acessado apenas pelo Blogger in Draft, na guia Layout em Elementos de página. Você vai ver um novo elemento chamado Favicon. 

Clicando em Editar neste elemento você pode fazer o upload de uma imagem que queira usar para personalizar o favicon do seu blog.


Recomendo que vocês escolham uma imagem perfeitamente quadrada , de preferência com tamanho em pixels de 16x16 ou 32x32. A imagem escolhida como favicon deve estar em formato .ico, se a sua imagem não estiver neste formato você pode converta-la usando algum site de conversão online, recomendo neste caso oConvertICO.

Leia mais »»

Alterar texto postagens mais antigas e mais recentes

Modificar o texto ou usar imagens no lugar de postagens mais antigas, postagens mais recentes e inicio que aparecem no final das postagens do blog é algo fácil, porém encontrar isso na pagina editar HTML é um pouco complicado, pois quem já tentou procurar por essas palavras não conseguiu resultado algum.
A razão disso é simples o blog usa tags para fazer isso, agora vamos mostrar como modificar, retirar ou colocar esses links(texto postagens mais antigas, postagens mais recentes e inicio) no seu blog. Entre na pagina editar HTML, clique para expandir o modelo e procure por:

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>

Logo depois disso deve estar assim no HTML do seu blog:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>


Se não tiver provavelmente esses links para textos mais antigos, recentes e pagina atual não devem aparecer no seu blog. Portanto se quiser remover esses links é só apagar esse trecho. Mas se a sua intenção é modificar o texto veja os trechos em negrito, basta trocá-los pelo texto que desejar, veja o que cada um deles faz no blog:

<data:olderPageTitle/> link para postagens mais antigas
<data:newerPageTitle/> link para postagens mais recentes
<data:homeMsg/> link para pagina inicial do blog, esse aparece duas vezes então modifique as duas da mesma maneira.

Se quiser usar uma imagem no lugar dos links para postagens mais antigas, postagens mais recentes e inicio, é simples de fazer em vez de escrever outro texto nos lugares indicados coloque esse código:

<img border="0" src="endereço da imagem"/>

Naturalmente cuidado para utilizar o endereço correto da imagem nos links. Depois que fizer as alterações clique para visualizar o blog e se estiver tudo certo é só salvar e já está tudo pronto.

Leia mais »»

Artisteer 2.6 + Keygen Download

Artisteer - o primeiro e único produto de automação de um web design que cria instantaneamente um tipo fantástico, modelos exclusivos para MS Joomla, Drupal, Wordpress, temas para seu blog ou uma página HTML.
 O design impressionante blogs WordPress, Joomla profissional! Drupal e modelos, desenhos e arrefecer Site em Minutos.

 Fácil de Usar

 Não há necessidade de aprender Photoshop, CSS, HTML ou outras tecnologias
 Exportar como Wordpress Theme ou CMS Template

Com Artisteer VOCÊ se tornar imediatamente um perito Web design, edição e gráfica corte, codificação XHTML e CSS, e criação de Web design templates e Joomla, Drupal e Wordpress temas - todos em minutos, sem Photoshop ou Dreamweaver, e não de competências técnicas.

Categoria: Gerenciador de Sites | Web Designer

Hospedagem: MegaUpload

Sistema: Windows XP/Vista/7

Tamanho: 136 Mb

Leia mais »»

Como colocar Regras nos comentarios!

1° abra a HTML do seu template
e expanda os modelos de wigets


e Procure por 


<data:postCommentMsg/>


e Logo acima insira:


<img border='0' src='http://tutorscreate-bcreate.webs.com/mages/table.png' style='margin:0 0 0 0px;'/>


salve e pronto =D


Dúvidas? comente!:

Leia mais »»

1º vc abre o seu photoshop

faz uma imagem ou pega uma(a imagem pode ter renders tudo vlw)

2º depois vc escreve um texto que vc que e da enter

3º abra mais duas camadas, a primeira camada vc da ctrl e clica na camada onde vc escreveu sigurando o ctrl e aperta ctrl + E e soute o ctrl

4º selecione a segunda camada selecione a cor branca pegue a ferramenta gradient tool escolha a opção branca transparente no meu ta na 2ºopção e passe sobre a primeira letra da palavra

5º va em window click em animation e vai aparecer uma camada dentro da ferramenta animation

click para criar uma nova camada na mesma ferramenta (animation) e deixe selecionada a segunda camada na animation vai na imagem sigure ctrl + botão direito do mouse e puxe a iluminação para a utima letra da palavra

6º vou na ferramenta animation perceba que do lado esquerdo de criar uma camada no animation tem um botão que ta cheio de bolinhas click nele e vai aparecer uma tela ai e click em (ok) e depois é so vc arrumar a velocidade e salvar em (Salve for web) e pronto 

Leia mais »»