Templates e Acessórios: agosto 2010

Postagens Recentes

Grade Lista

26 de ago. de 2010

Como colocar pequenas postagens do blog ao lado do post principal

. Elke di Barros | 17:30 8 comentários:

Dica refeite neste link

»»Leia mais...

23 de ago. de 2010

Novos botões de compartilhamento do Twitter e Facebook no Blogger

. Elke di Barros | 02:30 8 comentários:

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.

Horizontal

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

»»Leia mais...

22 de ago. de 2010

Responder comentário específico no Blogger

. Elke di Barros | 17:18 17 comentários:

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.

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.

»»Leia mais...

18 de ago. de 2010

Breadcrumb no Blogger

. Elke di Barros | 23:59 16 comentários:

Breadcrumb é um menu de navegação para as páginas internas do blog. Serve para facilitar a navegação do blog.

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.

Antes de ]]></b:skin> cole o código abaixo.

/*Breadcrumbs-------------------------------*/

.breadcrumbs {
font-size: 14px;
padding:5px;
font-weight: bold;
border: 1px dashed $bordercolor;
line-height: 1.4em;
}
.breadcrumbs a {
font-weight: bold;
color:$textcolor;
}

.breadcrumbs a:link, a:hover, a:visited {
font-weight: bold;
color: $linkcolor;
}

SALVE !!!

Clique em "Expandir modelos de widget"

Procure por:

<b:includable id='main' var='top'>

Acima dele cole o seguinte código:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Agora procure por:


<div class='blog-posts hfeed'>

E abaixo dele cole:

<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Salve e está pronto.

Se você usa o template do novo Blogger, a dica está aqui.

»»Leia mais...

Colocando legenda e fundo nas imagens do Blogger

. Elke di Barros | 15:45 4 comentários:

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)

»»Leia mais...

17 de ago. de 2010

Botão "ir ao topo" com efeito

. Elke di Barros | 20:28 4 comentários:

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>

»»Leia mais...

Primeiro vídeo da campanha de Dilma Rousseff

. Elke di Barros | 17:31 2 comentários:

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"

Por favor, saiba quem foi o pai do Real

»»Leia mais...

15 de ago. de 2010

Trocar a palavra "comentários" por imagem

. Elke di Barros | 09:18 8 comentários:

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.

Abaixo algumas imagens