Tudo Mais

[Tutorial] com colocar Comentários do Facebook e Blogger juntos

Olá pessoa nesse tutorial estarei ensinando a mais nova forma de se colocar os comentários do Facebook juntos com os de seu blog tornando assim seu blog cada vez mais dinâmico não só no conteúdo mas também na forma de interação de seus visitantes, para aprender como fazer esse processo é muito simples basta acompanhar o tutorial que esta logo abaixo.

Tutorial:

1º Passo: Acesse seu Blogger, no menu lateral clique em "Modelo" e depois "Editar HTML".

2º Passo: Clique no código de seu template, pressione "CTRL+F" e pesquise pela tag <div class='comments' id='comments'>

" Você poderá encontrar dois trechos desse mesmo código, caso encontre dois repita o processo em ambos".

3º Passo: Logo ABAIXO da tag encontrada cole o código abaixo:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678128-social-facebook-128.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://cdn1.iconfinder.com/data/icons/all_google_icons_symbols_by_carlosjj-du/128/blogger.png'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' >'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

" Onde você vê destacado em Azul, representa a largura, ajuste de acordo com seu blog".

4º Passo: Agora pesquise por <head>

5º Passo: Logo ABAIXO cole o seguinte código:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

6º Passo: Clique agora em "Salvar Modelo".

7º Passo: Pressione novamente "CTRL+F" e pesquise por ]]></b:skin>

8º Passo: Logo ACIMA cole o seguinte código:

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

9º Passo: Clique em "Salvar Modelo".

Pronto! Agora é só visualizar seu blog pra conferir os resultados!

- [tutorial] Como Colocar Janela Mini Popup Curtir No Facebook No Blog
Nesse tutorial iremos ensinar como colocar janela com um mini Pop-Up pra curtir no Facebook que aparece com um efeito deslizante ao lado direito do blog próximo ao roda-pé. Para fazer esse processo basta seguir o tutorial...

- [tutorial] Mudando A Cor Da "scroller" Ou "barra De Rolagem" No Blogger
Olá pessoal estamos aqui para mais um de nossos "Tutorias" e nesse iremos ensina uma maneira bem legal para Personalizar seu blog mudando a cor "Scroller" ou como é mais popularmente conhecida a "Barra de rolagem" ou do templete de seu blog...

- [tutorial] Como Colocar Barra Flutuante De Redes Sociais No Blogger
As redes sócias é sem duvida uma das grandes formas de divulgação de qualquer tipo de conteúdo pensando nisso preparamos esse tutorial que ira lhe ajudar a oferecer aos visitantes de seu site a possibilidade de compartilhar suas postagens nas redes...

- [tutórial] Como Colocar Mensagem De Boas Vindas No Blogger
Como colocar uma mensagem de boas vindas bem amigável para que entra em seu blogger, a mensagem pode ser editada e até por um link dentro dela.Contudo ela é uma mensagem simples e quem não atrapalha na navegação do Blogger. Tutorial: ...

- [tutórial] Como Colocar A Primeira Letra Das Postagens Do Blog Grande
Nesse tutorial vamos ensinar uma forma simples pra você começar os artigos de seu blog com a letra grande igual a da imagem acima, para aprender a fazer esse processo é bem simples basta seguir o passo a passo do tutorial abaixo que você conseguira...

Tudo Mais