Ultimas Postagens

domingo, 15 de dezembro de 2013

INSERINDO SETAS DE NAVEGAÇÃO NOS POSTS DO BLOG : FLOATING NEXTPREV

Você deve ter notado que ao abrir um post aqui do blog, nas duas laterais são exibidas setas indicando o post anterior e o post posterior. Esse sistema de navegação é bastante interessante e chamativo. Induz o leitor a ter conhecimento de outros conteúdos de seu blog.
Utilizo o plugin chamado Floating NextPrev, desenvolvido pelo Claudio Sanches, do site Ferramentas Blog.
É muito simples sua instalação. Em seu painel do WordPress, vá até o menu Plugins -> Adicionar Novo, e pesquisa por “Floating NextPrev”. Irá aparecer um único plugin, e é justamente ele que queremos.  Se preferir, poderá fazer download do plugin pelo link abaixo:
Feito a instalação e ativação do plugin, acesse o menu Configurações -> Floating NexPrev.
Será possível você escolher entre as 9 opções de layout, qual melhor se encaixa ao seu blog.
setas
Simples não é?
Mais informações »

quarta-feira, 11 de dezembro de 2013

Template Gratis para blog de humor 2 colunas Blogger


Enviado Por Email Por Marcelo Camargo

 
Mais informações »

domingo, 8 de dezembro de 2013

Setas de Navegação Entre Postagens Para Blogger - Floating NextPrev

Tutorial completo de implementação do código Floating NextPrev - setas de navegação entre postagens para blogger. 


Ter ferramentas de navegação simples e objetiva é extremamente importante para que o leitor não fique perdido em seu blog, tornar a experiência e adaptação do visitante o mais simples e objetivo possivél em seu blog é também um grande passo a ser dado para deseja alcançar o sucesso e ter um bom blog. Como eu já disse outras vezes o template é responsavél por boa parte do sucesso de um blog, é terrivél entrar em um blog onde você mal consegue ler por causa das cores e banners em flash, e o pior é quando o sistema de navegação não nos ajuda a encontar o que queremos ou não nos ofereçe algo interessante para continuar ali. Para que você possa prender seu leitor por mais tempo em seu blog vou mostrar aqui como colocar setas de navegação flutuantes na lateral das postagens.

Antes de mais nada quero parabenizar ao Claudio Sanches do ferramentasblog que desenvolveu o plugin original para o wordpress e também ao Paulo Estevão do Códigosblog que fez toda a adptação do código para que ele fosse usado na Plataforma Blogger.

Veja abaixo uma imagem de como vai ficar em seu blog.

Setas de navegação nos posts do blogger

As setas na lateral é o que da opção para que o leitor veja outros artigos. Veja na imagem abaixo o efeito quando leitor passa o mouse sobre a seta.

floating nextprev - setas de navegação no blog

Como você pode ver  assim que o leitor passar o mouse sobre a seta abrirá uma caixa com o link da postagem anterior ou da próxima "dependendo do lado". Oferecendo essa funcionalidade em seu blog você vai deixa-lo com uma navegação muito mais interativa e interessante, e claro com um toque mais profissional também.

IMPLANTADO O CÓDIGO FLOATING NEXTPREV NO BLOGGER

Os códigos não são muito extenso mais é sempre bom lembrar de salvar uma cópia do modelo do seu template só por precaução.

facebook,Redes sociais,seguidores,curtir,like

Vá até o Painel do Blogger e clique em Modelo >> depois em Editar Html >> e marque a caixinha Expandir Modelos de Widget. Agora em seu codigo procure por: ]]></b:skin> depois de encontrado copie o código do script e cole logo abaixo de ]]></b:skin>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var alts = jQuery.noConflict();
alts(document).ready(function(){
var newerLink = alts(&quot;a.blog-pager-newer-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-newer-link2&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = alts(&quot;a.blog-pager-newer-link2&quot;).text();
alts(&quot;a.blog-pager-newer-link2&quot;).text(newerLinkTitle);
});
var olderLink = alts(&quot;a.blog-pager-older-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-older-link2&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = alts(&quot;a.blog-pager-older-link2&quot;).text();
alts(&quot;a.blog-pager-older-link2&quot;).text(olderLinkTitle);//rgt
});
});

var fnp = jQuery.noConflict();
fnp(document).ready(function(){

    fnp(&quot;.fnp-previous&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-10
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });
    fnp(&quot;.fnp-previous&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-400
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().animate({
            opacity:0},500)
    });fnp(&quot;.fnp-next&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-10
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });fnp(&quot;.fnp-next&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-400
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().animate({
            opacity:0
        },500);
    });
});
</script>
</b:if>
Agora faça com atenção para não sair nada errado. Em seu código procure por <b:includable id='nextprev'>, e a partir dela selecione todo o código atá a primeira tag </b:includable>.

Por exemplo:

 <b:includable id='nextprev'>

    Código que se encontar entre as tags

</b:includable> 


Importante: em seu código existe várias partes com </b:includable> por isso tenha atenção para selecionar somente até a pimeira.

Após encontar substitua todo o código selecinado pelo código abaixo.
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fnp-nav'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<div class='fnp-previous'><a rel='prev'><div class='fnp-box-left'><div class='fnp-content-left'><div class='fnp-content-border'/><div class='fnp-nav-title'>Anterior</div><div class='fnp-nav-link'><a class='blog-pager-newer-link2' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' style='display: block;'/></div></div></div></a></div>
</b:if>

<b:if cond='data:olderPageUrl'>
<div class='fnp-next'><a rel='next'><div class='fnp-box-right'><div class='fnp-content-right'><div class='fnp-content-border'/><div class='fnp-nav-title'>Próximo</div><div class='fnp-nav-link'><a class='blog-pager-older-link2' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/></div></div></div></a></div>
</b:if>

</div>
<div class='clear'/>
</div>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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'>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;' expr:title='data:olderPageTitle'>Próxima Página</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:if>
</b:includable>
Para finalizar agora vamos aplicar as Css que são responsavél por todo o estilo da ferramenta. Escolha um dos modelos abaixo e cópie todo código.

Modelo 1
modelos de stas para de navegação flutuante


Modelo 2

Após escolher e copiar o código procure novamente em seu blog pela tag ]]></b:skin> e cole o código copiado logo acima dela.

Após fazer esses passos é só salvar e ver como ficou. Lembrando que os botões só serão vistos quando uma postagem for aberta.
Mais informações »

sábado, 30 de novembro de 2013

Adicionando o contador de comentários do Facebook ao Blogger


Facebook
Últimamente o que mais se tem falado aqui por mim, inclusive no Twitter, é sobre o sistema de comentários do Facebook para o Blogger.
Gastei um pouco do meu tempo e continuo gastando para melhorar a interatividade das redes sociais nos blogs, no momento estou travado no Facebook, e digo, foi a rede social que mais me deu retornos e a mais interativa, por isso não vou desistir tão cedo dela.
Tá, chega de blá blá blá e vamos ao que interessa, o tal do contador de comentários do Facebook para o Blogger.
Primeira coisa, você deve ter instalado o sistema de comentários do Facebook, que se encontra aqui
Após isso, é bem simples, um pequeno código que pode ser personalizado para se ajustar ao seu blog:
<fb:comments-count expr:href='data:post.url'/>
Para quem entende HTML e as variáveis do Blogger, provavelmente deve ter entendido o que o código faz, mas se você não entendeu, não criemos pânico, eu explico.
fb:comments-count  é responsável pelo número de comentários, ele exibe somente o número de comentários, 0 1 2 3 4 5 6… sem personaliza-lo, ele não passa de um número estático.
expr:href='data:post.url' é responsável por identificar o post, sem ele o contador fica no 0 e não identifica nenhuma página.
Versão personalizada:
Bem, seguindo a logica, eu fiz uma versão personalizada para o Blogger, baseado no layout “minima”, com alguns ajustes para se adaptar à pagina.
A primeira coisa a se fazer é procurar alguma das seguinte linhas:
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>
Onde consecutivamente cada um representa a primeira, a segunda e a terceira linha após o post. Mas atenção, escolha apenas uma, ou usuários com mais experiência, escolha um local adequado para colocar o contador de comentários.
E logo abaixo da linha selecionada, cole o código:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'><img align='left' src='http://lh6.ggpht.com/-ZAZofu59t74/Th_vEmLEE4I/AAAAAAAAEjw/XL0ZlVwBdSM/coment%25255B8%25255D.png'style='margin: 3px 0px 0px 0px; display: inline; float: left; border-top-width: 0px; '/>Exibir todos os <fb:comments-count expr:href='data:post.url'/> comentários</a></b:if>
Pronto, agora é só salvar.
Verifique se está tudo, ok.
Como nem toda a layout do Blogger é igual, eu tive alguns problemas com o alinhamento do texto com o balãozinho de comentários, e para resolver isso coloquei uma margem, caso esteja com o mesmo problema,  mexa no atributo 'margin: 3px 0px 0px 0px; aumentando o número de 3px ou diminuindo, até conseguir alinhar o texto.
Você também pode alterar o texto “Exibir todos os comentários”, basta alterar a parte “Exibir todos os <fb:comments-count expr:href='data:post.url'/> comentários”, lembrando de manter o código <fb:comments-count expr:href='data:post.url'/> onde você deseja que o número de comentários apareça. Por exemplo:

Se você colocar assim:
Número de comentários: <fb:comments-count expr:href='data:post.url'/>
Ele irá mostrar no blog assim:
Número de comentários: 10
Bem, acho que é isso, espero que tenham entendido, qualquer dúvida, é só comentar que eu dou uma ajuda =)

Mais informações »

Template Para Blog De Humor

Mais informações »

domingo, 21 de julho de 2013

Ferramenta para converter código do adsense

Pensando em facilitar a vida dos blogueiros, disponibilizo uma ferramenta, para converter o seu código.

Como usar:
1. Cole o seu código dentro da caixa de texto abaixo e clique em “Converter”.
2. Depois é só copiar o resultado e colar no seu blog.
Mais informações »
Traduzido Por: Mais Template - Designed By