» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Hack Leia Mais com Imagens Reduzidas




Existem várias formas de você colocar o hack leia mais em seu blog.
Algumas das quais eu já ensinei aqui no TPV.
Hack Leia mais com Posts Expansíveis → Neste hack os posts se expandem na página principal do blog como um efeito sanfona.
Hack Leia mais → Neste hack podemos escolher qual parte do post ficará oculta na página principal e qual ficará à mostra. Quando clicamos em "Leia mais" a página do post se abre saindo da página principal.

» Hoje vou ensinar como aplicar no seu blog o hack de Posts Resumidos Automaticamente com Thumbnails onde o próprio hack já define quantos caracteres irão aparecer na página principal do blog automaticamente sem que você defina qual parte do post irá aparecer na página principal.
» Além deste recurso este hack também apresenta a possibilidade de aparecer uma imagem reduzida (thumbnail) da imagem que você adicionou no post, também na página principal.
» Este hack é a Versão 4.1 Auto Readmore criada pelo Vietnamita Anhvo dono do blog VIETWEBGUIDE.COM
Principais Vantagens:
♥ Você não precisa se preocupar com qual parte vai se expandir ou não, tendo que aplicar o <span="fullpost">Conteúdo oculto < /span> no seu post, como acontece com os hacks anteriores;
♥ O post da página principal do seu blog aparece resumido automaticamente → Isso diminui o trabalho na hora de criar o post;
♥ Você pode configurar quantos caracteres podem aparecer na página inicial do post, qual o tamanho da imagem reduzida e de qual lado ela deve ficar no resumo do post;
♥ As miniaturas(thumbnails) das imagens não ficam deformadas nos resumos dos posts;
♥ Você tem a opção de limitar, no seu post, até onde quer que apareça o resumo usando apenas uma tag (<!-- more -->).
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Obs: Se você já tem o hack instalado em seu blog pode atualizá-lo para esta versão 4.1.

Vamos ao hack:
Clique em Modelo► Editar HTML

1º- Passo:

» Encontre a linha:
<data:post.body/>
Clique Ctrl+F para encontrá-la. ATENÇÃO → Será a segunda linha que você vai encontrar no HTML do blog.
Substitua-a pelo código:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>»»Leia mais...</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>

Personalizando o [»»Leia mais....]

1- Você pode substituir as palavras »»Leia mais... Por Continue lendo..., Resto do Post, "...", etc.

2- Você também pode personalizar as palavras »»Leia mais... criando um comando CSS definido abaixo.
Copie e cole acima da linha ]]></b:skin> do HTML do seu blog o comando CSS abaixo:
♦ Para que fique apenas as palavras »»Leia mais... use o código abaixo:
/*---Readmore---*/
.rmlink {
font-size: 120%;
float: right;
margin-right: 30px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps; /*Todas as letras maiúsculas*/
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/

♦ Para que como um botão igual a este Leia Mais use o código abaixo:
/*---Readmore Button---*/
.rmlink a { display:inline-block;
background:#FF1D23;
background-image: -moz-linear-gradient(top,#FF1D23,#5C0002);
background-image: -webkit-gradient(linear,left top, left bottom, from(#FF1D23), to(#5C0002));
color:#FFF; font-size:12px; text-decoration:none; 
margin-left:5px;padding:5px 10px; -webkit-transition-duration: .90s; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor: pointer; font-weight: bold; text-shadow: 1px 1px 1px #333; -moz-box-shadow: 0 1px 1px #9c9c9c;
-webkit-box-shadow: 0 1px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;}
.rmlink a:hover { background:#5C0002;
background-image: -moz-linear-gradient(top,#5C0002,#FF1D23);
background-image: -webkit-gradient(linear,left top, left bottom,from(#5C0002),to(#FF1D23));}
3- Se você quiser colocar uma imagem no lugar de Leia Mais:
Veja a linha: <a expr:href='data:post.url'>Leia Mais</a> e substitua Leia Mais pelo código:
<img src='URL da Imagem' />
Assim você irá incluir uma imagem ao invés das palavras.

Obs: O hack já foi atualizado para não resumir os post das páginas estáticas do blogger.
♦ Clique em Visualizar para se certificar que está indo tudo certo.

2º- Passo:

» Encontre a tag: </head>

Cole abaixo desta tag o código abaixo:
<!-- JavaScript Posts Resumidos-->
<!--/*****************************************************
Auto-readmore link script, version 4.1 (for blogspot)
(C)2009 by Anhvo
Please dont remove this copyright or change it into your own
******************************************************/-->
<style type="text/css">
.thumbnailimg IMG {
   max-width:150px;
   width: expression(this.width > 150 ? 150: true);
   max-height:120px;
   height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
 float:left; 
 padding:10px 10px 0px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}

function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
   
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
   
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
 }
 
  var s = "";
 var indentBlank = "";
 for(var i=0;i<indent;i++){
  indentBlank += " ";
 }
 if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
 } else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
 }  
 return s;
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
 } 
 else {
 
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
 }
 
 var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
 
 div.innerHTML = summary;
 div.style.display = "block";
 }
}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Vamos entender o código acima:

Veja a parte que está em vermelho. Nela você pode fazer alterações para personalizar os posts resumidos do seu blog.
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>

1º Configurando a parte em CSS:

.thumbnailimg IMG {
max-width:150px;
→Valor máx. da largura da miniatura da imagem do seu post
width: expression(this.width > 150 ? 150: true);
max-height:120px; →Valor máx. da altura da miniatura da imagem do seu post
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
→ Lado que a miniatura ficará flutuada no resumo do post
padding:0px 10px 5px 0px; → Margem interna da imagem
}

2º Configurando alguns pontos do Script:

var thumbnail_mode = "no-float"; → Para que a miniatura fique sempre à esquerda selecione "float". Determina a flutuabilidade variável à esquerda da imagem.
var classicMode = false ; → False para modo clássico desligado. É aconselhável deixar em "true " se a var thumbnail_mode for definida para "float".
» Sugiro que você faça testes e mantenha o que melhor lhe agradar. Eu, prefiro o modo "true".
var summary_noimg = 50; → Corresponde ao corte do resumo quando seu post NÃO tem imagem.
var summary_img = 40; → Corresponde ao corte do resumo quando seu post tem imagem.
» Respectivamente o valor 50 significa "50 palavras" e o valor 40 significa "40 palavras" para o classicMode definido como "true".
♦ Clique em Visualizar para ver suas alterações.
♦ Se estiver tudo OK»» Clique em Salvar modelo.

Veja como ficou nos templates modelo 2006 e 2010 do blogger.

3º Passo - Opcional

» Você pode definir até onde o seu post será exibido na página principal usando uma única tag.
<!-- more -->
Você pode usar esta tag no meio do seu post, por exemplo veja a imagem:


OBSERVAÇÃO IMPORTANTE: Quando você configurar até onde será o resumo do seu post e esta parte tiver uma imagem, esta imagem não irá aparecer como miniatura da forma que aparece no resumo automático .

Fonte: Tradução e adaptação do link Auto Readmore ver 4.1

►Post Atualizado em 04/03/2014
Qualquer problema encontrado por favor me avisar para que este post possa ser útil sempre.

NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.
Observação: Este hack pode ser utilizado nos templates da plataforma Blogger 2006  e 2010.

4 Maneiras de Colocar um Gadget das Fotos do Instagram no seu Blog e mais uma Dica Grátis




O Instagram é um aplicativo que já conta com mais de 150 milhões de usuários em todo o mundo. Ficou tão famoso que o Facebook comprou-o por aproximadamente U$1 bilhão de dólares.

É uma rede social de compartilhamento de imagens e acredito que uma das causas de seu sucesso se deu por ter várias opções de filtros para as fotos podendo ser melhoradas (ou não), além de seus usuários poderem curtir e comentar nas suas fotos. Há ainda o uso de hashtags (#) possibilitando encontrar imagens relacionadas a um mesmo tema.

Existe a possibilidade de colocarmos Gadgets com as imagens do Instagram em nossos blogs.
Se soubermos explorar o seu potencial pode ser uma ferramenta interessante para conseguir visitas em nossos blogs.

Achei legal a ideia de colocar um Gadget com as fotos do Instagram no blog. Principalmente se seu blog for pessoal ou tiver várias imagens legais para postar.
Aqui no TPV vou criar um gadget com fotos dos Templates daqui. Vai ser bem legal!
E, quem sabe posso colocar algumas fotos dos hacks...??? Não sei... Ainda é uma ferramenta que pretendo explorar mais.

Então, como gosto de ensinar o que aprendo aqui, resolvi trazer para vocês alternativas para criar Gadgets em seu blog com as fotos do seu Instagram e também tem algumas dicas para vocês explorarem melhor este aplicativo.

Os blogueiros antenados podem postar fotos relacionadas ao seu blog pelo seu celular, tablet ou PC e estas fotos serão visualizadas em seu Gadget do Instagram.

Vamos lá:

1º SnapWidget - http://snapwidget.com/#getstarted

Este site oferece uma versão gratuita e uma versão paga para o Widget do Instagram.
Instagram widget1
» Na versão gratuita você terá que preencher as caixinhas em “Customize your widget
▼ Para você entender o que ele pede a imagem abaixo está com as opções em português.
Instagram widget2
♦ Na caixinha em destaque (Hover Effect) sugiro que coloque Fade Out que é a imagem normal e quando você passa o mouse em cima fica opaca.
♦ Fade In é o inverso a imagem está opaca e quando passa o mouse fica normal.



» Depois que você preencher as opções pedidas para montar o seu widget.
» Clique em Preview » Veja se seu widget ficou da forma que queria então clique em Close » Clique em Get Widget » Copie o código gerado » Abra seu blog » Vá em Layout » Crie um Gadget tipo HTML e cole o Código das suas fotos do Instagram para o Gadget do seu blog.
Instagram widget3 Instagram widget4 Instagram widget5
→Veja como Ficou no Demoplate 2006-2

Algumas Vantagens

» Em Widget Type você tem 5 opções de visualização do seu widget. Neste exemplo escolhi Grade (Grid), mas você pode mudar e ver como fica cada tipo quando clica em Preview.
» Possui botões de compartilhamento para o Facebook, Twitter, G+ e Tumblr

Desvantagem

♦ Uma desvantagem que encontrei deste site é que quando você clica na foto para visualizar melhor abrirá outra aba com a foto maior onde terão anúncios na página. Isso acontece apenas para a versão gratuita.

2º Intagme - http://www.intagme.com/

Instagram widget
» Este site funciona de uma forma semelhante ao anterior.
» Você pode criar um Gadget em forma de SlideShow ou em Grade.

Algumas Vantagens:

» Tem uma interface simples e limpa.
» Se você clicar na imagem para visualizar melhor a página que será aberta terá a opção de você seguir a pessoa pelo Instagram e de curtir a foto.
» Ainda não possuem anúncios nem na página inicial nem na página das suas fotos como o SnapWidget.
» Possui botões de compartilhamento para o Facebook, Twitter e G+ .

»Para criar o widget com as suas fotos do Instagram você irá proceder da mesma forma que o site anterior, então copie o código gerado e cole em um Gadget HTML do seu Blogger.


3º Statigram - http://statigr.am/

Instagram_no_blog-01O Statigram não é somente um site que gera widgets com as suas fotos do instagram.
Este site é muito interessante pois é uma ferramenta importante para você gerenciar sua conta do Instagram, principalmente se seu Instagram for para uso profissional.
Nele você pode ver estatísticas sobre:
♥ Likes Recebidos;
♥ Comentários;
♥ Novos Seguidores;
♥ Seguidores Perdidos;
♥ Quais fotos tiveram maior aprovação;
♥ Os 5 filtros que você mais usou, etc…

E também pode criar um widget para colocar no seu blog do Blogger e tem também plugin para colocar no Wordpress.
Para criar o widget para o seu blog do blogger você deverá entrar no site com a sua conta do Instagram clicando no canto superior direito do site como mostra a figura acima.
Veja na sequência de imagens abaixo:

Logar com a sua conta do Instagram Autorizar o acesso do Statigram a sua conta do Instagram » Coloque seu país e o email que usa no instagram.
» Você irá entrar em uma página com o seu feed das imagens das pessoas que segue.
» Então irá clicar em PROMOTE no auto da página.
Instagram_no_blog-02 Instagram_no_blog-03, Instagram_no_blog-04


» Role a página para baixo até encontrar “On your blog & website”
PHOTO GALLERY WIDGET » Clique em GET YOUR WIDGET
» Preencha com os dados necessários e deixe da forma que desejar.
» Note que a visualização do seu widget está ao lado.
» Clique em GET CODE » Copie o código gerado e cole em um Gadget tipo HTML do seu blogger.
Instagram_no_blog-05 Instagram_no_blog-061

4º WEBSTAGRAM - http://web.stagram.com/


Webstagram01
O Webstagram é parecido com o Statigram, com a pequena diferença de que não possui a “ferramenta” de estatísticas do Statigram o que o torna mais completo.
Mas não deixa de ser um excelente gerenciador de conta do Instagram, onde podemos curtir as fotos dos nossos amigos, comentar e até compartilhar nas redes sociais.

As funcionalidades de o WebStagram apresenta estão representadas nesta imagem abaixo:
 Webstagram03

Para que você crie seu widget com suas fotos do Instagram no WEBSTAGRAM 1º deverá fazer LOGIN na página inicial depois clique em TOOLS como na imagem:
Webstagram02  Na página seguinte » Vá até Instagram Gallery for your Blog / Website
Webstagram04
Preencha da forma que você já sabe » Clique em Preview para ver se ficou do seu jeito » Clique em Generate code » Copie o código gerado e cole em um Gadget HTML do seu blog.

5º Como Postar as fotos do seu PC no Instagram sem ter que enviar para o Celular:

Como vocês sabem, só podemos postar fotos no Instagram pelo celular ou tablet, a partir de seu aplicativo. Mas vi uma dica no site TechTudo de um software o Gramblr que possibilita que você compartilhe as fotos do seu PC sem ter que enviá-las para o celular ou tablet.


Você pode aprender como utilizá-lo neste link: TechTudo - Como publicar fotos no Instagram direto do computador usando o Gramblr
E pode baixá-lo neste link: Download Gramblr

Pronto! Agora você já tem 4 Opções para Criar um Gadget com as fotos do Instagram em seu Blog e também uma opção de postar suas fotos pelo PC.

Espero que você tenha gostado das dicas e se souber de mais alguma dica relacionada a este post deixe seu comentário aqui no blog!


Para Complementar o Conteúdo

4 dicas para "bombar" seu Instagram
81 sites úteis para compartilhar e imprimir fotos do Instagram

Botões Sociais Abaixo do Título e no Final do Post Parte-01





Como colocar Botões Sociais nos Posts do seu Blog

Sabe os botões das redes sociais que ficam no final dos posts indicando para você curtir no Facebook, Twittar o post que gostou, recomendar no G+ e até pinar no Pinterest?

Pois é, existem vários sites que disponibilizam uma infinidade de modelos destes botões para você colocar em seu blog. Mas, para isso é necessário fazer um cadastro com seu email e senha para pegar o código dos botões.
Como é o caso dos sites:
Todos os 4 sites necessitam de login e senha para configurar o código dos Botões de Social Bookmarking.

Por falar nisso... »»» Você sabe o que é Social Bookmarking?

backup do template Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
Leia o tutorial até o fim e tenha certeza de ter entendido.

Há também uma forma de colocá-los sem que tenha que fazer cadastro nestes sites, que é esta que vou ensinar neste post:


Chamo-os de botões de compartilhamento automáticos.
Muito parecidos com os nativos do blogger:

Aqui no TPV uso-os na página inicial ao lado esquerdo dos posts e no interior uso os botões do Addthis - assunto para os próximos posts.

Em alguns templates que faço uso os botões sociais na horizontal no final dos posts como é o caso do Template Valentine.

Veja como fica em um post do Valentine


Estes botões na forma horizontal são ideais para colocar no final do post ou logo abaixo do título do post.

Então vamos lá:

1º Passo: Código dos Botões Sociais na Horizontal para Copiar e Colar

Este é o código dos Botões Sociais na horizontal como na imagem acima.
» Você irá copiar este código e colá-lo onde for indicado de acordo com o local onde deseja colocá-los.
<!-- Remover esta linha para Botões Sociais aparecerem na página inicial --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/pt_BR/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper &gt; a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
 <div class='clear'/>
<!-- Remover esta linha --></b:if>

Observações Importantes:

♦ Para que você coloque os botões sociais deverá desabilitar os botões nativos do blogger.
♦ Isso vale tanto para estes que estou ensinando agora quanto para os outros relacionados com os sites de botões de social bookmarking que vou ensinar.
Siga as instruções desta imagem:
►Clique em Layout » em Postagens no blog clique em Editar » Desmarque a caixinha Mostrar botões de compartilhamento.

♦ Você tem a opção dos botões sociais aparecerem na página inicial e ou somente nas páginas dos posts.
Para que apareça na página inicial também basta que tire estas 2 linhas indicadas no código dos botões sociais. (a 1ª e a última)
<!-- Remover esta linha para Botões Sociais aparecerem na página inicial --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Remover esta linha --></b:if>

2º Passo: Instalando os botões sociais nos posts.

1- Como colocar os botões sociais abaixo do título do post.

► Vá em Modelo » Clique em Editar HTML » Utilize Crtl+F e Encontre as linhas:
    <div class='post-header'>
    <div class='post-header-line-1'/>
Obs: Se tiver dificuldades de encontrar as linhas leia→ Como Acessar o Editor de HTML do Blog e Ativar o Search

► Copie e cole o código dos botões sociais logo abaixo da linha ▼
    <div class='post-header-line-1'/>
► Clique em Salvar modelo
Obs: Você encontrará estas linhas 2 vezes no seu código HTML, deverá colar o código abaixo das linhas que estão contidas neste bloco de códigos:
<b:includable id='post' var='post'>  (Será a 2ª vez que aparecerão ao dar enter quando procura pelo Search do Editor de HTML do blogger)

☺ Veja como ficou no Demoplate 2010-2

♦ Neste caso tirei a linha condicional que define para que os botões sociais apareçam apenas quando clicamos no post e deixei visível na página inicial abaixo do título do post.
Obs: Percebeu que na página inicial o botão do Pinterest não aparece?
→Não se preocupe, quando o clicar no post este botão aparecerá.

» Quer Aprender sobre as Condicionais do Blogger?

Temos dois artigos aqui no TPV que explicam tudo sobre as condicionais:
♥ Condicionais no Blogger–Parte 01–Ocultando Elementos em Páginas Específicas
♥ Condicionais no Blogger–Parte 02–Exibindo Elementos em Páginas Específicas

2- Como colocar os botões sociais no final (rodapé) do post.

► Vá em Modelo » Clique em Editar HTML » Utilize Crtl+F e Encontre as linhas:
    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
► Copie e cole o código dos botões sociais logo abaixo da linha:
    <div class='post-footer-line post-footer-line-1'>
► Clique em Salvar modelo
Obs:
1- Você encontrará estas linhas 2 vezes no seu código HTML, deverá colar o código abaixo das linhas que estão contidas neste bloco de códigos:
<b:includable id='post' var='post'>  (Será a 2ª vez que aparecerão ao dar enter quando procura pelo Search do Editor de HTML do blogger)
2- Você pode colocar os botões sociais onde quiser no rodapé do post.
Neste exemplo coloquei na post-footer-line-1 acima da atribuição e marcadores.
Basta identificar os outros post-footer-line-2 e 3 e colar o código onde preferir.

☺ Veja como ficou no Demoplate 2006-2



Pronto! Agora é só colocar os botões sociais em seu blog para que as pessoas possam compartilhar seus artigos e imagens nas redes sociais mais utilizadas no Brasil!☺




O Templates para VOCÊ Brilhou Novamente no Ranking Top Blogger 2013




Ranking Top Blogger da Língua Portuguesa 2013 - Top 15
Olá Amigos,

O Templates para VOCÊ conquistou novamente a 11ª posição do Ranking Top Blogger 2013.

Esta foi a 2ª edição do Ranking Top Blogger e o Templates para VOCÊ manteve a posição anterior.

Estou muito Feliz com este resultado!


Tá bom, tá bom estou procrastinando novamente no TPV, mas com um incentivo destes, vendo que o TPV não é qualquer blog, isso é uma injeção de ânimo!

Para quem não sabe do que se trata, este ranking foi criado pelo Adelson Smania autor do Gerenciando Blog e tem o objetivo de destacar os blogs mais relevantes nessa plataforma, mostrando que é possível ter um blog de sucesso no Blogger – contrariando o que muitos pregam.
I love Blogger
As inscrições para o Ranking foram recolhidas até 30 de novembro de 2013.
Fiz um post aqui no blog convidando os blogueiros a participarem com direito a imagem exclusiva e tudo :-)

Se você participou do Ranking e ainda não sabe sua colocação é só clicar no selinho no alto da página que ele vai te levar ao resultado.


Template Angel-1 Atualizado




Olá Leitores do TPV,

Desde quando voltei a blogar uma das propostas da minha volta era atualizar gradativamente os templates já criados por mim.

Hoje estou disponibilizando a atulaização do Template Angel-1.
Este template já foi atualizado uma vez em 2009. Desde foi criado o Angel-1 já teve mais de 3.000 downloads .

Com as mudanças do blogger alguns recursos ficaram comprometidos, então resolvi atualizá-lo novamente. Inclusive atendendo a pedidos de leitores muito simpáticos que gostam muito deste template.

Vejam algumas as alterações que fiz neste template:
♦ Implantei alguns hacks para melhorar sua performance.
♦ Os comentários foram corrigidos.
♦ O visual do template ficou mais legal.
♦ Alterei algumas fontes de títulos.
♦ Acrescentei no rodapé das postagens os posts relacionados e links para compartilhar.
♦ Acrescentei meta-tags no início do código fonte do template (mais abaixo nas instruções você verá como configurar as meta-tags do seu blog neste template).

Os leitores que já usam este template podem baixar este arquivo e atualizá-lo.

Ficou bem legal!
Veja o antes e o depois do Template Angel-1
Angel-1 Novo
Angel-1 Antigo



Hacks instalados:

  1. Hack Leia Mais com Imagens Reduzidas

  2. Link de Comentários Corrigido

  3. Personalizando a Data do seu Post

  4. Como usar Fontes Diferentes em seu Blog

  5. Como usar Fontes Diferentes em seu Blog do Blogger

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!

Observações:

♦ Todos os códigos Javascript usados no template estão contidos nele.

♦ Para instalar o seu template leia: Como Instalar o Seu Template

♦ O Template já contém Metatags instaladas no código fonte que você precisa alterá-las de acordo com a sua necessidade.
Para isso vá em:  Modelo » Editar HTML
Estas linhas estão no começo do código fonte do template.
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/> | Descrição do Seu Blog</title>
    </b:if>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='Descrição do Seu Blog aqui!' name='description'/>
    <meta content='Palavras chave aqui!' name='keywords'/>
    <meta content='Nome do Autor!' name='Author'/>
    <meta content='general' name='rating'/>
    <meta content='all' name='robots'/>
    <meta content='index, follow' name='robots'/>
    <meta content='id' name='geo.country'/>
    <meta content='1 days' name='revisit-after'/>
    <meta content='Brazil' name='geo.placename'/>
</b:if>
Substitua os itens em vermelho pelo que está sendo pedido.
Para entender melhor o que são metatags acesse:
♦ SEO no Blogger: Metatags
♦ Como Ativar a Função Descrição do Post no seu Blogger e para as Redes Sociais

A Pasta de Download Contém

  • Código XML;
  • Imagens usadas no template.

Sugestões de Hacks para você usar em seu template:



NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.


Aproveitem ☺
Template Atualizado em 11/01/2014

Gadget das Redes Sociais em Estilo Metro




Share-Estilo MetroVocês já viram na web vários sites com ícones grandes de estilo limpo(clean), cores vivas, parecidos com o visual do windows 8.0.

Esta é uma tendência da Web2.0: o Estilo Metro

Esta tendência começou com o Windows e tem tomado conta dos estilos dos sites na web.
Encontrei 2 definições deste estilo que podem resumir o que é o Estilo Metro (ou em inglês Metro Web Design).

O que é o Estilo Metro?

Desde que a Microsoft lançou o projeto Metro UI no Windows Phone 7, o web design metro tem sido bem utilizado para todos os produtos da Microsoft e aplicações Windows. Muitos desenvolvedores da web estão seguindo o design estilo Metro e Metro UI por sua simplicidade e elegância que ele traz visando o conteúdo do web site.
Fonte: http://www.magazinehive.com/2013/09/metro-web-design-inspiration/
Metro é um estilo de design e linguagem desenvolvida pela Microsoft. Produtos como o Zune, Windows Phone, Xbox e Windows 8 seguem o estilo de design Metro. O principal objetivo deste estilo de design é para remover qualquer decoração extra e permitir que os usuários interajam diretamente com o conteúdo. É tudo sobre o conteúdo e a beleza da simplicidade.
Fonte: http://www.blinkux.com/metro/

As características básicas do Estilo Metro são:

  • O conteúdo como foco principal (Visão global);
  • Rapidez e Fluidez;
  • Mais atenção à tipografia;
  • Texto é a principal forma de navegação;
  • Cores brilhantes e vivas.
  • Uso de cubos coloridos e peças quadradas como elementos de navegação;
  • Grandes títulos de página;
  • Faça mais com Menos (Minimalista).

Neste artigo vou ensinar como colocar um Gadget com os links das principais Redes Sociais do momento no estilo Metro. Ou seja, limpo, bonito e fácil.

Demonstração

Como colocar um Gadget das Redes Sociais no Estilo Metro

Para ajudar fiz este Vídeo tutorial que ensina como adicionar um Gadget tipo HTML/Javascript no seu blog.


→ Vá em Layout» Escolha a Coluna que deseja colocar o Gadget » Clique em Adicionar um Gadget » Escolha um gadget tipo HTML

Cole o código abaixo no espaço reservado para isto:
<div class="MBD2B-social">
<li><a class="fb" href="URL_Facebook"></a></li>
<li><a class="tw" href="URL_Twitter"></a></li>
<li><a class="gp" href="URL_Google+"></a></li>
<li><a class="fd" href="URL_Feedberner"></a></li>
</div>
<style>
.MBD2B-social{width:285px}
.MBD2B-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.MBD2B-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.MBD2B-social .fb{background:url(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png) no-repeat center center #1f69b3;width:140px;height:141px}
.MBD2B-social .tw{background:url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png) no-repeat center center #43b3e5;width:140px;height:70px}
.MBD2B-social .gp{background:url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g+1.png) no-repeat center center #da4a38;width:140px;height:69px}
.MBD2B-social .fd{background:url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png) no-repeat center center #e9a01c;width:282px;height:69px}
.MBD2B-social li:hover .fb{background:url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png) no-repeat center center #1f69b3}
.MBD2B-social li:hover .tw{background:url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png) no-repeat center center #43b3e5}
.MBD2B-social li:hover .gp{background:url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g+2.png) no-repeat center center #da4a38}
.MBD2B-social li:hover .fd{background:url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png) no-repeat center center #e9a01c}
</style>

Como configurar o seu Gadget

1- Configure as URLs das Redes Sociais
♦ Em URL_Facebook » Coloque o link da sua página do Facebook

♦ Em URL_Twitter » Coloque o link do seu Twitter

♦ Em URL_Google+ » Coloque o link da sua página no G+

♦ Em URL_Feedberner » Coloque o link do seu Feed

O que? Ainda não ativou os Feeds para o seu blog?
Então leia este artigo: O que são feeds e entenda a importância de ter feeds para o seu blog.

2- Se você quiser hospedar as imagens do Gadget em seu blog para não correr o risco ultrapassar largura de banda elas estão neste link:

» Imagens para o Gadget de Redes Sociais Estilo Metro

Baixe-as - Hospede em seu blog e substitua os links em azul no código acima.


Fontes:
Tradução e adaptação do post:
http://fbgadgets.blogspot.com.br/2013/08/sharing-post-widget.html 
Para saber mais Sobre Estilo Metro:
http://designwebkit.com/web-and-trends/metro-style-website-templates-secret-side-latest-design-trend/
http://code52.org/metro.css/
http://metro-webdesign.info/
http://en.wikipedia.org/wiki/Metro_(design_language)
http://www.101webdesigns.com/2013/03/metro-style-designs/
http://designm.ag/inspiration/34-flat-layouts-design-inspiration/
http://www.magazinehive.com/2013/09/metro-web-design-inspiration/
http://win81dicas.blogspot.com.br/2013/07/criando-icones-estilo-metro.html

Crie uma Imagem de Nuvem de Tags para o seu Blog




nuvem de tags

Quer criar uma imagem que possa Identificar o seu Blog?


Uma sugestão é uma Imagem de Nuvem de Tags.

O que são tags?

Segundo a Wikipedia
Tag(metadados) = Uma tag, ou em português etiqueta, é uma palavra-chave (relevante) ou termo associado com uma informação (ex: uma imagem, um artigo, um vídeo) que o descreve e permite uma classificação da informação baseada em palavras-chave.
Tags ou etiquetas são, usualmente, escolhidas informalmente e como escolha pessoal do autor ou criador do item de conteúdo - isto é, não é parte de um esquema formal de classificação. É um recurso encontrado em muitos sites de conteúdo colaborativo recentes e por essa razão, "tagging" associa-se com a onda Web 2.0.
Metadados, ou Metainformação, são dados sobre outros dados. Um item de um metadado pode dizer do que se trata aquele dado, geralmente uma informação inteligível por um computador. Os metadados facilitam o entendimento dos relacionamentos e a utilidade das informações dos dados.
A imagem do começo deste artigo foi criada com as palavras que considero mais relevantes do Templates para VOCÊ e eu a uso na capa das páginas do Facebook e G+. Foi a forma que encontrei de representar o blog na forma de imagem.

Veja que na imagem relacionei os principais assuntos do blog, como: Tutoriais, Templates, Hacks Blogger, Gadgets, SEO, Ícones, Javascript, HTML, etc…

Como você pode criar uma imagem como esta?

Há um site na internet que gera nuvem de tags na forma de imagem.

O site se chama Wordle

Nuvem de tags

Para você criar a sua imagem você clica em Create your own que irá te enviar para esta página.▼
Nuvem de tags
▲ Aqui você pode colocar as palavras chave ou tags que determinam o assunto do seu blog ou colocar o link e deixar que o site gere a nuvem de tags com as palavras mais encontradas em seu blog.

» Neste exemplo utilizei palavras chave que representam coisas boas!
→ Você clica em Go ou em Submit

O site irá te direcionar para esta página ▼ onde você pode editar a imagem alterando a Fonte, Layout, Cores, Etc… Use a sua imaginação!
Nuvem de tags
Atenção: Como o Wordle é um miniaplicativo Java é necessário o java que esteja instalado em seu computador para que funcione corretamente.

Para que você salve a imagem gerada, você deve clicar em Open in Window e tirar um PrintScreen da tela com a imagem da nuvem de tags.

Salve em um programa de edição de imagens de sua preferência e edite a imagem para o tamanho que quiser.
A minha imagem de nuvem de tags de palavras boas ficou assim:
Nuvem de tags

Uso uma imagem de nuvem de tags para a capa da página do Templates para VOCÊ no Facebook e no G+. Veja como fica nas Redes Sociais:

Capa do Facebook

Nuvem de tags-Facebook

Capa do G+

Nuvem de tags-GooglePlus

Espero que vocês tenham gostado! ;-) Corre lá e crie a imagem de nuvem de tags para o seu blog!


O Domínio Personalizado do seu Blog do Blogger não abre sem WWW? Aprenda a corrigir isso.




www

Você comprou um domínio para o seu blog no blogger, colocou para funcionar.

Mas quando digita o endereço do seu blog sem o www não consegue acessar?

Por algum tempo não estava conseguindo acessar o blog apenas digitando farmaceuticodigital.com e não gostava disso, tinha que ficar digitando o www. sempre antes do domínio.

Sinceramente, dá uma preguiça enorme ter que ficar digitando o www toda vez que vai acessar algum site que você gosta né!

Se o seu blog é do Blogger há um procedimento bem simples para configurar para acessar o blog sem ter que digitar o www antes do endereço.
Para este tutorial usarei como exemplo a página de configurações do meu outro blog o Farmacêutico Digital.

Como ativar o endereço do seu blog sem a necessidade de digitar o WWW.


» Vá em configurações » Em Básico na parte Publicação você verá o seu domínio e o domínio do blogger abaixo que redireciona para o domínio personalizado.

Então clique em Editar.



Quando você clica em Editar a parte Publicação irá expandir com as Configurações avançadas como está na imagem abaixo, onde você terá que marcar a caixinha onde está escrito para » Redirecionar SEU DOMÍNIO para WWW.SEUDOMÍNIO.

Clique em Salvar, aguarde um tempinho e faça o teste. Digite seu domínio sem o www para ver se seu blog será direcionado corretamente.



No caso do exemplo que usei não preciso mais ter que digitar [www.farmaceuticodigital.com] para acessar o meu blog, apenas [farmaceuticodigital.com].


Muito Fácil né!

©2013 Templates para Você Aproveite para Assinar o nosso Feed e me acompanhe no Twitter ;-)

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger