Barra de rolagem personalizada #2

Salve Salve penguins como vão ?

Lembram do tutorial da Barra de Rolagem Personalizada ? Então,ela está de volta em uma nova forma !
Antes a barra antiga era oval,sem chance para mudar o formato dela,agora a nova barra é mais bonita,com um estilo retangular para seu blog.

Bom,vamos começar !

Abra seu blog, vá em Modelo>Editar HTM> CTRL+F e procure por:   ]]></b:skin> 
Quando encontrar,cole o seguinte código ACIMA da tag que você procurou:


*{
scrollbar-face-color:#FF69B4;
scrollbar-highlight-color:#FF69B4;
scrollbar-3dlight-color:#343434;
scrollbar-darkshadow-color:#343434;
scrollbar-shadow-color:#FF69B4;
scrollbar-arrow-color:#343434;
scrollbar-track-color:#343434;
}

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; } 

Para mudar a cor da barra,edite apenas os seguintes trechos:


::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; } 

Na primeira linha,mude o #343434 para a cor de sua preferencia. (isso definirá o fundo da barra)
Na segunda linha,mude o #FF69B4 para a cor de sua preferencia. (isso definirá o botão da barra)
Se você não souber as cores em HTML, clique >>AQUI<< e veja !
Se estiver tudo certo visualize e salve .

Espero que tenham entendido a dica,se ficar alguma dúvida posta nos comentários que eu irei te ajudar.

Até a próxima !

Gerador de caixinha Link-me

Salve rapaziada tudo bem ? Nescauh aqui !

Em todos os blogs há sempre uma área com o banner do blog escrita "Link-nos", e embaixo do banner uma caixinha com um código para linkar o blog, hoje vou encinar como criar essa caixinha e por em seu blog !

Para começar, digite o link do seu site no primeiro espaço,depois ,pegue o link do seu banner e cole no segundo espaço:

No terceiro espaço não escreva nada,apenas clique em Gerar Código.

Na caixinha maior aparecerá o código do seu link-me, copie e cole na sua página.

Quando terminar ficará deste formato:

<a href="http://connectpenguin.blogspot.com/" target="_blank"><img src="http://i46.tinypic.com/ofshuv.png" border="0" /></a>

Bom,espero que tenham gostado,qualquer dúvida deixe nos comentários !

Criando e linkando um menu

Olá Designers ! Tudo bem ? Nescauh aqui !

Uma dúvida frequente entre os iniciantes,é como linkar partes do cabeçalho. Para isso devemos usar coordenadas e como isso seria muito complicado,o site Image-Maps criou um sistema para facilitar nossa vida.

Bom vamos lá.

Abra o Fireworks e crie um cabeçalho qualquer e escolha o lado do seu menu (em cima ,embaixo ,etc) e crie o menu junto:

Ok,agora que o cabeçalho está feito, entre no site : http://image-maps.com/ , esse site é que vai nos ajudar a linkar o cabeçalho.

No site,faça upload de seu cabeçalho,ou cole o url dele na caixinha,em seguida clique em Start Map your Image.
Depois de carregar,clique em Next Step,então clique no botão escrito "Retangle" e crie o retângulo sobre o seu menu igual a imagem:

 Coloque o link aonde mostra a imagem,e clique em Save .

Depois de linkar todo seu menu, desmarque todas as caixinhas laterais conforme a imagem:
(elas servem para dar divulgação)

Quando terminar,clique em Get Your Code.
Espere carregar e selecione a aba HTML CODE, copie todo código e vá para seu layout.

Copie todo o código,e vá em Modelo>Editar HTML> De CTRL+F e procure por:

<div id='header-wrapper'>

Quando encontrar,cole o código DEPOIS disso,visualize e salve.

Espero que tenham ajudado a vocês.Até mais.

Efeito Brilho

Salve rapaziada tudo bem ? Nescauh aqui.

Nessa postagem vou encinar a vocês fazerem um dos meus efeitos favoritos, o efeito Brilho.
Como o próprio nome já diz,esse efeito da um brilho em imagens e textos e é super fácil de fazer.
Vamos começar.

Para começar abra um novo documento,imagem ou texto no Fireworks e coloque alguma imagem ou texto.

Clique com o botão esquerdo nela,selecione o + em efeitos, e clique em Photoshop Live Effects,depois disso clique em Brilho Externo e configure desse jeito:

Clique em OK e veja o resultado.

Esse efeito serve tanto para fotos,como para textos:

E ai o que acharam desse efeito ? 

Qualquer dúvida deixa nos comentários.

Efeito Espelho

Olá galera !

Hoje venho encinar um efeito super legal para vocês, o nome dele é Efeito Espelho !
O efeito espelho é um efeito que aparece o reflexo do texto embaixo dele,como se tivesse um espelho embaixo do texto.

Para começar crie um texto qualquer,depois clique no texto e selecione CTRL+C e CTRL+V (copiar e colar) e deixe um embaixo do outro, conforme a imagem:

Agora clique com o botão direito do mouse no segundo texto,e clique em Transform,depois clique em Rodate 180° .
Seu texto ficará assim:

Para finalizar e dar o ar de espalhado,clique no segundo texto, e em opacidade selecione 50%.

Espero que tenham gostado do efeito,qualquer dúvida deixe nos comentários !

Até mais.

Como criar e colocar um botão Leia Mais no blog

Salve Salve Penguins, como vão ?

Ter um blog limpo,rápido, e com uma navegação fácil é muito importante para agradar os leitores, quando um post fica grande de mais para ser exibido na página principal,é recomendável usar o Jump Break do blogger para isso.
O Jump Break para quem não sabe,é uma função do blogger para você apenas exibir um link ou imagem escrito "Clique e veja o resto do post", para a pessoa ser redirecionada ao post completo, assim mantendo sua área principal limpa.

Então,hoje vamos encinar como criar um botão Jump Break, e como coloca-lo no blogger

Criando o Botão

Para começar a criar o botão,abra um arquivo do tamanho de sua preferência no Fireworks,e faça um retangulo/base para seu botão. O meu botão tem o tamanho de 200x65 px.

(a parte cinza não é um contorno,apenas saiu no print na área de desenho)

Agora adicione os efeitos,e o contorno do seu botão. Se quiser coloque alguma textura e deixe do jeito que você quer.

Agora para finalizar o botão,coloque alguma imagem e um texto informando que o post ainda não acabou.

Quando terminar,hospede o seu botão em algum lugar e pegue o link dele.

Editando o HTML

Clique em Modelo e, depois em Editar HTML.
Marque a caixa Expandir Modelos de Widget e procure por:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Na parte em laranja, substitua por 

<img src='URL_DA_IMAGEM_AQUI'/>

Novamente em laranja, altere URL_DA_IMAGEM_AQUI pela url de sua imagem.

Bom,é isso,qualquer dúvida poste nos comentários, até a próxima.

Como criar parcerias rolantes

Olá amigos tudo bem ? Nescauh Here !

Uma das formas mais adquiridas por blogs para ganhar mais números de visitas é a troca de links,mais conhecida como "Parceria", a troca de links funciona quando dois blogs colocam um banner do blog oposto em seu site,promovendo assim a divulgação de tal site.
Então,hoje estarei ensinando como colocar essas Parcerias com uma lista de banner rolando na sidebar.

Para começar vá em Layout>Adicionar Gadget>HTML/JavaScript e cole o seguinte código:


<marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" width="150" height="100" direction="down" scrollamount="3">

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

</marquee>

Explicando as cores

Vermelho: Aqui são definidas as larguras do scroll, em Width , você pode mudar 150 para o número que corresponde a largura da sidebar. 
Em Height você pode mudar para a altura da sidebar.

Verde: Corresponde ao lado em que o scroll vai, ex: Se você quiser que os banners rolem para cima,altere "Down" para "UP", você pode usar Down,up,right e left.

Laranja: Corresponde aos link,e a url da imagem dos banners.

Para adicionar mais um banner,basta acrescentar mais uma linha igual a essa:

<BR>

<a href = "URL DO LINK"><img src = "URL DA IMAGEM"></a>

Espero que tenham gostado da dica.

Qualquer dúvida,poste nos comentários, até mais !