Dica refeite neste link
26 de ago. de 2010
23 de ago. de 2010
Novos botões de compartilhamento do Twitter e Facebook no Blogger
Ter um botão de compartilhamento das postagens do Twitter no Blogger já havia sido ensinado neste blog, mas o Twitter finalmente lançou o botão, e eis que repasso para vocês. Dica vista no blog Blogger Plugins
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
No HTML do seu blog clique em "Expandir modelos de widget", procure então pelo código:
<data:post.body/>
Abaixo dele cole o seguinte código:
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='vertical' data-via='SEU NICK NO TWITTER'>Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
Coloque o seu nick no local indicado na cor vermelha Coloque horizontal no código rosa se você preferir o modelo abaixo.
Tweet Horizontal
Tweet Vertical
Para ter os botões do Facebook, também no HTML do seu blog clique em "Expandir modelos de widget", procure então pelo código:
<data:post.body/>
<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"/>
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
No HTML do seu blog clique em "Expandir modelos de widget", procure então pelo código:
<data:post.body/>
Abaixo dele cole o seguinte código:
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='vertical' data-via='SEU NICK NO TWITTER'>Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
Coloque o seu nick no local indicado na cor vermelha Coloque horizontal no código rosa se você preferir o modelo abaixo.
Tweet Horizontal
Tweet Vertical
Para ter os botões do Facebook, também no HTML do seu blog clique em "Expandir modelos de widget", procure então pelo código:
<data:post.body/>
<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"/>
22 de ago. de 2010
Responder comentário específico no Blogger
Mais uma dica excelente do blog El Balcon de Jaime. Graças a ele é possível reponder a um determinado comentário direcionado no Blogger. Vá até o HTML de seu blog, clique em Expandir modelos de widget e procure por:
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
<data:commentPostedByMsg/>
Se você prefere que fique abaixo do comentário então procure por:
<p><data:comment.body/></p>
E abaixo dele cole o código abaixo, colocando o endereço de seu ID e a imagem de sua preferência no local indicado.
<span class='blrespondrcmnt'><a title='Responder a este comentario' expr:href='"https://www.blogger.com/comment.g?blogID=ID DO SEU BLOG AQUI&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'><img src='AQUI O ENDEREÇO DE IMAGEM'/></a></span>
Agora procure por:
]]></b:skin>
E antes dele cole:
.blrespondrcmnt {float: right; text-align: right; margin: 32px 10px 0 0;}
*Se quer que fique a esquerda troque right por left e onde está o número 32, vc poderá trocar por outro número para sua imagem ficar certinha detro dos comentários.
Para saber o ID de seu blog basta olhar na barra de endereços, em HTML. Copie só os números e cole no local indicado no código.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
<data:commentPostedByMsg/>
Se você prefere que fique abaixo do comentário então procure por:
<p><data:comment.body/></p>
E abaixo dele cole o código abaixo, colocando o endereço de seu ID e a imagem de sua preferência no local indicado.
<span class='blrespondrcmnt'><a title='Responder a este comentario' expr:href='"https://www.blogger.com/comment.g?blogID=ID DO SEU BLOG AQUI&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'><img src='AQUI O ENDEREÇO DE IMAGEM'/></a></span>
Agora procure por:
]]></b:skin>
E antes dele cole:
.blrespondrcmnt {float: right; text-align: right; margin: 32px 10px 0 0;}
*Se quer que fique a esquerda troque right por left e onde está o número 32, vc poderá trocar por outro número para sua imagem ficar certinha detro dos comentários.
Para saber o ID de seu blog basta olhar na barra de endereços, em HTML. Copie só os números e cole no local indicado no código.
18 de ago. de 2010
Breadcrumb no Blogger
Breadcrumb é um menu de navegação para as páginas internas do blog. Serve para facilitar a navegação do blog.
Colocando legenda e fundo nas imagens do Blogger
Eu já havia ensinado AQUI a fazer este efeito nas imagens, mas há outra forma, e com códigos do próprio Blogger. A primeira coisa a fazer é ir ao HTML do blog e procurar por este trecho:
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
Substitua então por este abaixo:
.post-body img, table.tr-caption-container {
padding:5px;
color: #000;/*cor da letra*/
background: #ccc;/*cor de fundo*/
border:1px solid #808080;/*cor da borda*/
Agora basta ir até o editor de postagens (onde você escreve os posts) e subir uma imagem.
Meus filhos, Júlia e Gabriel Quando a imagem já estiver no editor, dê um clique com o botão do mouse. Abrirá uma pequena janela, veja, ao final estará escrito:
Adicionar legenda.
Clique em adicionar legenda. Notou que agora tem uma inscrição ? Pois bem, apague e escreva a sua inscrição. Agora basta publicar. (você só verá o efeito no post)
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
Substitua então por este abaixo:
.post-body img, table.tr-caption-container {
padding:5px;
color: #000;/*cor da letra*/
background: #ccc;/*cor de fundo*/
border:1px solid #808080;/*cor da borda*/
Agora basta ir até o editor de postagens (onde você escreve os posts) e subir uma imagem.
Meus filhos, Júlia e Gabriel Quando a imagem já estiver no editor, dê um clique com o botão do mouse. Abrirá uma pequena janela, veja, ao final estará escrito:
Adicionar legenda.
Clique em adicionar legenda. Notou que agora tem uma inscrição ? Pois bem, apague e escreva a sua inscrição. Agora basta publicar. (você só verá o efeito no post)
17 de ago. de 2010
Botão "ir ao topo" com efeito
Coloque um botão para ir ao topo (exemplo) do seu blog com efeito. Então vá até o HTML de seu blog e antes de:
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
]]></b:skin>
Cole o código abaixo.
/* Up header----------------------------------------------*/
#toTop {
width:100px;
color:#000; /*cor da letra*/
background:#eee; /*cor de fundo*/
border:1px solid #ccc;/*cor da bordas*/
text-align:center;
padding:5px;
position:fixed;
bottom:10px;
right:10px;
text-decoration:none;
Procure por: </body> cole o código abaixo acima dele.
<a href='#' id='toTop'><span class='Apple-style-span' style='font-family: Arial, Helvetica, sans-serif;'>▲ Ir para Topo</span></a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
]]></b:skin>
Cole o código abaixo.
/* Up header----------------------------------------------*/
#toTop {
width:100px;
color:#000; /*cor da letra*/
background:#eee; /*cor de fundo*/
border:1px solid #ccc;/*cor da bordas*/
text-align:center;
padding:5px;
position:fixed;
bottom:10px;
right:10px;
text-decoration:none;
Procure por: </body> cole o código abaixo acima dele.
<a href='#' id='toTop'><span class='Apple-style-span' style='font-family: Arial, Helvetica, sans-serif;'>▲ Ir para Topo</span></a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
Primeiro vídeo da campanha de Dilma Rousseff
Meu primeiro voto foi aos 16 anos, na primeira eleição pós ditadura. Lembro-me que votei no Brizola para o primeiro turno e Lula no segundo. Desde então jamais votei em outro candidato que não o nosso presidente Lula. Sou PT e continuarei votando 13. Nessa eleição meu voto vai para Dilma , porque fui criada em uma família que sempre pregou e acredita que todos devem ter oportunidades iguais, que todos devem estudar, ter o que comer, ter um teto pra morar. Ainda não é o ideal, mas nunca na minha breve vida, tinha visto o trabalhador ganhar 200 dólares. Nunca vi tanta pessoa sem condição fazer faculdade, ter telefone, ter carro. Pode ser difícil, pode ser em 60 prestações, mas isso esta acontecendo. Lembro-me quando menina, os adultos reclamando da tal inflação, rangiam os dentes pelo salário que nunca dava, nunca tinha um poder de compra maior que o tal dragão. Lula deu dignidade aos necessitados, aos sem voz. Pra mim a diferença foi zero, minha vida continua como sempre foi mas consigo enxergar e me alegrar com as vitórias alheias, com a esperança estampada na face de quem sempre precisou. Desculpem-me os de oposição, perdão aos que pensam o contrário, que acham que estão sendo desrespeitados mas é preciso pensar alem do próprio umbigo, é preciso por uma nação a frente dos próprios interesses. Sou Dilma até mesmo pela história de vida desta mulher que foi guerreira, guerrilheira, que lutou pelo país quando muitos preferiam se refugiar no seio da família influente ou daqueles que fugiram a luta e que hoje querem dar outra conotação a história do nosso país deturpando a verdade e subvertendo valores. Terei orgulho de vê-la presidente do Brasil, essa que muitos achincalham e dizem em tom cínico ter sido "terrorista". Na minha visão de mundo, não houve ninguém mais terrorista que G.W.Bush, que foi presidente legitimado por duas vezes que fez guerra, que fez terrorismo com a população estadunidense, que destrui lares e famílias inteiras em nome da "liberdade contra o terrorismo"
15 de ago. de 2010
Trocar a palavra "comentários" por imagem
Troque a palavra "Comentários" por uma imagem em seu Blogger.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Para isso vá até o HTML de seu blog, clique em "Expandir modelos de widget" e depois procure pelo trecho:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
</b:if>
</b:if>
</span>
Substitua por este abaixo substituindo o endereço da imagem que está em vermelho, pelo endereço de sua imagem.
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7QpFOlwnfqoOaDK4b-Mlli-htRqxcVjHKD6xJNfp7ieZXnyTw3my54ItpXr9uigMpAQrOKEed_jHVeam7qep6gKxWfg_S-NEXhjzQUx5LIKXfldHcDzLsvoXvY4pdou02NgaWxaHy4c/s320/comment.png"/><b:else/><data:post.numComments/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7QpFOlwnfqoOaDK4b-Mlli-htRqxcVjHKD6xJNfp7ieZXnyTw3my54ItpXr9uigMpAQrOKEed_jHVeam7qep6gKxWfg_S-NEXhjzQUx5LIKXfldHcDzLsvoXvY4pdou02NgaWxaHy4c/s320/comment.png"/> </b:if></a>
</b:if>
</b:if>
</b:if>
</span>
Abaixo algumas imagens
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Para isso vá até o HTML de seu blog, clique em "Expandir modelos de widget" e depois procure pelo trecho:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
</b:if>
</b:if>
</span>
Substitua por este abaixo substituindo o endereço da imagem que está em vermelho, pelo endereço de sua imagem.
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7QpFOlwnfqoOaDK4b-Mlli-htRqxcVjHKD6xJNfp7ieZXnyTw3my54ItpXr9uigMpAQrOKEed_jHVeam7qep6gKxWfg_S-NEXhjzQUx5LIKXfldHcDzLsvoXvY4pdou02NgaWxaHy4c/s320/comment.png"/><b:else/><data:post.numComments/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7QpFOlwnfqoOaDK4b-Mlli-htRqxcVjHKD6xJNfp7ieZXnyTw3my54ItpXr9uigMpAQrOKEed_jHVeam7qep6gKxWfg_S-NEXhjzQUx5LIKXfldHcDzLsvoXvY4pdou02NgaWxaHy4c/s320/comment.png"/> </b:if></a>
</b:if>
</b:if>
</b:if>
</span>
Abaixo algumas imagens
Assinar:
Postagens (Atom)
