Gadget com Botões Flutuantes de Redes Sociais no Blogger

Colocar os botões flutuantes no blog pode ser uma boa forma de conseguir mais divulgação do seu blog em redes sociais como Twitter, Facebook, Orkut e outros. Nós já mostramos diversas opções de botões de compartilhamento nas redes sociais.
Então vamos mostrar hoje um código mais simples para fazer os botões flutuantes ao lado do conteúdo da sua pagina sem ficar fixos no canto da pagina.

Vamos usar o código dos botões de compartilhamento do AddThis para demonstrar o código dos botões flutuantes no blogspot, mas você pode usar com qualquer outro tipo de botão ou código que desejar.

Entre na pagina layout > adicionar gadget > html/javascript e cole esse código.

<div style="position:fixed; bottom:20%; margin-left:-98px; float:left;width:60px;background-color:#ffffdf;padding: 5px;border:1px solid #000;border-right:none"><center><div class="addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></center></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script>
</div>

Não importa o lugar no seu layout que esse gadget ficará posicionado ele sempre aparecerá na posição que você configurar.

Veja como editar e escolher a posição dos botões flutuantes das redes sociais no seu blog:

position:fixed; bottom:20%; margin-left:-98px: posicionamento da caixa, então altere a altura na pagina 20% e o posicionamento horizontal modificando o valor -98px, aqui note que o valor é negativo ou seja o sinal de menos faz parte do posicionamento.

float:left: lado que aparece a caixa

width:60px: largura da caixa

padding: 5px: margem entre as bordas da caixa e os botões

background-color:#ffffdf: cor de fundo da caixa de botões de compartilhamento.

border:1px solid #000;border-right:none: neste trecho retiramos um lado da borda para parece que a caixa com os botões flutuantes fazem parte do nosso layout.

Testamos alguns códigos e a maioria deles usa códigos javascript para fazer o movimento dos botões na tela, mas achamos que usar um código apenas para corrigir o posicionamento dos botões funciona do mesmo jeito e precisa depender de mais códigos que deixam seu blog mais lento.

Para terminar queremos falar novamente que o uso dos botões do addthis é opcional você poderá trocar por qualquer outro como, por exemplo, colocar o Botão +1, Botão Curtir e Enviar do Facebook, Botão Retweet ou Linkedin como mostramos nos links acima. Portanto agora é só escolher o que você quer usar nesta caixa flutuante no seu blog.

Mensagem de Erro

Mensagem de Erro ao Salvar Alterações no HTML do Blogger Para resolver problemas com mensagens de erro do Blogger ao colocar códigos na pagina editar HTML ou códigos que não funcionam no blogspot precisamos alterar a codificação deles para evitar as famosas mensagens:

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: Element type ... must be followed by either attribute specifications, ">" or "/>".

Sem duvida esse Error 500 e outras coisas parecidas complicam a vida dos blogueiros, mas na maioria das vezes é fácil corrigir esse erro de HTML do seu blogspot. Este tutorial falará sobre corrigir problemas com caracteres inválidos ao adicionar um código no HTML do blogger, por exemplo, colocar um anuncio do adsense no meio das postagens, ou seja, estamos partindo da ideia que o código que você está querendo colocar no seu blog esteja correto, por isso veja abaixo mais algumas dicas sobre códigos errados:

Outro problema comum que gera erro no HTML é apagar algo por engano ou deixar algo a mais nos códigos. Qualquer letra ou sinal faltando ou sobrando nos códigos html ou xml geram erro no blog. Então vamos continuar com o exemplo de colocar o anuncio do adsense dentro da postagem para conseguir ganhar mais dinheiro com seu blog, o código do adsense é mais ou menos assim: -->

transformar imagem em favicon

Colocar Favicon no Tumblr: Personalizar Imagem na Barra de Endereço
Veja como trocar a imagem na barra de endereço do seu blog no Tumblr. Usar um favicon personalizado é importante para ajudar os visitantes lembrarem-se do seu site e você pode usar até imagens animadas na barra de endereço do seu blog. Nós já mostramos como fazer isso no blogger em vários tutoriais tanto usando o HTML(Colocar Favicon no Blogger - Imagem na Barra de Endereços) como pela pagina layout().

colocar favicon no tumblr

Para colocar uma imagem na barra de endereço do Tumblr primeiro você precisa ter o favicon pronto (imagem) no site http://www.iconj.com você tem um gerador de favicon que converte qualquer imagem para o formato certo para usar na barra de endereço do blog. Além disso, você pode achar favicons com movimento (gifs animados) e se quiser você poderá ver aqui dicas para achar imagens, icones para Blog. Mas vamos mostrar como enviar uma imagem e converter para o formato de ícone (.icon). Clique no botão selecionar arquivo e depois clique em upload now.

transformar imagem em favicon

Agora você pode ver a imagem já no formato de ícone para usar na barra de endereços do navegador. A pagina mostra dois códigos e o link de download. Embora o código pronto com o ícone já hospedado pelo site funcione, nós sugerimos que faça o download da imagem e use outro site de hospedagem para garantir que o seu favicon não desapareça.

gerar icone para favicon

Mas aqui neste tutorial para demonstrar vamos usar o segundo código que já tem o favicon hospedado no site. Então quando enviar a sua imagem copie esse código pronto que está depois de Simply copy and paste the code below in the head of your web pages. Agora entre no painel do Tumblr clique em Customize theme > editar HTML e procure e apague a linha:

<link rel="shortcut icon" href="{Favicon}" />
Agora coloque o código que copiou no site que gerou o ícone no lugar da linha que acabou de apagar. Depois disso só precisa clicar para salvar as alterações e visualizar seu Tumblr com a nova imagem na barra de endereço funcionando. Caso não apareça clique no botão F5 para atualizar a sua pagina porque às vezes o computador usa o histórico de internet mostrando uma versão salva do seu blog, leia mais sobre isso aqui: Evite erros no blog por causa do histórico de internet.

personalizar tumblr pelo html

Veja algumas outras dicas para seu Tumblr:
Como Colocar Música no Tumblr ou Blogger
Personalizar Link Resumo da Postagem no Tumblr
Como Enviar Atualizações do Tumblr para o Facebook e Twitter

Essa é uma alteração bem simples de fazer e ajuda a melhorar a aparência do seu blog afinal todos os sites têm um favicon personalizado para ajudar as pessoas memorizarem a pagina de internet que visitam. Esperamos que gostem e aproveitem mais essa sugestão para personalizar o Tumblr. Abraços a todos. Related Posts with Thumbnails

Pássaro do Twitter

Colocar o Pássaro do Twitter e Qualquer Imagem Voando no Blog

Como colocar o pássaro do Twitter voando em seu blog, Ou qualquer imagem que desejar pode se movimentar na tela enquanto as pessoas navegam pelo seu blog, este é um efeito bem interessante e fácil de usar. Mas é claro se quiser outra imagem precisará de um programa para editar a imagem e depois hospedar essa mesma imagem para usar no código.

Para fazer isso entre na pagina layout, adicionar gadget, HTML/javascript e cole esse código:
<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';
var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
var twitterAccount = 'https://twitter.com/fabianoroberto';
var twitterThisText ='';
tripleflapInit();
</script>

Nessa parte altere o endereço do seu perfil no Twitter que está nesta linha: var twitterAccount = 'https://twitter.com/fabianoroberto';
E so clicar em para salvar e pronto.

Para fazer outras Imagens se Movimentarem:

Tem que editar a imagem que deseja em um quadro Mais ou Menos como esse abaixo

Parece complicado mais é uma alteração bem simples de se fazer no código, mas antes disso você precisará criar uma imagem com o desenho, personagem ou foto que desejar, mas com diversas imagens parecidas lado a lado. Na verdade você precisa 5 linhas com 4 imagens uma do lado da outra em cada linha e salvando com fundo transparente.

Se quiser usar com alguma outra imagem precisará criar a imagem você mesmo,Procure alguns sites e programas para editar imagens:

dica que pode ajudar a fazer a imagem personalizada é usar um programa que permita transparência. Crie uma imagem no tamanho 256×320 e salve a imagem padrão do pássaro do twitter (http://oloblogger.googlecode.com/files/birdsprite.png) depois monte sua imagem usando a do twitter semitransparente por cima, assim ficar mais fácil posicionar corretamente os desenhos dentro da imagem e quando terminar é só retirar a imagem do twitter.

O exemplo abaixo que sobrepondo as imagens os desenhos se encaixam perfeitamente.
E veja também como Hospedar Imagens no Blogger

Apos hospedar a imagem só precisam alterar essas linhas no código:

var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png'; colocando o endereço da imagem que desejar.

Nesta outra linha: var twitterAccount = 'https://twitter.com/fabianoroberto'; coloque o endereço do twitter ou qualquer outro site ou pagina do seu blog que desejar
E colocar no seu blog da mesma maneira que o código original com a imagem do twitter: Pagina layout – adicionar gadget – HTML/javascript.

Sabemos que essa segunda opção usando imagem personalizada voando pela tela dá trabalho, mas não tem outro jeito de fazer porque o código já foi desenvolvido nesta base de tamanho e padrão de imagem.

Menu Horizontal DropDown

esta um tutorial de como inserir

um menu horizontal ou vertical.

Obs:Salve o seu template antes de começar.

/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmq7R98R3iJ_MVarefxAeFAugEnKFY8oRxNy_h3hEWR0rmTW9Mf2Nj2UqP2Dw5eONHDj-xfnxrmwxV3VNHpzvBigodKtKCYsB7xG4kDWSuecLIuz_77l8nv1mFn06StKgWd9cOQ42mBlg/s1600/navbar.png);
width: 100%;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
text-transform: capitalize;
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
border-right: 1px solid #fff;

}
#nav li a:hover, #nav li a:active {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjIzWdaXaJoiP-vFO02HeiYEiyS11gvbnBS8jlF9xlHo2TGcbGzmIwAYuKgEM7RTE2Rm6lQaD4vX0SrGcCov6ZdfqobI1DnQSfRpZL7lica3JIoIxIHwoaABsFRFbc8aTsXWwhDDPcFVY/s1600/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;

}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

Apos concluir salve.

2º parte: Instalar o Menu Drop Down:

Volte em design >> Editar HTML >> não precisa clicar em 'Expandir modelos de widgets', e procure pelo trecho abaixo:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='ENDEREÇO DO SEU LINK AQUI'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>

Salve e Pronto:

Mostrar resumo da postagem

Fazer Resumo da Postagem com Miniaturas das Imagens
Gostaria demostrar apenas os resumos das postagens no blog com uma miniatura da imagem somente alterando algumas linhas de html no seu blogger e sem usar nenhum código javascript.

Postagem expansível com miniatura da imagem
Mostrar resumo da postagem

É Um Processo simples, você entra na pagina editar html, marque a opção expandir modelos de widgets e procura por post.body (use o ctrl F para pesquisar), deve estar assim no seu blog:

Então apague essa linha e coloque isso no lugar:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Cuidado para não mostrar duas vezes a mesma coisa no seu blog! Veja se logo após esse trecho se tem o código:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Se encontra-lo delete-o, porque fará o link ler a postagem completa apareça 2x;
Então é necessario retira-lo.

Mostrar resumo da postagem

Fazer Resumo da Postagem com Miniaturas das Imagens
Gostaria demostrar apenas os resumos das postagens no blog com uma miniatura da imagem somente alterando algumas linhas de html no seu blogger e sem usar nenhum código javascript.

Postagem expansível com miniatura da imagem
Mostrar resumo da postagem

É Um Processo simples, você entra na pagina editar html, marque a opção expandir modelos de widgets e procura por post.body (use o ctrl F para pesquisar), deve estar assim no seu blog:

Então apague essa linha e coloque isso no lugar:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Cuidado para não mostrar duas vezes a mesma coisa no seu blog! Veja se logo após esse trecho se tem o código:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Se encontra-lo delete-o, porque fará que o link para ler a postagem completa apareça 2x;
Então é necessario retira-lo.

Dividir Cabeçalho do blog em 2 Colunas

Como fazer 2 colunas no cabeçalho do blog pode ser muito útil para tornar seu template mais dinamico e aproveitar melhor o espaço. Como dividir o cabeçalho do blog em duas partes.

Para fazer essa alteração entre em editar html, mas antes de começar faça um backup(salve modelo do blog antes da mudança)do seu blog,para não correr o risco se dar errado, não perderá nada algum erro nas edições de html. Depois disso procure por:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

No trecho: maxwidgets='1' você deve mudar o numero 1 para 4 ou qualquer outra quantidade de gadgets que pretenda usar, ou simplesmente apagar esses códigos, assim o blogger não limitará o numero de gadgets neste setor.

Também troque a palavra 'no' por 'yes' neste trecho: showaddelement='no', isso faz mostrar o adicionar gadget.

Outra parte do html que precisamos mudar é;
Header1' locked='true' , trocando true por false, isso permitirá mudar o cabeçalho de lugar e arrastá-lo para dentro das colunas que vamos criar no cabeçalho do blog.

Agora encontre <div class='header-outer'>, apague e coloque esse código no lugar:
<div class='header-outer'>
<div id='header-left' style='width:50%; float: left; margin:0; '>
<b:section class='header-left' id='header-left' preferred='yes' style='float:left;'/>
</div>
<div id='header-right' style='width:50%; float: right; margin:0; '>
<b:section class='header-right' id='header-right' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Os valores width:50% são as larguras de cada coluna, você pode alterar como desejar, mas o quanto aumentar em uma deverá tirar da outra ou seja em vez de usar 50 e 50 pode usar 70 e 30.

Abraços ate a proxima.
Deixe seu comentario

Dividir Cabeçalho do Blogger em 2

Colocar o Pássaro do Twitter

Editor de Fotos e Imagens Online Grátis

Quem trabalha com blog utiliza algum editor de foto e imagem para seu blog, então vamos dar mais uma dica de site para editar imagens online, se pude instale-o em seu computador; assim poderá aprender mais sobre ele e trabalhar melhor, mas se não tiver pode criar imagens ou banners online é muito útil também.

Se trata do Splahup, ele é bem simples de usar:
Ao entrar na pagina use o menu arquivo para abrir uma imagem ou foto (ele permite pegar fotos ou imagens do facebook, flickr, picasa e outros) ou começar um arquivo em branco para criar sua imagem.

E recomendavel fazer algumas video aulas se ainda não conhece o programa,vai facilitar a utiliação.
Depois que abrir a imagem é só começar testar as ferramentas e usar a criatividade nas suas fotos ou imagens para usar no blog. Ele possui todos sos recursos necessarios para uma boa edição. Assim poderá alterar o tamanho, cor das letras e etc...

Tambem disponibiliza outro detalhe interessante são os últimos botões da barra de ferramentas que permitem desfazer a ultima ação. Como todos os outros sites depois que terminar é só clicar no menu file
"save image", e salvar a imagem no seu computador, depois é só usar utiliza-la em seu blog ou site como quiser.
.

Até a Proxima Pessoal!

Contador de visitas gratis

Contador de visitas gratis para blog
Visitantes Online e Visitantes Total

Histats feature Video Demonstrativo

Entre na pagina de registro do site http://www.histats.com e preencha seus dados: e-mail, senha, nome, sobrenome, configura também o fuso horário quando fiz o tutorial já apareceu no horário certo, mas se não estiver é só procurar sua cidade na lista ou algum que seja do mesmo fuso horário da sua região.

Após terminar você verá uma mensagem dizendo para verificar seu e-mail: REGISTRATION DONE ! please check your mailbox! Ou seja, o site enviou um email para você confirmar seu cadastro então veja sua caixa de email e clique no link de confirmação. Agora você já pode fazer login no site histats e configurar seu blog nele para pegar o código do contador de visitantes.

Clique em Add a website, e preencha com as informações do seu blog, configure o fuso horário, com quantas visitas o seu contador vai iniciar, ou seja não precisa começar do zero e outras coisas. Queremos chamar sua atenção para o final da pagina, veja: Stats visibility essa é a opção de quem pode ver suas estatísticas só você (site stats are visible only to you) ou qualquer pessoa que clicar no contador (site stats are visible to everyone).

Depois de criado o contador você poderá configurar essa privacidade nas estatísticas de forma bem mais detalhada clicando no cadeado, mas vamos agora colocar o código do contador no seu blog clique no item estatísticas.

Veja que aparece em destaque o item do menu counter CODE, entrando nesta pagina você poderá escolher seu modelo do contador clique em add new counter e aparecerão muitos modelos de contador.

Quando clicar em um deles terá as opções de quais dados deseja mostrar como, por exemplo, total de visitas, visitantes online, visitantes naquele dia e outras, então selecionem as que desejarem e clique em save.

Após isso você volta a pagina de contador e já tem mais uma opção, ou seja, aquele contador que acabamos de seleciona, clique nele e depois copie o código que aparecerá logo abaixo do contador.

Para colocar no seu blog é simples, cole o código em um gadget de html/javascript e pronto, agora seu blog tem um novo contador de visitas. Naturalmente você poderá trocar o modelo ou as configurações de privacidade quantas vezes desejar até que seu contador fique do jeito que você quer.

Como Criar um blog

Como Criar um blog no Bogger

Para começar o seu blog eu indico usar o site Blogger do Google"pra mim tem uma interface facil de trabalhar"O melhor pra criar e administrar e configurar, blogspot faz alusão ao endereço dos blogs criados nele, mas se trata do mesmo dominio ou site. Outro site muito usado por blogueiros é o Wordpress, eu não Gosto achei muito ruim de se adaptar;mas vou mostrar hoje como fazer seu blog usando o Blogger,

1-Entre no site do Blogger e clique em criar blog

2-Sera necessario criar uma conta Google "a conta é Gratuita", Se você já tiver Orkut ou Gmail é só acesse-la fazendo login com seu endereço de email e senha que usa no Orkut.

3-Apos o 2° passo concluido"passemos para o3° Escolhendo um titulo no campo indicado "Título do blog" e um endereço no espaço Endereço do blog "URL", o que digitar aqui será o link do seu blog, por exemplo: http://www.dicaspersonalblog.blogspot.com,"Em algumas ocasioes e necessario testar alguns titulos pra verificação,pois pode ocorrer de alguem ja ter criado um blog com o titulo que voçe tem em mente",Então escolha um nome e clique m verificar disponibilidade. Depois de achar um endereço disponível digite os caracteres de verificação e clique em continuar.

4-Em seguida escolha um modelo para o seu blog, essa será a aparência dele depois de pronto,escolha um modelo e clique em continuar.

5-Concluido isto o seu blog esta pronto, você já pode começar a configura-lo, clique em começar a usar o blog,e sera direcionado a pagina de postagens,E ali que sempre criara seus textos para a sua Home Page
e fara as sus atualizações.

Agora é so começar a postar.

Blog Já

Gadget com Botões Flutuantes de Redes Sociais no Blogger

transformar imagem em favicon

Pássaro do Twitter

Menu Horizontal DropDown

Mostrar resumo da postagem

Mostrar resumo da postagem

Dividir Cabeçalho do blog em 2 Colunas

Dividir Cabeçalho do Blogger em 2

Colocar o Pássaro do Twitter

Contador de visitas gratis

Como Criar um blog

Arquivo do blog