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 »

Hospedar arquivos CSS e JavaScript no Google Drive

Hospedar arquivos CSS e JavaScript no Google Drive

Boas pessoal! Bem vindos a mais um tutorial do Blogger Uncomplicated Works, é um tutorial bastante simples, contudo ajuda a que os códigos do seu blog fiquem hospedados noutros locais, o que favorece o vosso blog. Para colocar o código CSS no google drive, devem colocar o vosso código CSS no bloco de notas, exemplo:

body {

color:black;

}

Colocado o código no bloco de notas, devemos salvá-lo no tipo .css

Hospedar arquivos CSS e JavaScript no Google Drive

Salvo o arquivo em .css, vamos colocá-lo no google drive, para isso acessamos o google drive e selecionamos file uploud e colocamos o nosso arquivo.

Hospedar arquivos CSS e JavaScript no Google Drive

Feito o uploud, carregamos sobre o arquivo com o lado direito do mouse e escolhemos a opção Share depois Advanced e finalmente em Change e escolhemos a primeira opção:

Hospedar arquivos CSS e JavaScript no Google Drive

Finalizando essa parte, temos o nosso código disponível para quem quiser ver, agora basta inseri-lo no blog.

Na mesma opção vamos ver o link para partilhar, algo assim:

https://drive.google.com/file/d/0B52sojoAiNO8Q3hpbmtfTXdoVGs/view?usp=sharing

Vamos retirar a parte final view?usp=sharing/

Agora, temos de colocar essa parte dentro deste código:

<link rel="stylesheet" type="text/css" href="https://drive.google.com/file/d/0B52sojoAiNO8Q3hpbmtfTXdoVGs" />

Para código CSS usamos o código acima referido, para JavaScript, usamos este:

<script src='https://drive.google.com/file/d/0B52sojoAiNO8Q3hpbmtfTXdoVGs' type='text/javascript'></script>

Agora, basta ir a modelo e colocar o código logo a seguir à <head> e temos o nosso código operacional. Espero que tenham percebido como podem hospedar arquivos CSS e JavaScript no Google Drive, qualquer duvida, deixem nos comentários, espero que tenho gostado do tutorial do Blogger Uncomplicated Works

0 Comentários Continuar a ler »

Widget contador de visitantes online

Contador de visitantes no momento do blog

Boas pessoal! Bem vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje vou ensinar a colocar um widget de contador de visitantes no blog. Muitos blogueiros gostam de saber quantos leitores tem no seu blog em simultâneo. O http://whos.amung.us/ é um serviço bastante prático e eficiente, podemos saber de que local provém o tráfego, quantos utilizadores tivemos nas diferentes horas do dia, além de disponibilizar uma grande variedade de widgets.

A primeira etapa para colocar o contador de visitantes é aceder ao site: http://whos.amung.us/showcase/

A partir desse momento, é um pouco intuitivo, podem escolher o tipo de widget:

Classic:

Classic Widget

Colored:

Colored Widget

Neste tipo de widget, podem escolher a cor do fundo e a cor do texto de modo a adequar ao seu blog.


Small

Small Widget

Este tipo de widget é o mais simples e mais discreto.


Tab

Tab Widget

Neste tipo de widget, podem colocar o contador a aparecer do lado esquerdo, direito ou no fim da página.


Map

Neste tipo de widget, podem colocar um mapa e saber de onde provém os visitantes do seu blog.


E ao clicando no widget no blog irá abrir uma página de estatísticas, do género desta

Onde podem ver quantos visitantes estiverem online a certas horas do dia, se acessaram por telemóvel ou desktop.

0 Comentários Continuar a ler »

Retirar a Borda das Imagens do Blogger

Boas pessoal! Bem-vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje irei ensinar a retirar a borda das imagens no blogger. Normalmente quando criamos uma conta no blogger, ao postar uma imagem ela irá ficar com uma espécie de borda branca, e neste tutorial vamos ensinar a retirar.
Com este tutorial de como retirar a borda das imagens do blog, o efeito vai ser:

Com borda

Retirar a borda das imagens do blogger

Depois do tutorial ficará assim:

Retirar a borda das imagens do blogger

A primeira etapa deste tutorial é, ir a modelo, pressionar Ctrl+F e procurar por:

.post-body img, .post-body .tr-caption-container

Feito isso irá aparecer um código CSS deste género:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

Encontrado o código, devem substitui-lo por este:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  background:transparent;
}

.post-body img, .post-body .tr-caption-container {
  background:transparent;
}

Ou mesmo remover essa parte do código. 

Feito isto temos o tutorial de como retirar a borda das imagens do blogger, realizado por Uncomplicated Works concluído, espero que tenham aprendido algo, se não tiverem percebido, deixem nos comentários!

8 Comentários Continuar a ler »

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 »

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:

https://www.facebook.com/pages/create.php

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 »

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:

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:

<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:

<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 »

Ícones das redes sociais no blog - Uncomplicated Works

Ícones das redes socias no blog

Boas pessoal! Bem vindos a mais um tutorial do Blogger Uncomplicated Works , e hoje irei ensinar a colocar ícones das redes sociais no vosso blog. É um tutorial bem simples, o que irá dificultar mais na parte de colocar os ícones das redes sociais é criarmos um código CSS que encaixe com o nosso blog. A primeira etapa para colocarmos os ícones no nosso blog é escolhermos a imagem para eles, vou deixar aqui algumas imagens:

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

Estas ícones foram retirados do site Icon Archive o qual vocês podem visitá-lo e encontrar uma maior variedade de ícones para o vosso blog.
A primeira etapa está completa, agora vamos colocar o nosso ícone na nossa sidebar ou no lugar que desejam, para isso vamos ter de usar um código HTML.

Em primeiro lugar vamos inserir o link na imagem neste código HTML:

<img class='classe para aplicar código css' alt='Texto pretendido quando o rato está sobre o ícone' src='link-da-imagem' />

Agora vamos colocar esse código entre:

<a href='url_desejado' target="_blank"><img class='classe para aplicar código css' alt='Texto pretendido quando o rato está sobre o ícone' src='link-da-imagem' /></a>

Exemplo de um código:

<a href='www.twitter.com' target="_blank"><img class='twitter' alt='twitter' src='http://icons.iconarchive.com/icons/designbolts/3d-social/64/Twitter-2-icon.png' /></a>

Resultado:




Para colocar os ícones na sidebar basta ir a Esquema -> Adicionar mini aplicação e HTML/JavaScript e colocar esse código dentro da caixa. Se quiserem colocar noutro local e não saibam como deixem algo nos comentários que eu irei ajudar certamente.

A partir deste momento já temos conhecimento para colocar os nossos ícones das redes sociais no nosso blog, na próxima aula irei ensinar a colocar efeitos nos ícones quando o rato estiver sobre ele, espero que tenham gostado do tutorial de como colocar ícones das redes sociais no blog.  Espero que tenham gostado do tutorial e que ele vos tenha ensinado algo se tiverem algumas dúvidas deixem nos comentários, um tutorial do Uncomplicated Works.

0 Comentários Continuar a ler »