Pular para o conteúdo principal

Postagens

Mostrando postagens de Setembro, 2008

Template Drop Shadow

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 alguma outra coisa, com…

Google - Projeto 10 elevado a100

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)

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:752px; position:relative; left:50%; margin:0 -380px; background:#ffffff; height:30px; }
h1
{ width:752px; 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:block; float:left; position:r…

Adicionar colunas no template

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.
Adicione o código a seguir embaixo de…

Gerador de selos para email

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

É 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/12/08
Um bug foi encontrado no primeiro script, mas um novo a…

Caixa de Busca

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

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

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" href="http:/…

Resumir Postagens

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

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

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!