bloGospelando

Como mostrar Avatar nos Comentários Blogger

noreply@blogger.com (Mana) — Sun, 13 Jun 2010 17:00:00 +0000

Hoje procurei na internet, pois queria implementar meu Template mostrando o Avatar de meus comentadores e encontrei algo bem fácil e que funciona legal. A tradução do tutorial segue abaixo. :-)

Vá até Design, Editar HTML e salve uma cópia de seu template clicando em baixar template completo.
Agora clique em expandir Widgets e procure pelo seguinte código (ou algo parecido):
<dl id='comments-block'>
Troque por:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Depois procure por esta linha:
<a expr:name='data:comment.anchorName'/>
e adicione o seguinte código logo abaixo da linha:

<b:if cond='data:blog.enabledCommentProfileImages'>

              <data:comment.authorAvatarImage/>

            </b:if>

Agora salve e dê uma olhada nos comentários!

Para seus comentadores que não possuem Avatar utilize o tutorial abaixo para mostrar uma imagem neutra!

Procure pela linha:
<a expr:name='data:comment.anchorName'/>
e substitua pelo código:

<b:if cond='data:comment.favicon'>



<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>



</b:if>

Agora adicione o seguinte código logo abaixo de ]]></b:skin> :

/* Avatar */

.avatar-image-container img {

background:url(http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/AvatarBlogger.png);

width:35px;

height:35px;

}

Salve e pronto!

Obs: Se este tutorial não funcionar tenha certeza que "Mostrar imagens de perfil nos comentários?" está ativado (Configurações - Comentários)

O artigo original em Inglês você encontra aqui.

Amarelinha: Novo Template grátis para o Blogger

noreply@blogger.com (Mana) — Fri, 11 Jun 2010 17:48:00 +0000

Este é um template para quem gosta de bolinha! É o primeiro template grátis do site bloGospelando. Dê uma espiadinha: Amarelinha Demo

Fonte utilizada no título e nos títulos das mensagens: Accent.

Você provavelmente tb já percebeu que os títulos dos Posts tb utilizam a fonte Accent. Se você quiser mantê-la, olhe este tutorial de Como utilizar qualquer fonte nos Títulos de suas mensagens.O código já se encontra no template, mas você deverá modificar os links que receberá após seguir os passos do tutorial.
Por favor, utilize o seu servidor para hospedar as imagens (que estão no Download)!
No download você receberá também o logo (sem o título) em PNG, assim poderá personalizar com o nome e descrição de seu site, além dos 4 arquivos já modificados para este Template, necessários no tutorial de Como utilizar qualquer fonte nos Títulos de suas mensagens!

Personalizando seu Template!

1° Para inserir o Logo (Imagem) vá até Design, depois Elementos de página e adicione o Gadget Cabeçalho.

2° Modifique os links do Twitter e do RSS Feed: Vá até Design, Editar HTML e procure por esta parte do código:



<a href="http://feeds.feedburner.com/bloGospelando" target="_blank"><img alt="RSS INSCREVER" border="0" src="http://i41.tinypic.com/2w4fh2q.png" /></a>

<a href="http://twitter.com/bloGospelando" target="_blank"><img alt="Siga-me no Twitter" border="0" src="http://i41.tinypic.com/25jwpoj.png" />

O código acima se encontra logo abaixo de :<b:section class="header" id="header-right" showaddelement="yes">
Para procurar com maior facilidade, no Firefox aperte Ctrl+F e copie uma parte do código.
Substitua os links em vermelho pelos seus e pronto.

Qualquer dúvida ou Bugs, favor deixar um comentário neste site. Farei o possível para responder e tentar ajudar.

Alinhamento perfeito de imagens e textos

noreply@blogger.com (Mana) — Fri, 11 Jun 2010 16:24:00 +0000

Aqui está algo que eu vi em alguns templates enquanto tentava solucionar o problema do meu. Se as imagens do seu blog ou os textos mais longos estão cobrindo o sidebar ou seja, elas nao terminam quando a margem termina, aqui está um truque!
Antes de mudar alguma coisa em seu template, salve-o!
Utilize a seu risco :-)

Em #content-wrapper e # sidebar-wrapper acrescente:

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 */

Como utilizar qualquer fonte nos títulos de suas Mensagens

noreply@blogger.com (Mana) — Fri, 11 Jun 2010 12:25:00 +0000

Esta é a atualização de meu post anterior, aonde ensino a utilizar qualquer fonte.

Se você quiser dar um ar personalizado em seu Blog, utilizar uma fonte diferente e de seu gosto é uma ótima opção.
O problema de usar uma fonte diferente é que seu visitante só irá ler seu blog com esta fonte, se ele também tiver instalada em seu computador. Mas há um truque para transformar a fonte em um tipo de imagem e todos poderão ver, atém mesmo sem ter a fonte instalada no computador.
Você pode mudar, além do título de seus posts, os títulos do sidebar e a fonte da data de seus posts.
Veja aqui um outro exemplo além do meu Blog :-)
Ok, vamos ao tutorial!

1° Escolha uma fonte que lhe agrade. Neste site há muitas fontes bonitinhas e grátis.
Salve a fonte no computador e unzip (extraia a fonte da pasta).

2° Vá até http://www.sifrgenerator.com/wizard.html

Clique em Browse e procure a fonte que você salvou em seu computador. Então clique em next...

3° No próximo passo confirme que sIFR 3 r436 é a opção assinalada e clique em next.

4° No passo 3 escolha de preferencia a última opção.

5° No próximo passo aparecerá uma prévia de sua fonte, apenas clique em next.

6° Agora clique em Download.

7° Você terá também que salvar estes 4 arquivos em seu computador (Clique com o botão direito do mouse e escolha opção "Salvar Target Como" ou "Salvar Link Como".

sifr.css
sifr.js
blogger-sifr.js
index.htm

8° Agora precisará criar uma conta grátis no Bravenet.com. Escolha um endereço, crie uma senha e clique em Join Bravenet.

Você será direcionado para uma página como esta mostrada na imagem abaixo. Siga as instruções da imagem abaixo.

Aparecerá uma página com propaganda. Apenas clique em No Thanks, Skip offer

Feche a próxima janela. Não precisarás dela. Agora abra sua caixa de emails (o mesmo email que você deu na inscrição). Voce já deve ter recebido o email de confirmação. Clique no primeiro link (o mais longo) para confirmar. Abrirá uma janela nova com a seguinte imagem. Siga as instruções:

Clique em Websites, depois em Get Bravehost e depois em Free: Sign up now

Websites

get bravehost

SING UP now

Clique em Build a New Website. Uma nova janela pequena abrirá, clique na primeira opção (Use a subdomain). Na próxima janela escreva o nome de seu site (preferencia nome de usuário)

Agorá você clicará em File Manager e depois em Upload File.

Clique em Browse e procure o arquivo com a fonte (swf) que você criou nos passos acima. Repita esta operação com os outros 4 arquivos que você fez o download anteriormente e clique em Upload.
Uma vez que todos os cinco arquivos foram salvos, encontre o arquivo .swf (que é a fonte que você escolheu) e clique nele para abrir. Copie a URL que aparecerá no topo desta nova janela que se abrirá.

Retorne ao "File Manager" e clique no lápis (Edit) do arquivo blogger-sifr.js. Quando você abrir este arquivo aparecerá assim:

var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);

Troque esta parte:http://username.webs.com/fontname.swf pela URL que você copiou anteriormente (a URL do seu arquivo .swf). Não delete as aspas (' ') em torno da URL que você irá substituir ou o código não funcionará.

Abaixo você verá partes divididas em: "Post Title, Date e Sidebar Titles". Em cada parte aparece algo assim:

css: ['.sIFR-root { color: #FA4C8C;  font-size: 28px;  font-weight: normal; }'

,'a { text-decoration: none; }'

,'a:link { color: #FA4C8C;  }'

,'a:hover { color: #FA4C8C;  }

Aonde diz color: #FA4C8C; Mude os códigos FA4C8C pelo código da cor de fonte que voce escolheu. Neste link voce pode escolher a cor que desejar e copiar o código.
Voce também pode mudar o tamanho da fonte aonde aparece 28px. Mude somente o número.

As tres partes podem ser personalizadas "Post Title (título dos posts), Date (data) e Sidebar Titles (título do sidebar)" da mesma forma. Brinque com as cores e tamanhos da fonte até ficar satisfeito com o resultado.
Quando tiver acabado salve suas alterações clicando no disquete (ver imagem abaixo).

10° Agora é hora de colocar o código em seu Blog. Vá até Painel -> Layout -> Editar HTML.
Procure por </head> (para encontrar rapidamente CTRL+F).
Logo acima de </head> cole o seguinte código:

<link href='http://username.bravehost.com/sifr.css' media='all' rel='stylesheet' type='text/css'/>

<script src='http://username.bravehost.com/sifr.js' type='text/javascript'/>

<script src='http://username.bravehost.com/blogger-sifr.js' type='text/javascript'/>

Aonde diz username terá que trocar pelo nome que você deu ao seu site, o nome que aparece na sua URL(lembra que eu disse para colocar de preferencia o nome de usuário, é mais fácil de lembrar agora :-).

Salve e vá lá ver o resultado. É normal que primeiramente apareça a sua fonte antiga e depois a nova, pois não se esqueca que sua nova fonte é como se fosse uma imagem que leva um pouco mais de tempo para aparecer.
Qualquer dúvida deixe sua pergunta nos comentários e o link para seu blog que dou uma olhadinha! :-) Have fun!

Este tutorial é baseado no tutorial do site www.kevinandamanda.com (inglês).

Software grátis todos os dias

noreply@blogger.com (Mana) — Tue, 01 Dec 2009 10:59:00 +0000

Se você ainda não conhece o site www.giveawayoftheday.com, já está na hora de conhecer. Ele oferece todos os dias Softwares, que normalmente custam uma boa grana, grátis. Mas você deve fazer o download e instalar no mesmo dia, antes da oferta terminar, senão não irá funcionar!

Como usar qualquer fonte nos títulos dos Posts de seu blog

noreply@blogger.com (Mana) — Sat, 01 Aug 2009 18:44:00 +0000

Se você quiser dar um ar personalizado em seu Blog, utilizar uma fonte diferente e de seu gosto é uma ótima opção.
O problema de usar uma fonte diferente é que seu visitante só irá ler seu blog com esta fonte, se ele também tiver instalada em seu computador. Mas há um truque para transformar a fonte em um tipo de imagem e todos poderão ver, atém mesmo sem ter a fonte instalada no computador.
Você pode mudar, além do título de seus posts, os títulos do sidebar e a fonte da data de seus posts.
Veja aqui um exemplo.
Ok, vamos ao tutorial!

TUTORIAL ATUALIZADO:

POR FAVOR VISITE ESTE NOVO POST.
O WEBS.COM MUDOU E NAO É MAIS POSSÍVEL, PARA AS NOVAS CONTAS, SUA UTILIZAÇÃO NESTE TUTORIAL. MAS SEM DESESPERO, POIS ENCONTREI UMA NOVA HOSPEDAGEM PARA AS NOSSAS FONTES QUERIDAS :-)

1° Escolha uma fonte que lhe agrade. Neste site há muitas fontes bonitinhas e grátis.
Salve a fonte no computador e unzip (extraia a fonte da pasta).

2° Vá até http://www.sifrgenerator.com/wizard.html

Clique em Browse e procure a fonte que você salvou em seu computador. Então clique em next...

3° No próximo passo confirme que sIFR 3 r436 é a opção assinalada e clique em next.

4° No passo 3 escolha de preferencia a última opção.

5° No próximo passo aparecerá uma prévia de sua fonte, apenas clique em next.

6° Agora clique em Download.

7° Você terá também que salvar estes 4 arquivos em seu computador (Clique com o botão direito do mouse e escolha opção "Salvar Target Como" ou "Salvar Link Como".

sifr.css
sifr.js
blogger-sifr.js
index.htm

8° Agora precisará criar uma conta grátis em Webs.com. Escolha um endereço, crie uma senha e clique em Create Website. Você será direcionado para uma página como esta mostrada na imagem abaixo.

Preencha os campos em branco, como "Email Adress" (email), "Password" (senha), "Your Name" (Seu nome) "Birthdate" (data de nascimento), "Gender" (sexo - male/masculino e female/feminino).
Depois clique em "Use advanced HTML mode", frase em destaque na imagem.
Quando clicar, deverá colocar o nome do site "Site Adress" e confirmar através de Word Captcha. Somente preencha o campo em branco com as palavras que aparecem acime do mesmo. Clique em:

I agree to the Terms of Service

e depois, em Continue to next step.

Se aparecer uma nova janela como esta:

Clique em "Continue".

9° Agora sua conta está criada e não se esqueça de adicionar esta página em seus favoritos, para acessar mais facilmente. Próximo passo: clique em "File Manager"

aparecerá uma nova janela.

Clique primeiro em "htdocs" e depois em "Upload" . Lá embaixo aparecerá um uma divisão na janela, como na figura abaixo.

Procure o arquivo com a fonte (swf) que você criou nos passos acima. Depois clique em "Upload" ao lado do botao Browse. Repita esta operação com os outros 4 arquivos que você fez o download anteriormente.
Uma vez que todos os cinco arquivos foram salvos no Webs.com, encontre o arquivo .swf e clique nele para abrir. Copie a URL que aparecerá no topo desta nova janela que se abrirá.

Retorne ao "File Manager" e clique no lápis (Edit) do arquivo blogger-sifr.js. Quando você abrir este arquivo aparecerá assim:

var kevinandamanda =
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);

Troque esta parte:http://username.webs.com/fontname.swf pela URL que voce copiou anteriormente (a URL do seu arquivo .swf). Nao delete as aspas (' ') em torno da URL que voce irá substituir ou o código nao funcionará.

Se antes voce nao conseguiu abrir o arquivo .swf, troque username pelo username que voce escolheu para usar no Webs.com e fontname pelo nome da sua fonte.

Abaixo voce verá partes divididas em: "Post Title, Date e Sidebar Titles". Em cada parte aparece algo assim:

css: ['.sIFR-root { color: #FA4C8C; font-size: 28px; font-weight: normal; }'

,'a { text-decoration: none; }'

,'a:link { color: #FA4C8C; }'

,'a:hover { color: #FA4C8C; }

Aonde diz color: #FA4C8C; Mude os códigos FA4C8C pelo código da cor de fonte que voce escolheu. Neste link voce pode escolher a cor que desejar e copiar o código.
Voce também pode mudar o tamanho da fonte aonde aparece 28px. Mude somente o número.

As tres partes podem ser personalizadas "Post Title (título dos posts), Date (data) e Sidebar Titles (título do sidebar)" da mesma forma. Brinque com as cores e tamanhos da fonte até ficar satisfeito com o resultado.
10° Agora é hora de colocar o código em seu Blog. Vá até Painel -> Layout -> Editar HTML.
Procure por </head> (para encontrar rapidamente CTRL+F).
Logo acima de </head> cole o seguinte código:

<link href='http://username.webs.com/sifr.css' media='all' rel='stylesheet' type='text/css'/>

<script src='http://username.webs.com/sifr.js' type='text/javascript'/>

<script src='http://username.webs.com/blogger-sifr.js' type='text/javascript'/>

Aonde diz username terá que trocar pelo seu username em Webs.com que é também o nome de seu site (nao o título do site, mas o nome que aparece na sua URL).

Salve e vá lá ver o resultado. É normal que primeiramente apareca a sua fonte antiga e depois a nova, pois nao se esqueca que sua nova fonte é como se fosse uma imagem que leva um pouco mais de tempo para aparecer.
Qualquer dúvida deixe sua pergunta nos comentários e o link para seu blog que dou uma olhadinha! :-) Have fun!

Este tutorial é uma tradução do tutorial do site www.kevinandamanda.com (inglês) com adição de detalhes e algumas imagens para facilitar o entendimento.

Super coleção de ícones vintage grátis

noreply@blogger.com (Mana) — Wed, 17 Jun 2009 20:16:00 +0000

Achei uma coleção de ícones muito rara de encontrar! São muuuuuuuuuuuitos ícones com estilo vintage e/ou antigo! Realmente impressionante! São 712 ícones com resolução natural de 512px.

Se quiser visualizar todos os ícones da coleção clique aqui.
Para fazer o download esta é a página: Samantha-Wright.deviantart.com. Vá até o final da página e escolha a melhor opção para vc.

Voce comenta e eu sigo...

noreply@blogger.com (Mana) — Sun, 24 May 2009 17:16:00 +0000

Este blog segue os links adicionados nos comentários. Isso significa que se você comentar, deixando seu blog ou site, os mecanismos de busca irão seguir seu link e isso melhorará seu rank (Pagerank). De acordo com Cláudia de Blog Memories "remover esse código traz mais tráfego para ambos os blogs (o seu e do seu leitor), e incentiva as pessoas a comentar no blog"

Para retirar a tag "nofollow" de seu blog vá até Layout -> HTML e clique para expadir Widgets. Então clique CRTL+F e digite rel='nofollow'. Procure até você encontrar o código abaixo:

<dl id='comments-block'>
<b:loop values='data:post.comments'var='comment'>
<dt class='comment-author'expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" +data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Encontrando, apague somente rel='nofollow'.

Fique a vontade para comentar!!!

Luta contra Pedofilia

noreply@blogger.com (Mana) — Sun, 24 May 2009 14:49:00 +0000

Campanha contra a Pedofilia!!!

+ de 55 ícones Twitter grátis

noreply@blogger.com (Mana) — Tue, 19 May 2009 13:51:00 +0000

Para você embelezar seu blog e chamar atenção de seus visitantes e futuros seguidores, dê uma olhadinha nesta coleção de ícones da alta definição!
Estas são as coleções que eu mais gostei. Existem muitos ícones Twitter por aí, mas este são na minha opinião os mais fofos!

* Coleção de Janeiro de 2009 de Smashing Magazine com 8 transparentes PNGs nos tamanhos 128×128, 256×256 e 512×512 Pixels. Imagens em PNG, .EPS, .PSD.

* 6 ícones 360x360 PNG de Productivedreams.com, livre para uso privado e comercial.

* 4 posições diferentes do pássaro Twitter em PNG e PSD

* 2 ícones em PNG, ico e ICNS (256x256, 128x128, 48x48, 32x32, 16x16)

* Practika ícones 64×64px, 128×128px and 256×256px

* 4 Felizes Pássaros em PNG e PSD de Webdesign.fm

* Twitter e outros ícones de adicionar aos favoritos

* Function Twitter

* Vector Twitter de D2L Graphics

* Passarinhos gordinhos do Twitter em 512x512, 256x256, 128x128, 64x64 e 32x32px

* Mais Twitter icone

* Kweet - ícones de ChethStudios

* "Um passarinho me contou" de Mattknow

* Outro ícone Twitter

* Maustuff Ícones Twitter

* Este é muito doce!

* E por último

Gostou? Comenta aí!!!

Como usar qualquer fonte em seu Blog

noreply@blogger.com (Mana) — Tue, 19 May 2009 11:44:00 +0000

O problema de usar uma fonte diferente é que seu visitante só irá ler seu blog com esta fonte, se ele também tiver instalada em seu computador. Mas há um truque para transforma a fonte em um tipo de imagem e todos poderão ver, atém mesmo sem ter a fonte no computador.

Dá uma olhadinha neste meu post que traduz o tutorial do site www.kevinamanda.com

Se tiver algum problema e não manejar o inglês suficiente, comenta aqui que eu te ajudo!
Eu estava, até pouco tempo atrás, usando uma fonte bem diferente para meus títulos de posts e sidebar, mas decidi remover o script pois torna o carregamento do blog mais lento. Fica muito bonito e diferente, mas eu decidi nao usar mais!

Grátis editor de tema online para o Twitter

noreply@blogger.com (Mana) — Tue, 19 May 2009 09:49:00 +0000

Achei um site muito legal aonde você pode fazer sua imagem background do Twitter como você quiser. Online, não requer registro e muito fácil. Depois de pronto é só fazer o download da imagem gerada e ir em Settings -> Design -> Change background. Depois mude as cores como de acordo com os códigos fornecidos e pronto! O site é este aqui ó: Free Twitter Designer .
Have fun!
Ahhhh e me siga no Twitter!!! :-)

Como criar "Adicione aos favoritos" (Bookmark) -2

noreply@blogger.com (Mana) — Sat, 16 May 2009 17:15:00 +0000

Este "Adicione aos Favoritos" é o mais bonitinho que já encontrei! Dá uma olhada aqui neste meu outro blog para ver o modelo.

1° - Vá até "Layout" -> "HTML" e backup seu template (baixar modelo completo).

2° - Expandir widgets,

3° - Procure pela frase (Ctrl+F)
]]></b:skin>
4° - Adicione o seguinte código abaixo desta frase:

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left top;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right top;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

5° - Agora encontre esta frase:
<data:post.body/>
Se voce tem mais de uma vez esta frase em seu template, coloque depois da última! Normal para quem tem o sumário de posts.

6° - Acrescente o seguinte código logo abaixo da frase:


<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/SEU_FEED' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

7° - Troque a frase em azul "SEU_FEED" e salve o template.

Pronto! Gostou? Comente aí!!!!

Fonte: Cahayabiru

Widget Páginas Populares

noreply@blogger.com (Mana) — Sat, 16 May 2009 08:06:00 +0000

Convide seus visitantes a visitarem as páginas mais populares de seu blog. Adicione o widget Páginas Populares. Dá uma olhadinha aí no meu, no sidebar!
Muito fácil!

Vá té o site FoxRecord e role a página para baixo.
Quase no final irá encontrar dois tipos de widgets.

* Instruções para "Top popular pages widget"
Clique no botão "add to Blogger" para adicionar no seu blog blogger/blogspot, ou copie o código na caixa "embed instructions" e cole em seu blog (HTML/javascript gadget).
Se você utilizar "add to blogger" aparecerá um janela com os detalhes, mude o título pois no original aparecerá em inglês "Popular Pages" e pronto.

* Page popularity widget"
Este irá mostrar em formato de estrela quão popular seu post ou página é!
Siga as mesmas instruções para adicionar no sidebar.

Como criar 3 colunas no rodapé do blog

noreply@blogger.com (Mana) — Fri, 15 May 2009 18:26:00 +0000

Você pode facilmente criar 3 colunas no rodapé de seu blog e torná-lo mais útil, com maior espaço para acrescentar seus widgets, comentário recentes, posts recentes, posts relacionados, imagens etc...

1° - Vá até "Layout" -> "HTML" e backup seu template (baixar modelo completo).

2° - Remova momentaneamente todos os widgets do rodapé do blog (mova-os para o sidebar ou...),

3° - Procure pela frase

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>

</div>

4° - Substitua a frase em verde por:

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

5° - Agora localize esta linha ]]></b:skin>

6° - e cole antes (acima) dela o código abaixo:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;


}

Pronto!!!! Agora é só salvar e mover os widgets de volta para o rodapé e acrescentar muitos outros.... Gostou comente aí!!!!

fonte: Samrathacks.com

Gerar "Thumbnail" e link "Leia Mais" automaticamente no Blogger

noreply@blogger.com (Mana) — Fri, 15 May 2009 09:34:00 +0000

Neste post estarei explicando como gerar Thumbnail (redução automática da primeira imgem que voce colocou em seu post para aparecer na página inicial, como nos sites tipo "Revista") e o link "Leia mais" de uma vez, num só pedaço de código! Mais fácil que mamão com açúcar!

Num post anterior já havia explicado como fazer sumário com link "Leia mais" nos posts. Desta vez os códigos são diferentes e não vai dar para somente tentar adicionar uma parte para gerar Thumbnail. O código aqui é para as duas funções juntas. É muito mais fácil e prático, contudo não tem a independência de resumir os posts que você quiser, como no outro código. Aqui todos os posts serão resumidos e apresentados com um link "Leia mais". Se o outro código tiver dando trabalho ou problema, ou ainda se você não entender muito sobre "HTML", use este código!

1° - Vá até "Layout" -> "HTML" e backup seu template (baixar modelo completo).

2° - Clique em "expandir modelos de widget",

3° - Procure pela frase:
<data:post.body/>

4° - Substitua a frase por:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://kfile.110mb.com/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

5° - Visualizar (para ver se há erros) e então salvar.

6° - Só para esclarecer a parte do código que você pode customizar:

summary_noimg = 430; é o tamanho do corte do post sem imagem (sumário)
summary_img = 340;é o tamanho do corte do post com imagem (sumario)
img_thumb_height = 100; é a altura do thumbnail
img_thumb_width = 120; é o width do thumbnail

Gostou comente aí!!!

fonte: deluxetemplate.com

Como obter um domínio grátis na web

noreply@blogger.com (Mana) — Thu, 14 May 2009 16:18:00 +0000

Clique aqui para entrar no site e obter seu domínio ou nome na web grátis. O link abrirá numa nova janela, assim será possível seguir os passos.
Você pode, no canto superior do site, mudar o idioma para Português e então fazer sua inscrição!

Clique em crie uma conta agora e preencha os campos do formulário! É rápido e fácil!
Para obter o nome, clique em obter um novo domínio e veja se o que você deseja está disponível.
Há alguns nomes que não são grátis, mas a maioria é. Se o que você escolheu não for e você não quiser pagar o que te pedem, é só escolher outro.

Feito isso, clique em configurações do domínio e então clique no seu domínio que aparecerá numa tabela. Ali você tem três opções, mas você só escolhe uma e configura seu domínio.
Aqui vou te explicar a opção “Manage DNS”:
Clique e você verá duas linhas: Name server1 e Name server2.
Os valores que irão constar ali são os que a tua hospedagem te dá! Se você fez sua hospedagem no 000Webhost.com, os valores podem ser assim: ...1.000webhost.com e .....2.000webhost.com. Para saber estes valores clique em “View account details”!

Feito isto volte ao seu site de hospedagem e clique em “Ad-on Domain” (no 000webhost.com, em outras hospedagens procure por esta opção ou similar). Na primeira linha digite o nome completo de seu novo domínio (ex: vivendonosobrenatural.co.cc), entao pule para a terceira linha e escolha uma senha.
Clique em”setup new account” e é só aguardar algumas horas, pois o site CO.CC e o site de hospedagem precisam se comunicar e ajustar seu novo domínio na internet :-) hehehe.
Quando aparecer “Allowed” ao lado do seu domínio no site CO.CC, você poderá ir até seu site de hospedagem e instalar seu Wordpress ou outro aplicativo de sua escolha.

No 000webhost.com você deve rolar a página para baixo no seu painel de controle, “Software / Services” e clique em “Fantastico Autoinstaller”. Você verá uma lista dos aplicativos prontos para serem instalados (Wordpress ta lá), é só clicar.

A outra opção que há para configurar seu domínio é “Url Forwarding”. Use esta se você já tem um subdomínio no seu site de hospedagem e quiser redirecionar seu novo nome do CO.CC para o seu subdomínio. Esta opção pode ser usada por aqueles que já tem um site, mas o nome é feio ou muito grande. Você pode escolher um nome mais curto e mais atrativo!

Nesta opção você permanece com os dois nomes direcionando para um mesmo site! :-)
Coloque o nome do seu site atual ou de seu subdomínio na primeira linha. O título de seu site na segunda linha. A seguir escolha uma das opções: Url hiding (seu novo domínio vai esconder o no me de seu site ou subdomínio) ou Path forwarding (o site somente será direcionado, sem esconder o nome real do seu site!)
Qualquer dúvida, comente sua pergunta neste post que tentarei lhe ajudar!

OBS: Os domínios são normalmente grátis por um ano. Depois se você quiser continuar usando, deverá pagar. Eles não são muito caros, em torno de 3 à 5 dólares por ano!

Hospedando seu Blog

noreply@blogger.com (Mana) — Thu, 14 May 2009 15:40:00 +0000

Como já dito, hospedar não é trazer seu Blog para morar com você :-),

Há vários sites na internet que fornecem hospedagem, selecionei alguns com opções grátis e que normalmente não há problema na instalação do Wordpress (repito: normalmente), pois possuem as configurações necessárias.

Todos este sites são recomendados por mim pois tenho/tive uma conta em cada um deles!

000Webhost.com

Hospedagem grátis

- 250 MB de espaço de Disco, 100 GB Bandwidth

- Se você já tem um domínio próprio pode utilizálo.

- cPanel

- Instalação do Wordpress, assim como Joomla e muitos outros em um clique.

- Se não quiser usar o Wordpress, eles fornecem muitas outras vantagens como um construtor de site bem fácil

- Grátis POP3 Email Box com acesso Webmail

- FTP e administrador de arquivos online

- PHP, MySQL, Perl, CGI, Ruby.

- Ativação de conta instantânea

- 5 MySQL Databases

- PHP5 suporte

- Eles não fazem Anúncios em seu site, mas voce pode colocar o seus!

Byethost.com

Livre FTP, PHP 5, MySQL e o instalador automático Script (como Fantastico) Você pode instalar PHPbb2 e PHPbb3, Wordpress, Zen-Cart, osCommerce, MyBB, UseBB, MyLittle Fórum, 4images, Coppermine, SMF, Joomla, e107, XOOPS, PHP Vento, CuteNews, Mambo, WikiWig!

Tem a opção grátis e a prêmio!

Para grátis clique aqui

Para prêmio clique aqui

E por útimo e não menos importante, Free Hostia!

Contudo este é recomendado somente para aqueles que não moram no Brasil, pois Free Hostia não está mais aceitando IP brasileiro. :-(

Mas é muito bom, se você não mora no Brasil, dá uma olhadinha lá!

http://freehostia.com/index.html

Existem milhares de outros sites de hospedagem pela internet, entretanto, são estes que recomendo. Tentei usar muitos outros, mas sempre havia um problema!

Depois de escolher uma hospedagem, você precisa de um nome para o seu site. Chamado de domain. Existe também os subdomains que são fornecidos pela sua hospedagem, exemplo: seu-site.net48.net. O net48.net segue o nome que você escolheu. Estes são grátis, mas você pode obter um domain um pouco mais bonitinho como vivendonosobrenatural.co.cc no site CO.CC de graça!

No meu próximo post, estarei esclarecendo melhor como conseguir seu nome na web grátis e fazê-lo funcionar, ou seja, configurá-lo! Como obter um domínio grátis na web!

Blog Grátis

noreply@blogger.com (Mana) — Thu, 14 May 2009 11:52:00 +0000

O Blog é o lugar ideal para você expressar suas idéias e compartilhar com pessoas afins.

CERTO, contudo incompleto...

Hoje, com a disposição de uma ferramenta como o Wordpress, você pode fazer do seu Blog muito mais do que um simples diário, mas um completo Website, com várias páginas, formulário para contato...

Você pode gerenciar conteúdos na web como fazem os programas Joomla, Drupal (entre muitos outros), contudo com uma grande e crucial diferença para aqueles como eu, iniciantes, a maior facilidade sem ter que se preocupar muito com programação e todas as suas “gracinhas” :-)

Mas para ter toda esta liberdade em transformar um simples Blog em um completo Site, você precisará hospedá-lo. O que? Como assim?

Calma você não precisa convidá-lo para morar em sua casa :-)

Você precisa de uma Hospedagem na Web. Deve-se encontrar um site que oferece hospedagem e instalar o aplicativo Wordpress lá! Assim você tem total controle de seu site, podendo adicionar quantos plugins quiser e qualquer template/tema que quiser. Esta é a grande diferença entre ter um Blog com hospedagem própria e um Blog no Wordpress.com ou no Blogger.com (entre outros).

Para saber mais sobre hospedagem e dicas de hospedagem grátis veja meu próximo post, Hospedando seu Blog
Se for para escolher a opção mais fácil, porém um pouco mais restrita, faça um Blog no Wordpress.com ou Blogger.com. Eles te oferecem tudo prontinho e em 5 minutos podes começar a soltar a imaginação!

Mas lembre-se, se quiser usar os 2,693 plugins que o Wordpess oferece, só hospedando. O Wordpress.com oferece alguns mas não te deixa acrescentar mais. Ahhh ok, o que é plugin?

Bem rápido, é a forma de extender teu Blog, por exemplo, se você quiser que ele apareça mais rápido quando alguém o abre, você precisa de cache e o Wordpress te oferece um plugin para isto. O melhor é que você nem precisa saber como funciona heheehehe, só instalar e configurar! Além de milhares de outras coisinhas!!!!!!
Contudo é necessário aprender um pouco sobre programacao, para poder manter seu site livre de Hackers e conseguir usufruir das vantagens de do Wordpress independente!

Abaixo fiz uma lista de sites para criar Blog grátis em português:

Blogger.com.br

Wordpress.com
Blogando.net Blig .ig.com.br
Blog Sapo - (Portugal)
Click 21 My Blog
NireBlog - (Portugal)
Pop Blog
UOL Blog
Windows Live Spaces

Mostrando sumário com link "Leia Mais"

noreply@blogger.com (Mana) — Wed, 13 May 2009 17:36:00 +0000

Esta foi a única forma de acrescentar o link "Leia Mais" em meu template. Eu tentei várias outras formas mas todas davam erro. Utilizando este código você terá a liberdade de escolher os posts que aparecerão na página principal com um resumo e com o link "Leia Mais" e aqueles posts que não são muito grandes que não precisam ser resumidos. Uma grande vantagem é o controle que você tem sobre o uso desta ferramenta!

Obs: Eu escrevi outro post sobre como gerar Thumbnail e link Leia mais em um só código.
1° - Vá até "Layout" -> "HTML" e backup seu template (baixar modelo completo).

2° - Clique em "expandir modelos de widget",

3° - Procure pela tag </head> e copie TODO o código deste link ANTES da tag.

4° - Procure agora pelo trecho de código:

<div class='post-body'>
<p><data:post.body/></p>

5° - Substituir as duas linhas pelo código abaixo:

<div class='post-body' expr:id='"post-" + data:post.id' >
<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>
<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais?</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Pronto, clique em ‘Visualizar‘ e veja se está tudo certo, se estiver tudo OK clique em ‘Salvar Modelo‘.
Neste ponto ainda não é possível perceber nenhuma mudança visual no blog.

6° - Vamos agora alterar o modelo de postagem para que durante a criação do post, possamos definir o que será mostrado no resumo e o que será mostrado somente depois de clicar em ‘Leia Mais‘. Na parte superior do Blogger clique em ‘Configurações‘ e depois em ‘Formatação’:

7° - Vá para o fim da página até chegar em ‘Modelo de postagem‘, na caixa de texto em frente copie e cole o trecho de código abaixo:

Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>

Clique em ‘Salvar Configurações‘.

Pronto, de agora em diante quando clicarmos em “Criar Postagem“, a caixa de texto mostrará onde devemos digitar o resumo do post (a parte que irá aparecer antes do link “Leia Mais”) e onde digitar o resto do post (a parte que aparecerá somente na página do post).

Observação: Certifique-se que as tags e não foram alteradas, elas precisam ficar intactas para que o hack “Leia Mais” funcione.

Observação: Os posts antigos não apareceram resumidos, será necessário alterá-los um a um se você desejar que este hack funcione para eles (veja como fazer isso mais abaixo).

Problemas conhecidos: o criador deste hack, Ramani - http://hackosphere.blogspot.com/, avisa no post original que se você clicar no link “Postagens Mais Antigas“, é possível que o link “Leia Mais” apareça mesmo em posts antigos que não foram divididos. Este é um problema conhecido, para o qual ele ainda não encontrou solução.

Perguntas

1 - Quero que certo post seja mostrado inteiro, sem o link “Leia Mais”, como fazer?
Ao criar a nova postagem, antes de começar a digitar, delete todo o conteúdo existente da caixa de texto.

2 - Quero configurar um post antigo com o hack de “Leia Mais”, como fazer?
Você deve alterar cada post individualmente. Ao editar clique para visualizar o código fonte, escolha o local onde irá aparecer o link “Leia Mais” e adicione a tag , vá para a ultima linha no post e adicione após o último texto .

Cuidado: Fique atento com esta alteração, pois a tag <span id=”fullpost”> não pode ficar entre outras tags.

No exemplo a seguir o hack não irá funcionar: <p> bla <span id=”fullpost”> bla </p></span>

Fonte: Alex Blog Estudos

OBS: se você não entende muito de código "HTML" use este outro tutorial, porque este código algumas vezes desconfigura quando você edita seu post no modo "editar HTML" e então passa para "escrever". Se isso acontecer voce deve procurar no modo "editar HTML", todas as tags <span id=”fullpost”> e/ou </span> que foram acrescentadas e deixar somente as originais!

Gostou? Deixe um comentário!!!!!!

Como mostrar seu Sitemap numa página

noreply@blogger.com (Mana) — Wed, 13 May 2009 14:23:00 +0000

Se você quiser criar uma página em seu Blog com um Mapa do site (Sitemap) com uma lista de todos os arquivos e com os links para os artigos, além poder ver um pequeno resumo de cada artigo ao colocar o cursor sobre o título, continue lendo....
Fica muito legal, dá uma olhada no meu aqui.

Vamos lá!

1° - Faça o download do arquivo JavaScript pelo link abaixo e hospede em seu site de hospedagem preferido que aceite Javascrip (Ex: Googlepages):
blogtoc.js

2° - Agora você irá criar um post e inserir o código abaixo. Todo o texto a seguir é apenas uma sugestão. Copie-o como está, se quiser, ou adapte à personalidade de seu blog. Você só não pode alterar o trecho onde está o arquivo JS, claro, com exceção do endereço de seu blog e do endereço onde hospedou o JavaScript. Esses dois estão em VERMELHO, portanto fica fácil pra você identificar.

Abra a janela de postagem na aba "Editar HTML", copie todo o trecho abaixo e cole no em seu post:

O NOME DO SEU BLOG utiliza o Blog TOC - "Table of Contents" - que permite que você navegue e encontre o artigo que procura.

Nesta página você encontra uma lista de todos os arquivos, com os links para os artigos, a data de cada post e as respectivas categorias onde estão arquivados.
Você poderá ver um pequeno resumo de cada artigo ao colocar o cursor sobre o título.

Os artigos estão apresentados em ordem alfabética ascendente, mas clicando nos títulos das colunas você pode classifica-los em ordem ascendente ou descendente por data ou ordem alfabética.
Quando você clica no nome de uma determinada categoria, o Blog TOC mostrará todos os posts arquivados nessa categoria.
Para voltar à lista completa, clique no título "Categorias".

Para ir até a página do post de seu interesse, simplemente clique no título do post.
Se você entrou na página do post e quiser voltar a ver o Mapa do Site, clique no botão do Menu Superior.

Bem-vindo ao NOME DO SEU BLOG e boa leitura!

************ <div id="toc"></div>
<!-- Blog TOC em posts -->
<div id="toclink">
<a href="javascript:showToc();"> FECHAR TOC</a>
</div><span style="font-size:80;"></span>
<script src="http://endereço-do-arquivo-javascript/blogtoc.js"></script>
<script src="http://SEU-BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
************

3° - Modifique os trechos em VERMELHO com cuidado. Antes de publicar seu post, algumas sugestões: desabilite comentários e backlinks e coloque como opção de postagem uma data próxima à data de início de seu blog (se você tem uma página "Sobre", o Mapa do Site fica bem na mesma data ou logo depois, para que apareçam juntos quando alguém navegar pelas páginas de arquivos mensais.)

4° - Para acrescentar estilo em seu "Mapa do Site" vá até "Layout" em "Editar HTML" salve uma cópia de seu template, clicando em "Baixar Modelo Completo" e logo ABAIXO da tag ]]></b:skin> cole o seguinte código:

<style type='text/css'>

#toc {
width: 100%;
margin-top: 10px;
}

.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffffff;
color: #000000;
font-weight: bold;
padding-left: 5px;
width: 50%;
}

.toc-header-col2 {
width: 15%;
}

.toc-header-col3 {
width: 35%;
}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size: 90%;
text-decoration:none;
}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size: 80%;
color: #000000;
text-decoration: underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size: 80%;
}

</style>

Esta é uma sugestão de estilos. Você pode modificar de acordo com as cores, fontes e demais configurações, principalmente de sua área de postagem.

5° - Agora você só precisa colocar um link normal para o post onde você publicou seu Mapa do Site, seja na Sidebar ou em Menu, para que seus leitores possam navegar pelos artigos publicados.

Muito Obrigada Bloggersphere pelo tutorial maravilhoso e fácil de seguir!!!

Como adicionar Posts Relacionados

noreply@blogger.com (Mana) — Tue, 12 May 2009 17:28:00 +0000

Há algumas formas por ai de se adicionar posts relacionados no blog, mas eu achei esta a mais fácil. Não é necessário mexer demais com códigos e tal.
Vamos lá!

1° Vá até Layout -> HTML e backup seu blog.

2° Expandir Widget template

3° Encontre a seguinte linha (no Firefox é só apertar Ctrl+F para procurar)
<div class='post-footer-line post-footer-line-3'/> ...</div>

4° Adicione a seguinte linha logo após </div>
<div id='related_posts'/>

5° Agora procure por

</body>
</html>

6° e adicione este código antes

<script src='http://www.google.com/jsapi'></script>
<script type="text/javascript">window.brps_options = {  "title": "<h2>Related Posts</h2>"  "max_results": 5  }</script>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>

7° agora você pode mudar o número de posts que irão aparecer ""max_results": 5 "

Outra alternativa é explicada no site Códigos Blog.

Se gostou comente aí!

Fonte: Snaphow

Adicione botões Bookmark no pé dos posts

noreply@blogger.com (Mana) — Tue, 12 May 2009 14:47:00 +0000

Primeiro backup seu blog!
Vá até Layout -> HTML e substitua a frase
<head>
por
<head><script src='http://files.bloggerplugins.org/simpletricks.js'></script>
Agora encontre a linha
<p class='post-footer-line post-footer-line-3'>
e coloque o código deste documento logo abaixo dela.

*Atualização: escrevi outro post sobre adicionar aos Favoritos com outros botões muito bonitinhos. Dá uma olhada no modelo aqui. Se gostou, como pode ver como adicioná-lo em seu blog aqui.

fonte: Blogger Plugins

Como aumentar a Popularidade - Diretório de Blogs

noreply@blogger.com (Mana) — Tue, 12 May 2009 13:18:00 +0000

Algo também indispensável são os diretórios de blogs. Eles muitas vezes aparecem lá no inicio das pesquisas nos buscadores com o seu blog ou o seu feed.
Uma lista com os diretórios de maior Pagerank. São mais de 350 diretórios. UAU.... Mãos a obra!
Aqui estão eles:

www.blogs.botw.org
www.blogcode.com
www.blogarama.com
www.blogbunch.com
www.blogdigger.com
www.blogflux.com
www.bloghop.com
www.bloghub.com
www.blogcatalog.com
www.blogintro.com
www.csthota.com
www.bloglisting.com
www.blogpulse.com
www.blog-search.com
www.blogflux.com
www.bloguniverse.com
www.bloogz.com
www.boingboing.net
www.2rss.com
www.crayon.net
www.feed-directory.com
www.feeds4all.com
www.feedage.com
www.feedsfarm.com
www.newsgator.com
www.feedboy.com
www.feedboy.com
www.postami.com
www.reader.rocketinfo.com
www.search4rss.com
www.syndic8.com
www.help.yahoo.com
www.rss-network.com
www.rss-network.com
www.myfeedz.com
www.feedage.com
www.daytimenews.com
www.spotplex.com
www.mobispine.com
www.genwi.com
www.weblogs.about.com
www.feed-directory.com
www.feeds4all.com
www.feedage.com
www.feedsfarm.com
www.findingblog.com
www.findory.com
www.fybersearch.com
www.chordata.info
www.feedboy.com
www.plazoo.com
www.readablog.com
www.redtram.com
www.reader.rocketinfo.com
www.search4rss.com
www.syndic8.com
www.wilsdomain.com
www.feedbase.net
www.rss-network.com
www.blogannounce.info
www.newgie.com
www.goldenfeed.com
www.feedmailer.net
www.happyfish.info/software
www.unclefeed.com
www.nfeeds.com
www.octora.com
www.feedshot.com
www.feeds2read.net
www.feedminer.com
www.blogscholar.com
www.theblogresource.com
www.jordomedia.com
www.feedbomb.com
www.feedcat.net
www.feedmap.net
www.dir.nooked.com
www.news-feeds.org
www.rss-locator.com
www.newzalert.com
www.home.myst-technology.com
www.downes.ca
www.w.moreover.com
www.search4rss.com
www.news-feeds.org
www.newsxs.com
www.dailynews.yahoo.com
www.newsonfeeds.com
www.feeds2read.net
www.dir.nooked.com/home.dir
www.blogchild.com
www.freefeedsdirectory.com
www.contentsmatter.com
www.daypop.com
www.portal.eatonweb.com
www.findingblog.com
www.findory.com
www.fybersearch.com
www.geekphilosopher.com
www.globeofblogs.com
www.gobignetwork.com
www.iblogbusiness.com
www.icerocket.com
www.industry-blogs.com
www.lsblogs.com
www.portal.eatonweb.com
www.rateitall.com
www.readablog.com
www.redtram.com
www.blogsforsmallbusiness.com
www.smallbusiness.com
www.synblog.com
www.strategicboard.co
www.tailrank.com
www.technorati.com
www.topix.net
www.truthlaidbear.com
www.wilsdomain.com
www.blogsitezone.com
www.strategicboard.com
www.jenett.org
www.macstansbury.blogspot.com
www.peopleconnection.
www.blogs.botw.org
www.macstansbury.blogspot.com
www.peopleconnection.aol.com
www.blogs.botw.org
www.biggerblogger.com
www.blogcatalog.com
www.blog-directory-submit.com
www.dir.blogflux.com
www.blogdirs.com
www.ratingz.net
www.blog4girls.info/?p=99
www.blogsearchengine.com
www.blogtoplist.com
www.bloguniverse.com
www.blogadr.com
www.blogarama.com
www.blogcharts.net
www.myrss.com
www.blogchild.com
www.bloggernity.com
www.bloghop.com
www.webloogle.com
www.blogoriffic.com
www.blogroll.net
www.blogs-collection.com/submit
www.blogscholar.com
www.blogstreet.com
www.blogsweet.com
www.blogwidow.com
www.bloogz.com
www.blurtit.com
www.britblog.com
www.browseblogs.com
www.iblogbusiness.com
www.diarist.net
www.findingblog.com
www.frontblogs.com
www.getblogs.com
www.guardian.com.
www.highclassblogs.com
www.albacentral.com
www.ilikeblogs.com
www.i2blog.com
www.industry-blogs.com
www.kmax.ws/bloglinks.htm
www.kookkoo.com
www.angelfire.com
www.royalartistclub.com
www.sportsblogs.org
www.quickblogdirectory.com
www.weblog.start4all.com
www.5starblogs.com
www.thevital.net
www.today.com
www.top100bloggers.com
www.wutzle.com
www.hornybollywood.com
www.blog-search.com
www.blogs.botw.org
www.2rss.com
www.blogs.botw.org
www.blogpulse.com
www.all-blogs.net
www.blogcatalog.com
www.blogflux.com
www.blogdigger.com
www.bloggernity.com
www.bloghop.com
www.bloglisting.com
www.chanduthota.com
www.topsites.blogflux.com
www.bloogz.com
www.contentsmatter.com
www.crayon.net
www.daypop.com
www.diarist.net
www.portal.eatonweb.com
www.geekphilosopher.com
www.gobignetwork.com
www.globeofblogs.com
www.gobignetwork.com
www.iblogbusiness.com
www.icerocket.com
www.esperanto.se
www.lsblogs.com
www.postami.com
www.blogsforsmallbusiness.com
www.smallbusiness.com
www.tailrank.com/login
www.technorati.com
www.photarium.com
www.truthlaidbear.com
www.blogsitezone.com
www.blogtoplist.com
www.moqvo.com
www.rankingblogs.com
www.iblogbusiness.com
www.gnoos.com.
www.bloglines.com
www.blogmopolis.com
www.blogcode.com
www.resource.oflaherty.dk
www.blogmighty.com
www.industry-blogs.com
www.blogadvance.com
www.blog-directory-submit.com
www.blogazoo.com
www.blogbib.com
www.blogbunch.com
www.5starblogs.com
www.blogsweet.com
www.findingblog.com
www.blogoriffic.com
www.blogsbywomen.org
www.peopleconnection.aol.com
www.biggerblogger.com
www.blogannounce.info
www.pipsblog.com
www.blogdirs.com
www.blogpoint.com
www.blog-watch.com
www.blogadr.com
www.blogcharts.net
www.blogchild.com
www.blogdust.com
www.biggerblogger.com
www.blogstreet.com
www.blogstreet.com
www.browseblogs.com
www.iblogbusiness.com
www.highclassblogs.com
www.kookkoo.com
www.rootblog.com
www.blogs.tomstopsites.com
www.exploreblogs.com
www.blogfuse.com
www.blogsforsmallbusiness.com
www.news.yahoo.com
www.theweblogreview.com
www.guardian.co.uk
www.webwinx.com
www.weblogalot.com
www.theblogresource.com
www.newsisfree.com
www.newsisfree.com
www.globeofblogs.com
www.blogshowoff.com
www.blogtagstic.com
www.blogscanada.ca
www.findory.com
www.bloginspace.com
www.blogdex.net
www.blo.gs
www.findingblog.com
www.blogannounce.info
www.blog-directory-submit.com
www.blogion.com
www.bigblogmedia.com
www.blogdirs.com
www.blogsrating.com
www.browseblogs.com
www.delightfulblogs.com
www.start4all.com
www.wutzle.com
www.wilsdomain.com
www.portal.eatonweb.com
www.lutheranblogs.blogspot.com
www.chefsblogs.com/directory
www.latestdirectory.com/Blogs
www.misohoni.com/bba
www.izigo.nl
www.yourwebloghere.com
www.blogupper.com
www.blogoozle.com
www.webwinx.com/links/blogmasters
www.whatsreallyreal.com
www.totalblogdirectory.com
www.superblogdirectory.com
www.blog5000.com
www.blogspassage.com
www.blognblogs.com
www.bloggerhq.net
www.addurlblog.com
www.blogsbycity.com
www.linkarchive.org/Blogs
www.blogz.bz
www.directory.easywordpress.com
www.bloggingabroad.com
www.chattous.com/blogs
www.bloghijinks.com
www.mvblogs.com
www.ajdee.com/pages/Blogs/index.html
www.creative-blogs.com
www.blogfolders.com
www.bloggerhq.net
www.quacktrack.com
www.surrealblog.com
www.2-review.com
www.topblogarea.com
www.getblogs.com
www.idk.in
www.blogdumps.com
www.bloggapedia.com
www.blogdup.com
www.bloggernow.com
www.bloggerteam.com/directory.php
www.blogmatcher.com/u.php
www.shas3.com
www.blogsbycity.com
www.all-blogs.net/submit.php
www.blogbib.com/submit.php
www.bulletize.com
www.blogannounce.info
www.blogsrating.com
www.blogtagstic.com
www.delightfulblogs.com
www.bulletize.com
www.blogannounce.info
www.all-blogs.net
www.webwinx.com/links
www.theblogresource.com
www.insaneblog.com/submit.php

Uau, muito obrigada Blogeweb.com! Todos os créditos desta busca são do site www.blogeweb.com