Atalhos com a tecla CTRL:
Ctrl + N – Abre a janela de Novo documento.
Ctrl + M – Abre a janela Curvas.
Ctrl + A – Faz a seleção do documento todo ou da camada selecionada.
Ctrl + D – Tira a seleção do documento todo ou da camada seleccionada.
Ctrl + J – Duplica automaticamente a camada selecionada.
Ctrl + K – Abre a janela Preferências.
Ctrl + L – Abre a janela Níveis.
Ctrl + F4 – Fecha o Documento Atual.
Ctrl + ? – Liga o quadriculado.
Ctrl + Q – Desliga o Photoshop.
Ctrl + R – Liga as réguas.
Ctrl + O – Abre a janela Abrir.
Ctrl + P – Abre a janela da Impressora.
Ctrl + Z – Volta um passo atrás.
Ctrl + Tab – Vai mostrando todos os trabalhos em progresso.
Ctrl + C - Copía
Ctrl + ; - Zoom para aumentar e para diminuir.
Ctrl + X – Corta algo que esteja seleccionado.
Ctrl + Alt + Shift + X – Abre a janela do Criador de Padrões
Ctrl + V – Cola algo seleccionado.
Ctrl + Shift + V – Copia algo para um espaço seleccionado.
Ctrl + Alt + Shift + V - Copia algo para fora do espaço seleccionado.
Ctrl + T – Ferramenta Transformar.
Ctrl + Shift + T – Repete a última transformação efetuada.
Shift + F5 – Abre a janela Preencher.
Ctrl + Shift + O – Abre o Localizador de Ficheiros
Ctrl + Shift + P – Abre o Configurar Página.
Ctrl + Shift + S – Abre a pagina Salvar Como
Ctrl + Shift + K – Abre a janela de Configuração de cores.
Ctrl + Shift + X – Abre a janela Dissolver.
Ctrl + Shift + N - Abre a janela Nova Camada.
Ctrl + Shift + M – Abre o ImageReady.
Ctrl + Shift + E – Mescla todas as camadas numa só.
Ctrl + Alt + Z – Volta atrás (não retrocede o feito).
Ctrl + Shift + Alt + N – Cria uma nova Camada limpa.
Ctrl + Shift + Alt + S - Abre a janela Guardar para a Web.
Ctrl + Alt + ~ - Carrega selecção.
Ctrl + Shift + I – Inverte uma selecção.
Precione CTRL + F e procure por body {
Substitui toda a linha background: por isto -> background: url(ENDEREÇO DA IMAGEM) center;
background-attachment: fixed;
#newsidebar-wrapper: é a nova coluna. (geralmente os blogs com 3 colunas possuem este código).
#footer: é o rodapé do blog. Geralmente faz parte parte deste trechos as variáveis:
#footer
#footer-wrapper
.post: corresponde a coluna de postagens. Nesta coluna fica todo o espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé do post, link de comentários etc)Geralmente é representada pelas variáveis:
.post
.post-outer
.post-body (corpo do texto da postagem. É neste trecho que você define a fonte do texto de seus posts.)
.post-footer corresponde a área de rodapé dos posts.
Geralmente fazem parte deste trecho as variaveis:
post-footer-line-1
post-footer-line-2
post-footer-line-3
.comment-link: corresponde aos links de comentários na página inicial. Geralmente fica dentro da coluna do rodapé do post.
.post img: corresponde as imagens dentro do post.
.post-body img: correspondem as imagens publicada na postagem.
.post blockquote: corresponde aos trechos de textos destacados (citações).
#comments h4: corresponde ao titulo "Comentários" dentro da página interna.
Sobre a área de comentários, recomendo a leitura do artigo: Desmembrando a Área de Comentários
#blog-pager: corresponde aos links de navegação do blog. Fazem, parte deste trecho: #blog-pager-newer-link e #blog-pager-older-link.
.feed-links: corresponde ao trecho "Assinar: Postagens (Atom)".
.profile: corresponde ao trecho do gadget "Perfil".
Padding: determina as margens internas, é a distância entre o conteúdo de determinado elemento e a borda.
Ex: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Margin: determina a distância de um elemento para outro.
Ex: margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
width: determina a largura do elemento.
height: determina a altura do elemento.
float: determina a flutuação do elemento(posição em que se encontra).
Exemplos:
float:left - elemento posicionado à esquerda.
float:right - elemento posicionado à direita.
float:center - elemento posicionado ao centro.
a:link : são os links ativos do seu blog
a:visited : São os Links que já foram visitados.
a:hover: é a forma que o link ficará quando passamos o Mouse em cima dele.
TAG significa etiqueta em inglês, é ela que informa ao navegador como determinado elemento deve ser exibido no seu blog.
Ela tem o seguinte forma < > quando aberta.
Veja exemplos de algumas tags básicas abaixo:
Lembrando que toda Tag que for aberta < > deverá ser fechada no final </> , caso contrário o código não será aceito.
Ctrl + M – Abre a janela Curvas.
Ctrl + A – Faz a seleção do documento todo ou da camada selecionada.
Ctrl + D – Tira a seleção do documento todo ou da camada seleccionada.
Ctrl + J – Duplica automaticamente a camada selecionada.
Ctrl + K – Abre a janela Preferências.
Ctrl + L – Abre a janela Níveis.
Ctrl + F4 – Fecha o Documento Atual.
Ctrl + ? – Liga o quadriculado.
Ctrl + Q – Desliga o Photoshop.
Ctrl + R – Liga as réguas.
Ctrl + O – Abre a janela Abrir.
Ctrl + P – Abre a janela da Impressora.
Ctrl + Z – Volta um passo atrás.
Ctrl + Tab – Vai mostrando todos os trabalhos em progresso.
Ctrl + C - Copía
Ctrl + ; - Zoom para aumentar e para diminuir.
Ctrl + X – Corta algo que esteja seleccionado.
Ctrl + Alt + Shift + X – Abre a janela do Criador de Padrões
Ctrl + V – Cola algo seleccionado.
Ctrl + Shift + V – Copia algo para um espaço seleccionado.
Ctrl + Alt + Shift + V - Copia algo para fora do espaço seleccionado.
Ctrl + T – Ferramenta Transformar.
Ctrl + Shift + T – Repete a última transformação efetuada.
Shift + F5 – Abre a janela Preencher.
Ctrl + Shift + O – Abre o Localizador de Ficheiros
Ctrl + Shift + P – Abre o Configurar Página.
Ctrl + Shift + S – Abre a pagina Salvar Como
Ctrl + Shift + K – Abre a janela de Configuração de cores.
Ctrl + Shift + X – Abre a janela Dissolver.
Ctrl + Shift + N - Abre a janela Nova Camada.
Ctrl + Shift + M – Abre o ImageReady.
Ctrl + Shift + E – Mescla todas as camadas numa só.
Ctrl + Alt + Z – Volta atrás (não retrocede o feito).
Ctrl + Shift + Alt + N – Cria uma nova Camada limpa.
Ctrl + Shift + Alt + S - Abre a janela Guardar para a Web.
Ctrl + Alt + ~ - Carrega selecção.
Ctrl + Shift + I – Inverte uma selecção.
Colocando imagem no background (BLOGGER)
Precione CTRL + F e procure por body {
Substitui toda a linha background: por isto -> background: url(ENDEREÇO DA IMAGEM) center;
background-attachment: fixed;
ENTENDENDO O HTML DO BLOGGER
Body: é o corpo do blog. É onde você muda o plano de fundo (Background), colocando uma cor ou uma imagem,se preferir.
#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper - corresponde a toda a área do cabeçalho.
#header-inner
#header - corresponde a coluna dentro do cabeçalho.
#header h1 - corresponde ao nome do cabeçalho (título do blog).
#header a - corresponde ao link do nome do cabeçalho.
#header .description - corresponde a descrição do blog que fica dentro do cabeçalho.
#outer-wrapper: é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar, footer.
#main-wrapper: é a coluna total da área de postagens nos templates mínima a na maioria dos templates modificados. Este trecho abrange tudo que estiver contido na coluna central de postagens: coluna de posts, rodapé dos posts, área de comentários, links de navegação.
Nos templates Designer de Modelo,este trecho está representado por: .main-outer
#sidebar-wrapper: é é a área total da coluna onde ficam os gadgets/widgets e o perfil. Geralmente fazem parte do trecho da sidebar as seguintes variáveis:
.sidebar - é o interior da Coluna
.sidebar ul - refere a lista de links inteira
.sidebar li - Se refere aos itens das listas de links
.sidebar .widget - é onde fica o conteúdo de cada gadget.
.sidebar h2 - se refere ao titulo dos gadgets.
#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper - corresponde a toda a área do cabeçalho.
#header-inner
#header - corresponde a coluna dentro do cabeçalho.
#header h1 - corresponde ao nome do cabeçalho (título do blog).
#header a - corresponde ao link do nome do cabeçalho.
#header .description - corresponde a descrição do blog que fica dentro do cabeçalho.
#outer-wrapper: é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar, footer.
#main-wrapper: é a coluna total da área de postagens nos templates mínima a na maioria dos templates modificados. Este trecho abrange tudo que estiver contido na coluna central de postagens: coluna de posts, rodapé dos posts, área de comentários, links de navegação.
Nos templates Designer de Modelo,este trecho está representado por: .main-outer
#sidebar-wrapper: é é a área total da coluna onde ficam os gadgets/widgets e o perfil. Geralmente fazem parte do trecho da sidebar as seguintes variáveis:
.sidebar - é o interior da Coluna
.sidebar ul - refere a lista de links inteira
.sidebar li - Se refere aos itens das listas de links
.sidebar .widget - é onde fica o conteúdo de cada gadget.
.sidebar h2 - se refere ao titulo dos gadgets.
#newsidebar-wrapper: é a nova coluna. (geralmente os blogs com 3 colunas possuem este código).
#footer: é o rodapé do blog. Geralmente faz parte parte deste trechos as variáveis:
#footer
#footer-wrapper
.post: corresponde a coluna de postagens. Nesta coluna fica todo o espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé do post, link de comentários etc)Geralmente é representada pelas variáveis:
.post
.post-outer
.post-body (corpo do texto da postagem. É neste trecho que você define a fonte do texto de seus posts.)
.post-footer corresponde a área de rodapé dos posts.
Geralmente fazem parte deste trecho as variaveis:
post-footer-line-1
post-footer-line-2
post-footer-line-3
.comment-link: corresponde aos links de comentários na página inicial. Geralmente fica dentro da coluna do rodapé do post.
.post img: corresponde as imagens dentro do post.
.post-body img: correspondem as imagens publicada na postagem.
.post blockquote: corresponde aos trechos de textos destacados (citações).
#comments h4: corresponde ao titulo "Comentários" dentro da página interna.
Sobre a área de comentários, recomendo a leitura do artigo: Desmembrando a Área de Comentários
#blog-pager: corresponde aos links de navegação do blog. Fazem, parte deste trecho: #blog-pager-newer-link e #blog-pager-older-link.
.feed-links: corresponde ao trecho "Assinar: Postagens (Atom)".
.profile: corresponde ao trecho do gadget "Perfil".
Padding: determina as margens internas, é a distância entre o conteúdo de determinado elemento e a borda.
Ex: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Margin: determina a distância de um elemento para outro.
Ex: margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
width: determina a largura do elemento.
height: determina a altura do elemento.
float: determina a flutuação do elemento(posição em que se encontra).
Exemplos:
float:left - elemento posicionado à esquerda.
float:right - elemento posicionado à direita.
float:center - elemento posicionado ao centro.
a:link : são os links ativos do seu blog
a:visited : São os Links que já foram visitados.
a:hover: é a forma que o link ficará quando passamos o Mouse em cima dele.
O QUE SÃO TAGs ?
TAG significa etiqueta em inglês, é ela que informa ao navegador como determinado elemento deve ser exibido no seu blog.
Ela tem o seguinte forma < > quando aberta.
Veja exemplos de algumas tags básicas abaixo:
<p> - parágrafo
<b> - negrito
<i> ou <em> - itálico
<u> - sublinhado
<br> - quebra de linha
<ul> e <ol> - são as tags que indicam listas
<a> - são as tags que indicam links
<span> - tags que servem para estilizar texto
Lembrando que toda Tag que for aberta < > deverá ser fechada no final </> , caso contrário o código não será aceito.
COLOCANDO FEED FLUTUANTE EM SEU SITE ou BLOG
Entre no Painel do seu Blog ou Site (BLOGGER) Vá em Design, Adicionar um gadget, Html/Javascript e Adicione o código abaixo:
<script type="text/javascript" src="http://dl.dropbox.com/u/30158660/blogger-widgets/assinar-feed2.js"></script><div id="feed" style="visibility: hidden; background-color: #ffffff; width: 320px;height: 115px;border: 1px solid black; position: fixed; bottom: 10px; right: 10px; z-index:1000000"><div id="topo-title" align="center" style="width: 100%; height:16px; background-color: #000000"><span id="assinar-feed-head" style="font-size:12px; color:#ffffff;font-weight: bold;">ASSINE NOSSO FEED!<a href="javascript:closebar(feed);"><img src="http://lh5.googleusercontent.com/-aCxkTA3dmzs/Ti2IZcTakNI/AAAAAAAAAgA/KWG2E1hbsoc/CloseIcon.gif" widht="300px" height="16" px; align="right" border="0" title="Fechar" /></a></span></div><div style="width: 100%; height:auto !important; min-height: 84px; height: 84px;font-size:13px; font-weight:bold; color:black;"><a href="DIGITE AQUI O URL DO SEU FEED"><img src="http://lh3.googleusercontent.com/-5sPDxmvH-H4/Ti2An8KywrI/AAAAAAAAAf0/SECv4d2p_oQ/assinar-feed.png" align="left" alt="Inscrever-Rss-Feed" title="Cadastre-se no nosso Feed!" /></a>Cadastre seu <u>E-mail</u> e receba nossas atualizações diretamente no seu e-mail!<br /><br /><form align="center" action='http://feedburner.google.com/fb/a/mailverify' method='post' target="_blank"><input type="text" style="width:230px" name="email" value="Coloque seu E-mail aqui!" onblur="if (this.value == '') {this.value = 'Coloque seu E-mail aqui!';}" onfocus="if (this.value == 'Coloque seu E-mail aqui!') {this.value = '';}" align="center" /><input name="uri" type="hidden" value="NOME-DO-FEED" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form><p style="text-align: center;margin-top:0px;font-size:80%"><a href=" "> </a> | <a href=" "></a></p></div></div>
PRONTO !
ALTERANDO APARÊNCIA DAS COLUNAS (BLOGGER)
Para fazer alterações de bordas e planos de fundo nas colunas do template, procure no codigo do template:
#main-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;
margin-left: 0px;
width: 400px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;
margin-right: 0px;
width: 165px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Onde #main-wrapper é a coluna de postagem e #sidebar-wrapper a do perfil.
Se você deseja colocar uma cor como plano de fundo da coluna use background-color: e o código da cor. Se deseja uma imagem, coloque background: url(endereço da imagem) repeat;
Em border você estabelecerá, como vimos em Header, a largura, cor e textura da borda. Aqui valem os mesmos procedimentos. Se você deseja colocar borda somente no topo e em uma das laterais, por exemplo, é só colocar:
border-top: 1px solid #00000; (largura em pixels e cor, somente como exemplos)
border-left: 1px solid #000000;
Assim a coluna terá borda somente no topo e do lado esquerdo. Se deseja borda em toda volta da coluna é só colocar:
border: 1px solid #000000; (sem precisar estabelecer onde a borda deve aparecer.)
Width estabelece a largura da coluna.
COMO REDIRECIONAR UM BLOG/SITE
#main-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;
margin-left: 0px;
width: 400px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;
margin-right: 0px;
width: 165px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Onde #main-wrapper é a coluna de postagem e #sidebar-wrapper a do perfil.
Se você deseja colocar uma cor como plano de fundo da coluna use background-color: e o código da cor. Se deseja uma imagem, coloque background: url(endereço da imagem) repeat;
Em border você estabelecerá, como vimos em Header, a largura, cor e textura da borda. Aqui valem os mesmos procedimentos. Se você deseja colocar borda somente no topo e em uma das laterais, por exemplo, é só colocar:
border-top: 1px solid #00000; (largura em pixels e cor, somente como exemplos)
border-left: 1px solid #000000;
Assim a coluna terá borda somente no topo e do lado esquerdo. Se deseja borda em toda volta da coluna é só colocar:
border: 1px solid #000000; (sem precisar estabelecer onde a borda deve aparecer.)
Width estabelece a largura da coluna.
COMO REDIRECIONAR UM BLOG/SITE
Pessoal que tem mais de um blog às vezes depois de algum tempo querem deixar de fazer postagem, mais não abadona o blog, muitos fazem postagem de despedida, deixando o link de seu novo site/blog, com isso alguns dos visitantes vão para o novo blog, mais certamente perdem visita com isso. Existe um código de redirecionamento que envia todas as visitas para seu novo blog,
<script language="javascript" type="text/javascript">
location.replace("SEU SITE")
</script>
----------------------------------------------------------------------
2º Copie o codigo Acima
----------------------------------------------------------------------
3º Basta você logar sua conta no blogger ir em Design > Adicionar um Gadget > HTML/JavaScript
1º você só precisa colocar o link de seu novo blog ou site onde esta escrito seu site no código abaixo:
----------------------------------------------------------------------<script language="javascript" type="text/javascript">
location.replace("SEU SITE")
</script>
----------------------------------------------------------------------
2º Copie o codigo Acima
----------------------------------------------------------------------
3º Basta você logar sua conta no blogger ir em Design > Adicionar um Gadget > HTML/JavaScript
----------------------------------------------------------------------
4º Clique em "Salvar " e pronto!
