Blogger Na Web

Imagens grandes nos posts do blogger

noreply@blogger.com (Idenaldo Rodrigues) — Thu, 25 Nov 2010 00:25:00 +0000

Geralmente, quando inserimos uma imagem grande no blogger, ela é redimensionada de forma automática e é publicada em um tamanho bem menor daquele que queriamos. Se você gosta de publicar imagens grandes em seus posts, vai gostar muito deste post que vi no Blogger Tricks, ele nos ensina como publicar imagens grandes nos posts do blogger.

Este hack é fácil de ser feito. Entretanto, como precaução e canja de galinha não faz mal pra ninguém, não esqueça de fazer o backup do template do seu blog. Vamos lá.

1ª Parte:
No painel, entre em Design >> Editar HTML e procure pela tag ]]></b:skin> (use crtl+F) e adicione acima dela o seguinte código:

img {
max-width: XXXpx;
width: expression(this.width > XXX ? XXX: true);
}

O que está em vermelho refere-se ao tamanho da imagem dentro da área destinada ao post. Recomenda-se encontrar um tamanho que não ultrapasse a largura desta área.

Um exemplo:

img {
max-width: 550px;
width: expression(this.width > 550 ? 550: true);
}

Feito isso, clique em visualizar e se não constar nenhum erro, salve as alterações.

2ª Parte:

Agora, vamos aplicar as modificações feitas para o redimensionamento das imagens dentro dos posts. Para isso, Crie um post e adicione uma imagem qualquer. Dependendo do tamanho da imagem, o blogger irá redimensioná-la automaticamente. Entre na aba Editar HTML (está ao lado de Escrever). O trecho abaixo corresponde a um código HTML de uma imagem colocada em um post:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_QP_X0AdEkhc/TO1lM5PpfXI/AAAAAAAAAIY/PyUJ1t0KR4A/s1600/sasha%2Bgrey.jpg" imageanchor="1" style=""><img border="0" height="400" width="309" src="http://4.bp.blogspot.com/_QP_X0AdEkhc/TO1lM5PpfXI/AAAAAAAAAIY/PyUJ1t0KR4A/s400/sasha.jpg" /></a></div>

A imagem correspondente a este código está logo abaixo:

Para que a imagem fique maior e nas configurações que fizemos no exemplo lá em cima, basta EXCLUIR o que está em azul (height="400" width="309") e ALTERAR o que está em vermelho, de s400 para s800.

O código ficará desta forma:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_QP_X0AdEkhc/TO1lM5PpfXI/AAAAAAAAAIY/PyUJ1t0KR4A/s1600/sasha%2Bgrey.jpg" imageanchor="1" style=""><img border="0" src="http://4.bp.blogspot.com/_QP_X0AdEkhc/TO1lM5PpfXI/AAAAAAAAAIY/PyUJ1t0KR4A/s800/sasha.jpg" /></a></div>

E a imagem aparecerá no post desta forma:

Muito legal, não é mesmo? O interessante deste hack é que ele só será aplicado em imagens que você escolher que apareçam gigantes, pois é necessário que faça a mudança de s400 para s800.

Nos meus posts, eu retiro grande parte do código que é dado pelo blogger. Deixo apenas o código correspondente a imagem, com a alteração de s400 para s800.

Fica assim:

<img src="http://1.bp.blogspot.com/_QP_X0AdEkhc/TO18oSijneI/AAAAAAAAAIg/nAvYJIlUkgc/s800/scarlett-johansson.jpg"/>

E a imagem aparece dessa forma:

É isso ai. Até a próxima!

Códigos html para cores no blog

noreply@blogger.com (Fabius Maximus) — Thu, 28 Oct 2010 23:23:00 +0000

As cores estão presentes em diversos elementos de nosso cotidiano. Elas são importantes para que possamos, por exemplo, escolher as roupas que vestimos, os ambientes que frenquentamos e até mesmo os alimentos que comemos. Através das cores podemos traduzir o que queremos dizer para um público específico de pessoas. Saber escolher as cores certas para o blog transmite ao visitante credibilidade e mais visibilidade. Entretanto, muitas vezes não sabemos qual é código html daquela cor que sempre buscamos e queremos colocar no blog. Os seus problemas acabaram. Vamos disponilizar aqui no Blogger Na Web uma relação de códigos html para cores.

Cor	Código HTML
Snow	#FFFAFA
GhostWhite	#F8F8FF
WhiteSmoke	#F5F5F5
Gainsboro	#DCDCDC
FloralWhite	#FFFAF0
OldLace	#FDF5E6
Linen	#FAF0E6
AntiqueWhite	#FAEBD7
PapayaWhip	#FFEFD5
BlanchedAlmond	#FFEBCD
Bisque	#FFE4C4
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Cornsilk	#FFF8DC
Ivory	#FFFFF0
LemonChiffon	#FFFACD
Seashell	#FFF5EE
Honeydew	#F0FFF0
MintCream	#F5FFFA
Azure	#F0FFFF
AliceBlue	#F0F8FF
lavender	#E6E6FA
LavenderBlush	#FFF0F5
MistyRose	#FFE4E1
White	#FFFFFF
Black	#000000
DarkSlateGray	#2F4F4F
DimGrey	#696969
SlateGrey	#708090
LightSlateGray	#778899
Grey	#BEBEBE
LightGray	#D3D3D3
MidnightBlue	#191970
NavyBlue	#000080
CornflowerBlue	#6495ED
DarkSlateBlue	#483D8B
SlateBlue	#6A5ACD
MediumSlateBlue	#7B68EE
LightSlateBlue	#8470FF
MediumBlue	#0000CD
RoyalBlue	#4169E1
Blue	#0000FF

Cor	Código HTML
DodgerBlue	#1E90FF
DeepSkyBlue	#00BFFF
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
SteelBlue	#4682B4
LightSteelBlue	#B0C4DE
LightBlue	#ADD8E6
PowderBlue	#B0E0E6
PaleTurquoise	#AFEEEE
DarkTurquoise	#00CED1
MediumTurquoise	#48D1CC
Turquoise	#40E0D0
Cyan	#00FFFF
LightCyan	#E0FFFF
CadetBlue	#5F9EA0
MediumAquamarine	#66CDAA
Aquamarine	#7FFFD4
DarkGreen	#006400
DarkOliveGreen	#556B2F
DarkSeaGreen	#8FBC8F
SeaGreen	#2E8B57
MediumSeaGreen	#3CB371
LightSeaGreen	#20B2AA
PaleGreen	#98FB98
SpringGreen	#00FF7F
LawnGreen	#7CFC00
Green	#00FF00
Chartreuse	#7FFF00
MedSpringGreen	#00FA9A
GreenYellow	#ADFF2F
LimeGreen	#32CD32
YellowGreen	#9ACD32
ForestGreen	#228B22
OliveDrab	#6B8E23
DarkKhaki	#BDB76B
PaleGoldenrod	#EEE8AA
LtGoldenrodYello	#FAFAD2
LightYellow	#FFFFE0
Yellow	#FFFF00
Gold	#FFD700
LightGoldenrod	#EEDD82
goldenrod	#DAA520
DarkGoldenrod	#B8860B

Cor	Código HTML
RosyBrown	#BC8F8F
IndianRed	#CD5C5C
SaddleBrown	#8B4513
Sienna	#A0522D
Peru	#CD853F
Burlywood	#DEB887
Beige	#F5F5DC
Wheat	#F5DEB3
SandyBrown	#F4A460
Tan	#D2B48C
Chocolate	#D2691E
Firebrick	#B22222
Brown	#A52A2A
DarkSalmon	#E9967A
Salmon	#FA8072
LightSalmon	#FFA07A
Orange	#FFA500
DarkOrange	#FF8C00
Coral	#FF7F50
LightCoral	#F08080
Tomato	#FF6347
OrangeRed	#FF4500
Red	#FF0000
HotPink	#FF69B4
DeepPink	#FF1493
Pink	#FFC0CB
LightPink	#FFB6C1
PaleVioletRed	#DB7093
Maroon	#B03060
MediumVioletRed	#C71585
VioletRed	#D02090
Magenta	#FF00FF
Violet	#EE82EE
Plum	#DDA0DD
Orchid	#DA70D6
MediumOrchid	#BA55D3
DarkOrchid	#9932CC
DarkViolet	#9400D3
BlueViolet	#8A2BE2
Purple	#A020F0
MediumPurple	#9370DB
Thistle	#D8BFD8
Snow1	#FFFAFA

No próximo post, iremos continuar com outros códigos html para cores que você poderá utilizar no seu blog.

Até lá!!

Fonte: Mxstudio

Blogger Theme: Templates Gratuitos para Blogger

noreply@blogger.com (Fabius Maximus) — Wed, 27 Oct 2010 14:57:00 +0000

Depois de um tempo fora do ar para cuidar de alguns assuntos da vida real, volto ao blog postando mais uma dica interessante para aqueles que desejam encontrar templates gratuitos para Blogger. Estou falando do Blogger Theme. Neste site, caro internauta, você irá achar alguns modelos de templates para usar em seu blog e o melhor, tudo grátis, na faixa. Veja alguns modelos que escolhi para ilustrar este post. O site dispõe de outros inúmeros modelos. Dê uma passadinha por lá e confira.

Miland Blogger Template

Convergence Blogger Template

Red Factor Blogger Template

Diablo Blogger Template

TechMarket Blogger Template

O site possui outros vários modelos de templates para blogger. Clique em qualquer uma das imagens acima que você será direcionado ao site para baixar o template que desejar.

É isso ai. Até a próxima!

Crie uma caixa de pesquisa personalizada para o seu blog

noreply@blogger.com (Idenaldo Rodrigues) — Fri, 26 Mar 2010 19:48:00 +0000

Os blogs que são hospedados na plataforma Blogger/Blogspot têm, de forma padronizada, uma caixa de pesquisa interna, que pode ser inserida facilmente na sidebar, ou em qualquer outro local do blog, se o administrador assim desejar. Entretanto, não é possível personalizá-la ou alterá-la. Neste post vamos aprender a criar uma caixa de pesquisa que pode ser modificada conforme o design do seu blog.

Apenas para exemplificar, neste post vamos colocar a caixa de pesquisa no topo da sidebar, conforme pode ser visto neste meu outro blog. Entretanto, este recurso pode ser colocado em qualquer local do blog.

Sempre bom lembrar que antes de começar, salve as configurações do seu template para se evitar dor de cabeça caso algo dê errado.

1ª Parte - Configurando o código CSS

O primeiro passo a ser feito é adicionar o código CSS que irá compor nossa caixa de pesquisa. Tal código permitirá que sejam feitas modificações nas cores de fundo e bordas, largura e margens da nossa caixa.

Entre na sua conta do Blogger → Painel → Layout → Editar HTML. Com o auxílio do Crtl+F, encontre a tag ]]></b:skin> e cole acima dela o código abaixo:

/* Search.
main-wrapper:
#search form {
border:1px solid #999999;
background:#E5E5E5;
padding:10px;
margin:0 10px 15px;
position:relative;
}

.searchtext {
padding:2px 5px;
color:#999;
font-size:11px;
line-height:15px;
height:15px;
width:87%;
border:2px solid #BBDAFD;
}

.searchsubmit {
position:absolute;
right:10px;
top:10px;
}

Cada bloco de código acima refere-se a uma parte de nossa caixa de pesquisa. No primeiro bloco podemos personalizar as dimensões gerais da caixa, a cor do plano de fundo e as suas margens. No segundo bloco temos as configurações referentes ao texto para se fazer a pesquisa. No terceiro bloco encontramos as configurações do botão de pesquisa.

Cada um deles pode ser configurado de acordo com a vontade do administrador blog.

2ª Parte: Estruturando o código Html/Xml

Agora, para a criação desta caixa de pesquisa teremos utilizar códigos de HTML/XML, isso irá permitir que organizemos a estrutura da caixa como se fosse um formulário, ou seja, com entradas e saídas de dados referentes ao blog e, assim, conseguir uma busca bem-sucedida.

Com ajuda do Ctrl+F, encontre o trecho <div id='sidebar-wrapper'> e cole acima dele, o código abaixo.

<div id='search'>
<form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'>
<div>
<input class='searchtext' id='q' name='q' type='text'/>
<input class='searchsubmit' type='image' name='submit' src='http://bloggernaweb.webs.com/icon_search.gif'/>
</div>
</form>
</div>

Observações:

- O primeiro "input", refere-se a caixa de texto no qual o visitante irá digitar o que desejar procurar no blog.

- O segundo "input", refere-se ao botão de envio, é por meio dele que a consulta é submetida ao primeiro "input". O que está em vermelho é uma imagem para ser usada como botão de envio. Caso deseje outra imagem, recomendo o site Icon Archive.

Clique em visualizar. Se tudo estiver certo, você verá na sua sidebar uma caixa de pesquisa semelhante a esta que está logo abaixo.

Salve. Agora, você pode personaliza-la como quiser.

É isso. Até a próxima!

Via: Blog Btamplates

Bloggerstyles: modelos de templates para o blogger

noreply@blogger.com (Idenaldo Rodrigues) — Thu, 11 Feb 2010 03:54:00 +0000

Todo blogueiro busca sempre por um template que possa juntamente com o conteúdo do blog representar, da melhor forma possível, as suas ideias. Em outras palavras, tenta encontrar um template que seja a sua cara. Por isso, a odisséia por um template nunca termina. Quando imagina-se ter encontrado o tão sonhado template, surge outro. Nos damos por satisfeito por um tempo, mas surge um melhor e assim sucessivamente. Como sabemos que esta busca nunca irá ter fim, apresentamos mais um site que disponibiliza gratuitamente modelos de templates para o Blogger, estamos falando do Blogger Styles.

Segundo as palavras dos administradores, a coleção de templates que está no acervo do site é a melhor para o blogger e isso se justifica pela extensa variedade de modelos que atende os mais diferentes gostos.

Se você desenvolve modelos de templates para a plataforma Blogger e procura por um site para divulgação, o Blogger Styles permite o envio de templates de terceiros. Se o seu modelo for aprovado, seu trabalho pode ser mostrado lá.

O co-autor do blog, Alvaris Falcon, diz que o objetivo do Blogger Styles é fazer Blogger um lugar melhor quando se trata de blogs.

Faça uma visita ao Blogger Styles. Andei por lá e o site é muito bom. Recomendo.

Compartilhe os posts do seu blog no Facebook

noreply@blogger.com (Idenaldo Rodrigues) — Tue, 02 Feb 2010 04:33:00 +0000

Já aprendemos como colocar um botão de Retweet no template do Blogger para os visitantes divulgarem os posts no Twitter. Hoje, também por meio da instalação de um botão, iremos fazer com que os posts sejam divulgados em outra rede social muito importante, o Facebook. Como veremos no decorrer do post, a instalação é fácil, rápida e indolor.

Primeiramente, através da ajuda da Wikipedia, vou falar um pouco sobre o que é o Facebook, apesar de acreditar que a maioria já tenha uma noção do que se trata essa rede social, considerada a maior da internet. Deixa para trás nomes de peso como o Myspace, o Twitter e até mesmo - acredite se quiser - o Orkut.

Facebook é um website de relacionamento social lançado em 4 de fevereiro de 2004. Foi fundado por Mark Zuckerberg, um ex-estudante de Harvard. Inicialmente, a adesão ao Facebook era restrita apenas aos estudantes da Universidade Harvard. O website possui mais de 120 milhões de usuários ativos, a posição do Facebook no ranking de tráfego de visitantes do Alexa, subiu do 60º lugar para 7º lugar. É ainda o maior site de fotografias dos Estados Unidos, com mais de 60 milhões de novas fotos publicadas por semana, ultrapassando inclusive sites voltados à fotografia, como o Flickr. Fonte: Wikipedia

Depois dessa pequena explicação, vamos colocar a mão na massa.

A Implementação desse widget seguirá os mesmos procedimentos que utilizamos na instalação do botão para Retweet, ou seja, escolher um dos modelos, copiar o código correspondente (ele está logo abaixo da figura usada como exemplo) e em seguida colocar este código no local indicado.

1 - Botão a direita do post:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Versão Compacta

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

2 - Botão a esquerda do post:

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Versão Compacta

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Agora vamos aprender a colocar o botão de envio no template

Entre na sua conta do Blogger. Vá até a aba Painel e entre na guia Layout. Em seguida, clique em Editar HTML e marque a opção Expandir modelos de widgets (Resumindo: Painel → Layout → Editar HTML → Expandir modelos de widgets).

Com a ajuda do Ctrl+F encontre o código: <div class='post-header-line-1'/>

Cole o código referente ao botão escolhido logo abaixo do código mencionado no parágrafo anterior. Clique em visualizar, se não for acusado nenhum erro e estiver conforme você imaginou, Clique em salvar.

Dependendo do modelo de template, o código <div class='post-header-line-1'/> pode sofrer uma pequena variação, ficando semelhante a este <div class='post-header-line-1'>. Isso não altera em nada o procedimento de instalação do widget, ou seja, cole o código referente ao botão escolhido abaixo dele.

Pronto. O botão está instalado.

Até a próxima.

Via: Blogger Widgets | Imagem: CCH

Corrigindo os bugs "0 comentários" e "1 comentários"

noreply@blogger.com (Fabius Maximus) — Mon, 25 Jan 2010 13:26:00 +0000

Sempre que publicamos um post, os comentários deixados pelos nossos visitantes são feedbacks que nos ajudam a identificar o nosso público-alvo, a melhorar nossos posts e até mesmo definir o caminho que o blog deverá seguir. Por isso, devemos sempre cuidar para que nossos leitores encontrem com facilidade o local no template para os comentários e com a melhor apresentação possível.

Nos templates do Blogger, quando traduzidos para o português, acontece sempre um bug (erro) quando não há nenhum comentário deixado, algo como "0 ComentárioS", para os mais detalhistas, isso não é algo bonito de se ver. O outro bug aparece quando existe apenas um comentário no post, e a mensagem que aparece é "1 comentárioS", que também não é uma visão muito boa para os nossos olhos.

Isso acaba hoje, pois iremos aprender a corrigir esses dois bugs de uma só vvez.

Vá para as configurações do seu blog (Painel) e entre na guia Layout. Em seguida para Editar HTML e marque a opção Expandir modelos de widgets.

Resumindo: Painel → Layout → Editar HTML → Expandir modelos de widgets.

Corrigindo os bugs na Página principal do blog

1 - Com a ajuda do Crtl+F, encontre o código abaixo.

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if></a></b:if>

2 - Substitua o código que foi encontrado no passo anterior pelo que está logo abaixo.

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'> Deixe seu comentário </b:if>
<b:if cond='data:post.numComments == 1'> 1 Comentário </b:if>
<b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comentários </b:if>
</a>
</b:if>

*O que está em vermelho pode ser substituido por uma mensagem personalizada.

Corrigindo os bugs na Página de cada post do blog:

1 - Novamente com a ajuda do Crtl+F, encontre o código abaixo.

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

2 - Substitua o código que foi encontrado no passo anterior pelo que está logo abaixo.

<b:if cond='data:post.allowComments'> <h4>
<b:if cond='data:post.numComments == 0'> Deixe o seu comentário </b:if>
<b:if cond='data:post.numComments == 1'> 1 Comentário </b:if>
<b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comentários </b:if>
</h4>

*O que está em vermelho pode ser substituido por uma mensagem personalizada.

É isso. Até a próxima.

Via: Btemplates Blog

Como deixar a data do post no formato de calendário

noreply@blogger.com (Fabius Maximus) — Sun, 11 Oct 2009 03:14:00 +0000

Navegando pela internet, sempre encontramos em alguns sites/blogs, as datas dos posts semelhantes a um calendário. Ao contrário do que se imagina, a instalação desse recurso não é difícil e o resultado é muito interessante. Hoje, de uma forma simples e rápida, iremos aprender a instalar esse hack, deixando o blog com um aspecto mais profissional.

Sempre bom lembrar que a primeira coisa a ser feita é salvar as configurações atuais do seu template. Feito isso, podemos trabalhar tranquilamente. Veja abaixo um exemplo de como ficará as datas nos posts do seu blog:

Agora chegou a hora de colocar a mão na massa. Vamos lá:

1º Passo: Vamos alterar o formato da data para que ela possa aparecer dentro da imagem que iremos usar de fundo no calendário.

Entre no seu blog, vá em Configurações -> Formatação -> Formato da data. Selecione a penúltima opção dada: dia mês ano (exemplo: 10 outubro 2009). Salve esta alteração.

2º Passo: Agora vá em Layout -> Editar Htlm e marque a opção "Expandir modelos de widgets". Com a ajuda do Crtl+F encontre o seguinte código:

<data:post.dateHeader/>

Substitua o código acima por este aqui:

<div id='date'>
<script> replace_date('<data:post.dateHeader/>');
</script>
</div>

3º Passo: Novamente com a ajuda do Crtl+F, encontre </head> e cole acima dele o código abaixo:

<style>
#date {
display: block;
float:left;
margin: 0 5px 0px 0;
padding: 1px 15px 15px 10px;
color: #333;
background: transparent url(http://img407.imageshack.us/img407/1294/calendarc.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.month {
margin: 0px 5px 0px 9px;
color: #fff;
display: block;
font-size: 10px;
font-weight:bold;
}

.year {
margin: 0px 5px 0px 6px;
display: block;
font-size: 10px;
}

.day {
margin: 5px 5px 0px 7px;
display: block;
font-size: 20px;
font-weight:bold;
}
</style>

Obs.: Se preferir, você pode mudar a imagem usada como fundo e pode também hospedá-la em qualquer site de sua preferência, não esquecendo de modificar o trecho em vermelho, pelo novo link da imagem.

4º Passo: Mais uma vez, com a ajuda do Crtl+F, encontre <body> e cole abaixo dele o seguinte código:

<script>
function replace_date(d)
{
var da = d.split(' ');
month = "<div class='month'>"+da[1].slice(0,3)+"</div>";
day = "<div class='day'>"+da[0]+"</div>";
year = "<div class='year'>"+da[2]+"</div>";
document.write(month+day+year);
}
</script>

5º Passo: Clique em visualizar e se tudo estiver certo, Salve as alterações.

Pronto. As datas dos posts do seu blog vão estar semelhantes a um calendário.

É isso ai. Até a próxima.

Via: Blog Godown

Expandir e minimizar posts no Blogger

noreply@blogger.com (Fabius Maximus) — Mon, 05 Oct 2009 05:01:00 +0000

Colocar posts resumidos na página inicial do blog é uma maneira de aguçar a curiosidade do seu leitor/visitante para que ele se interesse pelo restante do conteúdo da postagem. Também ajuda na navegação dentro do blog, pois além de agilizar no seu carragamento, permite ao internauta ver uma maior quantidade de posts sem precisar ler todos até o final. Por isso, hoje iremos aprender como expandir e minizar posts nos blogs do Blogger/Blogspot.

É sempre bom lembrar que antes de fazer qualquer alteração no seu blog, você deve salvar as configurações atuais do seu template para que não perca tudo que já tenha feito.

1º Passo: Vá em Layout -> Editar HTML -> Marque a opção "Expandir modelos de widgets".

2º Passo: Com a ajuda do Crtl+F, encontre a tag </head> e acima dela cole o seguinte código:

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/functiontoggleIt.js' type='text/javascript'></script>

3º Passo: Novamente com a ajuda do Crtl+F encontre o trecho abaixo:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

Substitua tudo que está acima por este código aqui:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Leia mais...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Minimizar [-]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> 
</div>

4º Passo: Clique em visualizar e, se não acusar nenhum erro, salve as alterações feitas.

Você poderá aplicar este recurso em qualquer post do seu blog, desde que acrescente os códigos <span id="fullpost"> e </span> no conteúdo das postagens. Veja um exemplo:

Trecho resumido que irá aparecer no início do post
<span id="fullpost">
Restante do post
</span>

É isso. Até a próxima pessoal.

Via: Cuidad Blogger

Envie seus posts para diversas redes sociais através do Sexy Social Bookmark

noreply@blogger.com (Fabius Maximus) — Sun, 13 Sep 2009 04:00:00 +0000

Atendendo aos pedidos de alguns leitores do blog, vou mostrar outro widget para envio de posts para redes sociais. Estou falando do "Sexy Social Bookmark" para blogues do Blogger/Blogspot. Esta versão está um pouco diferente da original, eu a deixei mais "abrasileirado".

1 - Faça o backup do seu template atual. Se você ainda não sabe como fazer, neste post ensinamos como deve ser feito.

2 - Vá em Layout -> Editar Htlm e marque a opção "Expandir modelos de widgets".

3 - Com a ajuda do Crtl+F encontre o seguinte trecho: ]]></b:skin>

Acima desse trecho, cole o código abaixo.

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

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(http://img200.imageshack.us/img200/1360/2ueii3t.png) no-repeat right bottom;
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>

4 - Novamente com a ajuda do Crtl+F encontre: <data:post.body/>

Cole abaixo dele, o seguinte código:

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

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

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

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

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

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

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

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

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

<li class='sexy-syndicate'><a href='Url_FeedBurner' title='Subscribe to RSS'/></li>

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

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

IMPORTANTE: Se no seu template exister mais de um <data:post.body/> insira o código acima, após o ÚLTIMO <data:post.body/> que você encontrar. Geralmente esta repetição acontece em templates que usam o hack "Leia Mais". Coloca-se o código dessa forma, pois é interessante ver widget quando o post estiver exposto por completo. Não esqueça de alterar o trecho Url_FeedBurner pelo seu link no feedburner.

5 - Visualize e se tudo estiver certo, salve.

AS MODIFICAÇÕES QUE REALIZEI

Como disse no início deste post, eu realizei algumas aterações no widget orginal, deixando-o mais "abrasileirado". A primeira alteração que diz foi a mudança da expressão "Shaning is Sexy" por "Compartilhar". Ficando assim:

Outra alteração que fiz foi no local de instalação do widget. Achei melhor colocá-lo após o trecho:

<p class='post-footer-line post-footer-line-3'/>
<b:if cond='data:post.allowComments'>
<div align='left'><div class='book'>

Cujo resultado pode ser visto na imagem abaixo:

É isso ai. Até a próxima.

Via Free Template

Coloque um botão de Retweet no template do Blogger

noreply@blogger.com (Fabius Maximus) — Wed, 02 Sep 2009 22:35:00 +0000

Uma forma de saber como seus posts estão se saindo na tuitersfera pode ser feito através de um recurso simples adicionado estrategicamente em seu blog. Por isso, nada mais sábio do que unir o seu blog ao Twitter.

O Twitter está se espalhando pelo mundo como uma febre. A cada dia, milhares de pessoas se “contaminam” e este microblog, devido ao seu crescimento assombroso, está se tornando uma das mais importantes formas de compartilhamento de conteúdo da internet.

O Retweet consiste basicamente em repetir o tweet de outra pessoa, mas reconhecendo essa mesma pessoa como a fonte de informação. Embora pareça não fazer muito sentido repetir informação que outra pessoa já escreveu, temos que ter em conta que as pessoas que nos estão a seguir não são necessariamente as mesmas que estão a seguir a pessoa que escreveu o tweet original e por tanto ainda o desconhecem. Fonte: Pmol blog

Agora que sabemos o que é um Retweet e qual é a sua importância, pois a gama de pessoas que ele pode alcançar vai muito além dos nossos seguidores, podemos utilizar esse recurso como uma ferramenta de divulgação dos nossos posts. Com um botão de Retweet no blog, podemos ter uma ideia desse processo, pois ele nos mostra quantas vezes um post foi "Retuitado".

A instalação é relativamente fácil e rápida. Vamos dividí-la em duas etapas:

1ª Etapa - Escolhendo o local no template

Observe a posição em que o botão de Retweet irá aparecer no template, através das imagens que utilizei como exemplo. Logo abaixo de cada uma, encontra-se o código em Html correspondente.

Opção 1 - A direita do post

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'seu_login_twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Opção 2 - A esquerda no post

<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'seu_login_twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Opção 3 - Compactado a direita do post

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'seu_login_twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Opção 4 - Compactado a esquerda do post

<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'seu_login_twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

2ª Etapa - Instalando o botão de Retweet no template

Antes de mais nada, é sempre bom lembrar que você deve fazer o backup do seu template atual. Dentre as opções dadas acima, escolha a que mais te agrada e se adéque ao template do seu blog. Copie o código e altere o que está em vermelho pelo seu login no Twitter.

Agora vá em Layout -> Editar HTML e marque a opção "Expandir modelos de widgets". Com o auxílio do Crtl+F encontre o seguinte trecho:

<div class='post-header-line-1'/>

Logo abaixo a esse trecho, cole o código que você escolheu. Pronto! O botão está instalado. Visualize e se tudo estiver certo, salve.

Observação 1: Caso você não encontre o trecho <div class='post-header-line-1'/> procure por <data:post.body/> e cole o código escolhido ACIMA dele.

Observação 2: Se você utiliza como template os modelos clássicos do Blogger, deve fazer uma pequena mudança nos códigos sugeridos. Altere <data:post.url/> para <$ BlogItemPermalinkURL $>. Procure por <$ BlogItemBody $> e cole ACIMA dele o código modificado. Salve e estã pronto.

Aproveitando o ensejo, convido todos a seguirem o Blogger na Web no Twitter e "Re-tuitarem" os nossos posts.

Até a próxima.

Via: Blogger Widgets

Bordas nas imagens do blog usando CSS

noreply@blogger.com (Fabius Maximus) — Sat, 29 Aug 2009 07:13:00 +0000

Sempre utilizamos imagens (fotos, figuras, gráficos) para ilustrarmos de uma forma mais eficiente, as mensagens que passamos para os leitores de nossos blogs. Como uma imagem vale por mil palavras, nada melhor do que darmos uma incrementada em sua exibição, dessa forma deixamos os posts mais personalizados. Podemos fazer diferentes efeitos utilizando simples códigos CSS.

Para quem ainda não sabe o que são Códigos CSS ou simplesmente CSS, o site Código fonte, responde essa questão:

CSS (Cascading Style Sheets ou Folha de Estilos em Cascata), é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Segundo o que acabamos de ler, podemos dizer que os códigos CSS são responsáveis pela formação de elementos que compõem o layout de documentos HTML ou XML, tais como, fontes, cores, margens, linhas, alturas, larguras, imagens, posicionamentos, entre outros.

É sempre bom saber um pouco mais sobre os codígos CSS, pois como o Blogger utiliza a linguagem HTML/XML nas configurações dos seus blogs, pode-se evitar muita dor de cabeça. Esta foi apenas uma palhinha sobre CSS, no futuro iremos falar mais sobre este tema. Por hora, vamos aprender a dar um estilo diferenciado as imagens nos posts.

Entre no seu blog -> Layout -> Editar HTML e salve as configurações atuais do seu blog. Se você ainda nao sabe como fazer isso, clique aqui. Com a ajuda do Ctrl+F encontre o código que está logo abaixo ou que seja semelhante a ele:

.post img {
margin: 5px;
...
padding: 3px;
}

É através desse código que configuramos a forma como as imagens vão aparecer nos posts do blog. Caso você não tenha encontrado o código acima, não se desespere, basta acrescentar acima da tag </head>, este código aqui:

<style type="text/css">
.post img {
border: 0px;
}
</style>

O trecho em vermelho refere-se a espessura das bordas das imagens que vão aparecer nos posts, quanto maior o número (1px, 2px, 3px etc), mas espessa a borda se tornará.

Acrescentando e/ou alterando elementos como cor, espessura e forma, podemos deixar as imagens com apresentação mais personalizada. Veja alguns exemplos:

1 - Colocando cor na borda

.post img {
border: 1px solid #00ff00;
}

Obs.: Neste exemplo temos uma borda de espessura simples na cor verde.

2 - Efeito hover na borda

.post img {
border: 5px solid #bpc4de;
}
.post img:hover {
border: 5px solid #f5deb3;
}

obs.: Para obtermos o efeito hover (alteração da cor quando passamos o mouse sobre a imagem) é necessário acrescentar o trecho que está em vermelho. Lembrando que a cor e a espessura da borda pode ser alterado.

3 - Borda dupla

.post img {
border: 5px solid #006400;
padding: 5px;
background: #d5d5d5;
}

Obs.: border é referente a espessura e a cor da borda externa; padding e background são, respectivamente, a espessura e a cor da borda interna. Estes itens podem ser configurados.

4 - Borda dupla com efeito hover

.post img {
border: 5px solid #f5deb3;
padding: 5px;
background: #d5d5d5;
}
.post img:hover {
border: 5px solid #20b2aa;
padding: 5px;
background: ##f5deb3;
}

Obs.: A junção dos exemplos 2 e 3.

5 - Borda com um efeito de sombra

.post img {
background: url(http://img53.imageshack.us/img53/4622/shadowv.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;
}

Obs.: O feito de sombra é dado pelo trecho background: url(url_da_imagem) no-repeat, você pode modificar e colocar a imagem que mais lhe agrada. Veja um exemplo clicando aqui.

Você pode colocar a cor que quiser nas bordas das imagens, bastando para isso, alterar os códigos refentes as mesmas. Se você não sabe qual é o código da cor, clique aqui.

É isso.

Imagem: Revolução Digital

Pacote com dois e-books para os leitores que assinarem o nosso Feed

noreply@blogger.com (Fabius Maximus) — Mon, 17 Aug 2009 05:21:00 +0000

Sabemos que, seja para a visualização, para a navegação e até mesmo para a monetização do blog, qualquer dica será sempre bem-vinda. Então que tal ganhar um pacote com excelentes tutoriais, widgets e hacks para deixar o seu blog mais seguro, rápido e profissional?

Como vocês acompanharam na semana passada, o Blogger na Web participou com mais outros 59 blogues do Lançamento do E-book Blogger Seguro, promovido pelo Sérgio Estrella do IceBreak. O evento teve uma ótima repercussão tanto na blogosfera como também no Twitter. Muitos blogueiros (novatos e experientes) tiveram a oportunidade de conhecer e aperfeiçoar estratégias de segurança para seus blogues.

Como o intuito deste blog é sempre fornecer dicas que sejam relevantes para outros blogs, vamos presentear os nossos leitores com mais um excelente e-book produzido pelo IceBreak, cuja qualidade é marca registrada. Trata-se do E-Book Blooger Rápido.

Se você gostou do Blogger Seguro, cujas orientações eram voltadas para a segurança de blogues, também irá gostar do Blogger Rápido. As dicas deste e-book são para deixar o seu blog mais rápido, o que nos dias de hoje, é fundamental para se conseguir mais leitores e fazer com eles voltem a visitar o seu blog.

Neste momento, o querido leitor do Blogger na Web pode estar se perguntando: O que preciso fazer para adquiri-los, Idenaldo? Isso é muito simples, jovem gafanhoto. Basta assinar o nosso Feed e este pacote como os dois E-books estará disponível para download e será todinho seu. E o melhor, totalmente grátis.

Pronto. Você acaba de assinar nosso Feed. Parabéns. Além de receber todas as atualizações do blog diretamente na sua caixa de e-mail com total comodidade, também receberá os links para fazer o download dos dois e-books inteiramente grátis.

Importante: As orientações para o download dos e-books estarão disponíveis apenas para os leitores que optaram pela assinatura do nosso Feed. Se você já é assinante, o link já estará disponível quando você receber esse post. Se você acabou de assinar, é preciso aguardar pelo próximo post do blog.

Lembra que eu falei no começo deste post que iria ganhar um pacote com excelentes tutoriais, widgets e hacks para deixar o seu blog mais seguro, rápido e profissional?

O pacote está ai: os dois e-books e mais os posts do Blogger na Web diretamente para você com todo conforto do mundo. Melhor que isso só injeção na testa de graça.

Até a próxima.

Como colocar três colunas no rodapé do Blogger

noreply@blogger.com (Fabius Maximus) — Wed, 12 Aug 2009 18:41:00 +0000

Às vezes, nos deparamos com templates que não possuem um rodapé (Footer) e a ausência desse recuso limita locais que poderiamos utilizar para adicionar novas gadgets. Às vezes, encontramos templates com o rodapé, mas só que sem divisão, o que também não ajuda. Neste post iremos aprender como dividir o rodapé do template em três colunas.

Vamos utilizar o Template Minima do Blogger como nossa "cobaia". Por padrão, ele é configurado conforme a figura abaixo.

O que iremos fazer será adicionar logo abaixo da seção destinada as postagens do blog, um rodapé (footer) dividido em três colunas. Para isso, vamos fazer o seguinte:

1 - Faça um backup do seu template atual. Se você ainda não sabe como fazer isso, basta clicar aqui.

2 - Agora vá em Layout -> Editar HTML (Não é necessário Selecionar a opção "Expandir modelos de widgets"). Com a ajuda de Crtl+F encontre o código CSS referente ao rodapé (Footer). No Minima é este que está logo abaixo:

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Substitua todo esse código que está logo abaixo:

/* Footer
----------------------------------------------- */
#footer-column-container {
clear:both;
}
.footer-column {
padding: 0px;
}

3 - Novamente com a ajuda do Crtl+F encontre o código.

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

4 - Substitua o trecho <b:section class='footer' id='footer'/> pelo código abaixo.

<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;'/>
<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 - Visualize e, se tudo estiver certo, salve.

Como podem ver na figura acima, existem três colunas no rodápe do template.

É isso. Até a próxima.

Lançamento do eBook: Blogger Seguro

noreply@blogger.com (Fabius Maximus) — Mon, 10 Aug 2009 15:37:00 +0000

Que rufem os tambores. Tomem as suas posições e que começem os downloads. Como já havia mencionado dias atrás chegou o grande dia. Está sendo realizado hoje um dos eventos mais importantes da blogosfera brasileira neste ano de 2009. O lançamento do e-Book Blogger Seguro, projeto idealizado pelo blog IceBreak contando com a ajuda e participação de sessenta blogs (inclusive o Blogger na Web).

Você pode me perguntar: O que tem de tão especial nesse eBook para mobilizar tantos blogs? Simples. Com as informações, dicas e tutorais que estão nele, você irá deixar seu blog mais seguro e protegido contra invasões, roubo de senhas e o que assombra todo blogueiro, o plágio. Além de outras coisinhas mais.

Algumas dicas que você irá encontrar no eBook:

Como evitar o plágio e maneiras para se proteger contra ele.

Como fazer o licenciamento do seu blog com o Creative Commons.

Aprenda a bloguear o seu conteúdo com a ajuda de alguns gadgets.

Aprenda a identificar as republicações do seu Feed e como se proteger.

Prevenções contra invasões de perfis e roubo de senhas.

Aprenda a fazer o backup do seu template, dos posts e exclusões acidentais.

O que citei acima é apenas uma parte do conteúdo do livro. Outras informações valiosas, que te deixaram mais tranquilo em relação a segurança do seu blog, você irá encontrar quando fazer o download do eBook.

Não perca mais tempo. Faça agora o download do eBook e já comece a proteger o seu blog contra o plágio e invasões de pessoas de má fé. Proteja-se.

Links para download do eBook:

Para fazer o download pelo Google Sites: Clique aqui.

Para fazer o download pelo Windows Live Skydrive: Clique aqui.

Para fazer o download pelo DivShare: Clique aqui.

Prestigie os blogs que estão nessa empreitada para fazer a blogosfera um local mais seguro para se blogar, se relacionar e proteger o que você faz. Trabalho profissional e sério é isso: um ajudando o outro.

Com o eBook Blogger Seguro, você aprende a proteger o seu blog dos mais diversoes problemas, como o plágio, invasões ou acidentes.

Estão participando do lançamento do Blogger Seguro, os seguintes blogs: UsuárioCompulsivo, 365 dias, ENE – Eu Nós Eles, ZiunaNet, Plugado, Amt Online, Blog do Loko, JC Digital, Virtual Z1, InfoDrama, O Melhor e Pior, Pandongo, Códigos Blog, Pixel White, Blog do Dan, ALLgoritmos, Filhos da Web, Usuário Black Power, Internet Ativa, Fabrizio Malta – Diário de Bordo, NaSorte Promoções, Marynet, Amostra Grátis, Aero Gamer, Blog de Tarô, Egopidemia, Lavanderia Virtual, Infinito Positivo, Grãos de Areia pelo Infinito, PopNutri, Grupo NGJ, Sai Azar, Além das Curvas, O Bob ta Ocupado, Joserilde Júnior, Blog do Zé Marcos, Marketing Digital, Uhu! Galera!…, Ponto.Caos, Blog do Xavier, Intelectualmente™, Portal Meira, BlogIdéias, SequelaNet, Made in Brasilis, GlobGoo, Blogger na Web, Worms Web Group, Gerenciando Blog, Blog do Lausi, Advanced Unit, I/O Tecnologia, Blog EJM, The Hackerbuster, Luz de Luma, Árvore Dourada, Blog do Bauru, Nintendo Blast e Crazyseawolf's Blog

Ícones para RSS/Feed

noreply@blogger.com (Fabius Maximus) — Wed, 05 Aug 2009 06:07:00 +0000

Neste post coloquei a disposição dos leitores do blog, alguns modelos de ícones para RSS/Feed. Lembrando que o uso de Feed no blog é importante para manter a fidelidade dos visitantes, fique a vontade para "pegar" a imagem que desejar.

Web Feed (vindo do verbo em inglês "alimentar") é um formato de dados usado em formas de comunicação com conteúdo atualizado frequentemente, como sites de notícias ou blogs. Distribuidores de informação, blogueiros ou canais de notícias disponibilizam um feed ao qual usuários podem se inscrever, no formato de um link. Outros formatos de dado possíveis de serem comunicados por feeds são arquivos de áudio, podcasts e vídeos.

Para copiar a imagem desejada, clique no botão direito do mouse sobre a figura e em "Salvar imagem como".

Como colocar um ícone para o Twitter no Blogger/Blogspot

noreply@blogger.com (Fabius Maximus) — Mon, 03 Aug 2009 04:40:00 +0000

Que tal colocar um ícone diferente que motive os leitores do seu blog a te seguir no Twitter? Parece ser uma boa ideia, não é mesmo? Pois é, seus problemas acabaram. No site twittericon.com, você escolhe o ícone que mais te agrada e que fique de acordo com as configurações do seu blog.

The best source for Twitter buttons and graphics.

Essas são as palavras usados pelo próprio site para se definir. Numa tradução literal seria algo parecido com "A melhor fonte de botões (ícones) e gráficos para o Twitter". Não sei se chega a tanto, mas que ele é bom e tem várias boas opções para ícones, isso ele tem.

Além de fornecer uma variedade de ícones como mensionei, outro recurso que me chamou a atenção foi a praticidade em agregar estes ícones ao Blogger/Blogspot.

Veja como é simples:

A figura a seguir você irá encontrar assim que entrar o site. Ela está bem destacada logo abaixo do cabeçalho.

Onde está escrito "Your ID", digite o seu login do Twitter e em seguida clique em "GO". Automaticamente todas as opções de ícones existentes naquela página do site já ficarão configuradas com o seu login.

Observação: Quando você mudar de uma página para outra dentro do site, por exemplo, da página 1 para a página 2, você terá que digitar novamente o seu login.

Agora basta você escolher o ícone que mais te agrada ou o que mais se adapta as configurações do seu blog e clicar em "Copy code" (copie o código).

Vá até o seu blog, entre em layout -> Elmentos da página. Escolha um local que seja bem visivel aos seus visitantes.

Agora em Adicionar um Gadget -> Adicionar HTML/JavaScript -> Cole o código que você pegou lá no site (use o Crtl+V para colar).

Visualize e se tudo estiver certo salve.

Seu Blog está seguro?

noreply@blogger.com (Fabius Maximus) — Sat, 01 Aug 2009 01:12:00 +0000

Será realizado no dia 10 de agosto de 2009 o lançamento do e-Book: Blogger Seguro, uma produção e realização do Sérgio Estrella, blogueiro responsável pelo excelente blog Icebreak e como o Blogger na Web estará participando desse evento, não poderíamos deixar de falar o que vem por ai.

Seja na vida real ou aqui na virtual, através de nossos blogs, sempre temos que pensar na nossa segurança. Afinal, não ficamos horas e horas em frente a uma tela de computador para que uma pessoa de má índole venha plagie ou estrague o nosso trabalho.

O Guia Definitivo de Segurança para Blogger do Icebreak é justamente para que tenhamos uma fonte para orientações para que possamos nos proteger contra invasões, plágios, roubo de senhas, entre outras dicas de segurança para blogs e sites.

A ideia para o lançamento ebook é muito legal e inovadora no meu modo de ver, pois o evento contará com a participação de vários blogs, onde todos, de forma simultânea, no dia 10 de agosto, estarão divulgando o ebook.

Confira o vídeo teaser que já está rolando na web sobre o lançamento do eBook.

Gostaram? Pois é, eu também. E este foi apenas um pequeno aperitivo. O melhor ainda está por vir.

Fiquem atentos, acamponham o Blogger na web pelo Twitter ou pelo nosso Feed, para que você não fique de fora do que vai acontecer.

Ainda teremos muitas novidades. Aguardem!!

Grande abraço!

Rolagem automática de banners na sidebar do Blogspot/Blogger

noreply@blogger.com (Fabius Maximus) — Thu, 30 Jul 2009 00:11:00 +0000

Esta dica que encontrei no Blog SemNome, na verdade são duas. Por que duas? Porque além de dar uma incrementada no template, deixando um efeito de animação na sidebar, também permite que você coloque uma grande quantidade de banners em um espaço de exibição reduzido.

Ao trabalho...

1º - Como sempre faça o backup do seu template atual.

2º - Vá em: Layout -> Elementos da página -> Adicionar um Gadget (Na sua sidebar) -> Adicionar um código HTML/JavaScript.

3º - Copie e cole o código abaixo com as devidas mudanças e/ou adaptações para o seu blog.

<style>
#roll, #roll marquee{
overflow:hidden;
width:180px;
height:300px;
margin:5px auto 5px auto;
text-align:center;
}
#roll a img{
border:1px solid #000000;
}
#roll img{
padding:2px 2px 2px 2px;
text-align:center;
margin:2px auto 2px auto;
background:#CCCCCC;
</style>
<div id="roll">
<marquee direction="up" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" loop="-1" scrollamount="1" scrolldelay="50" >
Coloque os códigos dos banners aqui!
</marquee>
</div>

Pronto. Visualize e se tudo estiver certo, salve.

Veja uma aplicação desse widget na nossa sidebar.

Como mostrar o total de comentários e artigos do seu blog

noreply@blogger.com (Fabius Maximus) — Tue, 28 Jul 2009 07:19:00 +0000

Que tal você saber o número total de posts e comentários de seu blog de uma forma automática e bem simples? Com este widget você poderá ter todas essas informações e poderá também configurá-lo de acordo com as características do seu blog.

A instalação desse widget é bem simples, entretanto é sempre bom lembrar que você deve fazer o backu do seu template atual para se prevenir de qualquer surpresa indesejada.

Entre na sua conta do Blogger. No painel, vá até Layout -> Escolha um local de sua preferência (Sidebar, por exemplo) e clique em Adicionar um gadget -> Marque adicionar código HTML / JavaScript.

Agora copie o código abaixo e cole nessa gadget que você criou.

<div align="right"><font color="#cc0000"><b>Estátisticas do blog</b><br/></font><script style="text/javascript">
function numberOfPosts(json) {
document.write('Total de Artigos:<b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total de Comentários: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="#cc0000"><script src="http://seublog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://seublog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font></div>

O que está em azul pode ser modificado de acordo com a sua vontade e gosto. Substitua o que está em vermelho pelo link do seu blog. Feitas as alterações salve e tudo está pronto.

Você pode ver um exemplo desse widget aqui mesmo no Blogger na web. Observe a sidebar e você logo irá encontrar.

É isso ai. Grande abraço.

Top Comentaristas para o Blogger/Blogspot

noreply@blogger.com (Fabius Maximus) — Mon, 27 Jul 2009 02:41:00 +0000

É sempre bom prestigiar aqueles leitores fiéis que sempre deixam comentários em nossos blogs. Além de ser uma demonstração de agradecimento pela visita e pelo comentário, é também uma maneira de divulgar outros blogs. Para isso, basta adicionar um widget no estilo "Top Comentaristas".

Encontrei essa dica no Dicas para blogs e além de ser fácil a sua aplicação, o resultado é muito legal. É sempre bom lembrar que a primeira coisa que você deve fazer antes de modificar ou adicionar qualquer código em seu blog é o backup do seu template atual.

Feito isso, vá em Layout -> Escolha um local na sua Sidebar (ou qualquer outro local de sua preferência) e clique em Adicionar um Gadget -> Seleciona a opção HTML/JavaScript e cole o código abaixo.

<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/topcomentarios.js">
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2Flink_do_seu_blog.blogspot.com&num=10&filter=autor_do_blog" type="text/javascript">
</script>

Os trechos em vermelho podem ser modificados de acordo com as informações do seu blog. Em link_do_seu_blog substitua pelo link do seu blog sem o http// (Exemplo: bloggernaweb.blogspot.com).

Você pode escolher a quantidade de comentaristas que serão exibidos no widget para isso substitua num=10 pelo número desejar.

Em filter=autor_do_blog você pode filtrar os seus próprios comentários ou de qualquer outro comentarista, para isso digite o nome dele nesse local.

É isso ai. Espero que gostem da dica.

Abraço.

Nosso primeiro Meme

noreply@blogger.com (Fabius Maximus) — Sun, 26 Jul 2009 06:12:00 +0000

Tive uma feliz surpresa quando visitei o blog Plaidy, o Blogger na Web recebeu seu primeiro Meme. Agradeço a Plaidy, autora do blog e nossa parceira, pela indicação. Nosso blog ainda está no começo de sua história e já sendo prestigiado dessa forma. É muito bom e gratificante.

O blog da Plaidy é muito bom. Tem dicas interessantes de modelos para templates,tutoriais para sites/blogs, além de fazer um trabalho qualidade de bom gosto. Vale a pena visitar. Respondendo a pergunta que está na figura, eu digo que o melhor de todos os presentes é ter muita saúde. Saúde para dar e vender.

Regrinhas:
- Coloque o link de volta para http://Plaidy.vai.la ou http://Plaidy.blogspot.com.
- Conte à seus leitores, o que irá querer no seu aniversário.
- Insira a imagem.
- Convide quantos blogs quiser e repasse o Meme.

Indicações:
1 - Códigos Blogs
2 - Gerenciando Blogs
3 - Planeta da Blogueira
4 - Exoticlic
5 - Sintetizando Ideias
6 - Usuário Virtual
7 - Ferramentas Blogs
8 - Ice Breaker
9 - Nadaver
10 - Papo de Buteco

É isso ai.

Como fazer o backup do template do seu blog

noreply@blogger.com (Fabius Maximus) — Thu, 23 Jul 2009 23:30:00 +0000

Infelizmente nem tudo são flores na vida de um blogueiro iniciante. Às vezes, com a pressa para adicionar um código novo ou fazer uma alteração que torne o blog mais interesse, corre-se o risco de perder tudo que já feito. Por causa da inexperiência pode-se perder horas e horas de trabalho. Este risco é fácil de ser eliminado, bastando para isso fazer um backup do template atual do seu blog.

Quando estamos começando com um blog, sempre experimentamos novos recursos como, por exemplo, a mudança do template. Fazemos isso até encontrarmos aquele que seja do nosso agrado.

Neste período fazemos também a adição de diversos widgets que possam incrementar o blog tornando-o mais interessante, tanto para nós autores, como para os nossos visitantes. Almejamos sempre facilitar a vida dos nossos leitores em relação a visibilidade e navegação dentro do blog, e consequentemente, fazer com eles voltem a nos visitar.

Recomenda-se então, antes de qualquer nova alteração, seja de um novo template ou algum novo código, fazer um backup de segurança do seu template atual. Se algo der errado, você não irá precisar fazer todas as antigas implementações.

Fazer o backup do template no blogger é algo extremamente fácil e rápido de ser executado. Veja a seguir os procedimentos de como fazê-lo.

Entre Layout, vá em "Editar Html" e logo abaixo da guia "Fazer backup/Restaurar modelo" clique em Baixar modelo completo, como demonstrado na figura abaixo.

Em seguida, será disponibilizado um arquivo no formato XML para ser baixado (download), escolha um local seguro em seu computador e salve-o lá.

Pronto. Você tem um backup do template do seu blog guardadinho na segurança do seu computador.

Para restaurar esse template salvo basta fazer um upload do mesmo. Na mesma guia "Fazer backup/Restaurar modelo" você encontrará uma caixinha para upload parecida com esta que está aqui logo abaixo.

Clique em "Procurar" para localizar o arquivo que você salvou no seu computador. Depois encontrado, clique em "Fazer upload".

Pronto. O template do seu blog será restaurado.

Como inserir uma mini barra de navegação no Blogger

noreply@blogger.com (Fabius Maximus) — Thu, 23 Jul 2009 05:42:00 +0000

Mini barra personalizada com ícones para o Feed, Twitter, Contato e Topo da página
Com a instalação de uma mini barra de navegação, como esta que temos aqui no blog (Dê uma olhadinha no canto inferior direito da tela), você oferece ao seu visitante mais uma forma de navegação interna no seu blog e também dá uma realçada na aparência do template. Ela é muito simples de ser instalada e o resultado final é muito bom.

Colocar essa mini barra é muito simples, bastando para isso, adicionar um código no template do seu blog e assim desfrutar desse recurso.

Como sempre recomendo para que vocês nunca esqueçam, antes de começar alteração ou instalação de algum código novo, faça o backup seu template atual.

Entre em Layout -> Editar Html.

Com a ajuda do Ctrl + F encontre </body> e cole antes dele o código abaixo.

<style type='text/css'>


</style>
<div id='mininavbar'>
<a href='endereço do seu feed' title='Assine nosso Feed'><img src=' http://img403.imageshack.us/img403/8783/minifeed.png'/></a> <a href='endereço do seu Twitter' title='Siga-me no Twitter'><img src=' http://img530.imageshack.us/img530/4108/minitwitter.png '/></a> <a href='endereço do formulário de contato' title='Entre em contato'><img src=' http://img169.imageshack.us/img169/7320/minicontato.gif'/></a><a href='#' title='Topo da página'><img src=' http://img401.imageshack.us/img401/2894/iconup.gif '/></a>
</div>

Os trechos em vermelho devem ser trocados pelos dados do seu blog.

Pronto. Visualize e se tudo estiver certo, salve.

Esta dica eu encontrei no blog do Lenon e fiz algumas modificações. Como podem perceber, os dados entre <div id='mininavbar'> e </div> podem ser motividados de acordo com a sua criatividade e/ou necessidade.

Envie seus posts para diversas redes sociais

noreply@blogger.com (Fabius Maximus) — Mon, 20 Jul 2009 17:22:00 +0000

Uma forma muito eficiente de divulgar o seu blog é espalhá-lo por algumas das mais populares redes sociais e social bookmarks (favoritos/marcadores) da internet. Estes sites concentram-se um número grande de leitores e com tal divulgação, além de elevar o número de visitas no seu blog, você poderá atrair também futuros leitores para ele. Para isso, basta seguir esta dica de como adicionar ícones que permitam o envio dos seus posts para tais redes sociais e para social bookmarks (favoritos ou marcadores).

Adicionar este recurso não tem muito segredo, sua instalação é rápida e fácil de ser executada. Porém, antes de começar, é sempre bom fazer um backup seu template atual, para o caso de algo sair errado.

Estando no painel do teu blog, entre em layout -> Editar Html. Com a ajuda do Ctrl+F encontre a tag ]]></b:skin>. Acima dela cole o código abaixo:

/*-----------Social Bookmarks------------------*/
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important; }
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px; }
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt; }
.rsociales-sobre { opacity:0.4; }
.rsociales-sobre:hover { opacity:1; }

Salve e marque a opção "Expandir modelos de widgets". Novamente com a ajuda do Ctrl+F encontre o seguinte código:

<p class='post-footer-line post-footer-line-3'/>

Imediatamente abaixo dele, cole o seguinte código:

<div class='rsociales'>
<ul>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Adcionar ao Technorati' class='rsociales-sobre' src='http://2.bp.blogspot.com/_Zuzii37VUO4/Rjl62eMBQ0I/AAAAAAAAAto/zkas68GmVFk/s1600/technorati.gif'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'title='Enviar para o Del.icio.us'><img class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjl68-MBQ1I/AAAAAAAAAtw/Mftx1_Bi_oY/s1600/delicious.gif'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o DiggIt!'><img class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlY7uMBQrI/AAAAAAAAAsg/ov73dLSsrtA/s1600/digg.png'/></a></li>
<li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o Yahoo!'><img class='rsociales-sobre' src='http://2.bp.blogspot.com/_Zuzii37VUO4/RjlZLeMBQtI/AAAAAAAAAsw/bNmkgSj_jj0/s1600/yahoo.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o Google'><img class='rsociales-sobre' src='http://4.bp.blogspot.com/_Zuzii37VUO4/Rjl6z-MBQzI/AAAAAAAAAtg/-13NieAS3J8/s1600/google.gif'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o Reddit'><img class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlbHuMBQvI/AAAAAAAAAtA/L0TsC3OUUyI/s1600/reddit.gif '/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o Blinklist'><img class='rsociales-sobre' src='http://3.bp.blogspot.com/_Zuzii37VUO4/RjlbjuMBQxI/AAAAAAAAAtQ/WDlHSsaO_m4/s1600/blinklists.gif'/></a></li>
<li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o Blogmarks'><img class='rsociales-sobre' src='http://1.bp.blogspot.com/_Zuzii37VUO4/RjlQzOMBQoI/AAAAAAAAAsI/qt5x09fQvNo/s1600/blogmarks.gif'/></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o facebook'><img class='rsociales-sobre' src='http://lh5.ggpht.com/jaloee/SJNIyWWQmEI/AAAAAAAACRY/4GVE3Qxqg34/facebook.gif'/></a></li>
<li><a expr:href='"http://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o twitter'><img class='rsociales-sobre' src='http://lh6.ggpht.com/jaloee/SJNIyl7oKlI/AAAAAAAACRc/8cc7q_upZI4/twitter.gif'/> </a></li>
</ul>
</div>

Visualize para ver como ficou. Se estiver tudo certo, salve.