Como adicionar GitHub:buttons na página

Esse tutorial é parte da integração GitHub:buttons.

Se você está usando o construtor Sitebin.biz para criar uma página da sua “repo” GitHub, vai querer então criar botões personalizados para a contagem de watch, fork, e follower ou um link estático para a página do perfil. Sitebin.biz gera apenas HTML das páginas e com isso pode subir o projeto para o GitHub Pages tranquilamente. Veja um guia para fazer isso aqui https://pages.github.com/

Criando o botão GitHub

O primeiro passo que deve fazer é criar o botão personalizado para sua “repo” ou “username”. Acesse o site https://buttons.github.io e gere o código do botão:

botão GitHub

Pronto, depois que o script personalizado estiver criado, é hora de cadastrar ele em seu projeto no Sitebin.biz. Copie com “CTRL+C” o código no quadro 2 que está marcado com a seta. Esse é o script javascript que deve ser inserido em todas as páginas.

Vá para o site Sitebin.biz e clique em configurações do Projeto:

Sitebin projetos configuração

Em seguida, clique no menu Scripts globais, e cole o código no campo “Código de cabeçalho” e grave a alteração no final. Como pode ser visto na imagem abaixo.

 menu Scripts globais

Está etapa está finalizada. Pode ir no editor do projeto para criar o botão nas páginas

Agora deve inserir o código do quadro 1 na página do projeto onde quer que o link do botão apareça. Copie com “CTRL+C” o código no quadro 1.

botão GitHub

No exemplo abaixo estamos cadastrando o botão (código do quadro 1) no cabeçalho do site, indo no recurso de scripts de terceiros. Clique em salvar, botão azul.

sitebin-códigodeterceiros

Como o projeto está em edição, ele não vai carregar o código nesse momento. Para visualizar o resultado, deve salvar as alterações no botão verde, superior. Em seguida clique em Pré-visualizar, dessa fora o código vai carregar como planejado.

Está completo. Agora seu site tem botões de repositórios Github.com

 

Compartilhe esse post!
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on Tumblr
Tagged:

Classifique este artigo

(37 de of 133 pessoas acharam esse artigo útil)

Deixe um comentário

Resolva a charada *