Facebook Google +

Uncomplicated Works

é mais do que um simples blog que se encontra no google depois de digitar

"dicas para template"

. É um espaço onde se promovem técnicas de

template para blogger

e

web design

, além de haver ainda espaço para umas pistas para problemas em programas e no Windows. Nem todos somos Einstein no que toca à ciência, temos de admitir, por isso dá jeito ter sempre alguma ajuda. E é isso que o uncomplicated design promete: umas pitadas de boa informação para qualquer um que esteja a dar os primeiros passos neste vasto mundo da tecnologia, aliadas à rapidez e experiência de quem mantém o blog.
Mostrar mensagens com a etiqueta Redes sociais. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta Redes sociais. Mostrar todas as mensagens

sábado, 21 de fevereiro de 2015

Botões para compartilhar postagens nas redes sociais


Boas pessoal! Bem vindos a mais um tutorial do blogger Uncomplicated Works e hoje irei ensinar a colocar o botão para compartilhar nas redes sociais, tweetar, colocar like e +1 no final das postagens, se quiserem em outra posição digam!



  • Como criar página no Facebook do Blog
  • Como colocar ícones das redes sociais no blog.
  • Aprendam a personalizar ícones das redes sociais
  • Like Box do Facebook no Blog



  • Em primeiro lugar vamos a Modelo, pressionamos CTRL+F e pesquisamos por <div class='post-footer'>, contudo o código deve ser colocado apenas na segunda ocorrência, ou seja, pesquisamos duas vezes. Encontrado o código, vamos colocar os códigos disponibilizados a cima do código pesquisado

    Facebook:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if></b:if>

    Com a ferramenta Facebook Developers, podem escolher o tipo de layout pretendido para o vosso botão: https://developers.facebook.com/docs/plugins/like-button?locale=pt_PT

    Twitter:

    <a class='twitter-share-button' data-lang='pt' data-via='TemporalCaricia' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweetar</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

    Devemos substituir a parte a negrito pelo nome do nosso twitter sem @

    Google +

    <div class='g-plusone'/></div>

    Para inserir o botão do google +, para o botão do Google + funcionar devem colocar este trecho antes da </head>

    <script src='https://apis.google.com/js/platform.js'>
      {lang: &#39;pt-BR&#39;}

    </script>

    Esta opção é bastante prática pois permite que em curto alcance os leitores, "coloquem" a sua postagem nas redes sociais, e como a difusão de conteúdo nas redes sociais é maior que em seu blog, as postagens poderão ter um alcance maior e trazer mais leitores para o seu blog.

    Podem ver o resultado final:
    http://cariciatemporal.blogspot.pt/

    Bem, espero que tenham percebido como colocar botões para compartilhar postagens nas redes sociais, um tutorial do blogger Uncomplicated Works. Até à próxima aula!
    0 Comentários Continuar a ler »

    sábado, 7 de fevereiro de 2015

    Colocar Like Box do Facebook no Blog

    Like Box Facebook - Uncomplicated Works


    Boas pessoal! Bem vindos a mais um tutorial do Blogger Uncomplicated Works hoje vamos aprender a colocar a caixa de like da nossa página do Facebook no blog. Já aprendemos a colocar botões das redes sociais, personalizar esses botões e criar uma página no Facebook, contudo ainda nos falta aprender a colocar a caixa de like da página do Facebook.




  • Como criar página no Facebook do Blog
  • Como colocar ícones das redes sociais no blog.
  • Aprendam a personalizar ícones das redes sociais
  • Botões para compartilhar postagens nas redes sociais

  • O Facebook possuiu uma página denominada developers facebook, onde podemos encontrar uma grande variedade de plugins, neste tutorial apenas precisamos da categoria Social Plugins. Em primeiro acessem este link:

    https://developers.facebook.com/docs/plugins?locale=pt_PT e acessem Like Box.

    Feito isto, vamos personalizar a nossa Like box.
    Opções Like Box

    • Faceboo Page URL: Colocamos o endereço da nossa página no Facebook;
    • Width: largura em pixels da Like Box
    • Height: Altura em pixels da Like Box


    Depois é só escolher se querem borda, mostrar posts, etc. A vossa caixa vai aparecer em baixo por isso personalizem ao vosso gosto. Ao clicar em Get Code irá aparecer uma caixa com o código, abram o separador iframe e coloquem no blog, a partir deste momento já possuem a Like Box no blog, espero que tenha sido útil mais um tutorial do Uncomplicated Works, como colocar Like Box do Facebook, qualquer dúvida deixem nos comentários, até ao próximo tutorial!


    1 Comentários Continuar a ler »

    sexta-feira, 6 de fevereiro de 2015

    Criar página no Facebook para o Blog

    Boas pessoal! Bem vindos a mais um tutorial do Blogger Uncomplicated Works e hoje o tutorial é como criar uma página no Facebook para o Blog.


  • Como colocar ícones das redes sociais no blog.
  • Aprendam a personalizar ícones das redes sociais
  • Como colocar Like Box - Facebook
  • Botões para compartilhar postagens nas redes sociais


  • Muitos blogueiros usam as redes sociais para obterem mais visitas, e porque não tentar? A maior parte das pessoas usa o Facebook, logo ele irá se tornar um espaço onde pode divulgar seus conteúdos. Para poder criar uma página no Facebook necessita de possuir já uma conta. Para criarmos a página para o nosso blog, necessitamos, em primeiro lugar de iniciar sessão, depois acessamos este link:


    Ao acessar o link irá aparecer uma página deste género, iremos escolher a categoria da página pretendida.
    Página pretendida - Criar página no Facebook para o Blog

    Feito isso, escolha um nome para a sua página, veja se concorda com os termos e pressione começar, preencha os campos que aparecem como o sobre, colocar foto de capa e no URL escolha o pretendido porque criada a página já não pode voltar a alterar, feito isso a sua página está criada. Feito isso deve começar a personalizar a sua página colocando foto de capa, e conteúdos. Peça aos seus amigos para ajudarem a divulgar e a colocar like! Espero que tenham percebido tudo, um tutorial do Uncomplicated Works  como criar página no Facebook para o blog.

    0 Comentários Continuar a ler »

    quinta-feira, 5 de fevereiro de 2015

    Efeitos para Ícones das Redes Sociais - Uncomplicated Works

    Personalizar ícones das redes sociais


    Boas pessoal! Bem vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje irei ensinar a colocar efeitos CSS nos ícones das redes sociais no nosso blog. 





  • Como criar página no Facebook do Blog
  • Podem conferir a aula de como colocar ícones das redes sociais no blog.
  • Como colocar Like Box - Facebook
  • Botões para compartilhar postagens nas redes sociais


  • Este tutorial vai ser um pouco mais complicado do que colocar apenas o ícone, contudo se estiverem concentrados facilmente irão perceber o efeito criado por cada código CSS, então vamos dar início ao nosso tutorial de como colocar efeitos nos ícones das redes sociais.

    O primeiro efeito que irei ensinar hoje é como colocar rotação nos ícones das redes sociais, irá ficar desta forma:

    Google + Twitter Twitter Facebook

    O código HTML usado é:

    <div class="efeito1">
    <a href="URL_GOOGLE+" target="_blank"><img alt="Google +" src="http://icons.iconarchive.com/icons/land-of-web/social-coffee/64/google-plus-icon.png" /></a>
      
    <a href="www.twitter.com" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/land-of-web/social-coffee/64/twitter-icon.png" /></a>
      
    <a href="www.twitter.com" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/land-of-web/social-coffee/64/rss-icon.png" /></a>
      
    <a href="https://www.facebook.com/uncomplicatedworks" target="_blank"><img alt="Facebook" src="http://icons.iconarchive.com/icons/land-of-web/social-coffee/64/facebook-icon.png" /></a>

    </div> 


    Vocês devem alterar o código consoante os ícones que querem e devem fornecer o URL desejado, para que ao clicar sobre o ícone abra a página desejada, agora vamos ao primeiro código para personalizar os nossos ícones das redes sociais:



    <style>.efeito1 img:hover {
    -moz-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
    -webkit-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
    -o-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
    -ms-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
      transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);}

    .efeito1 img {-webkit-transition: all 500ms ease;
    -moz-transition: all 750ms ease;
    -ms-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    transition: all 750ms ease;}
    </style>


    Se vocês quiserem colocar na sidebar através do esquema coloquem como está, se forem colocar no modelo do blog retirem <style> e </style>


    Explicando um pouco o código:

    Nós no código HTML colocámos <div class="efeito1"> então vamos usar efeito1 para personalizar o nosso ícone, depois onde esta a imagem começa por <img então vamos usar img, então colocamos .efeito1 img {} e dentro colocamos o efeito pretendido, neste caso, está o efeito transition que define o tempo de transição entre o rato estar sobre a imagem ou não e colocamos .efeito1 img:hover{}, acrescentamos :hover para quando o rato está sobre a imagem, neste exemplo está uma transformação de 360º. Espero que tenham percebido, se tiverem alguma dúvida deixem nos comentários.


    O seguinte efeito provoca um aumento dos ícones:



    MySpace Twitter Tumblr Facebook


    <style>.efeito2 img:hover{
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1) ;
    -ms-transform: scale(1.1) ;
    transform: scale(1.1) ;
    }

    .efeito2 img {-webkit-transition: all 750ms ease;
    -moz-transition: all 750ms ease;
    -ms-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    transition: all 750ms ease;
    }</style>

    <div class="efeito2">
    <a href="https://www.blogger.com/URL_GOOGLE+" target="_blank"><img alt="MySpace" src="http://icons.iconarchive.com/icons/hopstarter/social-networking/64/MySpace-icon.png" /></a>
      
    <a href="https://www.blogger.com/www.twitter.com" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/hopstarter/social-networking/64/Twitter-icon.png" /></a>
      
    <a href="https://www.blogger.com/www.twitter.com" target="_blank"><img alt="Tumblr" src="http://icons.iconarchive.com/icons/hopstarter/social-networking/64/Tumblr-icon.png" /></a>
      
    <a href="https://www.facebook.com/uncomplicatedworks" target="_blank"><img alt="Facebook" src="http://icons.iconarchive.com/icons/hopstarter/social-networking/64/Facebook-icon.png" /></a>
    </div>

    E por fim o último efeito torna colorido os ícones, quando o rato está sobre eles:

    Google+ Twitter Blogger Facebook


    <div class="efeito3">
    <a href="https://www.blogger.com/URL_GOOGLE+" target="_blank"><img alt="Google+" src="http://icons.iconarchive.com/icons/designbolts/3d-social/64/Google-plus-icon.png" /></a>
      
    <a href="https://www.blogger.com/www.twitter.com" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/designbolts/3d-social/64/Twitter-2-icon.png" /></a>
      
    <a href="https://www.blogger.com/www.twitter.com" target="_blank"><img alt="Blogger" src="http://icons.iconarchive.com/icons/designbolts/3d-social/64/Blogger-icon.png" /></a>
      
    <a href="https://www.facebook.com/uncomplicatedworks" target="_blank"><img alt="Facebook" src="http://icons.iconarchive.com/icons/designbolts/3d-social/64/Facebook-icon.png" /></a>

    </div>
    <style>.efeito3 img:hover {
    -webkit-filter: grayscale(0);
       -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
         -o-filter: grayscale(0);
    filter: grayscale(00);
    }

    .efeito3 img {
    -webkit-transition: all 750ms ease;
    -moz-transition: all 750ms ease;
    -ms-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    transition: all 750ms ease;
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
    filter: grayscale(100%);
      -webkit-transition: -webkit-filter 1s;
    }</style>


    Bem espero que tenham gostado dos códigos para personalizar os ícones das redes sociais, espero que tenham gostado do tutorial do Uncomplicated Works, qualquer dúvida deixem nos comentários até ao próximo tutorial.
    0 Comentários Continuar a ler »
    Related Posts Plugin for WordPress, Blogger...