Dicas Blogger

Home » Archives for julho 2010

Template Sky 2

Esta é a versão do <a href="http://www.dicasblogger.com.br/2010/07/template-sky.html" target="_blank">Template Sky</a>, com a sidebar do lado direito e com caixa de busca no cabeçalho do blog. Mantive todos os demais recursos, bem como o plano de fundo e as cores e fontes da versão anterior. 
 
<img alt="Template Sky 2" border="0" height="274" src="http://lh4.ggpht.com/_EttevOw0KeE/TFQarEUbmxI/AAAAAAAAJ4E/QWYYkKwE-OA/image%5B13%5D.png?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Template Sky 2" width="520" /> 
 <div align="center">
<a href="http://tempsky2.blogspot.com/" target="_blank">Demonstração</a> – <a href="https://drive.google.com/file/d/0B7G-mAQQKCyZVTg0ZlNnT25pY1U/view?usp=sharing" target="_blank">Download</a> – <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.pt" target="_blank">Licença</a></div>
<div align="center">
Por favor, não retire os créditos</div>
 
 <table cellpadding="2" cellspacing="2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: #eeeeee; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 3px solid rgb(204, 204, 204); text-align: left; width: 100%;"><tbody>
<tr> <td valign="top" width="275">RECURSOS INSTALADOS 
<ul>
<li><a href="http://dicasblogger.blogspot.com/2008/02/cdigo-para-posts-relacionados.html">Posts Relacionados</a> </li>
<li><a href="http://dicasblogger.blogspot.com/2008/04/retirar-navbar-do-blogger.html">Retirada da Navbar</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html">Hack Leia Mais</a> e <a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html">jump break</a> </li>
<li><a href="http://www.ferramentasblog.com/2010/06/share-buttons-do-blogger-oficialmente.html">Share Buttons oficial</a> </li>
<li><a href="http://usuariocompulsivo.blogspot.com/2008/08/como-personalizar-o-navegador-do.html">Personalização dos ícones de navegação</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html" target="_blank">Favicon</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/avatar-nos-comentarios-do-blogger.html">Avatar nos comentários</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html">Citação em bloco personalizada</a> </li>
<li><a href="http://blogger-dicasmamanunes.blogspot.com/2010/05/criar-uma-caixa-de-busca-com-puro-css3.html" target="_blank">Caixa de busca em CSS3</a> </li>
</ul>
</td> <td valign="top" width="275">CARACTERÍSTICAS DO TEMPLATE 
<ul>
<li>Cores e fontes personalizáveis </li>
<li>Compatível com qualquer navegador que esteja devidamente atualizado. </li>
<li>4 colunas à direita </li>
<li>3 blocos de widgets no rodapé </li>
<li>Diversos hacks instalados </li>
<li>Nome do seu blog no rodapé (auto) </li>
<li>CSS otimizado </li>
<li>Carregamento mais rápido </li>
</ul>
</td> </tr>
</tbody></table>
<div align="left">
Modo de Usar</div>
<div align="justify">
A seguir, explicarei como funciona cada ítem do template. Para um melhor aproveitamento, acesse os posts de referência. </div>
<div align="justify">
Quando for necessário encontrar algum trecho dentro do template, vá até desing > editar html. Marque a caixa expandir modelos de widgets. Dê um Crtl+F em seu teclado e cole na caixa de busca do seu navegador o trecho que está buscando.</div>
<div align="left">
Instalando o template em seu blog</div>
<div align="left">
Baixe o arquivo .zip, clique com o botão direito do mouse e escolha abrir. Dentro da pasta, você vai encontrar um arquivo chamado Template Sky2.xml. Se você não sabe como trocar o template do seu blog, acesse:</div>
<ul>
<li><a href="http://www.dicasblogger.com.br/2009/01/como-trocar-o-template-do-blogger.html">Como trocar o template do Blogger</a> </li>
</ul>
Configurando a imagem do cabeçalho 
 Crie uma imagem do tamanho 970 x 100, com fundo transparente, usando o Photoshop ou outro programa de sua preferência (sugestão: <a href="http://www.pixlr.com/" target="_blank">Pixrl</a>) 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/imagem-para-o-cabecalho-do-blogger.html">Imagem para o cabeçalho do Blogger com Photoshop</a> </li>
</ul>
A fonte que utlizei pra fazer o cabeçalho do Template Sky 2 chama-se Atlas e está disponível para download no site <a href="http://www.urbanfonts.com/fonts/Atlas.htm" target="_blank">UrbanFonts</a> 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instalando-fontes-no-photoshop.html">Instalando novas fontes no Photoshop</a> </li>
</ul>
Usando o resumo de postagens 
 No Template Sky 2 instalei o jump break do Blogger e o hack leia mais com corte manual, assim, quem já usava um dos dois não vai perder as configurações anteriores 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html">Dicas Blogger: Como colocar o hack “Leia Mais” no Blogger</a> </li>
</ul>
Colocando links na linkbar 
 Para colocar links no menu que fica embaixo do cabeçalho, acesse: 
 <ul>
<li><a href="http://dicasblogger.blogspot.com/2009/01/como-inserir-links-na-linkbar.html">Como inserir links na linkbar</a> </li>
</ul>
Mudando o background (plano de fundo) 
 Você pode trocar, facilmente, a imagem que compõe o fundo do Template Sky 2. Procure pelo trecho abaixo e substitua a url do atual background ( em azul ) pela url de outro de sua preferência (Sugestão de backgrounds: <a href="http://www.backgroundlabs.com/" target="_blank">Background Labs</a>). 
 <blockquote>
<div align="left">
body { text-align:center; color:$textColor; background: url(<a href="http://lh3.ggpht.com/_mcq01yDJ2uY/TFDzo3r782I/AAAAAAAACiY/CDgLPFz_0Zk/86.jpg%29">http://lh3.ggpht.com/_mcq01yDJ2uY/TFDzo3r782I/AAAAAAAACiY/CDgLPFz_0Zk/86.jpg)</a> repeat top left; font-family:arial,verdana,helvetica,tahoma,Sans-serif;</div>
</blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/mudar-background-plano-de-fundo-blogger.html">Como mudar o background nos templates do Blogger</a> </li>
</ul>
Como alterar a cor dos links do rodapé 
 Os links do rodapé estão na cor amarela. Para alterar a cor, encontre este trecho: 
 <blockquote>
#creditleft a,.creditleft a:hover,.creditleft a:visited,#creditright a,.creditright a:hover,.creditright a:visited { color: #ffff00; text-decoration:none; }</blockquote>
Mude a parte que está em vermelho. Veja uma tabela de cores <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">neste link</a>. 
 Backup de Imagens 
 É altamente recomendável que você hosperede no Picasa a imagem do background: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a> </li>
</ul>
Alterando o favicon 
 Favicon é aquele pequeno ícone que aparece no navegador, ao lado do endereço do blog. O Template Sky 2 já vem com um favicon instalado. caso queira mudá-lo, procure pelo trecho abaixo e substitua o endereço da imagem (em azul) 
 <blockquote>
<div align="left">
]]></b:skin> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png'</a> rel='shortcut icon'/> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png'</a> rel='apple-touch-icon'/> </div>
<div align="left">
<link href='<a href="http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png%27">http://lh4.ggpht.com/_mcq01yDJ2uY/TFD3fCYfkQI/AAAAAAAACi0/pi4mIHvNmTM/favicon.png'</a> rel='shortcut icon' type='image/x-icon'/></div>
</blockquote>
<ul>
<li><a href="http://www.dicasblogger.com.br/2008/10/colocando-favicon-no-blog.html">Colocando favicon no blog</a> </li>
</ul>
Alterando as fontes e as cores 
 Todas as fontes e todas cores do template Sky 2 podem ser alteradas através do painel do Blogger. Entre em designer do modelo e procure pela opção avançado 
 <a href="http://lh6.ggpht.com/_EttevOw0KeE/TFiyeINdoyI/AAAAAAAAJ6k/3RHnXSDdS70/s1600-h/image8%5B3%5D.png"><img alt="Fontes e Cores" border="0" height="135" src="http://lh4.ggpht.com/_EttevOw0KeE/TFGg-yPXgmI/AAAAAAAAJ6o/WeqVQeoFaSI/image8_thumb%5B3%5D.png?imgmax=800" style="border: 0px none; display: block; float: none; margin-left: auto; margin-right: auto;" title="Fontes e Cores" width="502" /></a> 
 ATENÇÃO: Se você estava usando um dos novos modelos do Blogger, será necessário instalar antes o Template Mínima para retirar o gadget atribuition. 
 <ul>
<li><a href="http://www.dicasblogger.com.br/2010/06/voltar-usar-antigos-templates-blogger.html">Como voltar a usar os antigos templates do Blogger</a> </li>
</ul>
Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, <a href="http://www.google.com.br/">pesquise</a> como fazer. 
 Saiba mais sobre a utilização de nossos templates gratuitos, acessando: 
 <ul>
<li><a href="http://www.dicasblogger.com.br/p/termos-e-condicoes-de-uso.html" target="_blank">Termos de Uso do Dicas Blogger</a> </li>
</ul>
©Template by <a href="http://www.dicasblogger.com.br/">Dicas Blogger</a> – alguns direitos reservados. Não retire os créditos.

Template Sky 2

Esta é a versão do Template Sky , com a sidebar do lado direito e com caixa de busca no cabeçalho do blog. Mantive todos os demais recursos,...