Postagens

Mostrando postagens de setembro, 2008

Template Drop Shadow

Imagem
Download Drop Shadow é um template para wordpress convertido para o blogger. Informações: Duas colunas com barra lateral direita Com a aparência elegante design moderno caixa de pesquisa guia de navegação Google Adsense pronto (468 × 60 banner de 250 × 250 sidebar) Para configurar o menu, procure pelo código abaixo no HTML do template e altere os links. <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='http://blogger.com'>Blogger</a></li> <li><a href='http://themelib.com'>ThemeLib</a></li> <li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS</a></li> Este template é bem integrado com o Adsense 468 × 60. Para alterar, pesquise por <div class='ads'>, você verá o código do Adsense, substitua-o pelo seu código. Se você não tem anúncios para usar, pode apenas apagar o código, ou colocar al

Google - Projeto 10 elevado a100

Imagem
Tem uma super idéia que possa mudar o mundo? Mande para o Google. O pessoal lá está convocando essas ideias e as idéias mais votadas vão ser concretizadas. O Google vai investir US$ 10 milhões para implementar esses projetos. As incrições vão até o dia 20 de Outubro. Clique AQUI para mais informações. Vejam o video Créditos da Imagem: Google - http://www.google.com.br/

Widget Comentarios Recentes

Quer mostrar aos seus leitores, quais foram os últimos comentarios ou comentaristas? Preencha os campos do formulário abaixo, e depois clique em gerar. Pegue o código e cole em um novo elemento de HTML/JAVASCRIPT do seu blog. Não consegue ver o instalador? Clique AQUI

Menu Horizontal com Drop Down (CSS)

Imagem
Viu o menu que está embaixo do cabeçalho? Nesse tutorial você irá aprender a fazer um igual a ele. Para começar, vá em Layout > Editar HTML, e faça um backup do seu template clicando em baixar modelo completo. Depois procure pelo código ]]></b:skin> , e cole o código a seguir antes dela: /* Menu Horizontal Com Drop Down by Jean Nunes */ div#container { width: 752 px; position:relative; left:50%; margin:0 -380px; background: #ffffff ; height:30px; } h1 { width: 752 px; margin:1px; color: #4C1B1B ; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; } p { margin:0; padding:1.2em; } p a:link, p a:visited, p a:hover, p a:active { font-weight:bold; color: #94CE4E ; } ul#navigation-1 { margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #94CE4E ; border-bottom:1px solid #94CE4E ; font:normal 8pt verdana, arial, helvetica;} ul#navigation-1 li { margin:0; padding:0; display

Adicionar colunas no template

Imagem
Esse tutorial eu encontrei no TEMPLATES PARA NOVO BLOGGER e resolvi reescrevê-lo. Bom, para começar vá em Layout > Editar HTML, e clique em Baixar Modelo Completo. Depois, procure por essa parte no template: /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 900px; margin:0 auto; padding:0px; text-align:left; font: $bodyfont; background-color: #bgcolor; } #main-wrapper { margin-left: 3px; width: 468px; 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 { margin-right: 0px; width: 210px; 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 */ } Atenção! Outer-Wrapper > Todo o template; Main-wrapper > coluna do post; Sidebar-wrapper > é a coluna lateral. Adic

Texto riscado

O efeito de texto riscado é muito fácil de fazer e não altera significativamente o desempenho do seu site.

Gerador de selos para email

Imagem
No site NEXODYNE.com você encontra diversos serviços gratuitos para seu site/blog. Foruns, geradores e etc. O gerador de selos para email é um dos serviços da Nexodyne. É bem fácil para adquirir. Ele oferece selos para 25 servidores, entre eles o Yahoo!, MSN, GMail, Hotmail e Live. Para pegar o seu, siga ESTE LINK .

Comentários com Smiles

Imagem
É isso mesmo. A mesma funcionalidade do wordpress, aqui no blogger. Baixe esse arquivo: ADDSMYLE.js Hospede em um local de sua preferência (eu recomendo Google Pages ou SkyDrive). Copie o código abaixo e substitua onde está escrito 'ENDEREÇO/smyle.js' pelo endereço do seu arquivo: <script src='ENDEREÇO/Smiley.js' type='text/javascript'/> Vá em Layout > Editar HTML e procure por </body> e cole o código antes da tag ( /body ) * Para ver o tutorial explicando como usar scripts hospedados no Sky Drive, veja ESSE TUTORIAL do Dicas Blogger . **Créditos da imagem não encontrados. Se alguém souber, me contate por favor! Este hack pode ser feito também através do blog do autor do script (addsmile.js). Clique AQUI , e conheça o Singpolyma . Códigos dos Smiles: :­­) ou :-­) :­­D ou :-­D :­­$ ou :-­$ :­­( ou :-­( :­­p ou :-­p ;­­) ou ;-­) :­­k ou :-­k :­­@ ou :-­@ :­­# ou :-­# :­­x ou :-­x :­­o ou :-­o Update dia 10/

Tabela de Cores

Caixa de Busca

Imagem
Para adicionar o widget de busca, faça o seguinte: Vá em Layout, Elementos de Página e clique em Adicionar Gadget. Escolha a opção HTML/JavaScript. Copie o seguinte código: <form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form> E cola na caixa Conteúdo. Salve e pronto.

Ocultar Navbar

Imagem
A navbar do blogger tem seus encantos, mas quebra qualquer template. Para ocultá-la, procure pela tag ]]></b:skin]> Cole antes dela o seguinte código: #navbar-iframe { height: 0px; visibility: hidden; display: none; }

Efeito Lightbox

Imagem
Esse hack e muito legal. As imagens podem ser visualizadas sem sair da página. Para ver um exemplo, clique na imagem abaixo: Vamos a primeira parte: 1. Clique AQUI , para baixar os arquivos necessários para esse hack e hospede em um local desejado (anote o endereço dos arquivos). 2. Vá em Editar HTML, marque a opção Expandir Modelos de Widgets e procure pela tag: ]]></b:skin> 3.Depois, cole embaixo dela o seguinte código substituindo as URLs pelos links que você anotou a pouco: <script src="http://URL_DO_ARQUIVO/prototype.js" type="text/javascript"></script> <script src="http://URL_DO_ARQUIVO/effects.js" type="text/javascript"></script> <script src="http://URL_DO_ARQUIVO/scriptaculous.js" type="text/javascript"></script> <script src="http://URL_DO_ARQUIVO/lightbox.js" type="text/javascript"></script> <link rel="stylesheet" h

Resumir Postagens

Imagem
Este hack feito pela Ariane do Templates Para Novo Blogger é muito legal para os blogueiros que costumam escrever bastante nos posts. 1. Vá em Editar HTML, clique em expandir modelos de widgets e procure por esse código (para facilitar aperte CTRL + F no teclado): <p><data:post.body/></p> Depois, substitua por: <b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/></p> <a expr:href='data:post.url'>Leia mais…</a> </b:if> 2. Salve e vá em Configurações > Formatação e procure por Modelo de Postagens. Lá coloque o seguinte código: Começo do Post <span class="fullpost"> Fim do post </span> Salve novamente e pronto.

Widget Link-me

Imagem
Uma forma muito simples e efetiva de divulgar um blog, é através de parcerias. Um jeito muito fácil de começar isso, é instalando um widget que estimule os usuários a criar links que apontem ao seu blog. Para facilitar este processo, eu criei um gerador de widgets Link-Me. Basta preencher os campos e clicar em gerar para obter o seu código.

Destacar Áreas do Post

Imagem
Como meu primeiro tutorial aqui no blog, vou mostrar como destacar algumas áreas de um post. Isso é relativamente fácil porque não exige muito conhecimento em CSS e é muito rápido pois precisa apenas de algumas modificações no código ele estará pronto para ser usado. Veja o exemplo: Código sem destaque. Código destacado. Dependendo do seu conhecimento sobre CSS (ou da sua vontade de procurar no Google ;D), você pode modificar o CSS e criar coisas incríveis. O código de base é: .highlight { margin : 0px; padding : 5px; background-color : lightyellow; border : 1px solid yellow; } Onde: Margin é a distância em pixels do conteúdo com os outros elementos; Padding se refere à distância em pixels do conteúdo com a borda; Background-color é a cor do fundo; Border modifica a borda da caixa (espessura, tipo e cor). Sinta-se livre para modificar o código e depois, inseri-lo no código HTML do seu blog (Templates > Editar HTML) antes da tag . Enjoy it!