Tweet Share Sidebar – Botões Fixos Para Compartilhar Posts

ShareSidebar nos permite colocar uma barra lateral fixa com botões e contadores sociais para que os leitores possam compartilhar suas postagens em várias redes sociais de maneira muito simples e fácil. Veja um exemplo AQUI

Como você pode ver na imagem, você pode escolher de que lado deseja exibir a barra, esquerdo (left) ou direito (right). Pode escolher em qual site deseja seus posts compartilhados, Facebook, Twitter, Delicious, Digg, Google Buzz, StumbleUpon, Reddit y Yahoo Buzz.

Quando o leitor corre a página, a barra permanece sempre a vista para facilitar. Também tem um visual claro que não incomoda, é bem prático. Clique na imagem para ser direcionado ao ShareSidebar

 

Depois de ter configurado como quiser, você só precisa clicar em GET THE CODE. Na página seguinte, copie todo o código da janela.

 

 

Para colocar no Blogger é muito simples. Faça login, clique em Design e em “Adicionar um gadget”. Escolha a opção “HTML/Javascript” e cole o código dentro dele.

Prontinho! Vai estar lá sua barra de compartilhamento fixa!

Fácil né? Espero que seja útil.

Beijo da Mama ♥

Leia mais...

Tweet Tinypic volta atrás e pede desculpas!

 
Depois do “furdunço” gerado pelo sumiço das imagens hospedadas no site, que em um momento anunciou que seria fechado para todos os usuários de fora do solo norte-americano, acho que eles se arrependeram, ainda bem. Ao entrar no site essa manhã, imaginem? Estava funcionando direitinho e tinha a seguinte mensagem no rodapé da página:




Traduzindo:

Tivemos notícias de muitos dos nossos usuários com relação a essas modificações e apreciamos o seu feedback. O Tinypic restaurou a vinculação às suas imagens e permitiu transferir. Por favor descanse assegurado nenhum conteúdo foi retirado do sítio. Tentamos notificar usuários em Tinypic e solicitamos que eles movam o seu conteúdo ao Photobucket. Infelizmente esta transmissão de mensagens foi insuficiente e surpreendeu muitos dos nossos usuários e pedimos desculpa. A nossa intenção foi começar a combinar algumas características melhores de Tinypic e Photobucket,  oferecendo a usuários uma melhor experiência. Qualquer modificação no futuro será melhor comunicada. Mais uma vez, pedimos desculpa pela inconveniência.

Tudo bem, tudo bem, mas depois dessa eu prefiro ter sempre um back up de todo o material que eu publico e vou procurar outros sites de hospedagens que sejam mais seguros.
Indico:
O próprio Blogger veja AQUI como utilizar

Outro site muito bom que nunca me deixou na mão é o ImageShack . Clique na imagem para ser direcionado.



O PICASA, é o que parece mais  seguro (acho) por ser só Google…
Você se registra e já poderá fazer ulpoad da imagem que queira e depois clique na imagem, ou álbum e será direcionado a outra página onde pegará os códigos para compartilhamento

Depois de escolher a imagem, observe a barra direita, onde eles oferecem as opções de compartilhamento. É só copiar o endereço e colar no seu layout, post, página… Onde quiser.
Fácil não é? Eu já estou tomando providencias e continuo aconselhando que vocês, ao salvarem qualquer template externo, tenham o cuidado de guardar suas imagens em uma pasta no seu computador, para se previni9tem contra essas situações desagradáveis.
é isso amores!

Beijo da Mama ♥

Leia mais...

Tweet Tinypic - Fechando Para Estrangeiros e Retira os Links

Pois é, se você acessou seu blog e viu que todas as imagens estão fora do ar, fique sabendo que, sem mais nem menos, o site de hospedagens Tinypic  que eu uso há 4 anos e considerava super seguro, vai fechar para estrangeiros e os links de todas as imagens estão sendo desativados. Imagine minha loucura, tenho milhares de imagens hospedadas lá, inclusive de layouts de templates, portanto, se você usa um template meu e teve  problemas com imagens, muita calma nessa hora. Vamos resolver.

O que podemos podemos fazer?

Eles informam que os arquivos continuarão disponíveis para visualização internamente, ou seja, depois de logados. Mas não oferecem os códigos para enviar por e-mail ou postar em sites, blogs, etc.. A instrução é que os usuários baixem suas imagens e subam (hospedem) em outro site de hospedagem, indicam Photobucket, que é dono do Tinypic (hã hã)

 

Hoje quando eu acessei a conta estava tudo normal, mas para alguns usuários a página se apresenta assim:

…

 

…

 

Agora o jeito é ter calma,  e seguir o conselho da Mama.

Você pode hospedar suas imagens no próprio Blogger  através do box de postagens, da seguinte maneira:

 

…

…

Depois de subir a imagem, clique na aba EDITAR HTML para copiar a URL (endereço)

…

…

 

UMA BOA DICA!

Como sou xereta, descobri no site BLOGUEIROS DO BRASIL , um truque que ele afirma que funciona.  Eu não testei mas será ótimo se funcionar mesmo, pelo menos enquanto as imagens não são transferidas.

Veja como é:

 

Exemplo de URL de imagem na Tinypic , e que não pode mais ser acessada ou visualizada :

http://i50.tinypic.com/10mq7sz.png

Para que a imagem seja acessada ou visualizada no seu blog, basta acrescentar a letra "o" :

http://oi50.tinypic.com/10mq7sz.png

 

PARA EVITAR MAIORES PROBLEMAS  HOSPEDE SUAS IMAGENS NO PICASA!

Leia atentamente o post da Juliana Sardinha, no DICAS BLOGGER , com tudo muito bem explicado e não vai ter erro.

 

 

Agradeço a Mari BLOG DA MARI,  ao Carlos Leão ALELUIA WEB NET  e ao Pr JULIO SODER  pelo alerta.

Leia mais...

Tweet Menu Vertical Deslizante (Dropdown) Apenas com CSS/HTML

Vamos aprender a criar um belo menu deslizante, também chamado  de “Acordeom” ou “Drop-down menu”. Publicado por SOHtanaka e por JMiur (Vagabundia). Muito simples de montar, sem usar nenhum script, apenas  “truques” de CSS. Ideal para economizar espaço na sidebar.
Modelo criado por JMiur





Faça login ► Clique em  “Design” e depois ► “Editar HTML”
O código CSS deve ser colado acima da tag </head>:

<style type="text/css">
ul.sidenav {
  /* el rectángulo contenedor */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  /* propiedades optativas */
  background-color: #CD853F;
  border: 1px solid #300;
  outline: 1px solid #FFF;
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  /* propiedades optativas */
  background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
  border-bottom: 1px solid #AD651F;
  border-top: 1px solid #300;
  color: #FFF;
  font-size: 18px;
  padding: 15px 10px 10px 45px;
  width: 195px;
}
ul.sidenav li a:hover {
  /* propiedades optativas */
  background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
  border-top:1px solid #300;
}
ul.sidenav li span {
  /* el contenido permanece oculto por defecto */
  display:  none;
}
ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */
  font-size: 12px;
  padding: 10px 0;
  margin: 0 0 0 -30px;
}
</style>

Você poderá alterar o tamanho e cor do box, cor das letras e os ícones.

Agora vamos ao HTML que pode ser colocado em um elemento de página (dentro da página Design)

<ul class.="sidenav">
<li>
<a ref.="URL_DO_O_LINK">Home <spam> 
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Blog <spam> 
Blandit turpis patria euismod at iaceo appellatio, 
</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Tutorial <spam>
Blandit turpis patria euismod at iaceo appellatio,.</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Arquivo<spam> 
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
</ul>

1. Em azul o endereço para direcionamento
2. Em negrito o nome do link
3. Em vermelho, o texto que se desprende ao passar o mouse

Se quiser acrescentar mais abas, repita o trecho abaixo colando sempre ANTES de </ul>

<li> <a ref.="URL_DO_O_LINK">TÍTULO <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Cátion utrum utrum abigo demoveo immitto aliquam sino aliquip. </spam> </a> </li>

Veja o modelo publicado por SOHTanaka







É isso ai! Beijo da Mama ♥

Leia mais...

Tweet colocar Pequenos Ícones Ao Lado das Informações do Post

Para que seu template fique ainda mais bonito, rico em detalhes, não há muito mistério. Vamos aprender aqui a inserir pequenos ícones ao lado das informações sobre os posts. Por exemplo: autor, hora, link de comentários, marcadores,etc. Veja um exemplo na imagem.

 

Primeiro você deve procurar as imagens que deseja e hospedar em um site de sua preferencia como Tinypic, Photobucket ou no próprio Blogger. Sugiro os sites  ICOJOY - INCON FINDER  e FIND ICONS. Tem milhares de ícones.

Não se esqueça de salvar seu template antes de qualquer alteração para não ter problemas caso aconteça algum erro. Clique"Baixar Modelo Completo" e guarde.

Faça login e clique na opção "Design"  e depois  "Editar HTML" .

   Vamos acrescentar alguns códigos CSS na área do .post-body . Lembrando que este exemplo é baseado no template Mínima Blogger e pode ser um pouco diferente no seu.

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}

Para ter um ícone à esquerda do autor do post,  acrescente o seguinte código:

.post-author {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (reloginho) à esquerda da hora de postagem,  acrescente o seguinte código:

.post-timestamp {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (balão) à esquerda de comentários,  acrescente o seguinte código:

.post-comment-link {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (label) à esquerda dos marcadores, acrescente o seguinte código:

.post-labels {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

 

Visualize e se estiver tudo bem, salve o template.

Pronto gente, tudo “mastigadinho” (hehe)

Para ter uma verdadeira aula sobre o assunto e ainda conhecer outras maneiras de implementar esses detalhes, leia o post da Rô Zancheta do BLOGERSPHERA.

Beijo da Mama ♥

Leia mais...

Tweet Balão Com Número de Comentários ao Lado do Título do Post

Vamos aprender a colocar um balão ao lado do título do post com o número de comentários recebidos. Exibir o número de comentários pode estimular o leitor a comentar também, então vamos lá. É muito simples e pode ser inserido em qualquer template Blogger, inclusive os do novo Designer.


Faça login no Blogger ► “Design” ►”Editar HTML”
Na pagina de edição deixe marcada a opção "Expandir modelos de widgets" e procure pelo seguinte trecho:

<b:includable id='post' var='post'>

Lobo ABAIXO dele, cole o seguinte código:

<span class='post-comment-link-arriba' style='font-size:24px; background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/TAMD0pviQsI/AAAAAAAAEQE/wIJ6xT5MjFA/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</span>

Visualize e se estiver tudo bem, salve o template.
Veja como ficou em meu blog de provas

Você poderá substituir o balão por outro modelo. Observe no código o trecho em vermelho. É o endereço da imagem. Mas é IMPORTANTE que você também altere as medidas de acordo com o tamanho do ícone que escolher assim como o posicionamento do número. Observe os detalhes dentro do código

width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;

Vá ajustando  padding até que fique bem centralizado.
O tamanho do número, está determinado no seguinte trecho:

style='font-size:24px;

24px é o tamanho do número dentro do balão. Altere a seu gosto.
Dica: No site Find Icons você pode encontrar uma infinidade de modelos de balões. Com certeza algum vai se encaixar no desenho do seu template.


Fonte:  Vida México VID MRR (em espanhol)

Leia mais...

Tweet Widget de Posts Aleatórios com Imagens - Blogger

 

BLOGGER PLUGINS  criou um widget “Random Posts Gadgets”, relação de postagens aleatórias, com imagens (thumbs) para ser exibido na sidebar. O gadget tem um painel de opções e pode ser configurado para atender às suas necessidades. Os estilos seguem o modelo do seu blog mas você pode substituir as cores se quiser.

Clique na imagem abaixo para ir à pagina e configure o widget como quiser.

Veja os exemplos de configurações

 

 

Depois de configurar a seu gosto, no final da página clique no ícone  

 

Prontinho ♥

 

Visto também em @pizcos PIZCOS BLOG (Espanhol)

Leia mais...

Tweet Read It Later - Salvar links para ler mais tarde

Uma ótima ferramenta!!! Evita sobrecarregar os favoritos e ou bookmarks com sites que são de interesse para rápida consulta ou pesquisa. Read It Later é uma extensão para o navegador,  disponível para o Google Chrome , Internet Explorer, Safari,  Firefox e também versão para celular, que permite que você salve links para ler mais tarde .

Ao fazer o download, Read It Later adiciona um botão na barra de endereços . Clicando no ícone irá automaticamente adicionar a página que você estiver visitando à lista de leitura. Só um clique e pronto, o endereço estará salvo.

 

Outras funcionalidades:

* Permite que você leia o conteúdo offline , no avião ou trem. Você pode ler as páginas após o download.

* Sincronização , a lista vai aonde você vai , você pode acessar sua lista de vários computadores e navegadores.

* Se você usar o Google Reader para gerenciar seus feeds ( RSS) , você pode salvar diretamente em sua lista de leitura do Google Reader.

* Você pode converter qualquer página e otimizá-lo em texto puro.

* Às vezes, há muitas coisas para ler, depois de um tempo , sua lista pode ter uma organização ,    você pode facilmente editar qualquer entrada na lista , adicionar etiquetas (tags)  para classificar os itens em grupos diferentes e navegar através de rótulos como pastas.

* Bookmark e compartilhar quando você terminar de ler a Delicious, Facebook ou Twitter.

 

Download ► READ IT LATER

Eu li essa informação do site BLOGTECNIA (em espanhol) e já estou usando o complemento. MUITO BOM!!!

beijo da Mama ♥

 

Leia mais...

Tweet Gadget com Ícones Fixos Com Efeito JQuery

Como colocar um simpático  conjunto de ícones, em gadget fixo na lateral do blog, com efeito JQuery (deslizante), desenhado em CSS.
Encontrei em um site Árabe Blogspacetech há alguns meses, esse truque muito bacana para atrair  e estimular os leitores a assinarem os feeds, acompanhar o blog em redes sociais, fazer contato, etc. Peguei os códigos, fiz umas adaptações e vou ensinar como instalar.
Você pode ver em ação NESTA página.
Vamos lá:
Copie todo o código CSS abaixo. Observe que você poderá alterar as cores de fundo e bordas do botão, se quiser, assim como substituir os ícones por outros modelos. No site FIND ICONS você encontra uma enorme variedade de ícones para tudo o que imaginar.

ul#menusisi {
position:fixed;
margin:0;
padding:0;
top:50px;
left:0;
list-style:none;
z-index:9999;
}
ul#menusisi li {
width:100px;
}
ul#menusisi li a {
display:block;
margin-left:-50px;
width:100px;
height:55px;
background-color:#141414;  /* Cor de fundo do botão */
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;  /* Cor da borda do botão*/
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .home a {
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .twitter a {
background-image:url(http://4.bp.blogspot.com/_DCJ4PAWLOdE/TIQlsr_XkyI/AAAAAAAAEtM/2f7I75luHyI/s1600/1283728665_twitter_47.png);
}
ul#menusisi .comentários a {
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a {
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .contato a {
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

Dentro da página “Editar HTML”  Cole o código CSS ANTES/ACIMA do seguinte código:

]]></b:skin>

Agora copie o Script abaixo:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
$(function() {
$(&#39;#menusisi a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000);
$(&#39;#menusisi &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},200);
}
);
});
</script>

Cole ANTES da tag </head>

Por último, copie o código HTML abaixo, coloque seu endereço nos locais sinalizados.

<ul id='menusisi'>
<li class='home'><a href='SEU-ENDEREÇO' title='Home'/></li>
<li class='twitter'><a href='twitter.com/USARNAME' title='Twitter'/></li>
<li class='rssfeed'><a href='http://SEU_BLOG.blogspot.com/feeds/posts/default' title='RSS Feed'/></li>
<li class='comentários'><a href='http://SEU_BLOG.blogspot.com/feeds/comments/full' title='Comentários'/></li>
<li class='contato'><a href='mailto: SEU_EMAIL' title='Contato'/></li>
</ul>

Cole ANTES da tag </body> (No final da página)
Prontinho!
Espero que gostem
Lembrando que com um pouco de paciência, você poderá mudar todo o desenho, alterar cores e deixar seu seu jeito, ou do jeito do seu blog.
Beijo da Mama ♥

Leia mais...

Tweet Tradutor de Textos no Browser (Navegador) - “Im Translator”

  Pesquisando complementos para o Firefox, encontrei um excelente tradutor de textos, fácil de instalar e prático demais. Para quem como eu, utiliza diariamente os tradutores de texto a fim de se comunicar, entender e trocar informações com gente do mundo todo, foi um achado de grande utilidade.  

Baixando o plugin, automaticamente é criado um ícone no navegador. Ao clicar nele, abre-se uma janela com todas as opções para a tradução desejada.

…

Aí fica fácil conversar até com meus amigos indianos, indonésios e vietnamitas que dão um banho de conhecimento e criatividade na Internet. Para quem usa Firefox, é muito fácil!clique na imagem.

Direto no site IM TRANSLATOR há opções de widgets para blogs.

Se que há um plugin para o Internet Explorer, mas não testei.

Beijo da mama ♥

Leia mais...

Tweet Template “Cartão de Visitas “

Demo / Download

Um  modelo Wordpress adaptado por Rodney SANKINKA para o Blogger, perfeito para quem está  ligado as redes sociais mas não se liga em “blogar”.  O template apresenta três páginas, uma para apresentação de trabalhos, uma breve descrição e contato.

Eu achei interessante mas ainda não fiz testes com ele. Me pareceu ser bem simples e fácil de customizar caso queira, por exemplo, um background diferente e ícones de outros sites de relacionamentos.

Dá uma olhada na página do autor onde há instruções detalhadas para a instalação.

Leia mais...