Mostrando postagens com marcador Hacks. Mostrar todas as postagens
Mostrando postagens com marcador Hacks. Mostrar todas as postagens

domingo, 28 de novembro de 2010

Personalizando o gadget Postagens Populares

Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens Populares, que exibe os posts mais acessados, baseando-se no serviço de estatísticas nativo.
No post Novo gadget – Postagens populares, ensinei como colocar o gadget na barra lateral (sidebar) do blog.
O problema é que em alguns templates – e os nosso estão incluídos – o gadget aparece desconfigurado. Vejam um exemplo na imagem abaixo:
postagens-populares
Perceberam que as setinhas aparecem em cima do texto? Para consertar isso, segui este tutorial do Mundo Blogger -  Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger e fiz as alterações necessárias para o meu template.
Acredito que o código deve variar de template para template, mas vamos lá.
Entrem em design>editar HTML. Antes de ]]></b:skin>, colem o código abaixo:
#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}
A parte padding-left, se refere à distância que deve existir entre a imagem e o texto. Já padding-top, se refere à altura da imagem. Façam os ajustes nesses dois elementos e vá visualizando até ficar do modo correto e daí salve o template.

Além de acertar  a distância entre o texto e a imagem,  podemos aplicar estilos, usando  CSS. Para exemplificar, colocarei borda e plano de fundo no gadget:
#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}
#PopularPosts1 .widget-content{
border: 1px solid #ccc;
background: #efefef;
}

Para mudar a cor do resumo dos posts, acrescente este trecho:
.item-content{
color: #1d85dd;
}

Mude as cores a seu gosto. Se não sabe os códigos , acesse uma tabela de cores
O CSS final seria este, com as devidas modificações de acordo com cada template:
#PopularPosts1 li{ /*Estilo para acertar a imagem*/
padding-left: 15px;
padding-top: 3px;
}
#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/
border: 1px solid #ccc;
background: #efefef;
}
.item-content{ /*Estilo para o resumo dos posts*/
color: #1d85dd;
}
ATUALIZAÇÃO: Para retirar o ícone que vem antes do texto, substitua:
#PopularPosts1 li{ /*Estilo para acertar a imagem*/
padding-left: 15px;
padding-top: 3px;
}
por este outro código:
#PopularPosts1 li{ /*Estilo para retirar o ícone*/
background-image:none;
}
Este post foi criado à pedido de querida leitora Lucy – Amor e Paz Sem Fronteiras
Créditos de parte do código CSS ao Mundo Blogger, um dos meus blogs favoritos Smiley piscando

quinta-feira, 25 de novembro de 2010

Personalizando os links de navegação do Blogger

image
Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visitante a “navegar” pelo arquivo do blog, avançando e retrocedendo as postagens do arquivo.

blog-pager-blogger
Considero obrigatório, o uso dos links de navegação, já que sem eles ficaria muito complicado ter acesso a todos os posts que não se encontram na página inicial.
Muito bem. Com um pouco de CSS e com algumas mudanças no código original do Blogger, podemos fazer maravilhas com os links de navegação.

Primeiramente, irei ensinar como mudar o código original. Antes de começar, faça um backup completo do template ou use um blog de testes.

Entre em design>editar HTML, marque a caixa expandir modelos de widgets  e, usando o comando Crtl+F do teclado, procure por:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Substitua tudo por:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='posts mais recentes'>&#171; página anterior</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='posts mais antigos'>próxima página &#187;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Salve o template.
Agora iremos aplicar o CSS.  Procure por este trecho:
#blog-pager-newer-link {  
float: $startSide;
}

#blog-pager-older-link {
  float: $endSide;
}

#blog-pager {
  text-align: center;
}
**Para blogs com template do Designer do modelo, o trecho é este:

.blog-pager { 
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}
Substitua tudo por:
#blog-pager a {
font-family: Arial;
color: #333; /*Cor da letra*/ font-size: 13px; /*tamanho da letra*/
padding: 5px;
text-decoration: none;
background: #e6e6e6; /* cor do fundo*/ border: solid #ccc 1px; /*cor da borda*/ }
#blog-pager a:hover {
color:#fff;  /*Cor da letra ao passar o mouse*/ background-color:#0071bb;  /*Cor da fundo ao passar o mouse*/ }
.blog-pager-older-link {
float: right;
}
.blog-pager-newer-link {
float: right;
}
image
Os ítens em vermelho, podem ser modificados livremente. Veja a tabela de cores.
Para colocar numeração nos links, vá até o Mundo Blogger: Numerar Páginas no Blog

domingo, 31 de outubro de 2010

Slideshow em cima dos posts do Blogger

Ontem eu publiquei um tutorial, ensinando como colocar um slideshow nos templates personalizados para Blogger/Blogspot -  Slideshow no Blogger
No tutorial em questão, o slide tem 980px de largura e as imagens ficam dispostas lado a lado, abrindo-se a medida em que passamos o mouse sobre elas.
image
Hoje irei mostrar dois outros modelos, que ficam muito bonitos quando colocados em cima da área de postagem ou mesmo no topo da sidebar
IMPORTANTE! Vale lembrar que a largura dos elementos de página do Blogger, variam de template para template e que é necessário que vocês façam os ajustes no CSS de acordo com as suas necessidades. Os dois modelos que irei apresentar foram testados nos Templates do Dicas Blogger, com sidebar à direita.
Modelo 1 – largura 500px
Neste modelo, deve-se usar imagens de 500 x 280px.
Passo 1- entre no HTML do template e procure por ]]></b:skin>
Cole ANTES dessa tag o seguinte código

/* Image Slideshow */
#s3slider{margin:15px; width:100%; height:250px; position:relative; word-wrap:break-word; overflow:hidden;}
#s3sliderContent{width:100%; position:absolute; bottom: 0; margin:0px; padding-left:0px; }
.s3sliderImage{float:left; position:relative;display:none; }
.s3sliderImage span{position:absolute; left:0; font:normal 12px 'Arial',Helvetica,sans-serif; padding:0px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none;bottom: 0; }

Passo 2- procure pela tag </head> e cole ACIMA dela:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);
//--><!]]></script>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

Passo3 -  procure por <div id='main-wrapper'> e cole este código logo embaixo:



<b:if cond='data:blog.pageType != &quot;item&quot;'>
                <div id='s3slider'>


                <ul id='s3sliderContent'>


                    <li class='s3sliderImage'>


                    <a href='url do link'>


                    <img src='url da imagem'/>


                    <span>DESCRIÇÃO</span></a></li>


                    <li class='s3sliderImage'>


                    <a href='url do link'>


                    <img src='url da imagem'/>


                    <span>DESCRIÇÃO.</span></a></li>


                    <li class='s3sliderImage'>


                    <a href='url do link'>


                    <img src='url da imagem'/>


                    <span>DESCRIÇÃO.</span></a></li>


                    <li class='s3sliderImage'>


                    <a href='url do link'>


                    <img src='url da imagem'/>


                    <span>DESCRIÇÃO.</span></a></li>


                    <li class='s3sliderImage'>


                    <a href='url do link'>


                    <img src='url da imagem'/>


                    <span>DESCRIÇÃO.</span></a></li>


                    <div class='clear s3sliderImage'/>


                </ul>


                </div>


            </b:if>

Substitua “url do link” pelo endereço do post, "url da imagem", pelo endereço da imagem e em DESCRIÇÃO, escreva algo sobre aquela imagem.

Apague as partes que estão em verde, se quiser que os slides apareçam em todas as páginas e não somente na home.

Modelo 2 -largura 610px



Utlize imagens de 610 x 320 px ou de acordo com sua necessidade

Entre no HTML do template e cole este código antes da tag ]]></b:skin>


#slider-holder{width: 610px;height: 320px;overflow: hidden;
margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 15px 0 0 0;}
#s3slider { width: 610px; /* largura da imagem */
height: 320px; /* altura da imagem */position: relative; /* important */overflow: hidden; /* important */}
#s3sliderContent {width: 610px; /* largura */
position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */}
.s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */}
.s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: #ffffff; padding: 20px 15px 50px 13px; height: 73px; width: 600px; background-color: #4e4d3c;
filter: alpha(opacity=70); /* opacidade do box */
-moz-opacity: 0.7; /* opacidade do box */
-khtml-opacity: 0.7; /* opacidade do box */
opacity: 0.7;
display: none; bottom: 0;
}
.s3sliderImage span a.featured-title:link,
.s3sliderImage span a.featured-title:visited{color: #fff;padding: 0px 0px 2px 0px;font-size: 1.167em;}
.s3sliderImage span a.featured-title:hover{color: #999;}
.s3sliderImage span a:link,
.s3sliderImage span a:visited{color: #888;}
.s3sliderImage span a:hover{color: #555;}

Siga o passo 2 do modelo1.

Siga o passo 3 do modelo 1, mas use este código:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='black-bg' id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LINKS'><img alt='Imagen 1' src='URL DA IMAGEM' style='width: 610px; height: 320px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='#LINK' rel='bookmark' title='TÍTULO DO POST'>TÍTULO</a><br/>
DESCRIÇÃO
</span>

</li>

<li class='clear s3sliderImage'/>
</ul>

</div>
</div>
</b:if></b:if>


  • A parte em vermelho deve se repetir para cada nova imagem.
  • Em Link, coloque a url que será associada à imagem.
  • Em url da imagem, cole o endereço da imagem.
  • De um título e uma descrição às imagens.

Nos dois modelos, foram utilizados javascript. O endereço do arquivo é:


Recomendo salvar o arquivo .js, hospedar em algum site de sua preferência e substituir a url nesta parte do código:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

O script pode ser colocado diretamente no template. Preste muita atenção!

Abra o arquivo .js no bloco de notas. No código do passo 2, apague esta linha:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
Agora, copie este código, colando todo o script (JS) no local indicado.
<script type='text/javascript'>
//<![CDATA[
COLE AQUI O SCRIPT
//]]>
</script>

Slideshow no Blogger

A última moda em matéria templates personalizados para o Blogger, é o uso de um slideshow no alto dos posts ou embaixo do cabeçalho.

Já existiam várias formas de se colocar um slideshow no Blogger, mas a maioria delas dependia de  hospedar externamente um arquivo do tipo .js (javascript).

Por que isso era ruim? Porque no Blogger não existe um serviço de hospedagem de arquivos; dos serviços gratuitos, muitos mudam as regras sem aviso prévio, apagando os arquivos ou mudando as URLs (endereços) dos mesmos.

Hoje eu vi no excelente metablog espanhol Gema Blog, uma forma de usar um slideshow sem precisar de hospedagem externa do arquivo em javascript.

Vejam um exemplo neste lindo template da Mamanunes – Template Animal

 
Para colocar um slideshow em seu blog, antes de mais nada é preciso encontrar as imagens que farão parte do conjunto de slides. No tutorial da amiga Gema, foram utilizadas imagens no tamanho 750 x 250 px. Edite as imagens de sua preferência, usando um site ou programa apropriado e hospede-as no Picasa.
Faça um backup do template. Vá em design>editar HTML e, usando o comando Crtl+F do teclado,  procure pela tag </head>. Cole antes dela o seguinte código:


<style>

#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
ul.kwicks{
margin:0px;
padding:0px 10px;
list-style:none;
}
.kwicks li {
float: left;
width: 196px;
height: 250px;
position:relative;
}
.kwikmet{
position:absolute;
bottom:10px;
left:10px;
right:10px;
display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQrppq86WtpDM7u2RWorJbjppfoKVnOLcbFE76pq3ccuk8veAQFxlAFVuAaLZ5rvsU5g6e1B4oMR_5YrSKwctGsKMKh1ukymB13L5kuX-S41ltOIuA71KjlcSlPMejm50nx5S5mSwcKC0/s1600/trans.png);
padding:10px;
width:710px;
color:#888;
}
.kwikmet h2 a{
color:#fff;
font-size:16px;
font-family:georgia;
font-weight:normal;
padding-bottom:10px;
}
.slidimg{
width:750px;
height:250px;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>



<script type='text/javascript'><!--//--><![CDATA[//><!--
/**
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
*
* @param f onMouseOver function || An object with configuration options
* @param g onMouseOut function || Nothing (use configuration options object)
* @author Brian Cherne <brian@cherne.net>
*/
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
//--><!]]></script>



<script type='text/javascript'><!--//--><![CDATA[//><!--
/*
Kwicks for jQuery (version 1.5.1)
Copyright (c) 2008 Jeremy Martin
http://www.jeremymartin.name/projects.php?project=kwicks

Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php

Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
//--><!]]></script>

<script type='text/javascript'>
jQuery().ready(function() {
jQuery(&#39;.kwicks&#39;).kwicks({
max: 750,
duration: 1000
});

jQuery(&quot;.kwik&quot;).hoverIntent(function() {
jQuery(this).children(&quot;.kwikmet&quot;).fadeIn(&quot;slow&quot;) ;
}, function() {
jQuery(this).children(&quot;.kwikmet&quot;).fadeOut(&quot;3000&quot;);
});
});
</script>

Visualize o template para verificar se está tudo bem e salve.

Agora, vá em design>elementos de página e clique em adicionar gadget.

Escolha o gadget HTML/javascript e cole o seguinte código:


<div id='slidearea'>
<ul class='kwicks'>
<li class='kwik'>

<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
</ul>

<div class='clear'/>
</div></div> 

A cada slide que você for incluir, faça as seguintes substituições:

<a href='#'> (coloque o link que será associado à imagem)
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" />
</a> (cole a URL e o tamanho da da imagem)
<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2> (dê um título à imagem)
<p>Conteúdo</p> (escreva uma descrição)

Vejam um exemplo, usando o template Style:

<a href='http://www.templates.dicasblogger.com.br/2010/09/template-style.html'> (link que será associado à imagem)
<img alt="" class="slidimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSElA4Lxy4Bwjfqz0rv73c4RjbukkgzktYXhssofLfQ6jQgOS_ufBjb9Yq9j8mDENiOO8ztJ3RGL9ZYXPhyk8Cv4awQesZe4UeyNLWJEDXlRygdvz4_n9RWk15tUO9bSNO09vXD_gO7Z-Z/?imgmax=800" style="width: 750px; height: 250px;" />
</a> ( URL e tamanho da imagem)
<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Template Style</a></h2> (título)
<p>O template Style possui  1 coluna de cada lado etc…</p> (descrição)

Gostou da caixinha de códigos?Aprendi a fazer lá no Mundo Blogger ;)

Fonte do tutorial: Gema Blog – Otro slider de JQuery

quarta-feira, 29 de setembro de 2010

Como colocar o botão do Facebook no Blogger

Com a popularização de aplicativos como o Farmiville e outros jogos online, o Facebook obteve um crescimento explosivo no Brasil. Ficar de fora do Facebook é perder a oportunidade de receber milhares de visitas no seu blog ou site. Vou iniciar uma série de artigos ensinando como integrar um blog ao Facebook, e o primeiro é como colocar um botão do Facebook no Blogger:
A vantagem de utilizar o botão "Gosto" (ou "Like", em inglês e "Curtir", em português de Portugal) é que sempre que alguém clica no botão será feita uma atualização do status no mural do perfil no Facebook com o link do post em questão. Os amigos deste perfil também irão receber esta atualização. Para colocar este botão, tal como o botão do Twitter, não é necessário ter conta no Facebook.

Integrando o botão do Facebook no Blogger:
O botão "Gosto" pode ser inserido em qualquer parte. Recomendo que seja colocado no final do post, é o local onde o leitor irá realizar a próxima ação após a leitura, mas isto não é uma regra. Antes de fazer esta alteração, faça um backup completo do template do blog.

Entre no painel do Blogger, clique em design e, depois, em editar HTML. Marque a caixa expandir modelos de widgets e procure por:
<data:post.body/>
Copie e cole logo abaixo do código anterior:
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
Se deseja que o botão do Facebook apareça na parte superior do post, ao lado do título, coloque o código logo abaixo desta linha:
<div class='post-header-line-1'/>
Otimizar o botão do Facebook:
Para que o botão não apareça na página inicial, somente nos posts, deve inserir o código em verde:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>
Para que apareça as fotos dos utilizadores que gostaram, deve alterar o false para true, e o tamanho do widget de 40px para 80px:
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px;'/>
Outra coisa que pode ser feita é alteração de "Gosto" para "Recomendar", bastando para isto alterar o like (em vermelho, no código acima), por recommend.

A fonte das letras também pode ser alterada, por default vem em Arial, mas é possível utilizar outras fontes.

Salve e veja se ficou tudo correto.

Gostou? Seja fã do Dicas Blogger no Facebook!

domingo, 19 de setembro de 2010

Hack “Leia mais” automático e com imagens

Fui procurar este hack, à pedido de uma cliente do DB-produtos e serviços e encontrei no Templates para você, blog da querida e sumida amiga Áurea.
Trata-se de um hack que resume os posts da página inicial (home) automaticamente e ainda mostra uma pequena imagem (thumbnail) do lado esquerdo da postagem.
Antes de mais nada, recomendo que você instale este hack em um blog de testes ou, se quiser instalar diretamente no blog, faça antes um backup do template.
Como colocar o hack Leia Mais com imagens
Entre no painel do Blogger, clique em design e, depois, em editar HTML.
Marque a caixa expandir modelos de widgets e procure por:
<div class='post-body entry-content'>
<data:post.body/>
Substitua a linha <data:post.body/> por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
ATENÇÃO! Para quem usa os meus templates, que já vêm com um outro hack “leia mais” e/ ou com o jump break do Blogger, o caminho é outro. Procure por:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
<span id='showlink'>
<a expr:href='data:post.url'>Continue lendo &gt;&gt;</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
Substitua tudo por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
Agora vá no CSS do template e antes da tag ]]></b:skin> cole este código:
.rmlink {
font-size: 100%;
float: right;
margin-right: 30px;
margin-top: 10px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/
Procure então pela tag </head> e cole este outro código em cima dela:

Fontes de referência
Escondendo o rodapé dos post na página inicial
Para esconder a data e o rodapé dos posts na página inicial, procure por:
]]></b:skin>
e cole o seguinte código depois dessa tag:
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'> .post-footer { display: none; } </style>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'> h2.date-header { display: none; } </style>
</b:if>
Para entender melhor as condicionais do Blogger, acesse:
Esta última dica funcionou no Template Mínima e nos meus templates, mas talvez não funcione em outros, já que o nome dos seletores ( .post-footer e h2.date-header ), pode variar de um modelo para outro.
Exibindo apenas o texto
Se você quiser mostrar apenas o texto na home e não as imagens, procure por:
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
Substitua todo o trecho acima por este:
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
display: none:
}
.thumbnailimg {
float:left;
padding:0px 10px 0px 0px;
}

quinta-feira, 15 de abril de 2010

Designer do modelo – como retirar navbar

Se você já está usando um dos novos modelos do Blogger, através da página Blogger in Draft, saiba que retirar a navbar ficou ainda mais fácil.
Eu já expliquei neste post Como criar um template para Blogger / Blogspot, mas me parece que nem todo mundo conseguiu entender. Sendo assim, vou explicar detalhadamente.
Acesse o designer do modelo, clique em avançado (1) e depois em adicionar CSS (2). Cole o código abaixo, dentro da parte em branco (3) e aperte a tecla enter do seu teclado.

#navbar-iframe { height: 0px; visibility: transparent; display: transparent; }
retirar_navbar
Clique sobre a imagem para ampliar
Assim que você colar o código e apertar a tecla enter, a navbar irá ficar invisível.
Que eu saiba, não há nenhuma restrição por parte do Blogger quanto à retirada da navbar:
Confirmado: NavBar do Blogger é opcional – blog Usuário Compulsivo
While we don't recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service that explicitly mandate its use. Fonte: fórum do Blogger em inglês
ATUALIZAÇÃO – Este método já não está funcionando tão bem, visto que a Equipe do Blogger vem fazendo alterações no Designer do Modelo. O @velosomanel, postou em seu blog Rascunhos Blogger, uma forma de retirar a navbar completamente e que pode ser adaptada aos novos modelos. Entre no html e procure por <body class='loading'>
Cole logo antes o seguinte código:
<!-- Navbar-->
<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
<!-- Navbar-->
Aceite a exclusão do widget navbar e salve.
Fontes: Blogger Plugins e Blogger Rascunhos

quinta-feira, 1 de abril de 2010

Mapa do site para Blogger/Blogspot

Que tal ter uma página no seu blog, onde estão todas as suas postagens organizadas por data? Poderíamos chamar essa página de Mapa do Site ou Arquivo do blog e ela pode ser bastante útil quando um visitante não consegue encontrar algum post específico no seu blog usando a pesquisa ou mesmo se este visitante quiser ler tudo o que você já publicou.
Se quiser ver como é uma página assim, dê uma olhada na que eu criei no meu blog neste link. Se quiser uma página igual para o seu blog, siga o tutorial abaixo.

Primeiramente crie uma nova página no seu blog (1)  e entre no modo de edição HTML (2). Copie o código abaixo, alterando a parte em vermelho pelo endereço completo do seu blog. Cole o código no html da página (3) e clique em publicar agora.
<script style="text/javascript" src="http://100rede.com/mapablogger.js"></script>
<script src="http://NOME_DO_SEU_BLOG/feeds/posts/default?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
sitemap_blogger
Veja o resultado do arquivo do Dicas Blogger, na imagem abaixo:
Arquivo ou mapa
Observações:
Eu peguei essa dica no blog do Abu Farhan, os créditos do script foram mantidos, sendo que eu apenas traduzi os nomes dos meses para o português.
Não sei como os robôs do Google podem interpretar essa nova página do seu blog cheia de links internos, acredito que isso não renderia nenhuma punição nos resultados de pesquisa do Google, mas não posso afirmar tal coisa com certeza.
Percebam que existe um valor neste URL que indica o número de posts a serem exibidos; no exemplo acima este valor está definido como 1000, pois eu queria mostrar todas as postagens do meu blog no mapa. Altere o valor conforme a quantidade de posts do seu blog, colocar sempre um valor bem acima do número de postagens do seu blog vai garantir que todas sejam mostradas.

Teilor (@Teilor) é um dos principais colaboradores do fórum oficial do Blogger e autor do blog Without Brain.

quarta-feira, 10 de março de 2010

Topsy - Botão de retweet no Blogger

A mestra Juliana Sardinha ensinou a colocar em seu Blogger o TweetMeme, embora ele e o Topsy tenham a mesma função, o Topsy permite o retweet várias vezes seguidas, enquanto o TweetMeme bloqueia a ação após o primeiro retweet. No resto, ambos mostram a quantidade de retweets e ambos permitem algumas configurações e personalizações.

Assim como o TweetMeme, o Topsy também possuí dois tamanhos, um grande (big) e o outro compactado. E também disponibiliza a personalização de cores, veja outras opções: Topsy Retweet WebSite.
Para colocar o botão embaixo dos posts, entre no HTML do seu template acessando “Layout” > “Editar HTML”. Marque a opção “Expandir modelos de widgets” e procure (crtl+F) por:
<div class='post-footer'>
Acrescente logo acima o código abaixo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
     var topsy_style = "big";
     var topsy_nick = "PERFIL DO TWITTER";
</script>
<script type="text/javascript" src="
http://cdn.topsy.com/button.js"></script>
</b:if>
Substitua a parte “PERFIL DO TWITTER” pelo seu nick (sem o @). A função da parte verde é exibir o botão somente nas páginas das postagens, a parte vermelha é o código do Topsy (o tamanho grande - big). Para utilizar o tamanho pequeno, mude o “big” do código por “small”.
Para colocar o botão entre o título e o post, encontre:
<div class='post-header-line-1'/>
E cole o código anterior, visualize e salve.
Você poderá juntar o botão com um anúncio, se quiser. Entretanto vai depender do tamanho da sua área de postagem (main-wrapper). Utilize o código abaixo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">
<tbody>
<tr>
<td valign="undefined" align="left">CÓDIGO DO TOPSY</td>
<td valign="undefined" align="undefined"> CÓDIGO DO ANÚNCIO </td>
</tr>
</tbody>
</table> </b:if>
O resultado será parecido com esse:
topsy-banner
Para utilizar o modelo acima, com um banner de publicidade, você precisará converter o código. Use o site Blogcrowd.
Se você preferir não utilizar um banner, pense em uma frase criativa e coloque no lugar. Veja o exemplo abaixo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">
<tbody>
<tr>
<td valign="undefined" align="left">CÓDIGO DO TOPSY</td>
<td valign="undefined" align="undefined">
<b>Siga este blog no  <a href='http://LINK DO SEU TWITTER'>Twitter </a> e fique por dentro das novidades!</b>
</td>
</tr>
</tbody>
</table> </b:if>
Se preferir algo “além”, aprenda a mexer com HTML ou utilize o programa NVU portable para contruir o seu próprio código.
Para alterar a cor, acrescente o seguinte código (destacado em vermelho) no seu botão:
<script type="text/javascript">
     var topsy_style = "big";
     var topsy_nick = "PERFIL DO TWITTER";
     var topsy_theme = "jade";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
Altere a palavra entre aspas (“”) para a cor que você quiser, com base na imagem abaixo:
cores-topsy
Assim como a Juliana recomendou, eu faço o mesmo. Faça as alterações em um blog de teste. Até mais. ;D

quarta-feira, 17 de fevereiro de 2010

Páginas estáticas com CSS

No final do mês passado, o Blogger lançou um recurso há muito tempo esperado por seus usuários – as páginas estáticas. Muita gente comemorou o lançamento, tal como aconteceu quando disponibilizaram o Jump Break. Até então, nós nos virávamos utilizando os hacks, também chamados de gambiarras, alterando os códigos html e css dos templates para obter essas e outras funções que não eram nativas do Blogger.
O problema é que tanto o Jump Break quanto as páginas estáticas, se mostraram incompatíveis com os templates que são criados pelos próprios usuários, sendo necessário a inclusão de mais códigos no html. Mesmo assim, muitos ainda se queixam que a sidebar foi parar embaixo do posts (no caso do jump break) ou que algum dos hacks para colocar o resumo das postagens não funcionam com as páginas estáticas.

Eu, particularmente, jamais deixaria de usar um template personalizado por causa das deficiências do Blogger; afinal, os templates padronizados são…digamos…simples demais. O jeito é continuarmos com nossas gambiarras, já que não existe suporte para templates personalizados – o que é altamente compreensível, pois seria impossível auxiliar cada um que aparece lá no fórum do Blogger para pedir ajuda para um determinado modelo.
Eu não uso o Jump Break e não vou usar as páginas estáticas; prefiro os hacks. Para colocar resumo de postagens, já ensinei dois tipos de hacks neste post - Como colocar o hack “Leia Mais” no Blogger – e hoje vou explicar como criar páginas estáticas usando CSS.
CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. Fonte: HTML.net
Não sou  expert no assunto.Confesso que tenho dificuldades para usar CSS e que demorei para fazer este post justamente porquê sei que  irão surgir muitas dúvidas e que eu não saberei responder à todas elas, mas, por outro lado,  não seria correto da minha parte privá-los de algo tão interessante e funcional. Portanto, tenham calma :)
Bem, o que não deve aparecer em uma página estática? Data, hora, comentários, nome do autor, anúncios publicitários, convites para assinar os feeds e etc. Na página estática deve aparecer somente o título e o texto do post. Vejam estes exemplos:
Podemos também retirar a sidebar ou colocar só meia sidebar. Eu faço isso quando o post é menor do que o comprimento da sidebar, para ficar esteticamente mais adequado.
Chega de conversa e vamos logo para o tutorial, pois o post já está ficando enooooorme.
ATENÇÃO:  Os códigos abaixo  funcionam perfeitamente nos templates do Dicas Blogger, mas não posso garantir que funcionarão em outros modelos.
Por que tal advertência? Porque os códigos de cada template variam muito então sugiro que vocês façam testes para adaptar este tutorial ao template de vocês.
Antes de mais nada, apliquem o hack fornecido neste post - Páginas estáticas no Blogger sem data - para retirar a data da futura página estática e lembrem-se de desabilitar os comentários também, para que tudo funcione satisfatoriamente.
Criei o post (1) que dará origem à página estática, desabilite os comentários (2), escolha uma data mais antiga (3), clique em “editar html” e ao final  cole um dos códigos abaixo (4).

Páginas estáticas com sidebar
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;} #comments {display:none} .post-header{display: none;}</style>
Páginas estáticas sem sidebar
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none}  #comments {display:none} .post-header{display: none;} </style>
Páginas estáticas com meia sidebar
<style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#sidebar-wrapper{display: none;}  #comments {display:none} .post-header{display: none;}</style>
Se você usa anúncios dentro dos posts ou um convite para assinar os feeds, basta criar uma div para eles e depois colocar no código da página estática. Por exemplo:
Esta parte vai no html do template => <div id='anuncio'> (código do anúncio) </div>
Esta parte vai na página estática => <style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none}  #comments {display:none} .post-header{display: none;} #anuncios{display:none} </style>
Cada parte do código CSS se refere à parte correspondente que não deve aparecer na página estática. Então temos: #comments = comentários / .post-footer = rodapé do post / #side-wrapper = sidebar/ .post-header = cabeçalho do post e assim por diante.
Acredito que irá aparecer algum aspirante a metablogger dizendo “ah eu faço diferente” Ótimo. Publique lá no seu blog, mande o link pro meu Twitter e darei RT :D
Pessoal, é isso. Espero que vocês tenham conseguido entender. Não consegui fazer um post menor, já que é um assunto novo aqui no DB e foi necessário uma boa introdução.

segunda-feira, 1 de fevereiro de 2010

TweetMeme- Inserindo botão de Retweet no Blogger

A nova febre é o botão de RT do site TweetMeme. Muitos bloggers já adotaram esse recurso, que mostra todos os retweets de um determinado post. Por insistência do @luanfr, acabei aderindo também e não é que ficou bonitinho? Além de mostrar os Rts, o botão ainda possibilita que os leitores enviem nossos posts diretamente para a página do Twitter. E é simples de instalar.

Para colocar o botão embaixo dos posts:

Entre no html do template (layout>editar html), marque a caixa “expandir modelos de widgets” e procure (Ctrl+F) por:

<div class='post-footer'>

Cole logo acima o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type="text/javascript">
tweetmeme_source = 'NOME NO TWITTER';
</script>
<script type="text/javascript" src="
http://tweetmeme.com/i/scripts/button.js"></script>

</b:if>

Substitua NOME NO TWITTER pelo seu nome de usuário e salve.

A parte em vermelho é referente ao código do TweetMeme e a parte em verde é referente às condicionais para que o botão só apareça nos posts e não na página inicial do blog.

Para colocar o botão entre o título e o post, encontre:

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

Cole o código anterior embaixo dessa linha e salve.

Você pode integrar o botão de RT com um anúncio, do tipo banner ou meio banner (Isso vai depender do tamanho da área de postagem do seu blog). Basta usar o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table

style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">

<tbody>

<tr>

<td valign="undefined" align="left">CÓDIGO DO TWEET MEME </td>

<td valign="undefined" align="undefined"> CÓDIGO DO ANÚNCIO </td>

</tr>

</tbody>

</table> </b:if>

Aí está o resultado que eu obtive no meu blog de testes, usando um banner:

image

Lembrando que o código do AdSense tem que ser convertido. Use o site Blogcrowd.

Caso você não use publicidade no seu blog, coloque um mensagem para os seus leitores. E se quiser ir mais além, use o programa NVU portable para construir o seu próprio código:

Exemplo de uma mensagem legal:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table

style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">

<tbody>

<tr>

<td valign="undefined" align="left">CÓDIGO DO TWEET MEME </td>

<td valign="undefined" align="undefined">

<b>Siga este blog no <a href='http://LINK DO SEU TWITTER'>Twitter </a> e fique por dentro das novidades!</b>

</td>

</tr>

</tbody>

</table> </b:if>

Recomendo que essas alterações sejam feitas, primeiramente, em um blog de testes.

ATUALIZAÇÃO EM 27/08/2010

Para que o botão fique à direita do anúncio, inverta os códigos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table

style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">

<tbody>

<tr>

<td valign="undefined" align="left">CÓDIGO DO ANÚNCIO</td>

<td valign="undefined" align="undefined"> CÓDIGO DO TWEETMEME </td>

</tr>

</tbody>

</table> </b:if>

Caso você não use anúncios, siga esta dica do Ferramentas Blog:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='display: inline; float: right; margin-left: 5px'>

Adicione aqui o código do botão

</p>
</b:if>

sábado, 30 de janeiro de 2010

Mensagens no rodapé dos posts

Que tal colocar um convite, no rodapé de todos os seus posts, convidando seus leitores para que assinem os feeds do seu blog ou para te seguir no Twitter ? Ou mesmo qualquer mensagem que seja importante para o seu ´público? Eu já havia feito um tutorial em 2008, que acabou ficando desatualizado, então hoje iremos rever como implantar essa função.
Antes de começar, faça um backup do seu template. Como se trata de um tutorial avançado, NÃO PROSSIGA, caso não se sinta apto (a) para fazer alterações no html do seu template.
Eu vou usar 2 modelos com imagem -  assine os feeds e siga no Twitter e um só com texto.

Convite para assinar os feeds
Assine o feed deste blog ou receba todos os artigos por email.
Encontre uma imagem de 32 x 32 px. Hospede-a na sua conta do Picasa ou no serviço de hospedagem de sua preferência. Copie a url da imagem. Cole no bloco de notas.

Entre no FeedBurner, procure pela aba publicize e pelo link (fica na coluna da esquerda)  email subscription. Copie o código que fica em Preview subscription link:

Agora, copie o código abaixo e substitua URL DA IMAGEM  pela url da imagem que você hospedou no Picasa. Em URL DO FEED DO SEU BLOG, coloque a url do feed do seu blog (rs) e em URL DO FEED POR EMAIL, coloque a url que você copiou do Feed Burner.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined"><img
alt=""
src="URL DA IMAGEM"
style="width: 32px; height: 32px;" align="middle" /></td>
      <td style="text-align: left;"><span
style="font-weight: bold;"></span><b>Assine o <a
href="URL DO FEED DO BLOG">feed </a> deste blog ou receba todos os artigos
por
<a href="URL DO FEED POR EMAIL">email</a></b>.<br />
      </td>
    </tr>
  </tbody>
</table>
</b:if>
Vá em layout>editar HTML, clique em expandir modelos de widgets e procure por:
<div class='post-footer'>
Cole o código já modificado em cima dessa linha:

Você pode adaptar o texto (em vermelho) conforme suas necessidades, bem como as cores da borda e do background (plano de fundo). Veja aqui uma tabela de cores.
Para mudar a cor da borda, altere os números (em verde) deste trecho do código:
border: 2px solid rgb(204, 204, 204);
E para mudar a cor do plano de fundo, altere:
background-color: rgb(239, 239, 239);
Posts anteriores que irão te ajudar a implementar esse recurso:
Convite para seguir no Twitter
Siga-nos no Twitter e fique por dentro de muitas novidades!
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined"><img
alt=""
src="http://lh6.ggpht.com/_mcq01yDJ2uY/S2RVxWzkEbI/AAAAAAAABSE/uT16McxNjlI/twitter-32x32.png"
style="width: 32px; height: 32px;" align="middle" /></td>
      <td style="text-align: left;"><span
style="font-weight: bold;"></span><b>Siga-nos no <a
href="URL DA CONTA DO TWITTER">Twitter </a> e fique por dentro de muitas novidades!</b><br />
      </td>
    </tr>
  </tbody>
</table>
</b:if>  
Mensagem sem imagem
Assine o feed ou receba os artigos por email. E siga o blog no Twitter!
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td style="text-align: left;"><span
style="font-weight: bold;">Assine o </span><a
style="font-weight: bold;"
href="URL DO FEED">feed </a><span
style="font-weight: bold;">ou receba os artigos por </span><a
style="font-weight: bold;"
href="URL DO FEED POR EMAIL">email</a><span
style="font-weight: bold;">. Siga o blog no </span><a
style="font-weight: bold;"
href="URL DA CONTA NO TWITTER">Twitter</a><span
style="font-weight: bold;">!</span><br />
      </td>
    </tr>
  </tbody>
</table>
</b:if>  
Este truque funciona perfeitamente nos template do Dicas Blogger, mas não tenho como garantir que irá funcionar nos demais modelos disponibilizados na web.
Ah, sejam criativos e não copiem o modelo usado aqui no Dicas Blogger O.o :P

sábado, 28 de novembro de 2009

Como colocar o hack “Leia Mais” no Blogger

Este post foi atualizado e modificado em 23/10/10

Neste post vou ensiná-los a usar três métodos para mostrar o resumo de postagens na página inicial do Blogger, também chamado de “Leia Mais”: o primeiro faz um resumo automático em todas as postagens, o segundo faz um corte manual e o terceiro é o próprio “Leia Mais” nativo do Blogger, o Jump Break.

A nomenclatura para o resumo de postagens na página inicial varia muito. Podemos chamar de “leia mais”, “continue lendo”, “read more” e etc.

Os três modelos são simples de implementar e a escolha fica a critério de vocês.

Em todos os templates gratuitos do Dicas Blogger, existe pelo menos 1 destes hacks instalados – DB Templates

Antes de fazer qualquer alteração, é altamente recomendável fazer um backup do template.

Modelo 1-Hack “Leia mais” com corte automático

Este hack não está mais funcionando. Passe para o modelo 4.

Modelo 2-Hack “Leia mais”com corte manual

Entre no html do seu template, marque a caixa expandir modelos de widgets e procure por </HEAD>. Cole o código abaixo antes da tag </HEAD>

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

Procure agora por:

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

ou por:

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Substitua tudo por:

<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'>Continue lendo &gt;&gt;</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if></div>

Clique em visualizar e se tudo estiver ok, clique em salvar.

Escreva seu post normalmente e quando terminá-lo, clique em editar html e coloque o código <span id="fullpost"> onde você deseja iniciar o resumo e </span> no final do post.

Post (área de corte) <span id="fullpost"> restante do post </span>

Veja um exemplo na imagem abaixo:

Pra quem usa o Windows Live Writer, é necessário clicar na aba código fonte e colocar o <span id="fullpost"> após o término de um parágrafo “</p>” e o </span> também.

Html Windows Live Writer

Modelo 3-Jump Break – o “leia Mais” do Blogger

Esta nova função já está presente nos modelos padrão do Blogger.

Para quem usa um template personalizado – que é o caso dos modelos criados por mim e pelos demais colegas – é preciso instalar um código no html do template.

Entre em layout, editar html e clique em expandir modelos de widgets.

Usando a combinação Crtl+F do seu teclado, procure pelo seguinte trecho:

<data:post.body/>

Logo abaixo do trecho citado, cole o seguinte código:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

No caso dos templates do Dicas Blogger, procure por:

<p><data:post.body/></p>

Este trecho aparecerá 2 vezes. Cole o código embaixo do segundo trecho:

instalando o<br /> código

Para resumir os posts, é preciso usar o novo editor de textos do Blogger. Para habilitá-lo, entre no painel, clique em configurações e, no final da página, procure por configurações globais. Marque a opção editor atualizado.

Escreva seu post, escolha a área de corte (resumo) e clique no ícone do jump break

Jump Break Muitos usuários relataram que após o uso do jump break a sidebar foi parar embaixo dos posts, mas é preciso apenas tomar alguns cuidados.

O corte tem que ser inserido após o fechamento de uma div. Portanto, após a inserção do jump break, é preciso clicar em editar html e inserir o “more” após o fechamento de uma div (</div>)

jump break erro

jump break correto

No Jump Break, aparece a frase “mais informações” ao final do post. Para mudar a frase, entre em elementos de página e procure por postagens no blog (1). Clique em editar (2) e depois altere para um texto do seu gosto (3).

Todos os modelos já haviam sido publicados aqui e em outros blogs, mas achei que ficaria mais legal colocá-los em um único post para facilitar a vida de todos.

Créditos para Usuário Compulsivo, Blogger Buster e El Escaparate de Rosa.

Outros recursos interessantes

Atualização em 23/10/2010

Modelo 4- Hack “Leia mais” com corte automático e imagens

Este hack faz um corte automático e mostra pequenas imagens (thumbnails)

Acesse: Hack “Leia mais” automático e com imagens