super7tutorias: BOTÕES

Mostrando postagens com marcador BOTÕES. Mostrar todas as postagens

segunda-feira, 23 de março de 2015

Como colocar o Like Box do Facebook no Blog

Jonatassousa 06:06 BLOGGER, BOTÕES, GADGET Sem Comentarios

Uma coisa muito importante para um blog é fazer parte das redes sociais e a mais usada hoje em dia é o Facebook. Então, se você tem uma fan page do seu blog, ótimo!!! Se ainda não tem, corre fazer porque é importante.

Há uma opção para que seus leitores possam conhecer e curtir a sua pagina no Facebook sem precisar sair do seu blog: é só colocar na lateral do blog oGadget da Like Box.

O Facebook disponibiliza uma ferramenta que facilita a vida dos blogueiros na hora de inserir essa caixa no blog e hoje vamos aprender como fazer isso:

1º Passo – Acessa o link abaixo para criar o gadgets com a sua informação:

link do site

Você irá colocar as seguintes informações:

Facebook page URL – Coloque a URL da sua página no Facebook;
Width – Escolha a largura do gadget (Conforme as medidas de seu blog);
Height - Escolha a altura do gadget
Color Scheme – Escolha a cor deseja para o fundo da caixa, sendo: Light, com fundo branco e dark, com fundo preto;
Show Friends’ Faces – Deixe marcado, se você deseja que o avatar de quem curtiu, apareça, caso contrario, desmarque.
Show Header – Marque se você quer que o cabeçalho (a parte azul) apareça, caso contrário, desmarque.
Show Posts – Deixe marcado se você deseja que apareça os últimos comentários na página escolhida;
Show Border – Marque caso queira que apareça a borda da caixa.

Quando terminado, clique em “Get Code”, irá aparecer a caixa abaixo, você irá usar o código da opção “IFRAME”.

Like Box, Facebook, Rede Social, CBBlogers

Pronto a sua Like Box está criada, agora vamos inseri-la no seu blog:

Plataforma Blogger:

No Blogger você irá seguir as mesmas instruções que já coloquei nos posts anteriores: irá até a opção Layout, depois Adicionar Gadgets, escolher a opção HTML e colocar o código e salvar.

Plataforma WordPress:

Para inserir a Like Box na plataforma do WordPress é só ir na opção “Aparência”, depois “widgets” e escolher a caixa “texto” e só colocar o código e salvar.

Pronto!!! Agora a Like Box já estará disponível no seu blog.

FONTE:http://www.cbblogers.com/

Mais informações →

sábado, 21 de março de 2015

Colocando um Widget do Instagram para seu blog

Jonatassousa 16:51 BLOGGER, BOTÕES, ÚLTILIDADES Sem Comentarios

Esta dica certamente vai ser útil para muitas blogueiras (e blogueiros também) que adoram postar fotos em seu perfil do Instagram. Isso se torna mais legal ainda, quando você tem um blog, e quer mostrar aos seus leitores o que você andou fotografando por aí.

Na verdade, não existe um método oficial e específico dos desenvolvedores do Instagram para fazer isso, porém, existem alguns serviços de terceiros, que conseguem exibir suas fotos em seus servidores, e fazê-las aparecer em seu blog como miniaturas. É o que você irá aprender logo abaixo :

O primeiro passo, é acessar o site SnapWidget (snapwidget.com). É lá que você vai criar seu widget do Instagram.

Clique no botão Get Your Free Widget:

Na próxima tela, configure do modo que desejar, com cores, tamanhos, efeitos, etc. Clique em Get Widget:

Copie o código que irá aparecer, e vá no painel do seu blog em > Layout

Adicionar um gadget > HTML/JavaScript e colar o código:

Prontinho. Seu widget do Instagram será exibido no seu blog :) Lembre-se de ajustar as larguras, caso as fotos fiquem muito grandes.

Mais informações →

Gadget redes sociais personalizados para Blogger 2015

Jonatassousa 11:35 BOTÕES Sem Comentarios

Pode parecer bobeira esse tipo de gadget mais na verdade é muito importante pois com eles o seu visitante pode passar a te seguir no Facebook, Twitter, YouTube ou por e-mail e com isso passar a ser um leitor e não um mero visitante.

Cole o mesmo código em um bloco de notas para fazer algumas alterações.Nas tags em azul

No código procure pelo nomes abaixo e troque pelo link:

Exemplo: http://www.facebook.com/super7tutorias

Procure por:

LINK_DO_FACEBOOK = Troque pelo link do seu Facebook
LINK_DO_TWITTER = Troque pelo link do seu Twitter
LINK_DO_GOOGLE = Troque pelo link do seu perfil no Google +
LINK_DO_YOUTUBE = Troque pelo link do seu canal no YouTube.
LINK_DO_PINTEREST = Troque pelo link Pintrest

Código:

Código:

Código:

<table style="text-align: left; width: 200px;" border="0"

cellpadding="0" cellspacing="0">

<tbody>

<tr>

<td style="text-align: left;" valign="undefined"><a href="LINK_DO_FACEBOOK" target="_blank"><img

style="border: 0px solid ; width: 48px; height: 48px;" alt=""

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU4h9V89h_g40B87Q7jZWsntDRh6d0Y-xdhfakFUC8L0VGnNwsh_lmi4MbYKR0BYNdheE-cYncWUYGU5rlFlaxUI_O_MzH8T2ID9GC0jKIg14LIgH8LUb0DjTYj3U9LGxurjIPX7NusBg/s1600/Espacobl

og.com_Facebook.png" title="Facebook" /></a ></td>

<td style="text-align: left;" valign="undefined"><a

href="LINK_DO_TWITTER" target="_blank"><img

style="border: 0px solid ; width: 48px; height: 48px;" alt=""

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRCIPnZnvqaQvYrlGDCjgmbcLEHCurz71E02JzYJOVUZnyLCLEtlN5DI73FV5GGmu5Uye40hnG2omB1wX71hnbjaaxt93yCG_Cax-NgMKlhBNiyusZukBKg91IqLl1qF7sybElAHg_BE/s1600/Espacoblo

g.com_Twitter.png" title="Twitter" /></a></td>

<td style="text-align: left;" valign="undefined"><a

href="LINK_DO_GOOGLE" target="_blank"><img

style="border: 0px solid ; width: 48px; height: 48px;" alt=""

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgxY9Xzi3uatB_Bg_EJ1OXGCCtwAcVJo3APBvLxr2Jj4gwXylMpy24TMEqWfdwlzPzfMyFv8MwSduRV1x-zJ-YjZigIpb3Wwkx1stJUZZTCwWvg0T9PKsnmJ9z6oyl5qYSQtB9Gv4ERs/s1600/Espacobl

og.com_Google.png" title="Google +" /></a></td>

<td style="text-align: left;" valign="undefined"><a

href="LINK_DO_YOUTUBE" target="_blank"><img

style="border: 0px solid ; width: 48px; height: 48px;" alt=""

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIxGGIGmKPGYvU_xEkPqvfODllSO9tS28h8VxGIbXOxu3t0BJrmydnYj2RUMb6zsBnK0lXfQ34aHJu8rjD-6HRgT3SrceA7UhQ_KMrOcPxOEM-wlq_yAPngSyTjgy5Bxr1LzN9SjsrrY/s1600/Espacoblog.

com_YouTube.png" title="YouTube" /></a></td>

</tr></tbody></table>

Código:

<table style="text-align: left; width: 200px;" border="0"

cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: left;" valign="undefined"><a
href="LINK_DO_FACEBOOK" target="_blank"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhpkM4wmIx54zfafZ8PfwUQSwoJhtrgaJpRS1jRkdD_FNMim65HCcwxYjhLa7NBYSc-5gFQtqF1MOEKhHBdgKDPxFKwB826AycBWskTvqo6rHebnnEvoa66-C-IC05QUGECNDGWbX6gUY/s1600/EspacoB
log_Facebook.png" title="Facebook" /></a ></td>
<td style="text-align: left;" valign="undefined"><a
href="LINK_DO_TWITTER" target="_blank"><img style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjants1I756ogD3YySwBhQI-Ujf1KzJPSTNhIp2GX99p1bE1MsKsxHsBRzzb6JenECZo6jPHaTNzAD2VJkYKl_Jv_qb4H1mbkIZe4nKLyykI6iKKkTjaq02iQRsIzzNH36OO97VhgYDTW3C/s1600/EspacoBl
og_Twitter.png" title="Twitter" /></a></td>
<td style="text-align: left;" valign="undefined"><a
href="LINK_DO_GOOGLE" target="_blank"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzEP_7LoyxJ4PdWG10pasrAusM624uTrnmkhzVEf6cT_tN3oG7khSx_GN5j3kfj0hHCRDH0681_aA1qjkASKW66wRCVmlyPDodWzqLxX9KAILbltdlMqxoSi922dqrXlQIJxTcudrb52Cl/s1600/EspacoB
log_Google.png" title="Google +" /></a></td>
<td style="text-align: left;" valign="undefined"><a
href="LINK_DO_YOUTUBE" target="_blank"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWe9Qs9mcYgfOCKOc68m14DT0_lm4F0H0RJVLJqR96Cc7HLHcRBC2kMoSgvhZMT3ZNW78UDSplgKPiqdUIUNjoXO76Ols-2N4ZveekIeMQ23gnO_nDJHJmtaMdtdLt75HV79IZJasda6lz/s1600/EspacoBlo
g_YouTube.png" title="YouTube" /></a></td>
<td style="text-align: left;" valign="undefined"><a
href="LINK_DO_RSS" target="_blank"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4GM01qT_xPmmbQZfWB9rhidWzKTnUSbOHYV5rp1e1XoWPLGr7jL7jCNAZW3j_ESbFzp_TDm1FbiEOSOVodTK_t4CSFL3Gi-LGNnJHttv3CPQpMcgWF7dDir9hf0yBYelg_pCYZVGypgX/s1600/EspacoBlog
_RSS.png" title="RSS" /></a
></td>
</tr>
</tbody></table>

Colocando no seu Blog

Depois de copiado o seu código, vá no painel do seu blog em -Layout

Adicionar um gadget html/ javaScript

Escolha onde vai ficar e salve

click na aqui para ver botões, para blogs femininos

Mais informações →

Gadget redes sociais personalizados para blog feminino 2015

Jonatassousa 11:19 BOTÕES 1 Comentario

Cole o mesmo código em um bloco de notas para fazer algumas alterações.Nas tags em azul

No código procure pelo nomes abaixo e troque pelo link:

Exemplo: http://www.facebook.com/super7tutorias

Procure por:

Código:

Código:

Código:

Colocando no seu Blog

Depois de copiado o seu código, vá no painel do seu blog Layout

Adicionar um gadget html/ javaScript

Escolha onde vai ficar e salve

click na aqui para ver mais botões

Mais informações →

quinta-feira, 19 de março de 2015

Como colocar Botão Seguir flutuante Fixo na Lateral do Blog

Jonatassousa 04:37 BLOGGER, BOTÕES Sem Comentarios

Olá pessoal! Algumas semanas fiquei sem escrever postagens por motivo de estar muito ocupado, mas hoje eu lhes trouxe um Botão personalizado de seguir no Blog, esse botão fica posicionado na Lateral (Direita) do blog, ele é bem eficiente pois bem útil para ajudar a ganhar mais seguidores no blog.

Esse é um botão bem simples que editei, nele eu utilizei CSS que deixa o botão fixo na lateral do blog, e quando descemos ou subimos a página o botão continua posicionado no mesmo lugar, e etc..

Veja um exemplo na imagem abaixo. Ou tambem no meu blog

Para Colocar no Blog:

1º Passo: Acesse o HTML do seu blog, vá em Modelo >> em Editar HTML >> e clique em Editar html

No HTML do Blog, utilize as teclas de pesquisa: Ctrl+F e procure por esse Tag:

]]></b:skin>

Ao localizar o Tag, acima dele acrescente esse código CSS:

/*Botão seguir no Site*/

ul#menusisi {

position:fixed;

margin:0;

padding:0;

top:10px;

right:0;

list-style:none;

z-index:9999;

}

ul#menusisi li {

width:78px;

}

ul#menusisi li a {

display:block;

width:78px;

height:26px;

}

ul#menusisi .Seguir a {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbieeyFoUHlEBJAMAWdVj99EBq1CUcIaqvZ-__6sljcRgbVewYi0wlm_0D8fjABQiEhfedarNIw-TwL7sLupFzzaj9MlhhRzHg6Lef-dqMKefBNou1bjyBm3n7E5eGzq6Bh_4Kl8paeYM/s1600/seguir.png);

}

2° Passo: Agora procure por esse outro Tag:

</body>

Quando encontrar o segundo Tag </body>, acrescente esse código logo acima dele:

<ul id='menusisi'>

<li class='Seguir'><a href='http://www.blogger.com/follow-blog.g?blogID=7200232364320779357' title='Seguia o Varias Dicas Para Blogs'/></li> </ul>

Vamos Alterar o Código:

Bom pessoal, veja que no primeiro código eu destaquei uma parte em cor Vermelha"10px" se por acaso você desejar deslocar (descer) o botão mais para baixo é só você alterar o valor "10" pra "20" ou mais, e etc...
E no segundo passo (código) eu destaquei uma parte em cor Azul "7200232364320779357" nessa parte você vai substituir pelo ID do seu Blog.

Mais informações →

segunda-feira, 16 de março de 2015

Como ativar os botões de compartilhamento do Blogger: Abaixo das postagem

Jonatassousa 12:37 BLOGGER, BOTÕES Sem Comentarios

Vou mostrar aqui como ativar o recurso, mas prestem atenção no tutorial, pois se você usa um template já modificado ou antigo, terá que seguir os passos para incluir um código HTML no seu template.

1º passo:
Entre na aba “Design” >>> Clique em “Editar” na caixa “Postagens no Blog”
Marque a opção “mostrar botões de compartilhamento” e em “organizar itens” escolha o local que você deseja que fiquem os botões de compartilhamento no seu template.
Salve e pronto!
Se você usa os novos templates designer do modelo, basta ativa-lo conforme mostrado acima e pronto.

vai ficar assim

É só salvar

Mais informações →

COLOCAR CAIXA DE PESQUISA PERSONALIZADA NO SEU BLOG

Jonatassousa 12:17 BLOGGER, BOTÕES Sem Comentarios

Todo blog precisa de uma caixa de busca não é mesmo? Afinal ela é ótima para seus leitores encontrarem posts antigos do seu blog que merecem atenção também. Hoje trouxe dois modos para você deixar a caixa de pesquisa do seu blog muito diferente e combinando com o resto do blog. Pra variar, todos os dois são bem fáceis, basta entender o mínimo de css e ter algum programa ou site que te mostre o código HTML das cores.

1° exemplo Usando o gadget do próprio blogger

Antes de tudo vá em layout e adicione no seu blog o gadget de pesquisa do blogger.

Agora vá em modelo > editar HTML

Aperte ctrl+F e procure por ]]></b:skin>

Cole isso acima do código que você procurou:

/*Para remover o logo do google*/
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
/* Personalização do Campo de texto */
td.gsc-input input {border: 2px solid #e7e7e7; background:#fff; color:#ff0048; font-family:verdana; font-size:11px; } /* Fim da personalização do Campo de texto */
/*personalização do botão*/
input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#ff0048; border:0px; font-weight:normal; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
input.gsc-search-button:hover {background:#b779db; color:#fff;} /*fundo e cor do texto quando passa o mouse*/
/*fim da personalização do botão*/

Agora é só fazer as modificações de acordo com seu gosto. Se não quiser bordas arredondadas, apague o trecho em roxo.

Adicionando um gadget de HTML

Nesse outro modo você pode colocar uma imagem fofa ,Vá em layout e cole o código abaixo em um gadget de html/javascript:

Você pode substituir o texto em negrito pela frase que quiser.
Agora vá em modelo > editar html e cole antes de ]]></b:skin> o código abaixo

.search{
float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('Url da imagem do botão');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
}

Agora é só personalizar como quiser e salvar!

Mais informações →

segunda-feira, 23 de março de 2015

sábado, 21 de março de 2015

quinta-feira, 19 de março de 2015

segunda-feira, 16 de março de 2015

Postagens populares