sábado, 29 de março de 2014

Mini tutoriais para blog: Comentários do face e Fontes personalizadas no blog

Oi gente! Nada melhor que fazer um post para aliviar o estres né? Estou de tpm então, tem momentos que quero matar as pessoas e tem outros, que estou chorando pelos cantos KKKKK Mas como prometi, hoje sai o post que você escolheram! Poucos comentaram e por pouco ficou empatado entre fontes e tutoriais para blog, mas por um voto... Hoje o post vai ser de mini tutoriais para blog! Por que "mini"? Porque são apenas dois tutoriais e super fáceis de colocar em pratica. Caso gostem, posso fazer de vez em quando posts assim :). Ja vou logo avisar que o post vai ficar ENORME. Vou ensinar como colocar a opção de comentários do facebook no blog e fonte personalizadas para blog. Sei que muitos sabem sobre os assuntos, mas outros não... Então, para aqueles que não sabem e querem muito aprender... Bora conferir o tutorial? 
Ter a caixa de comentários do facebook no seu blog é muito importante. Por quê? Pessoas que não tem blog podem comentar em alguma postagem sua através do face, seus parentes, amigos haha o/ É uma ferramenta extra para seu blog! Então vamos lá, é facil!

• PARTE 1: Você tem que estar logado no facebook! Esta? Então clique nesse link: https://developers.facebook.com/apps. E clique em "REGISTER AS DEVELOPER" que provavelmente vai estar no canto da tela. Desculpe, não tenho um print para mostrar pois ja registrei faz tempo kkkk 

• PARTE 2: Clique em register now e vá seguindo os passos que creio que ja estejam acostumados... Termo de uso e durante o processo sempre pedem para fazer verificação via celular. Para quem não sabe, vai pedir para confirmar seu número, vão te enviar uma mensagem de texto e você digita o código. 

• PARTE 3: Criando o aplicativo:
Preencha o que for pedido e no final você vai ter seu ID. Esse ID é muito IMPORTANTE! Então por favor, anote ou ja coloque ele em um bloco de notas. 

INSTALANDO NO BLOG
• PARTE 1: Clique em Modelo e depois Editar HTML. Clique em cima de algum código de HTML e depois CTRL+F. Vai aparecer a caixa de busca ~claro~ e então digite: <div class='comments' id='comments'> 
ATENÇÃO, ESSA PARTE É "TRAIÇOEIRA"::
No seu HTML provavelmente terá duas vezes esse código. Ou seja, terá que fazer testes... O primeiro que aparecer, você segue todas as etapas a seguir. Caso não tenha funcionado ao final do post, repita essa etapa e a etapa 2 de novo. Comigo só funcionou no segundo <div class='comments' id='comments'> que aparece.

• PARTE 2: Achou? É o primeiro que vai testar? Então abaixo (linha de baixo, ok?) de <div class='comments' id='comments'> cole isso:

<div class='comments-tab' id='fb-comments'  onclick='javascript:commentToggle("#fb-comments");'  title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.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='http://www.blogger.com/img/icon_logo32.gif'/>  <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='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

• PARTE 3: Salve o modelo para não ter preocupações do tipo, acabou a luz e etc etc... Depois que salvou procure com o esquema "CTRL+F" por </head> e ANTES dele, cole:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='SEU 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>

Viu a parte "SEU ID" destacada? Pois é, lembra do ID que eu pedi pra você guardar/anotar? Você vai colar seu ID aí mesmo! Depois dessa etapa salve novamente, para não correr riscos.

• PARTE 4: Agora faça o mesmo esquema de procurar, clicando CTRL+F e procure por ]]></b:skin> e antes dele cole: 

 .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;}

Salve modelo, vá conferir se funcionou! Caso ....
"AAAAAAAAAAAAAAAAAAAAAAAAH KAROL, NÃO FUNCIONOU!! O que eu faço?" Simples, repita a parte 1 e 2 de novo, só que agora o código que foi fornecido na parte 2 será colada no segundo código (<div class='comments' id='comments'> ) que se repete. E claro, esse tutorial eu segui o modelo desse. Graças a esse tutorial que eu consegui instalar a caixa de comentários do face no meu blog ;) 


• ETAPA 1: Primeiro, visite o http://www.google.com/fonts/# e procure uma fonte! Escolheu a fonte? Clique em Quick-use.
Vai aparecer 4 maneiras de usar a fonte escolhida. Clique em "3. Add this code to your website:" e depois copie:
<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css'>

• ETAPA 2: Procure <head> e ANTES dele cole o código da sua fonte. Vai ficar assim:

<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css'/>
<head>

Viu que tem um "/" em vermelho? Pois é... Você vai colocar ele, o código original não tem essa barrinha no final e para funcionar a fonte nova no seu blog, tem que colocar essa barrinha. 

• ETAPA 3: Onde você quer que apareça a fonte nova? No título do post? Então:
No meu lay tem o seguinte código:
.post h3 { display:block;  text-decoration:none; text-indent : 5px;
color: #61CDD0;  font-weight:normal;  font-family: "Sacramento"; cursive; font-size:35px; line-height:30px;  padding: 5px;  margin-left: 5px;  margin-top: -1px;  margin-bottom: 5px; text-align: left;  padding: 5px 6px;  border-bottom: 1px solid #EAEAEA; width: 605px; }

Entendeu o esquema? Você sempre vai procurar por .post h3 ou pode estar h3.post-title. Enfim, a parte que você encontrar vai estar entre aspas o nome da fonte atual. E então você coloca entre aspas o nome da fonte que você acabou de instalar. Caso seu modelo seja travel, confira esse post que é melhor.
Beijosmil e desculpem pelo tamanho do post de hoje! 

26 comentários:

  1. Também estou de tpm e querendo matar todo mundo que me pergunte qualquer coisa que não queira ouvir kkkk. A tempos não consigo colocar comentários pelo facebook no Lua mas vou tentar esse, seguindo todos os passos direitinho pra ver se desse vez da certo, espero que sim <3

    www.luajaykoszphotos.com

    ResponderExcluir
  2. Adorei, é sempre bom ter uns tutoriais em mãos pra quando a gente fica totalmente perdido no nosso html! E ah, muito obrigada pelo #FF!
    beijos!
    http://trendingvogue.blogspot.com.br/

    ResponderExcluir
  3. Adorei! Eu tinha colocado os comentários do facebook no meu blog, mas quase ninguém comentava com ele, dai tirei pra não carregar muito o blog. Gostei desses dois tutoriais, muita gente tem dúvida pra saber como faz e tal.

    Bitocas!
    www.likeparadise.com.br

    ResponderExcluir
    Respostas
    1. Pois é. Estou pensando em fazer mais tutoriais assim KKK ♥

      Excluir
  4. Amei a dica!
    beijos
    http://a-world-of-a-rocker-girl.blogspot.com.br/

    ResponderExcluir
  5. Comentários com o facebook é util, não é todo mundo que acessa o blog e tem conta no google pra comentar ne? :)

    http://leitecombiscotos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Pois é. Por isso é importante. Tem que pensar naqueles leitores que não possuem conta no google ♥

      Excluir
  6. Deu ceeeertinho os comentários do face. Obrigada Ka! Vou colocar os créditos no blog já já.
    Muito obrigada mesmo. ♥

    ResponderExcluir
  7. Ah, obrigada por postar esse Tutorial!! Eu vou fazer um Layout pra uma amiga, ai ela pediu que eu colocasse comentarios do Face também mas eu não sabia o tutorial .. e agora eu sei!! Muito obrigada (●´□`)♡
    Ah, e estou te seguindo, poderia retribuir por favor?? ( ´∀`)

    Crazy Girl ☁

    ResponderExcluir
    Respostas
    1. *--*' oooun, magina!
      E vou seguir sim, beeijos

      Excluir
    2. Aaaaahm, tu é KPOPPER também ?? *ooooo* (((o(*゚▽゚*)o)))

      Excluir
    3. Bom, posso considerar que sim. Sou apaixonada por 2NE1, CL e Bommie ♥♥♥♥ gosto tb de Brown Eyed Girls, SNSD *-*

      Excluir
  8. Adorei saber como colocar, essas dicas sempre são ótimas! Beijos <3

    www.detalhesamor.blogspot.com

    ResponderExcluir
  9. Ah nao deu certo Karoool! mas to tentando aqui :/
    www.aoavesso.com

    ResponderExcluir
    Respostas
    1. tenta :(
      tipo, qualquer coisa me chama no chat do face.

      Excluir
  10. Adoreei o tutorial,me ajudou mt <3
    AMEI SEU BLOG,É LINDO BJS

    www.mineiraepaulista.blogspot.com

    ResponderExcluir
  11. gente que dicas incríveis! Adorei a dica da fonte para usar no blog, arrasou! Amo/sou esses tutoriais de design, vou voltar sempre aqui pra ver novidades <3

    http://www.lovetriangle.com.br

    ResponderExcluir