Compartilhe os posts do seu blog no Facebook

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

Continue lendo >>

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

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

Continue lendo >>

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

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(&#39;<data:post.dateHeader/>&#39;);
</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(&#39; &#39;);
month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
day = &quot;<div class='day'>&quot;+da[0]+&quot;</div>&quot;;
year = &quot;<div class='year'>&quot;+da[2]+&quot;</div>&quot;;
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

Continue lendo >>

Expandir e minimizar posts no Blogger

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;'/> <!-- clear for photos floats -->
</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;'/> <!-- clear for photos floats -->
</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

Continue lendo >>

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

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(&#39;http://img509.imageshack.us/img509/3131/sexysprite.png&#39;) 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='&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='Url_FeedBurner' 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>

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

Continue lendo >>