Duvidas Blogger

Como criar um menu com submenus para seu blogger (Dropdown)

2013-05-20T21:08:00.001-03:00

Atenção: Os códigos utilizados para a implementação deste menu pertencem ao blog Visual dicas.

Menu drop-down, o que é?

Para organizar um blog que possui muitas categorias, páginas e sub-categorias, nada melhor do que criar um menu drop down para apresentar aos seus leitores uma lista com vários links de forma que aparecerão somente quando ativado, ou seja, quando alguém passar o mouse sobre ele.

(blog teste)

Criando o menu drop-down no Blogger

Para criar o seu menu drop-down no seu blog, siga com bastante cuidado as etapas abaixo:

Atenção 1: Se você utiliza um template personalizado, esta dica poderá não funcionar, pois o seu blog já deve possuir um sistema próprio de menu… Para verificar isso, crie um novo blog de teste utilizando o mesmo template do seu blog original e siga as instruções deste tutorial. Caso o menu funcione corretamente, acrescente-o no seu blog original…
Atenção 2: Antes de fazer qualquer modificação no modelo e nas páginas HTML, faça um backup completo primeiro.

Etapa 1 - Adicionar códigos CSS no painel do Blogger
Acesse o painel do Blogger www.blogger.com e faça o login…
Entre em [Modelo] e clique no botão [Personalizar].

No menu esquerdo, clique em [Avançado]. No menu ao lado, escolha [Adicionar CSS].

Copie o código abaixo:

/*----- CSS Drop Down Menu – Visual Dicas ----*/

#mbtnavbar {
    background: #060505;
    width: auto;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
} /*----- CSS Drop Down Menu - Visual Dicas ----*/

Cole o código no campo [Adicionar CSS personalizado] e clique no botão [Aplicar ao blog].

Agora clique no link [Visualizar blog]… Nada de diferente deverá acontecer com ele nesta fase… Se tudo ocorrer bem, clique no link [Voltar para o Blogger].

Etapa 2 – Criar e inserir o “gadget” do menu

No painel do Blogger, acesse [Layout] e clique em [Adicionar um Gadget].

Escolha [HTML/JavaScript].

Copie o código:

<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='LINK da Home'>Home</a>
        </li>
        <li>
           <a href='LINK_2'>TITULO</a>
            <ul>
                <li><a href='SUBLINK_1'>SUBTITULO</a></li>
                <li><a href='SUBLINK_2'>SUBTITULO</a></li>
                <li><a href='SUBLINK_3'>SUBTITULO</a></li>
              </ul>
        </li>
       <li>
           <a href='LINK_2'>TITULO_2</a>
            <ul>
                <li><a href='SUBLINK_1'>SUBTITULO</a></li>
                <li><a href='SUBLINK_2'>SUBTITULO</a></li>
                <li><a href='SUBLINK_3'>SUBTITULO</a></li>
              </ul>
        </li>
<li>
           <a href='LINK_3'>TITULO_3</a>
            <ul>
                <li><a href='SUBLINK_1'>SUBTITULO</a></li>
                <li><a href='SUBLINK_2'>SUBTITULO</a></li>
                <li><a href='SUBLINK_3'>SUBTITULO</a></li>
              </ul>
        </li>
      </ul>
    </div>

Cole no campo [Conteúdo] e o campo [Título] em branco. Clique no botão [Salvar].

Depois altere os campos marcados em negrito, conforme descrito na ETAPA 4.

Etapa 3 – Posicione o menu corretamente no blog

Visualize o blog agora. Verifique como ficou o layout e se desejar, posicione o menu no início da página, logo abaixo do cabeçalho.
Observe no nosso exemplo, que o novo menu esta posicionado na lateral do blog, onde iremos mudar a sua posição para o topo da página, abaixo do cabeçalho.

De novo no painel, acesse [Layout] e posicione o gadget do menu (HTML/JavaScript)logo abaixo do Cabeçalho… Clique no botão [Salvar organização].

ATENÇÃO: Se existir um outro menu no local, com o nome de Página, arraste-o para outra posição (na lateral, por exemplo), ou o exclua definitivamente.

Veja então como ficou o nosso exemplo… Veja que colocamos o gadget Páginas na lateral do blog neste momento.

Etapa 4 – Preencha os campos dos Títulos e Subtítulos

No painel do Blogger, volte para a edição do gadget em [Layout]. Com muita paciência e de acordo com a estrutura que você deseja inserir ao seu blog, altere os campos do código… Para adicionar mais títulos ou subtítulos é só seguir a ordem lógica do código.

Lembre-se que os menus do Blogger são manuais, e toda vez que você precisar adicionar um novo item, será necessário fazer a edição no gadget do menu…
No nosso exemplo vamos deixar o menu com 2 títulos: Biografia e Álbuns (veja o exemplo abaixo). Substitua os campos em negrito mostrados na Etapa 2 (links, títulos e subtítulo).
Nesta etapa, preste bem atenção e observe sempre se os links estão inseridos entre “aspas”, que pode ser aspas simples ( ‘ link ‘ ) ou aspas dupla ( “ link “). Depois de substituídos todos os campos desejados, clique no botão [Salvar].
Exemplo (não copie):

<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='http://blog.blogspot.com.br/'>INÍCIO</a>
        </li>
        <li> <a href='http://blog.blogspot.com.br/p/artistas.html'>BIOGRAFIA</a>
            <ul>
                <li><a href='http://blog.blogspot.com.br/2011/12/acdc.html'>AC/DC</a></li>
                <li><a href='blog.blogspot.com.br/2012/02/black-sabbath.html'>Black Sabbath</a></li>
                <li><a href='http://blog.blogspot.com.br/2010/08/deep-purple.html'>Deep Purple</a></li>
                <li><a
href='http://blog.blogspot.com.br/2009/07/led-zeppelin_19.html'>Led Zeppelin</a></li>
                <li><a
href='http://visualmusicas.blogspot.com.br/2011/06/who.html'>The Who</a></li>

                </ul> </li>
                    </ul> </li>
      </ul>
</div>

Veja abaixo como ficou o exemplo:

Links para categorias ou marcadores

Para inserir itens como categorias (marcadores), por exemplo, insira links que possuem sempre a sequência:

http://Nome_do_seu_blog/search/label/Nome_da_categoria
Veja o exemplo abaixo da categoria Led Zeppelin do nosso blog de exemplo.

http://blog/search/label/Led%20Zeppelin

Obs.: Substitua sempre o espaço (como no exemplo Led (espaço) Zeppelin), por %20, ficando o nome da categoria da seguinte forma: Led%20Zeppelin. Mantenha sempre as letras maiúsculas e minúsculas como definido o marcador (“case sensitive”).

Etapa 5 – Alterar cores do menu multinível
Para alterar as cores do menu, volte para o painel do Blogger e acesse [Modelo]. Depois clique no botão [Personalizar].

No menu esquerdo, clique em [Avançado]. No menu ao lado, escolha [Adicionar CSS].

Alterar #060505 para mudar a cor de fundo do menu principal.

Alterar #BF0100 para mudar o fundo de um guia sobre foco do mouse.

Alterar #BF0100 para mudar a cor de fundo do menu drop-down.

Alterar #060505 para mudar a cor de fundo de menu drop-down no mouse hover.

Depois de alterado, clique no botão [Aplicar ao blog].
No nosso exemplo, alteramos a cor do fundo de menu de #060505 para #4b4b4b, e veja como ficou abaixo. Faça os testes e deixe o menu da maneira que goste mais.

Excluindo o seu menu drop down

Se você não gostou dos efeitos deste menu multinível, ou se ele não funcionou adequadamente, é bem simples excluí-lo. Basta entrar no painel do Blogger e excluir o gadget HTML/JavaScript que você criou em [Layout] e apagar o código CSS que você colou em [Modelo].
Caso isto não resolva, faça o upload dos backups que você fez .
Teste o menu drop down em todos os navegadores mais utilizados (Chrome, Firefox, IE e Opera). Nos meus testes o menu funciona bem em todos browsers, com alguns problemas no Internet Explorer 8.0 (no 9.0 funciona normal).

O Google pode deletar meu blog? (blogger)

2013-05-19T19:43:00.000-03:00

A resposta da pergunta do título deste post é SIM! Mas o Google não deleta blogs indiscriminadamente e sem motivos (don’t be evil, lembra?). Se o seu blog foi apagado/deletado/excluído, com certeza o Google teve alguma razão para fazê-lo.

Antes de continuarmos com o assunto do post, quero deixar claro que blogs excluídos pelo Google não podem ser recuperados, não importa o quanto o dono do blog chore, esperneie, xingue ou ameace.

Por quais motivos o meu blog pode ser deletado?

Basicamente, a maioria dos casos de blogs apagados, se dá por conta do blogueiro não ter respeitado os Termos de Serviço para uso do Blogger ou a Política de Conteúdo do Blogger, lendo ambos você já estará bem informado sobre o que pode e o que não pode se fazer no Blogger e quais as punições as quais você está sujeito se descumprir as regras.

Como tem muito blogueiro que desrespeita as políticas de conteúdo do Blogger sem nem se dar conta disso, vou fazer um breve resumo das mesmas, se você conhece e entende bem as políticas de conteúdo nem precisa se preocupar em ler este post:

Conteúdo Adulto: você pode postar conteúdo adulto tranquilamente, inclusive conteúdo explicito, mas deve observar algumas restrições, como por exemplo o fato do seu blog não poder ser destinado a obtenção de lucros com este tipo de conteúdo. Algumas pessoas entendem esta restrição como uma proibição a monetização de blogs de conteúdo adulto.

Abuso infantil: quaisquer blogs que vinculem imagens, vídeos ou material que seja caracterizado como Abuso Infantil (pornografia infantil, pedofilia, etc) serão imediatamente deletados assim que descobertos. O Google tem uma política de tolerância zero nesses casos.

Incitação ao ódio ou à intolerância / Conteúdo grosseiro / Violência: não use seu blog para disseminar idéias de ódio ou intolerância por causa de fatores como raça, etnia, religião, deficiência, sexo, idade, situação militar ou orientação/identidade sexual. Não use o blog para divulgar ou incitar a violência e nem use o seu blog para postar conteúdo grosseiro, cujo único objetivo seja chocar ou ofender outrem.

Direitos autorais: aqui está um dos maiores motivos de deleção de blogs pelo Google. Muitos blogs que oferecem links para download de conteúdo protegidos por copyright tem sido deletados nos últimos tempos. São os famosos blogs de download ou pirataria. E não adianta levar ao Google a desculpa de que tem muita gente fazendo a mesma coisa que você e postando conteúdo ilegal.

Informações pessoais ou confidenciais e questões de identidade: é proibido usar o Blogger para divulgar informações pessoais ou confidenciais de outras pessoas, como por exemplo números de cartão de crédito. Também é proibido usar o Blogger para forjar a indentidade de outra pessoa ou órgão de forma que o objetivo de tal blogs seja claramente confundir os visitantes ou denegrir e prejudicar esta pessoa ou órgão.

Spam : nunca use o Blogger para fazer spam, como por exemplo criar blogs com o único intuito de linkar outros sites a fim de beneficiá-los nos mecanismos de pesquisa.

Malware e Vírus: não use seu blog para disseminar malwares e vírus. Se você está com problemas relacionados a vírus e malware no seu blog, tente resolver o problema ou você pode ter o seu blog deletado.

Excluir blogs infratores é necessário, já que o Google não pode hospedar blogs criminosos, pois isto prejudicaria a imagem da empresa. Obviamente, nem todos os casos de blogs deletados parecem justos e alguns realmente são mal conduzidos pelo Google e prejudicam blogueiros sérios e comprometidos com o seu conteúdo

Se o seu blog foi deletado e você não consegue entender o porquê, ou se você acha que está desrespeitando alguma regra do Blogger e tem receio que o seu blog seja deletado, poste suas dúvidas no Fórum do Blogger onde tem muita gente disposta a ajudar.

Criando um app para seu blog, android ou iphone

2013-04-11T19:29:00.001-03:00

Atualmente sem duvidas há muita gente que tem na sua mão um Smartphone ou tablet a todo momento. É uma verdadeira mão na roda em muitas ocasiões, ter um aplicativo para Iphone ou Android do seu blog, sem duvida será de grande ajuda para que seu blog seja mais reconhecido, então vamos para a criação?

Desenvolver um aplicativo desse é muito complicado para alguns, exige conhecimento em programação e tempo, porém graças ao site Universo mobi, esse processo fica muito mais fácil e ao alcance de qualquer um.

Criação

Após entrar no site,clique em entrar,e depois entrar com o Facebook, ou se cadastre.

Logo em seguida, clique em Novo app, e personalize ele como quiser.

Depois de cadastrar suas redes sociais, feeds como na imagem a baixo,chegou a hora de finalizar o aplicativo.

Finalizando

Bom, depois de colocar as redes sociais, agora só clicar em continuar e ir para a próxima pagina, que é a configuração básica do seu app.

Depois de feito isso, o único trabalho seu vai ser divulgar o QR code do seu app, ou link.

Acompanhe o Duvidas Blogger no seu Smartphone.

Dicas para acertar no visual do seu blog

2013-04-06T21:22:00.000-03:00

Quando se trata de design, muitos se preocupam, afinal, escolher o template, cor, gadgets ou widgets, não é uma tarefa nada fácil quando se quer um blog de sucesso e que agrade seus visitantes.

Escolha do Template

Bom, primeiramente você deve saber qual é ou será o nicho do seu blog, pois para cada nicho há um estilo de template diferente, se você optar por uma coisa mais profissional, eu recomendo que escolha a cor branca como principal, e abuse das cores azul, vermelha, laranja e verde para os detalhes.

Conteúdo > Visual

Não se esqueça de que o conteúdo é mais importante, por exemplo, eu mesmo já vi vários blogs com visuais fantásticos, porém com pouco conteúdo de qualidade, como também já vi sites que desvalorizam o “bonito” e investe mais no conteúdo, isso depende de cada um, mas se quer um blog de sucesso com certeza optara por ter mais conteúdo e menos detalhes.

Tem como ter um visual bonito e profissional ao mesmo tempo?

Há muitos blogs, famosos com conteúdos ótimos e com o visual excelente como o Ferramentas Blog, que eu pessoalmente, sou muito fã.

Blog profissional e bonito ao mesmo tempo

Para um blog ser profissional e bonito ao mesmo tempo, não é preciso apenas investir no Template, lembre-se sempre de verificar os Gadgets/Widgets para ver se é mesmo necessário, e também não se esqueça de criar artigos de qualidade e bem estruturados, sem erros de português ou qualquer outra coisa do tipo, lembrando também que na hora de utilizar imagens nos artigos do blog, pesquise muito, e sempre de preferencia as imagens que melhor se identifica com o texto, a boa qualidade da imagem também é de grande ajuda.

Procure sempre ajuda em outros blogs

Se você é um blogueiro iniciante, eu recomendo muito que procure em outros blogs do mesmo nicho que o seu para ter ideia de como irá desenvolver o template e os artigos do seu blog.

Estas dicas podem ser de grande ajuda, más não se esqueça, quanto mais conhecimento melhor, portanto procure sempre outras dicas semelhantes.

Estamos de volta?

2013-03-31T17:27:00.000-03:00

Olá caros leitores do Duvidas Blogger, como vocês já devem ter percebidos eu "abandonei" o blog a um tempo atrás, motivos? muitos, mas vamos lá.
Durante esse tempo estive pesquisando muito, e aprendendo, e como o movimento no blog cresceu, vou voltar a publicar artigos aqui, porém dessa vez com artigos mais diretos, e que não cansam tanto os leitores.

Agradeço desde já.

Personalizando o Gadget Postagens populares do blogger

2012-09-14T01:58:00.000-03:00

Recentemente redesenhei o gadget de postagens populares do meu blog e eu adicionei uma simpática forma de barras de cores, a pedido de um leitor do blog, hoje eu gostaria de compartilhar o truque que eu apliquei.

Como adicionar gadget Postagens populares numerado e com barra de cores?

Para adicionar este truque, primeiro você deve remover o gadget de postagens populares, se você tiver no seu blog.

Apos retirar o gadget postagens populares do seu blog entre em Modelo depois Editar HTML

Procure pelo seguinte código:

/* Variable definitions
====================

Abaixo do código acima cole o seguinte:

Obs. Esse código é para os modelos clássicos do blogger

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ff4c54"/>
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ff764c"/>
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffde4c"/>
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#c7f25f"/>
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#33c9f7"/>
</Group>

No caso de o seu template ser um modelo antigo (não o modelo clássico do blogger) cole o seguinte código:

<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#fa4242">
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ee6107">
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ff00ff">
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#ffff00">
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">

Agora antes de ]]></b:skin> cole o seguinte:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;}
#PopularPosts1 ul li:first-child:after{content:"1";}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
#PopularPosts1 ul li:first-child + li:after{content:"2";}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

Agora procure o seguinte: <b:section-contents id='sidebar-right-1'> (o um código similar) e logo abaixo cole o seguinte:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuudZIfIvSkz6SYRl5gWKx6TqqFVfslEy6KYCzfwb3pm-UjdURzFuJqEHqqUJXiuWJ9SIK08nv6mUFs2QcxT4k_N7u0zMSCIDhlPgYksajvOFTANWzlQ_ki7Wm5J2cVm4Tpmr67MAPqk/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuudZIfIvSkz6SYRl5gWKx6TqqFVfslEy6KYCzfwb3pm-UjdURzFuJqEHqqUJXiuWJ9SIK08nv6mUFs2QcxT4k_N7u0zMSCIDhlPgYksajvOFTANWzlQ_ki7Wm5J2cVm4Tpmr67MAPqk/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Agora no gadget de postagens populares seleciona o numero de postagens que deseja exibir (recomendo não mas do que 5).

Por último, se você quiser mudar as cores de cada barra é simples...

Entre em ► Modelo ► Personalizar ► Avançado ► PopularPosts Backgrounds

...e então selecione as cores que desejar.

Qualquer duvida use a área de comentários

Google Analytics - Entenda um pouco mais sobre esta ferramenta

2012-09-09T15:22:00.000-03:00

Por que devo utilizar o Google analytics?

O Google Analytics oferece um acompanhamento eficaz para qualquer pessoa que tenha um site na web, independentemente de ser um website pequeno de passatempo ou uma grande empresa on-line. Ele é umas das mais eficazes soluções de análise da web no mercado - e é gratuito. Além disso, os clientes do Google AdWords podem até mesmo ver seus dados do Analytics em suas contas do AdWords - incluímos uma guia com relatórios e configurações do Analytics. Basta ir até Relatórios>Google Analytics. O Google Analytics também codifica automaticamente as campanhas do AdWords para oferecer um acompanhamento detalhado, e os anunciantes do AdWords se beneficiam de visualizações de páginas ilimitadas. Veja a lista completa de vantagens que o Google Analytics oferece aqui .

Para começar a usar o Google Analytics, visite a página inicial do Analystics, se tiver dúvidas, leia a seguir respostas a dúvidas de diferentes perfis de usuário.

Para executivos:

Quais iniciativas de marketing são mais eficazes?
Qual tendência ou padrão de tráfego é mais adequado para meus websites?
Quais tipos de cliente e segmento de cliente são mais lucrativos?

Para profissionais de marketing:

De onde vêm meus visitantes e o que eles fazem em meu site?
Como meu website pode converter mais visitantes em clientes?
Quais palavras-chave atraem clientes em potencial e os levam a conversões?
Que tipo de anúncio on-line é mais eficaz?

Para desenvolvedores de conteúdo e da web:

Por que tantas pessoas saem de meu site sem fazer o que eu quero?
Existem elementos de design do website que estão afastando os visitantes?
Por qual conteúdo do site as pessoas se interessam mais?

O que é o Google Analytics?

O Google Analytics mostra como as pessoas encontraram seu site, como o exploraram e como você pode melhorar a experiência dos visitantes. Com essas informações, você pode melhorar o retorno do investimento de seu website, aumentar as conversões e ganhar mais dinheiro na web. Com este guia, você pode se familiarizar com os principais recursos do Google Analytics. Para começar a usar o Google Analytics, faça login em sua Conta do Google.

Você não tem uma conta do Google Analytics?

Faça login agora

Não possui uma Conta do Google?

Crie uma hoje

Como o Google Analytics pode me ajudar?

O Google Analytics informa como os visitantes encontraram seu site e como eles interagem com ele. Você poderá comparar o comportamento e a lucratividade dos visitantes, que vieram por conta de cada um dos seus anúncios, palavras-chave, mecanismos de pesquisa e e-mails, e obter insights valiosos sobre como melhorar o conteúdo e a aparência do seu site. O Google Analytics monitora seu site, do clique à conversão, seja ele grande ou pequeno, e independente de você direcionar o tráfego para ele com pesquisa não-paga, sites parceiros, AdWords ou outros programas de custo por clique.

Para os usuários do AdWords especialmente, o Google Analytics fornecerá as informações úteis que você pode usar para aumentar o retorno do seu investimento, por meio do monitoramento dos dados de custo de todas as suas campanhas e da combinação desses dados com as informações de conversão, página por página. O Google Analytics importa automaticamente os dados de custo do AdWords, para que você possa acompanhar a eficácia das suas campanhas do AdWords, e codifica automaticamente os URLs de destino do AdWords para controlar as taxas de conversão da campanha e da palavra-chave com pouco esforço da sua parte!

Fonte: Google.com

Como usar a Meta tag idioma no blog!

2012-09-04T19:25:00.000-03:00

Um fator importante para o bom posicionamento do blog no seu pais de origem é declarar o principal idioma usado em sua página, mas o que muitos não sabem é: Como declarar o idioma usado no meu blog?.

Além de Mostrar ao Google que seu site está na linguagem Pt-br ( Português ), você ainda dará um grande passo para o posicionamento do seu site aqui no brasil, e melhores posicionamentos para buscas específicas por localidades e linguagem feitas de outros países.

Isso geralmente acontece com sites que possuem um dominio .com ou .net como é o exemplo do meu blog, www.duvidasblogger.net que originalmente é considerado um dominio EN em ingles ou mundial.

Utilizando a Meta Tag!

Vá até o HTML do seu blog, e procure a tag </title> e abaixo dela coloque o seguinte código:

Você pode utilizar também EN para Inglês e ES para espanhol.

Template Elegant Speed

2012-09-03T21:48:00.002-03:00

Apresento a vocês o meu mais novo trabalho, o template que eu batizei de Elegant speed, ou Velocidade elegante, não sei da onde veio este nome, mas o template ficou muito bom.

Plataforma: Blogger

Demo / Download

Uol Host - Criando um e-mail com seu domínio

2012-09-03T19:28:00.000-03:00

Se você quer deixar seu trabalho na internet muito mais profissional, ou simplesmente quer ter um e mail personalizado, este serviço da Uol lhe ajudará muito.

Requisitos

Para utilizar esta ferramenta existe apenas um requisito, Você precisa ter um domínio registrado na Uol Host, mas caso você não tenha, é simples criar um, este artigo do Dicas Blogger mostrará como criar e configurar seu domínio na Uol Host!

Como registrar e configurar um domínio na uol host - Dicas Blogger

Criando um e mail personalizado

Entre no Painel de controle da sua conta Uol.

Agora, dessa um pouco a página e no menu "Produtos Contratados" selecione a Opção "Criar/Administrar conta de e-mail grátis"

Depois de feito isto, abrira uma página de administração dos seus e-mails Uol, clique em criar caixa postal e preencha as informações necessárias.

Notas:
Para acessar seu e-mail, utilize o seguinte link: mail.seudominio.com Modifique apenas o seudominio.com
. Exemplo de e-mail personalizado mail.duvidasblogger.net

Existe um limite de e-mails grátis por domínio, que atualmente é (1). Mas você pode contratar mais entradas para você criar quantos e-mails quiser.

Como colocar Artigo recomendado no Blog.

2012-08-31T09:48:00.001-03:00

Já publiquei aqui algumas formas para deixar um leitor mais tempo no seu blog, como:

Desta vês irei publicar " Como colocar Artigo recomendado no blog, para atender o pedido de um leitor.

Entre no layout do seu blog e adicione um gadget chamado html/javascript.
Agora adicione o seguinte código no gadget.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=1;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Nomeie como quiser, mas estarei deixando logo abaixo 3 nomes bons para você escolher.

Artigo recomendado.
Leia também.
Tente algo novo!

A importância das redes sociais em um blog.

2012-08-30T21:37:00.000-03:00

Atualmente as redes sociais fazem parte do dia a dia dos internautas de todo o mundo, com elas podemos compartilhar nossos interesses pessoais e partir daí conhecer novas pessoas e manter contato com elas facilmente. Apesar de ser na maioria das vezes uma forma de diversão, as mídias sociais ganharam destaque na sociedade com o passar do tempo e agora praticamente fazem parte da vida de uma grande fatia dos seres humanos.

Na blogosfera não é diferente, criar páginas nas redes sociais para um blog é quase que uma obrigação. É certo que se você ignorar o poder das redes sociais, seu blog estará destinado ao fracasso.

A importancia das redes sociais no blog.

Ignorar as redes sociais pode ser um erro fatal entre blogueiros iniciantes, eu por exemplo, quando criei meu primeiro blog (Sobre hacker) ignorei completamente as redes sociais, achava perda de tempo, a conclusão disso você ja deve imaginar, recebia poucas visitas, e as poucas visitas que recebia não era visitas de qualidade, ou seja, aquele leitor que passa no seu blog, lê um artigo e vai embora.

Portanto não cometa o mesmo erro que eu: não ache que da noite para o dia, irá aparecer diversos leitores assíduos que visitarão seu blog diariamente para ler os novos artigos. Isso é impossível. Você precisa ir atrás dos seus leitores, precisa oferecer seu conteúdo de uma maneira natural para eles, e com o tempo você conseguirá leitores fiéis.

Seguidores e Fãs - Leitores fiéis.

Os usuários que seguem seu blog nas redes sociais são público garantido, pois eles terão acesso ao seu conteúdo diretamente nas páginas que eles mais acessam.

Quais redes sociais devo utilizar?

Ter uma página em redes sociais é bom, você não deve sair criando páginas em qualquer rede social que veja, procure pesquisar quais redes sociais tem mais públicos interessados em conteúdo do seu nicho.

Veja abaixo as redes sociais que eu utilizo e recomendo.

Facebook
Twitter
Google Plus
LinkedIn (opicional)

Erro 404 - Entenda um pouco mais sobre isso.

2012-08-30T00:21:00.001-03:00

O que é Erro 404?

O erro 404 é um código de resposta HTTP que indica que o cliente pôde comunicar com o servidor, mas ou o servidor não pôde encontrar o que foi pedido, ou foi configurado para não cumprir o pedido e não revelar a razão ou a página não existe mais. Eles não devem ser confundidos com outros erros nos quais uma conexão para o servidor de destino não pôde ser feita.

Como personalizo a Página "Erro 404 do meu blogger" ?

1º – Acesse o seu painel Blogger e clique na guia configurações.
2º – Depois clique na sub-guia Preferências de pesquisa.
3º – Depois, clique em Editar na caixa “Página não encontrada” personalizada.
4º – Agora, digite o texto ou código de caixa de erro. Você pode usar html também!

Como crio uma página de "Erro 404" no Wordpress?

Como criar uma página de erro 404 simples para seu wordpress. - Escola WP(link externo)

É importantíssimo que seu blog ou site tenha uma página de Erro 404 personalizada, pois isso pode fazer você perder muitas visitas.

Créditos:

Definição de erro 404 - Wikipedia.
Como criar uma página de erro 404 no Wordpress - Escola WP

Como redirecionar um site para outro.

2012-08-29T22:38:00.000-03:00

Redirecionar páginas pode ser muito útil, você pode querer redirecionar um blog para outro, redirecionar a página de Erro 404 do seu blog para outra página, ou simplesmente redirecionar um domínio para o seu blog.

Como redirecionar?

é muito fácil redirecionar seu blog,site ou página para outra, apenas coloque o código a seguir no HTML da sua página.

Apenas substitua a parte destacada em laranja pela url do seu blog.

Esta dica é muito fácil e não tem erro.

Template - DB 4.0

2012-08-29T10:56:00.000-03:00

Template Duvidas Blogger 4.0

Características:

Visual Clean.
Caixa de pesquisa no Header Personalizada.
2 Colunas laterais e 3 no rodapé.
Otimizado para SEO.
Desenvolvido em HTML5.
Personalização do Jump Break.
Gadget flutuante com botões de compartilhamento.
Floating NextPrev ja instalado.

Ótimo template, que ficou no nosso blog apenas 3 dias, se você deseja ter identidade visual este template é perfeito, lembrando que ele é totalmente personalizável.

Download

Duvidas Blogger 5.0

2012-08-28T23:48:00.000-03:00

Ufa! Depois de alguns dias editando,procurando recursos, hacks e muitas outras coisas terminei o novo template do Duvidas Blogger.

O que há de novo no Template?

. Template otimizado para SEO.
. Desenvolvido em HTML5.
. Design Clean e intuitivo.
. Muito mais espaço para conteúdo.
. Tempo de carregamento de página 4.82s (2,35 segundos mais rápido que o ultimo template)

E vocês o que acharam do nosso novo visual?

Floating NextPrev - Setas de navegação no Blogger

2012-08-28T10:03:00.001-03:00

Não é fácil manter os usuários conectados em uma página, é uma tarefa difícil e exige dedicação do blogueiro para encontrar formas de conquistar e prender cada visitante em seu blog.

Uma nova forma interessante para melhorar esse tempo de permanência dos usuários foi desenvolvido peloClaudio Sanches do Ferramentas Blog, o plugin Floating NextPrev para WordPress, todavia o Claudio encontrou algumas dificuldades e achou melhor desenvolver o plugin apenas para WordPress. Como eu adoro desafios, logo fui procurar alguma solução para rodar o plugin no Blogger, e consegui!

Peguei um javascript desenvolvido pelo Dicas para Blogs, adaptei para funcionar junto com o Floating NextPrev e depois de muito trabalho o resultado foi positivo!

Plugin em funcionamento no Blogger

Antes de ensinar como colocar os botões de navegação no seu blog, quero deixar bem claro que todo o sistema foi desenvolvido pelo Claudio Sanches, apenas adaptei o código para funcionar no Blogger.

Siga o tutorial:

1) Faça login no Blogger, entre em “Modelo” – > “Editar HTML”. Depois marque a caixa “Expandir modelos de widgets”;

2) Procure (Ctrl + f) por ]]></b:skin> e cole o seguinte código logo ABAIXO da tag encontrada:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var alts = jQuery.noConflict();
alts(document).ready(function(){
var newerLink = alts(&quot;a.blog-pager-newer-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-newer-link2&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = alts(&quot;a.blog-pager-newer-link2&quot;).text();
alts(&quot;a.blog-pager-newer-link2&quot;).text(newerLinkTitle);
});
var olderLink = alts(&quot;a.blog-pager-older-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-older-link2&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = alts(&quot;a.blog-pager-older-link2&quot;).text();
alts(&quot;a.blog-pager-older-link2&quot;).text(olderLinkTitle);//rgt
});
});

var fnp = jQuery.noConflict();
fnp(document).ready(function(){

    fnp(&quot;.fnp-previous&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-10
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });
    fnp(&quot;.fnp-previous&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-400
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().animate({
            opacity:0},500)
    });fnp(&quot;.fnp-next&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-10
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });fnp(&quot;.fnp-next&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-400
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().animate({
            opacity:0
        },500);
    });
});
</script>
</b:if>

3) Procure (Ctrl + f) por <b:includable id=’nextprev’>, selecione todo o código a partir dessa tag até a primeira tag </b:includable>.
Ou seja, selecione isso:

<b:includable id='nextprev'>
...
</b:includable>

Obs.: Existem várias tags </b:includable>, é importante você selecionar até a primeira que você ver.

4) Substitua o código selecionado por:

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fnp-nav'>
<div class='blog-pager2' id='blog-pager2'>

<b:if cond='data:newerPageUrl'>
<div class='fnp-previous'><a rel='prev'><div class='fnp-box-left'><div class='fnp-content-left'><div class='fnp-content-border'/><div class='fnp-nav-title'>Anterior</div><div class='fnp-nav-link'><a class='blog-pager-newer-link2' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' style='display: block;'/></div></div></div></a></div>
</b:if>

<b:if cond='data:olderPageUrl'>
<div class='fnp-next'><a rel='next'><div class='fnp-box-right'><div class='fnp-content-right'><div class='fnp-content-border'/><div class='fnp-nav-title'>Próximo</div><div class='fnp-nav-link'><a class='blog-pager-older-link2' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/></div></div></div></a></div>
</b:if>

</div>
<div class='clear'/>
</div>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Página Anterior</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Próxima Página</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:if>
</b:includable>

Obs.: A segunda parte do código acima, depois de “<b:if cond=’data:blog.pageType != "item"’>” é o código de navegação de páginas do blog, essa parte pode ser editada como quiser, só não retire a condicional (if).

5) Agora devemos aplicar o estilo CSS. Escolha um dos modelos abaixo, abra o link e copie o código correspondente.

Abrir código

6) Agora procure por ]]></b:skin> e cole o código antes dessa tag encontrada.

7) Teste, se não deu nenhum erro e a página visualizada não sofreu alteração, salve. Os botões de navegação só serão vistos quando alguma postagem for aberta.

Créditos: Códigos Blog

Como hospedar arquivos no Google Sites

2012-08-28T08:12:00.001-03:00

Qualquer desenvolvedor ou blogueiro, precisa hospedar seus scripts,templates,hacks,arquivos em Pdf etc. Existe muitos sites que fazem este tipo de serviço, o DropBox e o Google sites são alguns deles.

Neste tutorial estarei encinando a como utilizar o Google Sites para Hospedar Arquivos.

Entre no Google sites, provavelmente você ja encontrará um site em sua conta, mas se não encontrar crie um.

Clique no site, e em seguida clique em "Nova Página" a direita no topo.

Na página seguinte, clique em “adicionar arquivo”. Procure o arquivo e faça o upload.

Seu arquivo irá aparecer numa espécie de pasta, com um link para download, Copie este link e pronto, o arquvio já esta hospedado e pronto para uso.

No caso de hospedagem de javascript para usar no Blogger

Clique com o botão direito do mouse e copie o link. Ele irá aparecer assim:

https://sites.google.com/site/duvidasblogger/scripts/codigo%201.txt?attredirects=0&d=1

Cole no html a parte que está em amarelo, ou seja, até a extensão( .txt, .js, .psd) etc.

Como mudar a cor da seleção de texto do blog

2012-08-26T13:11:00.002-03:00

Se você gosta de personalizar o seu template ao máximo, este tutorial sera essencial para você!

Esta dica é bem simples e não tem como errar.

Va até Design> Editar HTML e utilizando as teclas CTRL+F ache o seguinte código:

]]></b:skin>

E antes dessa tag cole este Código:

*::-moz-selection {

background:#ff9900;

color:#ffffff;

}

*::selection {

background:#ff9900;

color:#ffffff;

}

A parte negritada é a parte personalizável, utilize qualquer cor em HTML que você conhecer.

Como colocar música no blog

2012-08-25T23:56:00.001-03:00

Quem já leu alguns artigos meus aqui no Duvidas Blogger, sabe que eu pessoalmente adoro músicas, só que ninguém é obrigado a gostar daquilo que você gosta, muitas pessoas podem acessar seu blog no trabalho, e tocar aquele Rock no meio do trabalho não ficaria nada legal, mas isto é gosto de cada um, se você deseja colocar um Player de música em seu blog, já deixo a dica, não coloque players com Autoplay.

Existem diversas formas de se colocar um player de música no blog. Gosto daqueles serviços que já fazem tudo de forma automática, levando em conta que usabilidade é tudo.

Para colocar um player na sidebar, é preciso copiar o código fornecido pelo site, entrar em layout >elementos de página> adicionar gadget> e colar em html/javascript. Para colocar dentro do post, clique na aba editar html do editor de textos do Blogger e cole o código.

Player com upload de músicas

Esnips

Serviço de hospedagem de arquivos, com 5 GB de espaço. É necessário fazer cadastro e aguardar confirmação por email. Aceita upload de video, áudio, fotos e documentos.

Para áudio, faça o upload do arquivo e depois de pronto clique em "mp3 widgets"; daí é só escolher o modelo do seu player. Também podemos criar playlists com qualquer arquivo hospedado no site. Super completo!

Boomp3

O mais simples e prático. Basta fazer o upload do arquivo mp3, preencher os campos em branco e aguardar. Ao final aparecerá a opção de incluir o player no seu blog.

Players de rádios online

Rádio Jovem Pan
Basta copiar o código e colar no gadget html/javascript

Rádio Fusion

Clique em player, escolha o formato e a cor do player e copie o código.

Goear

Faça uma busca, escolha a música que você deseja colocar no seu blog e copie o código que está em this song in your site.

Tags: Musica no blogger, radio online, players , blog

Identidade Visual - O seu blog possui?

2012-08-25T19:41:00.000-03:00

No mundo dos Blogs, é essencial que seu blog tenha uma Identidade Visual, seu blog precisa ser único. Veja algumas dicas para deixar seu blog único!

Podemos ver um exemplo do que é identidade Visual:

Se você acompanha metablogs, com certeza sabe de qual blog é este Print acima.

Mas isto é só um exemplo de identidade visual, existe outras formas, como:

- A maneira de escrever artigos. Certos blogs são notados apenas pela forma que o autor adota em escrever artigos.

- Nome É essencial que um blog tenha um nome fácil de se Guardar, e que tenha algo a ver com o Nicho adotado, Como por exemplo o DB:

. Duvidas Blogger - Eu adotei este nome por ele ser exatamente sobre o Nicho do meu blog.

Como ter uma identidade visual?

Identidade visual é o conjunto de elementos formais que representa visualmente, e de forma sistematizada, um nome, ideia, produto, empresa, instituição ou serviço. Esse conjunto de elementos costuma ter como base o logótipo, um símbolo visual e conjunto de cores. - wikipedia.

- O trecho retirado do Wikipedia, é o que eu tentei explicar acima, mas como meu blog pode ter uma Identidade Visual?

-Templates: Aqui no Duvidas Blogger sempre optei por criar meus próprios Templates, partindo a partir de modelos originais do Blogger, utilizando a ferramentas Designer do Modelo, uma ferramentas muito útil e fácil de entender; Demoro cerca de 2-3 dicas para terminar meu projeto e mais alguns dias para configurar o Seo, adicionar Css, corrigir bugs entre outros erros.

Eu não consigo criar um Template e agora?

- Nem todos conseguem ter ideias relevantes para criar seus próprios themes(Templates), por isso existe os Web Designers, contratar um é muito fácil, e não pesa tanto no Bolso. ( Cerca de 100 Reais )

-Logotipo: Todo projeto tem que ter um Logotipo, existe ferramentas na internet que criam logotipos, ou você pode optar em criar logotipos utilizando editores de imagens como o famoso Photoshop, mas lembrando, para criar um logotipo sempre fique de olho nas cores do seu blog, utilize cores simples mas marcantes como Laranja,Azul e vermelho.

Pesquise em que seu blog pode melhorar, aqui no Duvidas Blogger temos ótimas dicas, caso você não encontre alguma dica que não procure fique tranquilo existe centenas de Metablogs, com certeza algum deve ter o que você deseja.

Estamos sempre esperando melhorar, se tiver alguma dica no que podemos melhorar, ou sugestões para artigos comente logo abaixo, Não custa nada :)

Motivo - Sem atualizações.

2012-08-25T14:31:00.000-03:00

Caro Leitores, vocês já devem ter percebido que estou a um certo tempo sem Postar.

Calma, Não desisti não.

O motivo deste tempo sem postar é por que estou preparando algumas mudanças pro Duvidas Blogger, uma delas é o novo Template.

Voltaremos a postar em poucos dias, Até o proximo Artigo!

Botões de compartilhamento com efeito hover para blogger.

2012-08-20T12:25:00.000-03:00

Os Botões de compartilhamento servem para facilitar o compartilhamento para o leitor, existem muitos widgets de compartilhamento, mais esse é com certeza um dos melhores e mais funcionais.

Como instalar widget social sharing / bookmarking?

Acesso ao Painel do Blogger > Design > guia Editar Html
Clique em Expandir Widgets
Procure pelo código ]]></b:skin>
colocar o código abaixo acima de ]]></b:skin>

#bt-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#bt-share ul li {display: inline;background:none;margin:0;padding:0;}
#bt-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl1Z0CDt2sddj3O1tHZKHOE4NcQ4pmug5rctQOvi6hiToAt_BBuqee28eACKyBF8T9HQnywr8-IaTa6tlDVZNpsRfXzhtA7EgUCzWZLSXVCF-eUSLLP0XAKFILxwZUnpAcyIERXGD4zHU0/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#bt-share ul li a.twitter    {background-position: -0px -0px;   }
#bt-share ul li a.twitter:hover {background-position: -0px -33px; }
#bt-share ul li a.facebook   {background-position: -32px -0px; }
#bt-share ul li a.facebook:hover {background-position: -32px -33px; }
#bt-share ul li a.stumbleupon {background-position: -64px -0px; }
#bt-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#bt-share ul li a.digg    {background-position: -192px -0px; }
#bt-share ul li a.digg:hover {background-position: -192px -33px;}
#bt-share ul li a.reddit   {background-position: -160px -0px; }
#bt-share ul li a.reddit:hover {background-position: -160px -33px;}
#bt-share ul li a.google   {background-position: -128px -0px; }
#bt-share ul li a.google:hover {background-position: -128px -33px;}
#bt-share ul li a.del-icio-us {background-position: -480px -0px; }
#bt-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#bt-share ul li a.mixx    {background-position: -96px -0px; }
#bt-share ul li a.mixx:hover {background-position: -96px -33px; }
#bt-share ul li a.technorati {background-position: -416px -0px; }
#bt-share ul li a.technorati:hover {background-position: -416px -33px;}
#bt-share ul li a.linkin   {background-position: -256px -0px; }
#bt-share ul li a.linkin:hover {background-position: -256px -33px;}
#bt-share ul li a.yahoobuzz {background-position: -448px -0px; }
#bt-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#bt-share ul li a.myspace   {background-position: -512px -0px; }
#bt-share ul li a.myspace:hover {background-position: -512px -33px;}
#bt-share ul li a.more    {background-position: -576px -0px; }
#bt-share ul li a.more:hover {background-position: -576px -33px;}

Segundo passo

Procure pelo código seguinte:

<div class='post-footer-line post-footer-line-1'>

Ou

<div class='post-footer'>

Cole logo apos um desses códigos o seguinte:

<b:if cond='data:blog.pageType == "item"'> <div id='bt-share'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li> <li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li> <li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li> <li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li> <li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li> <li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li> <li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li> <li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li> <li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li> <li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li> <li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li> </ul> </div> </b:if>

Salve e pronto!

Como colocar QR codes no blog ou site.

2012-08-16T12:18:00.000-03:00

Este é um artigo de um Blog estrangeiro espanhol, que eu acompanho o TechTastico, eu traduzi o artigo e vou disponibilizar a vocês:

O que são os códigos QR?

Os códigos QR são um sistema para guardar informações em um gráfico bimendisional, em poucas palavras é a "Evolução" dos códigos de barra, seu nome QR vem de Quick Response. Os Códigos QR são cada vez mais populares no Japão, de onde se origina, este código é mais popular que o Código de barra, Aqui vai um exemplo, o Seguinte código QR é a url do meu blog:

Se deseja criar seu próprio código QR aqui tem alguns sites que vão te permitir fazer-lo de uma forma muito fácil.

Gerador de Código QR- - Um site onde você pode digitar uma URL, um texto, um número de telefone ou um SMS para se tornar o código QR.
Gerador de código QR por Winksite - como o ex-lhe permite converter um código QR URL, um texto, um número de telefone ou um SMS, mas também aceita RSS para convertilos.
INVX - Gera on-line e Semacode código QR neste site só deve entrar o conteúdo de qualquer tipo irá fazer a conversão.
Google Chart API - API Google Chart permite criar códigos QR, mas só recomendo para os desenvolvedores.

Além disso, você deve saber que o código QR têm alguns limites quanto ao seu conteúdo.

Conteúdo digital: Max 7,089 caracteres
Conteúdo alfanumérico: máximo de 4.296 caracteres
Conteúdo binário (8 bits): máximo de 2953 bytes
Conteúdo em Kanji (caracteres japoneses): máximo de 1.817 caracteres

Créditos: TechTastico Tradução: Leo Henrique - Duvidas Blogger.

DB-HTML Novo e-book.

2012-08-15T20:38:00.002-03:00

Quer ter uma página na internet, e não sabe por onde começar? Veja nosso e-book e aprenda como criar um site em html, da maneira mais fácil possível, no e-book você encontrará Muitos códigos, Paginas semi-Prontas e dicas para personalizar seu site utilizando HTML.

O E-book é gratuito como todos os e-books disponibilizados aqui no Duvidas Blogger.

Download