CSS:
/* coments FB G+ */
.comments-page {
background-color:transparent; /* fundo formulário editável */
}
#blogger-comments-page {
padding: 5px 5px;
display: none;
}
.comments-tab {
float: left;
width: 240px; /* largura das abas */
padding: 5px;
margin-right: 3px;
cursor: pointer;
background-color: #f2f2f2; /* use a mesma cor que você colocou lá no script */
}
.comments-tab-icon {
height: 22px;
width: auto;
margin: 0px;
}
.comments-tab:hover {
background-color: #eeeeee; /* também é editável */
}
Acima de </head>:
<!-- script para Comentários do Blogger e Facebook Simultaneamente - Sem bugs! [Autoria de Yara G. - www.seethehalo.net / Adição de aba G+ por Meri Pellens - coisasdameri.blogspot.com.br] NÃO RETIRAR CRÉDITOS -->
<b:if cond='data:blog.pageType != "static_page"'>
<script language='JavaScript'>
function showComments(tipo) {
if (tipo == 1) {
window.document.getElementById('blogger-comments-page').style.display="block";
window.document.getElementById('fb-comments-page').style.display="none";
window.document.getElementById('gpluscomments-page').style.display="none";
window.document.getElementById('blogger-comments').style.background="#f2f2f2"; //cor da aba ativa editavel
window.document.getElementById('fb-comments').style.background="#d1d1d1"; // cor da aba inativa editavel
window.document.getElementById('gpluscomments').style.background="#d1d1d1"; // cor da aba inativa editavel
} else if (tipo == 2) {
window.document.getElementById('fb-comments-page').style.display="block";
window.document.getElementById('blogger-comments-page').style.display="none";
window.document.getElementById('gpluscomments-page').style.display="none";
window.document.getElementById('fb-comments').style.background="#f2f2f2"; // cor da aba ativa editavel
window.document.getElementById('blogger-comments').style.background="#d1d1d1"; // cor da aba inativa editavel
window.document.getElementById('gpluscomments').style.background="#d1d1d1"; // cor da aba inativa editavel
} else if (tipo == 3) {
window.document.getElementById('gpluscomments-page').style.display="block";
window.document.getElementById('blogger-comments-page').style.display="none";
window.document.getElementById('fb-comments-page').style.display="none";
window.document.getElementById('gpluscomments').style.background="#f2f2f2"; // cor da aba ativa editavel
window.document.getElementById('blogger-comments').style.background="#d1d1d1"; // cor da aba inativa editavel
window.document.getElementById('fb-comments').style.background="#d1d1d1"; // cor da aba inativa editavel
}
}
window.onload = function(){
showComments(1);
}
</script></b:if>
Abaixo de <body:
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<span style='font-family: 'Times New Roman'; white-space: normal;'>554567541321261</span>', // App ID moderar.
channelUrl : '//portfolio.elainegaspareto.com/', // Channel File
status : true, // verificar se logado.
cookie : true, // habilitar os cookies para permitir que o servidor acesse a sessão.
xfbml : true // parse XFBML
});
//Código de inicialização adicional aqui.
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/pt_BR/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Abaixo de <head>:
<meta content='elainegasparetoparada' property='fb:admins'/>
<meta content='554567541321261' property='fb:app_id'/>
Abaixo das 2 ocorrências de <div class='comments' id='comments'>
<!-- Comentários blogger e fb com adição de aba G+ por Meri Pellens - coisasdameri.blogspot.com.br NÃO RETIRAR CRÉDITOS --><b:if cond='data:blog.pageType != "static_page"'>
<div class='comments-tab' id='blogger-comments' onClick='showComments(1);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://lh5.googleusercontent.com/-greyeSflujU/UiS95IUckiI/AAAAAAAACWc/TjdrvU_-syQ/s22/blogger.png'/> Comente com sua conta Blogger
</div>
<div class='comments-tab' id='fb-comments' onClick='showComments(2);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='https://lh6.googleusercontent.com/-y2HZQVwzWb8/UiS95XMUkTI/AAAAAAAACWg/Rrh62B95Byc/s22/eIpbnVKI9lR.png'/> Comente com sua conta Facebook
</div>
<div class='comments-tab' id='gpluscomments' onClick='showComments(3);' title='Comentários no Google Plus'>
<img class='comments-tab-icon' src='https://lh3.googleusercontent.com/-nqpZTL4utVM/UhzSIEkSalI/AAAAAAAACUc/g5dCwW2IsRg/s22/Google-Plus.png'/> Comente com sua conta Google+
</div>
<div class='clear'/>
</b:if>
</div>
<div class='comments-page' id='gpluscomments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='740' expr:data-href='data:post.url' id='gpluscomments-page' num_posts='7'/>
</b:if>
</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='7' width='740'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<!-- Fim comentários blogger e fb com adição de aba G+ por Meri Pellens - coisasdameri.blogspot.com.br NÃO RETIRAR CRÉDITOS -->
Comente com sua conta Blogger
Comente com sua conta Google+
