Como adicionar Barra Flutuante de Mídias Sociais e Sites de Relacionamentos.

É do conhecimento de todos os que possuem um blog e pretendem fazê-lo crescer, que as mídias sociais são cada vez mais importantes para tal crescimento. Porém, assim como para um post ter sucesso e visualizações é preciso divulgação, o mesmo acontece com as mídias sociais e outros sites de relacionamento ou canais que contenham material sobre o seu blog, tais como youtube.

Uma forma eficiente de chamar a atenção e ajudar outros a acompanhar o seu canal e/ou conta em tais mídias é por dar devido destaque no blog. Uma barra fixa flutuante na lateral do blog, que se movimenta, conforme o cursor o faz é uma excelente maneira de fazê-lo.

1. Faça login no Painel do blogger
2. Selecione a aba “Design”
3. Adicionar Gadget >>> HTML
4. Copie o código abaixo, fazendo as necessárias alterações. Altere o que está de vermelho para seus respectivos links (suas mídias sociais). No caso das imagens, elas devem ser pequenas (47x47) ou pouco maior.
5. A cada novo site ou mídia adicionado, você deve alterar os valores destacados na cor verde, sempre acrescentando 50 ao número existente, conforme exemplificado abaixo. Por exemplo, o primeiro será 110, o segundo 160, o terceiro 210 e assim sucessivamente. Isso evitará que as imagens e links fiquem em cima dos outros.

<a href="http://feeds.feedburner.com/SosVip" style="position: fixed; right: 2px; top: 110px;" target="_blank">
<img border="0" heigth="47" src="Link da Imagem" title="Assinar Feed" width="47" /></a>

<a href="http://twitter.com/SOSVIP" style="position: fixed; right: 2px; top: 160px;" target="_blank">
<img border="0" heigth="47" src="Link da Imagem" title="Siga-nos" width="47" /></a>

<a href="http://www.facebook.com/SOSVIP2011" style="position: fixed; right: 2px; top: 210px;" target="_blank">
<img border="0" heigth="47" src="Link da Imagem" title="Facebook" width="47" /></a>

Tudo o que você precisará fazer agora é adicionar os mesmos códigos acima, modificando apenas os links de imagem e referência para cada respectiva mídia social ou outro link que queira disponibilizar. Nos códigos exemplos acima, colocamos apenas três, mas você poderá acrescentar quantos achar necessário.

O resultado será como você pode observar na imagem abaixo:

Coloque seu email:

Início

Como criar um Twitter – tutorial!

Já tratamos anteriormente desse tema aqui no SOSVIP. Porém, com o aumento de twitteiros no Brasil e no mundo, há cada vez mais a procura por tutoriais ensinando como criar uma conta no Twitter, a tal popular rede social. Ensinaremos de modo simples e direto a como fazê-lo.

O primeiro passo é acessar o site: http://twitter.com/

Assim que a página carregar você se deparará com a seguinte imagem:

O local circulado na cor vermelha servirá para você fazer Login caso já tenha uma conta cadastrada. Caso não tenha, clique no botão amarelo logo abaixo: “Sign Up >”

Você será redirecionado a uma página onde deverá informar o nome identificador no Twitter. Ou seja aquele que o representará e permitirá outros o acharem. Devido ao alto e crescente número de usuários, você provavelmente terá de usar um pseudônimo ou um apelido identificador. Use a criatividade e caso não esteja disponível, aparecerá uma mensagem de advertência, informando que já existe um usuário com aquele nome e portanto você deverá tentar outro ou uma variação do mesmo. Cadastre uma senha (segura) que lhe será solicitada a cada vez que for fazer login.

Do lado direito você terá a oportunidade de selecionar a linguagem do Twitter. Ainda não há a opção “Português”, assim sinta-se a vontade para escolher entre espanhol ou inglês.

Pronto, feito isso você estará pronto para começar a usar esta poderosa ferramenta de comunicação. De modo simples, ensinamos a como criar uma conta no Twitter! Já falamos aqui no SOSVIP sobre alguns termos usados no Twitter. Aconselho-os a se familiarizarem com eles antes de fazerem uso do Twitter.

1. O que é Twitter? Como usar o Twitter? 
2. O que é Twitter? Como usar o Twitter? – Parte II
3. Como criar dois perfis no Twitter com o mesmo email.
4. Acrescente uma imagem ao seu Avatar do Twitter - Twibbon!

E por último, mas não menos importante, eis a cereja do bolo: Sigam o SOSVIP no Twitter!

Coloque seu email:

Início

Como ter milhares de visitas pelo Youtube!

O sonho de toda pessoa que tem um canal no youtube é o mesmo dos blogueiros: milhares de visualizações de sua página e/ou canal. Se você é um blogueiro e quer ter muitas visitas no seu blog, já ensinamos como atrair muitos visitantes. Agora é a vez dos donos de canais no youtube.
Quando você faz upload de um vídeo há uma caixa para você escrever as Tags do vídeo. Ali você deve colocar palavras-chave relevantes e que tenham a ver com o conteúdo de seu vídeo. Lembre-se da importância delas, bem como de um tema relevante pois é através dessas palavras e título que outros irão encontrar o seu vídeo.
Se você tem um blog não esqueça de colocar anotações com a URL de seu blog e depois de upar seu vídeo, poste-o em seus blogs para que as pessoas possam vê-lo. Depois de produzir o vídeo, é hora de promovê-lo. Há excelentes espaços para isso, além do blog. Você pode usar o MySpace como uma ferramenta para atrair muitos espectadores; o Facebook também pode e deve ser utilizado, bem como orkut.
Divulgue o máximo que você puder, e depois disso o boca-a-boca fará o resto. Peça a ajuda de seus amigos para compartilhar seu vídeo.
Agora o mais importante é o conteúdo de seu vídeo. Saiba que um vídeo com tema atual e criativo, certamente terá grandes chances de se tornar um sucesso se for bem produzido e divulgado.

Coloque seu email:

Início

Acrescente uma imagem ao seu Avatar do Twitter - Twibbon!

O Twitter cada dia que passa possui mais aplicativos e funcionalidades. Com o enorme crescimento dessa rede social, cada vez há mais interesse em incrementar esse serviço com “mimos” e personalizações para os usuários. O Twibbon é uma dessas ferramentas. Através dele você pode engajar seu perfil do Twitter em causas ou simplesmente mostrar o seu amor ao time do coração, etc. As aplicações são inúmeras. Porém o uso deste serviço não é tão intuitivo quanto poderia. Assim explicaremos passo-a-passo como adicionar um Twitbbon ao seu perfil do Twitter. Vamos lá.

PS.: Twibbon pode ser definido de modo informal como uma imagem a ser adicionada à imagem que você já usa no Twitter ou que a substitui.

Primeiro passo é acessar o site. Eis o endereço:

http://twibbon.com/

Depois de acessá-lo procure a imagem que deseja acrescentar ao seu perfil do Twitter. Há um campo para você fazer a busca, caso não se agrade de nenhuma que se encontra na página inicial. Além disso você também pode criar uma campanha (imagem), mas esse é assunto para outro post. A princípio fixaremos nossa atenção em trabalhar com campanhas já prontas.

Escolha a imagem que deseja usar e clique nela, conforme exemplificado na imagem abaixo:

Ao clicar na imagem você será redirecionado para uma nova página onde você deverá fazer Login com sua conta do Twitter.

Novamente outra página será carregada solicitando permissão para acessar o seu Twitter, caso você já esteja logado. Clique em “Allow” ou permitir o acesso.

 

Mais um redirecionamento e agora você finalizará o processo ao clicar em “Show my support now”

Prontinho, você já pode acessar o seu Perfil no Twitter que o Twittbon já estará ali. Caso deseje reverter o processo depois é bem simples também.

Trocando Twitbbon

Para trocar o seu Twitbbon ou simplesmente voltar à imagem original, tudo o que precisará fazer é acessar novamente o site: http://twibbon.com/

Na parte superior você deverá fazer login com sua conta do Twitter, caso não esteja logado. Feito o Login, clique em “My Profile”.

Selecione a aba histórico:

Clique em “Revert” para voltar à imagem selecionada:

Por último clique em “Make this my Profile Image!”

Pronto, agora você estará de volta com seu velho avatar. Explicado assim ficou moleza né? Gostou? Então deixe seu comentário e acompanhe as nossas dicas. E não esqueça de seguir o SOSVIP no Twitter e receber as novidades em primeira mão!

Coloque seu email:

Início

Como colocar Widget do Twitter no Blog (atualizações automáticas)?

É sabido de todos que o Twitter é uma das redes sociais que vêm crescendo bastante e que a cada dia conquista novos usuários!
Diversas pessoas, pelos mais variados motivos tem criado um perfil nessa rede social.
Um dos nichos que tem aderido largamente à idéia, são os blogueiros. Isso por que através do Twitter eles podem divulgar seus blogs para um público abrangente. Assim, visando auxiliar na instalação do Widget de Atualizações do Twitter, preparamos este post pra vocês. Com este Widget instalado você poderá incentivar seus visitantes a seguirem-no no Twitter. Quanto mais seguidores, maior serão as oportunidades de divulgação. Então vejamos passo-a-passo como instalar o Widget de atualizações do Twitter:

1. Faça login no twitter e logo em seguida acesse: Goodies Widgets
2. Selecione “My Website” >>> “Profile Widget”.

3. Essa é a hora que exige mais atenção. Vamos configurar o Widget para ficar ao seu gosto. Selecione a área destacada.  
Agora aparecerá as opções que você deve alterar. Coloque o seu nome de usuário no campo “Username”. 
Configurações

Poll for new results: marcando esta opção, haverá um efeito de transição entre um tweet e outro. Para adicionar esta opção, marque primeiramente: “Time interval”.

Include scrollbar: marque essa opção caso deseje adicionar uma barra de rolagem.

Behavior: Selecione “Time interval”

1. Loop results: Essa opção permite o recarregamento dos tweets programados, de forma que sempre esteja passando.
2. Tweet Interval: Seleciona de quantos em quantos segundos os tweets devem ser carregados.
3. Load all tweets: Carrega todos os tweets, sem nenhum intervalo.

A opção destacada através do sublinhado “Number of Tweets” indica quantos tweets devem ser carregados no widget.

 

Clique na aba “Appearance” caso deseje mudar as cores do widget.

Selecione a aba “Dimensions”. Customizado seu widget é hora de definir as medidas que ele terá, ou você poderá marcar a opção “Auto Width” se desejar que o ajuste seja automático. Lembrando que a largura é definida pela medida (width) e altura (height), da janela do widget

Depois de configurar o widget como você deseja, clique no botão “Finish & Grab Code”. Feito todos os passos, copie o código que aparecerá dentro do quadro indicado através da seta, ou clique no botão indicado abaixo para adicionar automaticamente no seu blog.   

Simples né? Não perca a oportunidade de seguir o SOSVIP no Twitter. Junte-se aos mais de 20 mil seguidores!

Coloque seu email:

Início

Como retirar a Navbar do Blog.

Um blog professional e atraente aos leitores começa por seu layout. Esse é de extrema importância pois é a primeira impressão que o leitor tem do blog.

Não raro observamos os blogs iniciantes com vários ‘apetrechos’ que em nada estimulam visualmente o leitor. Ao contrário, os afastam. Um quesito que ocorre muito nesse respeito são os chamados Navbar, ou seja, aquela barra de navegação  na parte de cima do blog.

Considero muito importante a retirada do mesmo, pois ele não tem grandes serventia e acabam por dar a impressão de blog amador. Então vamos as instruções:

Agora vamos aos passos necessários para a desinstalação do navbar no blog.

Antes de qualquer mudança faça um Backup do seu Template, assim se não gostar das mudanças ou algo der errado, você poderá voltar ao que era antes.

• Faça login no Blogger
• No painel do Blogger, abra a aba Design
• Selecione Editar HTML
• Procure pelo seguinte código: ]]></b:skin></head>

PS.: para encontrar o trecho mencionado você pode usar CONTROL + F

• depois de encontrado o trecho acima você irá copiar o seguinte código:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

• cole antes do primeiro código descrito, de forma que deverá ficar desse modo:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

]]></b:skin>
</head>

• Salve o modelo

Adeus Navbar, eis uma navegação mais limpa!

Coloque seu email:

Início

Como criar dois perfis no Twitter com o mesmo email

O Twitter é a rede social que mais cresce no mundo inteiro. Aqui no Brasil o crescimento é surpreendente. De anônimos a artistas famosos, todos tem uma ou mais contas no Twitter. E é exatamente esse detalhe super útil para quem deseja possuir mais de um perfil, que iremos ensinar. É sabido por nós que o Twitter permite o cadastro de apenas um perfil por email. Porém há ‘lapsos’ neste sistema, o que nos permite através de um pequeno macete criar dois ou até mais perfis no Twitter com o mesmo endereço de email.

Vamos ao “pulo do gato”. A técnica consiste em fazer uma pequena mudança no endereço de email, mudança esta que não afetará seu cadastro, mas servirá para validar o serviço. Vamos exemplificar pra ficar mais fácil:

Imagine que você vai criar um perfil no Twitter. O email cadastrado será o seguinte (hipotéticamente falando):

mistersosvip@gmail.com

Quando você for realizar o cadastro de um segundo perfil, ao colocar esse mesmo email, você será informado que não é possível pois o email já está vinculado a uma conta. Tudo o que você precisará fazer então será uma pequena alteração no email, acrescentando um “.” em qualquer parte do seu email. Ex.:

mister.sosvip@gmail.com

Caso deseje utilizar o mesmo email para a criação de um terceiro, quarto, quinto perfil, e assim por diante, bastará seguir fazendo pequenas mudanças no “.” acrescentado no email. Ex.:

misterso.svip@gmail.com

Gostou da dica? Só não esqueça de seguir o SOSVIP no Twitter!

Coloque seu email:

Início

Como colocar páginas numeradas no blog!

Colocar páginas numeradas no blog é algo essencial, ainda mais quando tratamos de blogs que possuem mais de 50 posts. Os marcadores são uma excelente forma de organizar o blog e facilitar ao leitor encontrar o que ele deseja. Mas para blogs que possuem muito conteúdo, os marcadores tornam-se insuficientes. Assim se o seu visitante deseja navegar através de seu blog para ver mais conteúdo, ele terá de fazê-lo de uma só vez, pois imagine o trabalho que ele terá posteriormente se ver apenas metade do conteúdo e quiser continuar de onde parou...

Assim, o intuito é sempre facilitar e dar comodidade aos seus leitores. Por isso os ensinaremos hoje esta técnica simples e vital. Vamos ao passo a passo.

Páginas Numeradas no Blog

Lembrando que antes de realizar qualquer mudança no template é essencial fazer um backup do seu modelo. Assim se algo der errado, você poderá coltar ao seu antigo modelo facilmente. Se não souber como fazer backup, clique aqui e aprenda a fazer um backup do seu template.

• Faça login no Painel do blogger
• Selecione a aba “Design”
• Editar HTML
• Marque expandir modelos widgets
• Procure pelo seguinte código:

  ]]></b:skin>

• Acima do código acima, cole o seguinte trecho que dará as características da numeração:

  .showpageArea a {
  text-decoration:underline;
  }
  .showpageNum a {
  text-decoration:none;
  border: 1px solid #cccccc;
  margin:0 2px;
  padding:2px;
  }
  .showpageNum a:hover {
  border: 1px solid #cccccc;
  background-color:#cccccc;
  }
  .showpagePoint {
  color:#333;
  text-decoration:none;
  border: 1px solid #cccccc;
  background: #cccccc;
  margin:0 2px;
  padding:2px;
  }
  .showpageOf {
  text-decoration:none;
  padding:2px;
  margin: 0 2px 0 0;
  }
  .showpage a {
  text-decoration:none;
  border: 1px solid #cccccc;
  padding:2px;
  }
  .showpage a:hover {
  text-decoration:none;
  }
  .showpageNum a:link,.showpage a:link {
  text-decoration:none;
  color:#333333;
  }

• Agora procure pelo código:

  </body>

  E cole imediatamente acima dele o seguinte código:

  <!-- Inicio do codigo de navegacao -->
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <script type='text/javascript'>
  var pageCount=4;
  var displayPageNum=4;
  var upPageWord =&#39;Anterior&#39;;
  var downPageWord =&#39;Próximo&#39;;
  </script>
  <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
  </b:if>
  <!-- Final do codigo de navegacao -->

Os números (somente números) destacados nas cores vermelho e azul podem ser modificados conforme a vontade do blogueiro. O número em vermelho representa a quantidade de artigos que serão exibidos por página. É importante que esse número não seja muito alto para não causar lentidão na abertura do blog. Já o número em azul representa a quantidade de números de navegação que serão exibidos no final da página.

Veja como ficará em seu blog:

Salve e pronto, o seu blog terá um aspecto bem mais profissional. Mais importante que isso você terá dado prioridade ao que há de mais importante no seu blog, os seus leitores. Não deixe de acompanhar nossas pequenas dicas que farão do seu blog mais agradável e profissional! São sempre dicas simples, porém de grande relevância!

Coloque seu email:

Início

Como colocar um contador de visitas no blog!

Um contador de visitas é parte essencial na vida de um blog. Isso por que é através dele que você pode mensurar o alcance de seu blog, sua audiência, o que é mais relevante, etc. Assim ensinaremos hoje a como colocar um um contador de visitas no seu blog.

Contador de Visitas Blog

Chamaremos de contador de visitas, mas na verdade trata-se de uma poderosa ferramenta que faz muito mais que contar visitantes. O Histats, faz exatamente o que o nome propõe. Ele disponibiliza ao blogueiro estatísticas que o ajudarão a saber de onde provém suas visitas. Isso é extremamente importante pois facilita para o blogueiro saber onde deve focar a fim de atrair mais visitas. Assim mais que recomendamos que todo blog instale o quanto antes um contador de visitas, sendo o Histats a nossa recomendação de hoje.

Histats o melhor Contador de Visitas

É claro que o Google Analytics é mais completo. Porém ainda há uma falha grande que é a ausência das estatísticas online. Por isso recomendaremos hoje o Histats. Porém não há problemas em fazer uso de um ou mais contadores, aliás, até recomendamos.  Vamos ao processo de inscrição e instalação do Contador de Visitas.

1. Entre no Histats e se increva. Coloque o seu site e mude a língua para a sua preferência, a sua única desvantagem é que não tem em português, mas pode por em espanhol ou inglês que dá pra entender, é intuitivo. 
2. Digite dados como email, senha e etc...
Complemente os dados da conta informando nome, endereço, hora... Escolha o modelo do contador.
Será enviado um link de validação ao email cadastrado. Verifique o email e clique no link para ativar a conta. Logo após, volte à página principal do Histats e faça login com email e senha cadastrados. Você será direcionado para uma página onde deverá cadastrar o endereço de seu blog, conforme a figura abaixo:
O próximo passo é adicionar o endereço (URL) do seu blog, descrição e um nome para ele (geralmente o nome do blog). Nos números, deixe zerado. Escolha o formato de data e hora, bem como a localidade. Pode ser uma cidade próxima, não é preciso ser sua exata cidade.  Na parte final dessa página, está circulado,  você pode escolher deixar suas estatísticas privadas (recomendado) ou públicas.
Você será direcionado ao Painel de Controle. Clique em Estatísticas, no símbolo sinalizado.
Agora é hora de você pegar o código que deverá colar em seu site. Para isso você acessará a área circulada. E na página seguinte, selecione “ADD NEW COUNTER” ou adicione novo contador.
Escolha o modelo que mais te agradar e depois selecione as informações que deseja que sejam vistas no contador, conforme a figura abaixo. Lembrando que cada campo selecionado é opcional, sendo escolhido o que for de agrado de cada blogueiro. Feitas as escolhas, clique em SALVAR.
Agora será redirecionado para uma página, como a abaixo, e clique na área circulada. Aparecerá abaixo um código que você deverá copiar e colar no seu blog, conforme a próxima instrução.
Vá em Design, no painel do Blogger, e selecione a opção Adicionar Gadget. Selecione o modo Adicionar HTML e cole no campo que aparecerá o códgo que foi gerado no Histats. 
Está ensinado passo a passo. Tem a aprovação do SOSVIP! Se gostou, deixe um comentário, afinal eles nos motivam a ensiná-los...

Coloque seu email:

Início

Como remover o nome do autor e hora do post.

Muitos blogueiros não são favoráveis ás marcações que por definição aparecem no corpo das postagens. Entre elas há o "Postado Por (nome do autor) às (hora)".
Então ensinaremos como apagar essas marcações.

Apagar o "Postado por"

Lembrando que antes de realizar qualquer mudança no template é essencial fazer um backup do seu modelo. Assim se algo der errado, você poderá coltar ao seu antigo modelo facilmente. Se não souber como fazer backup, clique aqui e aprenda a fazer um backup do seu template.

• Faça login no Painel do blogger
• Selecione a aba “Design”
• Editar HTML
• Marque expandir modelos widgets
• Procure pelo seguinte código e apague-o:

  <span class='post-author vcard'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/>
            <span class='fn'><data:post.author/></span>
          </b:if>
        </span>

• Visualize e se tudo estiver certo, salve.

Apagar a hora da postagem

• Faça login no Painel do blogger
• Selecione a aba “Design”
• Editar HTML
• Procure pelo seguinte código:

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

• Visualize e se tudo estiver certo, salve.

OBS.: Para encontrar o código no seu template, você pode usar as teclas CONTROL + F, bastando depois disso digitar o texto/código que procura no campo de pesquisa que abrir-se-á.

Quer ver mais dicas para aprimorar seu blog? Visite nossa categoria de Ferramentas e Dicas para Blog.

Coloque seu email:

Início

Widgets do Twitter para blogs – ultimos tweets.

O Twitter é a rede social com maior crescimento. De fato, o Twitter está presente desde pequenos blog até nos maiores portais. Podemos dizer que todo blogueiro “de respeito” tem de ter uma conta no twitter! E hoje são muitas as formas de você interagir com o seu twitter. Uma delas frequentemente usada é através dos widgets.

Assim, disponibilizamos agora, de forma super prática um tutorial para a instalação desse widget que chamaremos de “Widgets últimos tweets!”

Como instalar Widget últimos tweets no blog?

Twitter Badge – É um widget bem simples. Para adicioná-lo a seu blog basta configurar o número de tweets que você quer que apareça, dê um nome ao widget e por fim clique no botão “add to Blogger”.

Twitter Widget – Este é um widget mais sofisticado pois você pode personalizá-lo e adequar ao seu template. Ao entrar na página do widget, escolha a opção “My website” e depois “Profile Widget”. Logo em seguida clique em “Add to Blogger”, customize de acordo com seu gosto e salve.

Agora você poderá facilmente mostrar aos seus visitantes as suas atividades no twitter e assim incitá-lo a segui-lo. Aproveie e siga-nos no Twitter! Gostou da dica? Tem muitos outros widgets já prontos para instalar na nossa categoria “Ferramentas e Dicas para Blog”.

Seja VIP, receba as novidades no seu email, clique no ícone...

Início

Como fazer meu blog carregar rapido!

Vamos falar um pouco hoje sobre a importância de ter uma página leve e de aspecto visual agradável. Um erro muito cometido por blogueiros iniciantes, como eu, é encher o blog de widgets. Cada widget “bonitinho” ele (a) acrescenta ao seu blog. No entanto, cada vez mais aumenta a importância de ter uma página leve e de fácil carregamento. Isso por que recentemente o Google anunciou que fará mudanças no modo de analisar os blogs e rankeá-los. O pagerank agora dependerá também da velocidade que seu blog carrega. Isso signiica que é importantíssimo que o seu blog carregue rápido. Para isso temos algumas dicas.

• Elimine todos os widgets inúteis

Nesse momento você deve estar chorando rios e pensando que todos eles são importantes e úteis... NÃO são, acredite. Relógio, aquário, contagem regressiva para algum lançamento de filme, ou qualquer outra frescura do tipo é absolutamente desnecessária. Você e somente você repara nela achando bonito. Retire-as o quanto antes.

• Cuidado com banners parceiros

As parcerias são muito importante na blogosfera. E elas influenciam diretamente no pagerank de um blog. Assim quanto mais parceiros com conteúdo relevante, melhor. No entanto você deve ter um cuidado ao realizar parcerias, especialmente as com banner. Muitos blogs usam imagens animadas em seus banners como forma de dar um destaque  e chamar a atenção. O problema nisso é que se você adiciona muitos dessess banners na sua homepage, o blog terá de carregá-las junto com as postagens e outros elementos de sua página. E por se tratarem de imagens animadas, elas são mais pesadas que imagens estáticas, ou seja, seu blog demorará a carregar.

Neste caso minha sugestão é: adeque os banners à seu blog, de preferência com imagens estáticas.

• Elimine códigos Javascript e afins

O uso de códigos Javascript e flash em seu template são uma parte pesadíssima. Assim, quanto menos você usar de tais códigos, melhor para você.

Essas são algumas dicas. Se você tiver outras é só deixar nos comentários. Para finalizar, a minha sugestão aos blogueiros novos é que analizem o quanto antes os seus blogs. E realizem as necessárias mudanças. Um abração pra voçês que nos acompanham. Continue a nos visitar e ler as nossas dicas que são simples, porém super relevantes. Indique aos seus amigos também!

Seja VIP, receba as novidades no seu email, clique no ícone...

Início

Elemento aparecer so na pagina inicial e/ou so dentro das postagens...

Widgets são um problema e uma solução muito comuns em blogs. Isso por que o uso indiscriminado deles pode deixar a página inicial pesada e demorar a carregar seu blog. Em breve trataremos da importância do tempo de carregamento do seu site e/ou blog. Assim, o tutorial de hoje é na verdade uma série de pequenos ”truques” que facilitarão a aplicação e localização dos widgets.

A idéia desse tutorial se deve ao fato de que muitas vezes querermos mostrar algumas coisas, mas somente nas paginas individuais das postagens. É bem simples de fazer. Vamos lá.

Widgets aparecer só na página inicial e/ou dentro das postagens

Você aprenderá a posicionar os widgets de modo a condicioná-los a serem vistos apenas em algumas condições. Por exemplo. caso você deseje mostrar determinados elementos apenas na página inicial, ou apenas dentro das postagens, etc.

Não se esqueça de  fazer um backup do seu template antes de realizar quaisquer alterações no código do mesmo.

Lembrando que os códigos a seguir deverão ser incluídos antes e depois do código a ser exibido nos locais requeridos. Se for um widget por exemplo, você deve inserir depois de:

<b:widget id='HTML1' locked='false' title='Título do Widget' type='HTML'> <b:includable id='main'> (código desejado para determinar onde deverá aparecer)
- código fonte do Widget -
</b:if>
</b:includable>
</b:widget>

Lembrando que é apenas um exemplo de onde e como deve ser inserido. O importante nesse caso é você localizar onde começa o código e onde termina, podendo haver pequenas variações de template para template.

Vamos aos códigos que determinarão as variáveis:

Filtrando onde e como os elementos aparecerão no blog

Mostrar apenas nas postagens:
<b:if cond='data:blog.pageType == "item"'>CÓDIGO DO WIDGET E/OU ELEMENTO</b:if>

Mostrar apenas na página incial (homepage):
<b:if cond='data:blog.homepageUrl == data:blog.url'>CÓDIGO DO WIDGET E/OU ELEMENTO</b:if>

Mostrar apenas em uma postagem específica:
<b:if cond='data:blog.url == "URL do post"'>CÓDIGO DO WIDGET E/OU ELEMENTO</b:if>

Mostrar na página inicial, de marcadores:
<b:if cond='data:blog.pageType != "item"'>CÓDIGO DO WIDGET E/OU ELEMENTO</b:if>

Mostrar apenas em um marcador específico:
<b:if cond='data:blog.homepageUrl == "http://URL_do_Blog/search/label/Marcador"'>CÓDIGO DO WIDGET E/OU ELEMENTO</b:if>

Mostrar nas páginas de arquivo:
<b:if cond='data:blog.pageType == "archive"'>CÓDIGO DO WIDGET E/OU ELEMENTO</b:if>

Mostrar na página de marcadores e postagens:
<b:if cond='data:blog.homepageUrl != data:blog.url'>CÓDIGO DO WIDGET E/OU ELEMENTO</b:if>

Mostrar apenas na página de marcadores:
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType != "item"'> CÓDIGO DO WIDGET E/OU ELEMENTO</b:if></b:if>

Mostrar por autor:
<b:if cond='data:post.author == "Nome do autor"'>CÓDIGO DO WIDGET E/OU ELEMENTO</b:if>

Neste último caso há dois códigos “</b:if>”. Isso se dá por que há dois “condicionamentos abertos, sendo necessário os dois códigos para funcionar corretamente.

Seja VIP, receba as novidades no seu email, clique no ícone...

Início

Colocar imagem de fundo no titulo da postagem.

A dica de hoje é para quem deseja colocar imagens no título da postagem. É um efeito interessante pois dá um destaque no título da postagem. Já ensinamos a pouco tempo como colocar bordas no título das postagens. Agora ensinaremos como pôr uma imagem. É super simples e segue basicamente o mesmo tutorial. Vamos ao tutorial:

Lembrando que antes de realizar qualquer mudança no template é essencial fazer um backup do seu modelo. Assim se algo der errado, você poderá coltar ao seu antigo modelo facilmente. Se não souber como fazer backup, clique aqui e aprenda a fazer um backup do seu template.

• Faça login no Painel do blogger
• Selecione a aba “Design”
• Editar HTML
• Procure pelo seguinte código: “.post h3 {“ (se não encontrar, retire o espaço entre h3 e a chave e tente novamente)

OBS.: Para encontrar o código no seu template, você pode usar as teclas CONTROL + F, bastando depois disso digitar o texto/código que procura no campo de pesquisa que abrir-se-á.

• Cole após ele o seguinte código:

background: (URL DA IMAGEM DESEJADA) 
margin:.25em 0 0;
padding:0 0 0 8px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Simples né? Se você já colocou bordas nos título da postagem, tudo o que você precisará fazer é inserir a 1ª linha do código no lugar da linha denominada “background” do código anterior (o das bordas).

Gostou da dica? Acompanhe o SOSVIP e receba muito mais excelentes dicas para seu blog.

Seja VIP, receba as novidades no seu email, clique no ícone...

Início

Como colocar bordas no titulo da postagem.

A dica de hoje é para quem deseja colocar bordas no título da postagem. É um efeito interessante pois dá um destaque no título da postagem. Vamos ao tutorial:

Lembrando que antes de realizar qualquer mudança no template é essencial fazer um backup do seu modelo. Assim se algo der errado, você poderá coltar ao seu antigo modelo facilmente. Se não souber como fazer backup, clique aqui e aprenda a fazer um backup do seu template.

• Faça login no Painel do blogger
• Selecione a aba “Design”
• Editar HTML
• Procure pelo seguinte código: “.post h3 {“ (se não encontrar, retire o espaço entre h3 e a chave e tente novamente)

OBS.: Para encontrar o código no seu template, você pode usar as teclas CONTROL + F, bastando depois disso digitar o texto/código que procura no campo de pesquisa que abrir-se-á.

• Cole após ele o seguinte código:

border-top: 2px solid #a89ffe;
border-left: 2px solid #d301e0;
border-right: 2px solid #01e001;
border-bottom: 2px solid #e02b01;
background: #000000;
margin:.25em 0 0;
padding:0 0 0 8px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Se você quiser customizar as bordas, segue aqui uma lista dos estilos de bordas. Para modificar a borda, basta você substituir a parte do código acima onde tem escrito “SOLID” por algum dos códigos relacionados abaixo, conforme seu agrado:

- solid: borda contínua
- groove: borda entalhada
- dashed: borda tracejada
- dotted: borda pontilhada
- double: borda dupla
- inset: borda em baixo relevo
- outset: borda em alto relevo
- ridge: borda em ressalto

Desvendando o código:

1. A parte denominada 2px das bordas refere-se à largura das mesmas.
2. #a89ffe, #01e001 e #e02b01 são as cores
3. background: #000000 refere-se a cor, que pode ser substituida por uma imagem, se desejado.
4. Padding: ‘margem’
5. font-size: tamanho da letra.

Visualize antes de salvar. Se gostar é só salvar o modelo, do contrário bastará limpar as edições.

Facílimo né? Assim são nossos tutoriais e dicas. Todos muito fáceis para que todos possam acessar e fazer em seus blogs.

Seja VIP, receba as novidades no seu email, clique no ícone...

Início

Como colocar feed nos marcadores – feed por categoria.

Recentemente fizemos uma mudança ampla no layout do SOSVIP. Foi um aprendizado e tanto, pois a falta de verba para adquirir um modelo customizado nos obrigou a aprender a fazer as mudanças desejadas.

Mas valeu a pena, pois agora está conforme nosso agrado. Depois de aprender, é tempo de ensinar. E é claro que eu não deixaria de explicar passo a passo pra vocês como fazer.

A dica de hoje é como colocar feed nos marcadores. Isso é bem interessante pois os seus visitantes terão a opção  de assinar somente as categorias que lhes interessam. Embora o melhor é quando assinam seu conteúdo completo.

Lembrando que antes de realizar qualquer mudança no template é essencial fazer um backup do seu modelo. Assim se algo der errado, você poderá coltar ao seu antigo modelo facilmente. Se não souber como fazer backup, clique aqui e aprenda a fazer um backup do seu template.

Não há grandes mistérios em implementar essa mudança. Primeiramente você terá de:

• Faça login no Painel do blogger
• Selecione a aba “Design”
• Editar HTML
• Expandir Widgets
• Procure pelo seguinte código:

  <b:loop values='data:labels' var='label'>
  <li>
  <b:if cond='data:blog.url == data:label.url'>
  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <span dir='ltr'/>
  </li>
  </b:loop>

OBS.: Para encontrar o código no seu template, você pode usar as teclas CONTROL + F, bastando depois disso digitar o texto/código que procura no campo de pesquisa que abrir-se-á.

• Depois da segunda linha do código acima; mais especificamente depois de “<li>”, você deve colar o seguinte código:

  <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src=' URL da imagem do Feed ' style='vertical-align:middle;border:0'/></a>

Lembre-se de substituir o trecho “URL da imagem do Feed” pela URL da imagem que você quer que apareça. Sugiro uma imagem de tamanho entre 14 x 14 à no máximo 18 x 18.

• Visualize e se tudo estiver ok, salve o modelo.

Feito conforme mostrado, as imagens ficarão alinhadas a esquerda dos marcadores, como usado aqui no SOSVIP. Se desejar alinhar a imagem a esquerda, bastará você inserir o código depois da 9ª linha do primeiro código, ou seja, depois de “<span dir='ltr'/>”.

Gostou da dica? Tem muito mais na nossa categoria de Ferramentas e Dicas para Blog.

Seja VIP, receba as novidades no seu email, clique no ícone...

Início

SOSVIP de cara nova para você que é VIP!

É com grande prazer que afirmamos que no dia de hoje (14/07/10) estabelecemos o novo layout do SOSVIP. Para os que acompanham nosso trabalho, devem ter notado as inúmeras mudanças que fizemos até então. Fomo aperfeiçoando o nosso layout a fim de proporcionar cada vez mais conforto visual aos que nos visitam.

Nesse novo modelo, buscamos também adequar o template ao nosso tema básico que pode ser definido em uma sigla universal: VIP (very important people/person ou pessoas/pessoa muito imprtante). Sim, é exatamente assim que nos sentimos em relação a você visitante. Você aqui é VIP! E com todo esse glamour é que tentamos ao máximo customizar o SOSVIP!

Mas não poderíamos deixar de lado os agradecimentos aos colaboradores dessa façanha:

Ytallo Fernandes – o cara é um verdadeiro design gráfico. Ele colaborou com a criação de nosso cabeçalho. E diga-se de passagem, foi a pincelada final na nossa arte! Ytallo Fernandes também possui um blog, o Zombie VIP, que trata do mesmo segmento que nós, ou seja variedades.

Luiz Henrique – Esse já falamos na postagem de um ano do SOSVIP. Queremos estender os agradecimentos à Luiz Henrique, meu chefe; um cara que entende tudo de computador, CSS, programação, etc, etc, e que ajudou na customização do atual template! Isso é que é chefe! rsrs

Ismael Machado – Esse é meu caro amigo Botoja. ih, revelei o nome dele. O meu melhor amigo e mentor do SOSVIP. O cara me apresentou a blogosfera e me ensinou grande parte do que sei sobre blogar. Não sei quase nada sobre blogar, mas não é culpa dele...rsrs

Enfim, esse texto já está muito grande e você já deve estar desistindo de ler, então antes que isso aconteça, se é que já não aconteceu, vou encerrar. Se desejar saber mais dessa comovente e melosa história, recomendo que leia a nossa postagem comemorativa de um ano de vida!

Seja VIP, receba as novidades no seu email, clique no ícone...

Início

Como retirar o titulo do Blog? Retirando o titulo do topo.

Uma questão constante na blogosfera diz respeito a customizar templates, ou criá-los para melhor adequar-se ao que o proprietário do blog deseja. Na nossa categoria “Ferramentas e dicas para Blog” sempre procuramos dar excelentes dicas para os “novatos” essa palavra costuma sempre ser mal interpretada, na arte de blogar. A dica de hoje é bem simples.

Trata-se de como retirar o título do Blog, sim aquele que fica no topo da página ou template. Isso por que muitos preferem ter ali uma imagem ao invés de um texto, conforme fazemos aqui no SOSVIP.

Vamos então passo a passo:

• Faça login no Painel do blogger
• Selecione a aba “Design”
• Editar HTML
• Procure pelo seguinte código:

  <b:widget id='Header1' locked='true' title='TITULO DO SEUBLOG' type='Header'/>

  OBS.: Para encontrar o código no seu template, você pode usar as teclas CONTROL + F, bastando depois disso digitar o texto/código que procura no campo de pesquisa que abrir-se-á.

• Salve.

*Se o blogger questionar se deseja excluir o widget Header, confirme a exclusão.

Facílimo né? Aproveite e veja mais dicas na nossa categoria de Ferramentas e Dicas para Blog. Se desejar ver alguns tutoriais de customização mais avançados, indicamos o excelente blog da Mamanunes, bem como o Mundo Darkness da Clau. Ambos são excelentes!

Crie enquetes personalizadas gratuitamente!

Recentemente tivemos a oportunidade de participar de uma Copa da Blogosfera promovida pelo Notícia Cretina. Entretanto, durante as votações, houve vários probleminhas com o sistema de votos, uma vez que a caixa de enquetes do blogger dava erro constantemente, dificultando a vida do Tom, responsável pelo Notícia Cretina. Daí resolvi pesquisar uma alternativa e encontrei o site Vorbeo.com, onde você pode criar uma caixa para enquetes e customizá-la de acordo com o seu blog. Ali é possível escolher a cor do texto e o tamanho, a fim de que não ultrapasse as medidas do seu blog.

Depois de criar a enquete no Vorbeo.com, você deverá:

• Faça login no Painel do blogger
• Selecione a aba “Design”
• Adicionar gadget
• HTML/Javascript
• Cole o código gerado no Vorbeo
• Salve.

Agora você não precisará mais passar por problemas com sua enquete.

Visitando o Notícia Cretina, pude constatar também outra excelente opção encontrada pelo Tom. Trata-se do site: Enquetes.com.br. Este site permite da mesma maneira a criação e personalização de enquetes. A escolha é sua, e adeus aborrecimentos com possíveis erros nos resultados!

Seja VIP, receba as novidades no seu email, clique no ícone...

Início

Como mudar a descricao do seu blog no Google!

O primeiro passo é obviamente incluir seu blog nas pesquisas do Google. Se ainda não o fez, leia este artigo onde ensinamos como incluir seu blog nas pesquisas do Google. Depois de incluí-lo é hora de customizar, ou seja, mudar a descrição do blog, para que esta se adeque bem a seu gosto.

Em outras palavras, é possível você determinar como você quer que apareça a descrição de seu blog nos motores de busca. Isso é importante pois pode atrair ainda mais a atenção dos visitantes ao seu blog.

Eis as instruções:

• No Painel do blogger, vá em Layout
• Selecione a opção expandir Modelo Widgets
• Procure pelo seguinte código:

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

OBS.: Para encontrar o código no seu template, você pode usar as teclas CONTROL + F, bastando depois disso digitar o texto/código que procura no campo de pesquisa que abrir-se-á.

• Depois de encontrar o código acima descrito, cole logo após ele o código abaixo:

<b:if cond='data:blog.pageType == "index"'>
<b:include data='blog' name='all-head-content'/>
<meta content='DESCRIÇÃO DO BLOG de até 140 caracteres' name='description'/>
<meta content='PALAVRAS-CHAVE, SEPARADAS POR VÍRGULA' name='keywords'/>
<meta content='SEU NOME AUTOR DO BLOG' name='author'/>
<b:else/>
<b:include data='blog' name='all-head-content'/>
<meta content='PALAVRAS-CHAVE, SEPARADAS POR VÍRGULA' name='keywords'/>
<meta content='SEU NOME AUTOR DO BLOG' name='author'/>
</b:if>

<b:if cond='data:blog.pageType == "index"'>
<title>NOME do BLOG | Pequena descrição de até 80 caracteres</title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Vale um alerta com respeito a esse tutorial, de que não terá resultado imediato. Os resultados só serão visíveis da próxima vez que os buscadores visitarem seu blog. Para mais dicas acesse a nossa Categoria Ferramentas e Dicas para Blog.

Seja VIP, receba as novidades no seu email, clique no ícone...

Início