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.

terça-feira, 10 de fevereiro de 2015

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 »

segunda-feira, 9 de fevereiro de 2015

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 »

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 »

    quarta-feira, 4 de fevereiro de 2015

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











    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 »

    terça-feira, 3 de fevereiro de 2015

    Inserir Fórum no Blogger - Uncomplicated Works

    Inserir fórum no blogger


    Boas pessoal!  Bem vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje irei ensinar a incorporar um fórum no vosso blogger. O fórum irá ficar desta forma incorporado no seu blogger. O primeiro passo para criar o nosso fórum é: acessar a este local: Groups Google e pressionarmos criar novo grupo.

    Feito isso vamos colocar as informações do nosso fórum como: Nome do Grupo, Endereço de e-mail do grupo, etc. Feito isto pressionamos no criar e preenchemos a caixa de informação, depois disso temos o nosso fórum criado, vamos escolher o nome de apresentação, pode ser qualquer um. E por fim pressionamos guardar as minhas alterações. 

    Temos o nosso fórum criado agora só falta incorporá-lo no nosso blogger, para isso vamos ao url do grupo:

    https://groups.google.com/forum/#!forum/grupoteste/new

    E vamos copiar a parte que se encontra em vermelho e colocar neste código:

    <iframe id="forum_embed"
    src="javascript:void(0)"
    scrolling="no"
    frameborder="0"
    width="900"
    height="700">
    </iframe>
    <script type="text/javascript">
    document.getElementById('forum_embed').src =
    'https://groups.google.com/forum/embed/?place=forum/grupoteste'
    + '&showsearch=true&showpopout=true&showtabs=false'
    + '&parenturl=' + encodeURIComponent(window.location.href);
    </script>

    Depois de modificarmos o código para incorporar o fórum no nosso blogger, vamos colocá-lo numa página e salvámos a partir daí temos o nosso fórum incorporado no blogger, irá ficar deste género: Fórum

    Podemos modificar as dimensões para adequar ao nosso blog, substituindo os valores de

    width="900"
    height="700"

    para os desejados.

    Espero que tenham gostado do tutorial do Uncomplicated Works e que tenham percebido como se incorpora um fórum no nosso blogger.


    0 Comentários Continuar a ler »

    domingo, 1 de fevereiro de 2015

    Numeração de Páginas no Blogger - Uncomplicated Works

    Numeração de Páginas Blogger


    Boas pessoal! Bem-vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje irei ensinar como colocar numeração de páginas no blogger. No blogger podemos definir o número de postagens por página, contudo se não aplicarmos nenhum código apenas irá aparecer postagens antigas, ao colocarmos a numeração no blogger o leitor poderá navegar de uma forma mais simples pelo nosso blog. Então vamos aprender a colocar numeração de páginas no blogger

    A primeira etapa para instalarmos a numeração de página no blogger é inserirmos um script, para isso pressionamos CTRL + F e pesquisamos por </body> depois de encontrar adicionamos este script acima:

    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType != "static_page"'>
    <script type='text/javascript'>
      /*<![CDATA[*/
        var perPage=7;
        var numPages=6;
        var firstText ='Primeiro';
        var lastText ='Último';
        var prevText ='« Anterior';
        var nextText ='Seguinte »';
        var urlactivepage=location.href;
        var home_page="/";
      /*]]>*/
    </script>
      <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
    </b:if>
    </b:if>


    var perPage=7; é o número de mensagens na primeira página definidas no seu blogger

    Numeração de Páginas - Blogger

    Os valores devem ser os mesmos.

    var numPages=6; é o número de páginas que irá aparecer no numerador de páginas.


    Agora vamos adicionar o código css para melhorarmos o aspeto do nosso numerador de páginas, para isso pressionamos CTRL + F e pesquisamos por ]]></b:skin> e antes disso vamos colocar os códigos desejados:

    1º Menu






    2º Menu



    Feito isto, temos a numeração de páginas implementadas no nosso blog, espero que tenham gostado do tutorial do Uncomplicated Works, e se tiverem alguma dúvida sobre como colocar numeração de página no blogger deixem nos comentários. Hoje aprendemos a colocar numeração de página no blogger.
    0 Comentários Continuar a ler »
    Related Posts Plugin for WordPress, Blogger...