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 !

Como girar imagens no Fireworks

Olá designers tudo bem ?

Bom,uma dúvida muito frequente entre os iniciantes,é como girar imagens no Fireworks.
Para começar abra sua imagem no fireworks, e clique nela. 

Agora aperte CTRL+T ou clique na ferramenta de rotacionar,embaixo do ponteiro Preto em Selecionar.
Irá aparecer várias bordas na imagem,clique na parte de cima, e gire com o mouse.

 Gire conforme você quer,e quando acabar apenas solte o click.

Espero que tenham gostado da dica, e isso serve também para textos !
Até a próxima .

Xat dentro da caixa de regras

Olá penguins !

Hoje irei mostrar como criar uma caixa de regras para o seu xat,e como colocar o xat dentro dela, vamos começar !

Para começar crie um novo documento transparente de 590x780 px, em seguida clique com a tecla CTRL junto com a tecla - (menos) até o zoom ficar em 50%, ou clique em 50% no canto da tela como mostra a imagem:

Agora faça uma base para ser a caixa de regras mas lembre-se você só poderá ocupar uma parte de cima da base ,por que a parte de baixo ficará o xat !
Adicione cores,contornos,efeitos, etc personalize a seu gosto.

Acrescente o texto com suas regras,e se quiser adicione alguma imagem para personalizar mais a caixa de regras.
Dicas para regras:

-Sem Flood.
-Sem palavrão.
-Sem DV / Spam.
-Sem pedir cargos.
-Sem assunto para +18.
-Sem excesso de CAPS LOOK.

Quando terminar sua caixa de regras estará mais ou menos assim:

Dica: Para o xat ficar "transparente" , coloque o fundo dele com as mesmas cores/texturas da caixa de regras.

Implantando no Xat

Para implantar no xat,vá em Layout:Adicionar Gadget>HTML/JavaScript> E cole o seguinte código na área de texto:


<div class="widget html" id="html1">
<div class="widget-content">
<center>
<div style="background-image: url(COLOQUE O LINK DO FUNDO); width: 590px; height: 780px; line-height: 13px;"><span style="color: rgb(255, 255, 255);">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img style="visibility:hidden;width:0px;height:0px;" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMzEwNDQ2NjU5NzcmcHQ9MTMzMTA*NDY3NTUwMyZwPTUzMTUxJmQ9Jmc9MSZvPWYxNjZhMzk*MTM5ZDRiMWRiNmQ2/NjJmMzZkZjk1YmU4.gif" border="0" height="0" width="0" />COLE O CÓDIGO DO SEU XAT AQUI


Edite as partes em negrito,depois salve.

Atenção: Coloque esse gadget dentro da área de postagem,pois de colocar na sidebar não caberá.
(Nós colocamos no rodapé,confira ! )


Qualquer dúvida deixe nos comentários, até a próxima.

Como fazer Botão de Voltar ao topo

Olá penguins tudo bem ?

A pedidos,estarei ensinando como criar um botão de voltar ao topo,e como inseri-lo no blog ! Mãos na massa !

Criando o Botão

Abra seu Fireworks CS6 e crie um novo documento com o tamanho de 130x60 px; (sua preferência) com o fundo Transparente !
Faça uma base para seu botão e adicione cor e textura.

Agora adicione o texto,ou imagens no seu botão, e para finalizar adiciona um contorno.

Salve sua imagem,vá em Layout>Adicionar Gadget>HTML>Javascript.

Então cole este código no seu gadget substituindo o LINK DA IMAGEM pelo link do seu botão.

<div style="position:fixed; bottom: 0px; margin-right: 6px; right: 0px;"><a href="#" title=""><img src="LINK DA IMAGEM" border="0" /></a></div>

Entendendo as cores

Vermelho: Apague o que está escrito em vermelho,e cole o link da sua imagem ali,sem remover as aspas.
Laranja: Você pode alterar ou deixar assim mesmo,em laranja define o comprimento para a margem alterando o 6px para o tanto que você quer.

Espero que tenham gostado da dica, até a próxima penguins !

Programas e Fontes

Olá penguins !

Nesta postagem vou mostrar os programas mais populares e mais usados para design quando se fala de Club Penguin !

Programas de Edição

Fireworks CS6
http://www.adobe.com/cfusion/tdrc/index.cfm?product=fireworks&loc=pt_br

Photoscape
http://www.baixaki.com.br/download/photoscape.htm

Photoshop CS6
http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop&loc=pt_br

Paint Net
http://www.baixaki.com.br/download/paint-net.htm

Fontes / Packs

Bumbastika: (logotipos)
http://pt.ffonts.net/Bumbastika.font

Pack do Club Penguin:
http://www.multiupload.com/UDFIPJPRWZ


ATENÇÃO:  Sempre nos estaremos disponibilizando um novo Pack de imagens para ajudar vocês !

Pack de imagens

Salve Salve Designers !
Nescauh por aqui .

Hoje vim postar um pack de imagens do Club Penguin para ajudar vocês no seu Designer !
O pack vem com background,puffles,famosos,penguins,roupas,bicos,faces e muito mais !

Para fazer download do pack Clique Aqui !

Espero que gostem,até a próxima !

Como criar um banner

Olá penguins, tudo bem ? Nescauh aqui !

Uma dúvida frequente entre os iniciantes é de como criar um banner para seu blog,bom vim aqui hoje para esclarecer essa dúvida passo-a-passo.

Vamos começar.

Abra seu Fireworks,e abra um novo documento do tamanho de sua preferencia, eu usarei um 182x244 px;

Com a ferramenta Retângulo,faça a base de seu banner,adicionando já um contorno.
Os banner com contorno em preto,de 2 ou 3 pixels ficam bem bonitos.

Adicione um fundo ao seu banner clicando no ícone "importar" ao lado da pastinha ali em cima.
Recorte o seu fundo para que ele fique certo dentro da base.
Dica: Coloque o fundo em cima da base,com o botão direito clique no fundo>Organizar>Enviar para traz.
Depois com a lupa e a borracha vá apagando as laterais para que fique certinho o fundo dentro da base.
(Se a borracha não apagar,clique com o Poin Tool no fundo e tente apagar)

Em seguida,adicione algum personagem,o logotipo do seu blog e alguns detalhes para personalizar a seu gosto.

Pronto,seu banner está criado.
Espero que tenham gostado da dica, qualquer dúvida poste nos comentários.

Como fazer uma sidebar

Olá a todos ! Nescauh Here !

A pedido de um amigo,estarei ensinando como criar uma sidebar para seu blog,e como implanta-la no blog.

Bom vamos começar,

Para templates de 2 Colunas:

Crie um novo documento de 982x100 px; 

Em seguida,com a ferramenta Retângulo Tool, faça dois retângulos um de cada lado,cobrindo toda a altura da área de desenho,mas cobrindo só uma parte dos lados. (depois iremos arrumar as larguras)

Depois disso,vamos editar o tamanho dos retângulos,clique neles e lá embaixo em Propriedades,deixe suas configurações desse jeito:

L ou W : 204

A ou H:  141

Para templates de uma coluna:

Abra um novo documento de 982x100 px; e faça um quadrado cobrindo toda a altura do lado que é a sua sidebar. Ex: se a sua sidebar for do lado direito,faça o quadrado do lado direito.

Clique no quadrado que ficará o lado da sua sidebar,e em Propriedades edite conforme a imagem:

L ou W: 270

A ou H: 141

Agora no outro quadrado,do lado oposto da sua sidebar,edite conforma a imagem:

L ou W: 10

A ou H: 200

Agora que já definimos a largura,vamos adicionar um contorno para deixar ela mais bonita.

Clique na sua sidebar, e clique no Lápis da barra de ferramentas embaixo para adicionar um contorno,selecione 3 pixels de largura e escolha a cor.

A sidebar ficará apenas com um contorno,por que ela está saindo da área de desenho. Para arrumar isso clique na sua sidebar e com as setas do teclado vá mexendo para o lado até sair o contorno de 3 px !

(a cada teclada com a seta,move 1 pixel,mova 4  vezes para ficar 3 pixels certinhos)

Lembre-se: Não podemos deixar que o contorno de cima apareça,se não a sidebar vai ficar se dividindo desse jeito,e estragará o layout.

Se você quiser você pode adicionar alguns efeitos como listras a sua sidebar,personalize-a a seu gosto .

Aplicando a sidebar no Blog

Para colocar sua sidebar no blog,vá em Modelo>Editar HTML> de CTRL+F e procure por 

#content-wrapper {

background:transparent url

Depois de transparent url haverá um parentes,cole o link da sua sidebar dentro dele, ficando assim o código:

#content-wrapper {

background:transparent url(LINK DA SIDEBAR)...

Visualize , e se estiver tudo Ok, salve.
Se ficou com alguma dúvida,poste nos comentários que eu te ajudarei . Até mais.

Colocando borda nas imagens

E ai galera , mais uma vez por aqui ! Nescauh penguinando !

Hoje eu estava conferindo alguns códigos e achei um bem legal. O código faz com que apareça borda nas imagens automaticamente, ou seja você posta a imagem normalmente, e já aparece uma borda nela, bem interessante não ?
Bom vamos lá !

Para começar vá em Modelo>Editar HTML, de CTRL+F e procure por .post blockquote { ,quando achar  cole ACIMA dele o seguinte código, modificando o que se pede:

.post img {

border: 3px solid #114a33;  /* Borda = Altere o número para obter a cor que quiser */

text-align: center;

background-color: #26AC77; /* Fundo. Altere os números ou as letras que vem depois do asterisco para outras cores */

padding: 4px 4px 4px 4px;

margin: 0px 0px 0px 5px;

moz-box-shadow: 1px 1px 10px #00f;

-moz-border-shadow: 30pc;

-khtml-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 5px 5px 0px 0px #cccccc;

-moz-box-shadow: 5px 5px 0px 0px #cccccc;

box-shadow: 5px 5px 0px 0px #cccccc; }

Altere apenas o que está em Vermelho.

Quando terminar,visualize e salve se estiver tudo certo.
Qualquer dúvida posta nos comentários !

Personalizando a barra de rolagem

Olá pessoal ! Nescauh de novo aqui !

Espero que estejam gostando dos tutoriais,pois venho dar uma dica muito legal para personalizar o seu blog !
Hoje veremos como Personalizar a Barra de rolagem do blog !

Para começar vá em Modelo>Editar HTML>

Em seguida aperte CTRL+F e procure por /*Header  ,logo em seguida copie o código e cole em cima de /*Header

::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: rgb(0,74,174);
}
::-webkit-scrollbar-thumb:vertical {
background-color: rgba(255,255,255,0.4);
-webkit-border-radius: 10px;
}

Seu HTML ficará parecido com esse:

Entendendo o Código

Em  :-webkit-scrollbar { width: 10px; height: 10px; }

Width: 10px; É a largura da barra, mude o 10px; para a largura que você quer.
Height: 10px; É a altura da barra,mude 0 10px; para a altura que você quer.

Em :-webkit-scrollbar-thumb:vertical { background-color: rgba(255,255,255,0.4); -webkit-border-radius: 10px; }

Background-color rgba(255,255,255,0.4); Você muda a cor que quer do ícone da barra,mas a cor deve ser em hexadecimal (números)

-webkit-border-radius: 10px; Aqui você muda a arredondação da barra,trocando 10px; para quanto quiser.

Em -webkit-scrollbar-track-piece { background-color: rgb(0,74,174); }

background-color: rgb(0,74,174); Aqui você muda o fundo da barra,trocando os números dentro dos parentes por números hexadecimais !

Quando terminar,visualize , se estiver tudo certo salve.
Qualquer dúvida posta nos comentários, até mais !

Aplicando Gradiente ao texto

Salve Salve rapaziada tudo bem ? Nescauh aqui.

Hoje vamos aprender como aplicar Gradiente ao nosso texto,deixando assim ele mais bonito.

Para começar,abra seu Fireworks e crie um documento de qualquer tamanho. Em seguida,clique na ferramenta "T" para criar um texto,e digite qualquer coisa.
Eu digitei "Connect Penguin"

Depois de digitar o texto,clique nele com a ferramenta Poin Tool, clique aonde muda a cor do texto,e selecione Gradiente.

Escolha as cores para o seu gradiente,você pode escolher o tipo do gradiente como Radial,ondas etc..
Personalize a seu gosto. O meu ficou assim:

Espero que tenham gostado,qualquer dúvida posta nos comentários !
Até mais.