Templates para VOCÊ

Como Inserir Formulário de Contato do Blogger

noreply@blogger.com (Aurea Carvalho) — Wed, 22 May 2013 12:06:27 PDT

Formulário de Contato do Blogger

Estava navegando, acabei de ver esta opção e achei o máximo, porque seus leitores podem entrar em contato com você diretamente sem que tenha que enviar emails e nem ficar criando formulários de contato em sites externos, etc...

A mensagem que o leitor enviar chegará diretamente no e-mail que você usa para administrar o blog.

As vezes queremos entrar em contato com o autor do blog e precisamos deixar o nosso e-mail.
Sim temos os comentários, mas que na maioria das Regras para Comentários dos blogs não é permitido e nem seguro deixar seu e-mail para que todos os outros leitores daquele blog o vejam.
O formulário de contato dá esta privacidade ao leitor e é uma forma de contato direto do leitor / autor.

Você pode usar esta ferramenta de muitas formas:
Ex: Aqui no TPV o meu Formulário de Contato será uma forma do leitor enviar sugestões de artigos que esteja afim de aprender e, se eu puder ajudar irei fazê-lo.

É muito fácil, é só criar um Gadget no seu blog que o google faz o resto.

Vamos lá:

Como Inserir o Fomulário de Contato do Blogger no Seu Blog

Vá em Layout » Clique em Adicionar um Gadget

Irá abrir esta tela:

Selecione a opção Mais gadgets à esquerda » Nesta opção selecione Formulário de contato que, neste caso, é a segunda opção. Caso não apareça nesta página pesquise na caixinha acima (pesquisar gadgets).

Selecionou o Formulário de Contato?

Então irá aparecer esta tela abaixo onde você irá colocar o Título que desejar e clique em Salvar.

☺ Pronto! Seu formulário de contato está concluído, agora é só ir na página de Layout, localizá-lo, colocar onde preferir e salvar.

Vi esta dica neste Link

Marcadores parecendo Botões. Saiba como fazer aqui!

noreply@blogger.com (Aurea Carvalho) — Wed, 22 May 2013 12:08:47 PDT

1º Passo - Alterações Necessárias no Gadget Marcadores

1º Vá em Layout » Encontre o gadget Marcadores do seu blog clique em Editar e faça as seguintes alterações
• Em Mostrar Marque → Todos os marcadores
• Em Classificação Marque →Em ordem Alfabética
• Em Exibir Marque → Exibir como Could(=Nuvem)
• Desmarque → Mostrar número das postagens por marcador

2º - Código CSS para os Marcadores como Botões

1ª Opção

Da forma como está na 1ª imagem acima é só acrescentar este ▼código acima da tag ]]></b:skin>

/*Marcadores-Post*/
.post-labels span, .post-labels a{ 
color: #FFF; /*Cor da fonte*/
background: #D28C96; /*Cor do fundo do Botão*/ 
font-size:10px; /*Tamanho da fonte*/
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
padding:2px 5px; 
margin:2px; 
display:inline-block; 
text-transform:none; 
-webkit-transition-duration: .90s; 
} 
.post-labels span, .post-labels a:hover{ 
background: #FFDDDB;/*Cor do fundo do botão quando passamos o mouse em cima*/
color: #333;/*Cor da fonte quando passamos o mouse em cima*/ 
}

♥ O marcador deste código está configurado para ficar assim: MARCADOR
♥ Quando passarmos o mouse em cima ficará assim: MARCADOR
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

♦ Configure os seus botões com as cores que quiser.
»Para aprender como acesse estes links:

♥ Como identificar cores

♥ Site com Cores e seus Códigos para o seu Blog/Site

2ª Opção

Após fazer as alterações na gadget de marcadores como mostrei acima.

»Vá em Modelo » Editar HTML » Clique em Prosseguir » Encontre a tag ]]></b:skin> e cole este ▼ código acima desta tag:

/*Links Gadget Marcadores*/
.label-size span, .label-size a{ 
color: #C54160; /*Cor da fonte*/
background: #FAE7EB;/*Cor do fundo do Botão*/
font-size:12px;/*Tamanho da fonte*/
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
padding:2px 5px; 
margin:2px; 
display:inline-block; 
text-transform:none; 
-webkit-transition-duration: .90s; 
} 
.label-size span, .label-size a:hover{ 
background: #FFDDDB;/*Cor do fundo do botão quando passamos o mouse em cima*/
color: #333;/*Cor da fonte quando passamos o mouse em cima*/
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
}

Aí é só configurar os seus botões com as cores que quiser.

♥ O marcador deste código está configurado para ficar assim: MARCADOR
♥ Quando passarmos o mouse em cima ficará assim: MARCADOR

3ª Opção

Uma Outra opção de Configuração dos marcadores é esta que fiz no Aukimia:

Cole o código abaixo acima da tag ]]></b:skin> e o resultado será igual

/*Labels
------------------------------------------------------------ */
.Label a{
padding-left:10px;
background:#D2136F;/*Cor do fundo do Botão*/
padding:0 10px;
color:#fff!important;/*Cor da fonte*/
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left; text-align:center;
margin-left:1px;
margin-top:1px;
font-size:13px;/*Tamanho da fonte*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
}
.Label a:hover{
background:#FF9B98;/*Cor do fundo do botão quando passamos o mouse em cima*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
}

Configure as cores como quiser

Camera Slideshow com Posts Automáticos para o Blogger

noreply@blogger.com (Aurea Carvalho) — Fri, 10 May 2013 13:45:20 PDT

Camera Slideshow

Estou mudando o template do meu 1ª blog o Aukimia e estou apanhando bastante para deixar do jeito que quero.
Mas aprendi uma coisa bem legal que vou ensinar aqui:

Como Instalar o Camera Slideshow no Blogger

Este slide tem a particularidade de não precisar configurar os slides, como muitos outros, é automático e apresentando os posts do seu blog aleatoriamente ou não. Você é quem escolhe.

O autor se baseou no Camera Slideshow Free de Manuel Masia do site Pixedelic.com.

1º Passo - Colocando o Estilo e Javascript no Template

Procure a tag </head> cole este código acima desta tag:

<!--start Camera Slideshow-->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   
      <b:if cond='data:blog.pageType != &quot;item&quot;'>    
        <style type='text/css'>    
          /* Slider */    
          .camera_wrap a,.camera_wrap img,.camera_wrap ol,.camera_wrap ul,.camera_wrap li,.camera_wrap table,.camera_wrap tbody,.camera_wrap tfoot,.camera_wrap thead,.camera_wrap tr,.camera_wrap th,.camera_wrap td    
          .camera_thumbs_wrap a,.camera_thumbs_wrap img,.camera_thumbs_wrap ol,.camera_thumbs_wrap ul,.camera_thumbs_wrap li,.camera_thumbs_wrap table,.camera_thumbs_wrap tbody,.camera_thumbs_wrap tfoot,.camera_thumbs_wrap thead,.camera_thumbs_wrap tr,.camera_thumbs_wrap th,.camera_thumbs_wrap td{background:none;border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;list-style:none}    
          .camera_wrap{display:none;float:left;position:relative;z-index:0;width:97.6%;padding:6px 7px 6px 6px;border:1px solid #e3e3e3}    
          .camera_wrap img{max-width:none!important}    
          .camera_fakehover{height:100%;min-height:100px;position:relative;width:100%;z-index:1}    
          .camera_src{display:none}    
          .cameraCont,.cameraContents{height:100%;position:relative;width:100%;z-index:1}    
          .cameraSlide{bottom:0;left:0;position:absolute;right:0;top:0;width:100%}    
          .cameraContent{bottom:0;display:none;left:0;position:absolute;right:0;top:0;width:100%}    
          .camera_target{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;text-align:left;top:0;width:100%;z-index:0}    
          .camera_overlayer{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:0}    
          .camera_target_content{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:2}    
.camera_target_content .camera_link{background:url(http://1.bp.blogspot.com/-HVkOhvZvPWE/UQlkh-TuJsI/AAAAAAAAIEI/3OoSgPgTtvk/s1600/blank.gif);display:block;height:100%;text-decoration:none}    
          .camera_loader{background:url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;background:rgba(255,255,255,0.9) url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;border:1px solid #fff;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;height:36px;left:50%;overflow:hidden;position:absolute;margin:-18px 0 0 -18px;top:50%;width:36px;z-index:3}    
          .camera_bar{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:3}    
          .camera_thumbs_wrap.camera_left .camera_bar,.camera_thumbs_wrap.camera_right .camera_bar{height:100%;position:absolute;width:auto}    
          .camera_thumbs_wrap.camera_bottom .camera_bar,.camera_thumbs_wrap.camera_top .camera_bar{height:auto;position:absolute;width:100%}    
          .camera_nav_cont{height:65px;overflow:hidden;position:absolute;right:9px;top:15px;width:120px;z-index:4}    
          .camera_caption{bottom:0;display:block;position:absolute;width:100%}             .camera_caption &gt; div{padding:10px 10px}    
          .camerarelative{overflow:hidden;position:relative}    
          .imgFake{cursor:pointer}    
          .camera_prevThumbs{bottom:4px;cursor:pointer;left:0;position:absolute;top:4px;visibility:hidden;width:30px;z-index:10}    
          .camera_prevThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -160px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}    
          .camera_nextThumbs{bottom:4px;cursor:pointer;position:absolute;right:0;top:4px;visibility:hidden;width:30px;z-index:10}    
          .camera_nextThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -190px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}    
          .camera_command_wrap .hideNav{display:none}    
          .camera_command_wrap{left:0;position:relative;right:0;z-index:4}    
          .camera_wrap .camera_pag .camera_pag_ul{list-style:none;margin:0;padding:0;text-align:center}    
          .camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-align:left;text-indent:-9999px;width:16px}    
          .camera_commands_emboss .camera_pag .camera_pag_ul li{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}    
          .camera_wrap .camera_pag .camera_pag_ul li &gt; span{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:8px;left:4px;overflow:hidden;position:absolute;top:4px;width:8px}    
          .camera_commands_emboss .camera_pag .camera_pag_ul li:hover &gt; span{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}    
          .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{-moz-box-shadow:0;-webkit-box-shadow:0;box-shadow:0}    
          .camera_pag_ul li img{display:none;position:absolute}    
          .camera_pag_ul .thumb_arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid;top:0;left:50%;margin-left:-4px;position:absolute}    
          .camera_prev,.camera_next,.camera_commands{cursor:pointer;height:40px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:2}    
          .camera_prev{left:0}    
          .camera_prev &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat 0 0;display:block;height:40px;width:40px}    
          .camera_next{right:0}    
          .camera_next &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -40px 0;display:block;height:40px;width:40px}    
          .camera_commands{right:41px}    
          .camera_commands &gt; .camera_play{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -80px 0;height:40px;width:40px}    
          .camera_commands &gt; .camera_stop{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -120px 0;display:block;height:40px;width:40px}    
          .camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-indent:-9999px;width:16px}    
          .camera_thumbs_cont{-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;overflow:hidden;position:relative;width:100%}    
          .camera_commands_emboss .camera_thumbs_cont{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}    
          .camera_thumbs_cont &gt; div{float:left;width:100%}    
          .camera_thumbs_cont ul{overflow:hidden;padding:3px 4px 8px;position:relative;text-align:center}    
          .camera_thumbs_cont ul li{display:inline;padding:0 4px}    
          .camera_thumbs_cont ul li &gt; img{border:1px solid;cursor:pointer;margin-top:5px;vertical-align:bottom}    
          .camera_clear{display:block;clear:both}    
          .showIt{display:none}    
          .camera_caption a{color:#FF007F;font:18px Arial;margin:0 10px 10px 0}
          .camera_caption a:hover{color:#fff}
          .camera_caption .comt{font:11px Tahoma;margin:5px 0 0;color:#fc0; display:none}
          .camera_caption p{font:12px Arial;margin:5px 0 0}    
          .camera_clear{clear:both;display:block;height:1px;margin:-1px 0 25px;position:relative}    
          .pattern_1 .camera_overlayer{background:url(http://4.bp.blogspot.com/-mK_USJALT1w/USSK5zcb0VI/AAAAAAAAAPM/BXmbKtwCdPI/s1600/laya.png) repeat}    
          .pattern_2 .camera_overlayer{background:url(http://2.bp.blogspot.com/-VVgg8zHpY1Q/USSLGoqh93I/AAAAAAAAAPU/1L3y6jLQv3I/s1600/layb.png) repeat}    
          .pattern_3 .camera_overlayer{background:url(http://2.bp.blogspot.com/-vt97g0-7sy0/USSLQhI53RI/AAAAAAAAAPc/LUep3GmWmnI/s1600/layc.png) repeat}    
          .pattern_4 .camera_overlayer{background:url(http://1.bp.blogspot.com/-siY1U2dtkdk/USSLcJ6_iWI/AAAAAAAAAPk/P8wAOzA3Myo/s1600/layd.png) repeat}    
          .pattern_5 .camera_overlayer{background:url(http://4.bp.blogspot.com/-svWnNDcbzkQ/USSLndwFBeI/AAAAAAAAAPs/IpAgpa_YNXs/s320/laye.png) repeat}    
          .pattern_6 .camera_overlayer{background:url(http://4.bp.blogspot.com/-beOrTn_xAb0/USSL5TpKKKI/AAAAAAAAAP0/Be6TaEBGNbM/s320/layf.png) repeat}    
          .pattern_7 .camera_overlayer{background:url(http://1.bp.blogspot.com/-ZIu8sF_tT74/USSMFPPT_aI/AAAAAAAAAP8/ihrFsYG3Y4E/s320/layg.png) repeat}    
          .pattern_8 .camera_overlayer{background:url(http://1.bp.blogspot.com/-KSaEP4OQ_qw/USSMPrJ3PzI/AAAAAAAAAQE/K-3k29KDUwM/s320/layh.png) repeat}    
          .pattern_9 .camera_overlayer{background:url(http://3.bp.blogspot.com/-FilWZbFD07E/USSMiDKIURI/AAAAAAAAAQM/K7a6fvbnvGc/s1600/layi.png) repeat}    
          .pattern_10 .camera_overlayer{background:url(http://4.bp.blogspot.com/-M96ItiZRE7w/USSMiAM3xEI/AAAAAAAAAQQ/_NGNkQuKAnM/s320/layj.png) repeat}    
          .camera_caption{color:#fff}    
          .camera_caption &gt; div{background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png)}    
          .camera_wrap .camera_pag .camera_pag_ul li{background:#8cd700}    
          .camera_wrap .camera_pag .camera_pag_ul li:hover &gt; span{background:#8CD700}    
          .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{background:#222;box-shadow: 0 0 8px #e6aef8}    
          .camera_pag_ul li img{border:3px solid #f3fbfd;-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);box-shadow:0 3px 6px rgba(0,0,0,.5)}    
          .camera_pag_ul .thumb_arrow{border-top-color:#f3fbfd}    
          .camera_prevThumbs,.camera_nextThumbs,.camera_prev,.camera_next,.camera_commands,.camera_thumbs_cont{background:#f3fbfd;background:rgba(216,216,216,0.85)}    
          .camera_wrap .camera_pag .camera_pag_ul li{background:#f3fbfd;box-shadow:0 1px 3px #6ab3cc; -moz-box-shadow:0 1px 3px #6ab3cc; -webkit-box-shadow:0 1px 3px #6ab3cc}    
          .camera_thumbs_cont ul li &gt; img{border-color:1px solid #000}    
         
/*WHITE SKIN*/    
          .camera_white_skin .camera_prevThumbs div {    
            background-position: -160px -640px;}    
          .camera_white_skin .camera_nextThumbs div {    
            background-position: -190px -640px;}    
          .camera_white_skin .camera_prev &gt; span {
            background-position: 0 -640px;}    
          .camera_white_skin .camera_next &gt; span {
            background-position: -40px -640px;}    
          .camera_white_skin .camera_commands &gt; .camera_play {
            background-position: -80px -640px;}    
          .camera_white_skin .camera_commands &gt; .camera_stop {    
            background-position: -120px -640px;}    
          @media screen and (max-width: 960px) {    
            .main-wrapper{width:65.5%}    
            .sidebarleft-wrapper,.sidebar2-wrapper{display:none}}
          @media screen and (max-width: 760px) {    
            .main-wrapper{margin-right:0;width:auto;padding:10px 10px 0}    
            .sidebar-wrapper,.sidebar1-wrapper{border:none;width:auto;margin:0 auto 10px;padding:0 10px}}    
          @media screen and (max-width: 340px){    
            .camera_wrap{width:95%}
            .camera_caption p{display:none}
            .cutter{width:100px;height:70px;}}    
        </style>    
      </b:if>    
    </b:if>    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/11325639179/camera-slider.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<!--end Camera Slideshow-->

♦ Clique em Salvar modelo.

→Está vendo o código javascript em azul » Se preferir hospede-o em um site de sua preferência. Aprenda como em: Como Hospedar Javascript no seu Googlecode

Para alterar a Cor e a Fonte do Título do Post no camera slideshow:

Encontre a linha abaixo e altere a cor ou a fonte para a que desejar:

.camera_caption a{color:#FF007F;font:18px Arial;margin:0 10px 10px 0}

2º Passo - Colocando o Camera Slideshow acima dos Posts

Procure a linha »[<b:section class='main' id='main' showaddelement='yes'>]
Obs: Se você não encontrar esta linha exatamente dessa forma, procure também por:
» [<b:section class='main' id='main' showaddelement='no'>]
»ou somente [<b:section class='main' id='main']
Cole o código abaixo▼ acima desta linha:

<b:if cond='data:blog.url == data:blog.homepageUrl'>    
<div id='randompost'>     
<script type='text/javascript'>     
//<![CDATA[     
$(document).ready(function () {     
CameraSlider({     
blogURL:'http://URL DO SEU BLOG',     
MaxPost:5,
RandompostActive:true,
idcontaint:"#randompost",     
ImageSize:500,
NumCharacter: 250,
textcom:"comments",     
Notextcom:"No Comment",     
noImage:"http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg",
timestart:2000,     
slidebylabel:false     
});     
});     
//]]>     
</script>     
</div>     
</b:if>     
<div style='clear: both;'/>

♦ Clique em Salvar modelo.

Entendendo e configurando o código acima:

Opções	Modificações Possíveis
blogURL:'http://URL DO SEU BLOG',	Preencha com o URL do Seu Blog.
MaxPost:5,	Número máximo de posts que você deseja exibir.
RandompostActive:true,	Mantenha true para que os posts se apresentem de forma aleatória e para false para que mostre os 5 últimos posts publicados. Neste caso.
ImageSize:500,	Tamanho da imagem que você deseja colocar no seu camera slideshow.
NumCharacter: 250,	Número de caracteres que deseja exibir no resumo do post.
noImage: "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY /NcWLPVnYEnU/s1600/no+image.jpg",	Se o post não tiver nenhuma imagem irá aparecer uma imagem padrão que é a desta URL. Caso você não queira que seja esta imagem vá até este Artigo e escolha uma imagem que goste.
timestart:2000,	O tempo necessário para exibir um slideshow.
slidebylabel:false	Se você deseja exibir o camera slideshow com posts de apenas um marcador do seu blog deve substituir a palavra false pelo marcador, exatamente como ele está no seu blog.

Exemplo: Se o marcador estiver todo em maiúsculo deve escrever igual. → Tipo "HACKS BLOGGER" aqui do TPV.

Atenção: para ativar o slidebylabel a opção RandompostActive:true, deve ser definida por false.

Veja 2 opções do Camera Slideshow em meus Demoplates

Demoplate2006 » Coloquei o Camera Slideshow Exibindo o 5 últimos posts publicados.

Demoplate2010 » Coloquei o Camera Slideshow Exibindo 5 Posts em ordem Aleatória
→Este demoplate é no formato 2010 do blogger baseado no tema Simple Blog, ou seja atual, e o camera slideshow funcionou corretamente.

♦Obs-1: Não consegui fazer com que o Camera Slideshow funcionasse no meu Demplate TPV. Este template já possui muitos hacks instalados e parece que algum não deixou que os slides funcionassem como deveriam. Ainda não sei o porque, se alguém souber, por favor nos diga. Assim que souber o porque atualizo este artigo.
♦Obs-2: Não consegui fazer funcionar o Camera Slideshow por marcadores, não funcionou nos testes realizados.

Fontes:
♦ Tradução e adaptação do artigo: Cara Memaseng Camera Slider di Blogger
♦ Utilizei os templates Johny Genit e Pakdhe Johny para fazer as adaptações necessárias e para ajudar no entendimento do recurso.

Porque Ensino Hacks que Vários Metablogs já Ensinaram?

noreply@blogger.com (Aurea Carvalho) — Wed, 08 May 2013 15:14:23 PDT

Vocês devem estar se perguntando:

Porque a Áurea ensina alguns hacks que outros Metablogs já ensinaram?

Pois é. Já li por aí que: “um metablog de qualidade traz sempre inovações”, “ficar repetindo conteúdo não está com nada”, etc…

A maioria dos hacks que ensino aqui são traduções e adaptações de hacks em inglês e até já ensinei hacks de blogs em indonésio. Ah! Google tradutor I Love You! Mas muita coisa não dá para saber somente com a tradução do Google, precisa ter um conhecimento mínimo dos códigos dos templates.

Quase todos os metabloggers de língua portuguesa que ensinam hacks para fazermos alterações em nossos blogs assim como o TPV, não são produtores deste conteúdo, fazem o mesmo que eu, aprendem em algum blog estrangeiro como fazer e ensinam em seus blogs como fazer. Uma vez que, têm um conhecimento avançado em edição dos templates do blogger e até mesmo em linguagem HTML e CSS.

Voltando ao assunto do título: Porque Ensino Hacks que Vários Metablogs já Ensinaram?

Essa é a questão. Estou sempre lendo vários Metablogs, sejam em português ou em inglês, e muitas vezes vejo um hack que quero colocar nos meus blogs que simplesmente não entendo como fazer ou acho difícil a forma que este autor está explicando.

Tudo gira em torno da forma em que os conteúdos são explicados!

Aí quando aprendo algo novo, ensino aqui no TPV da forma que gostaria de ler para fazer em meus blogs, com detalhes, separado por títulos, com caixinhas, letras coloridas etc…

Tudo bem explicadinho! Esta é a forma que gosto de fazer.

É para isso que servem os Metablogs. Para ensinar e ajudar outros blogueiros a blogar!

Leia: Mas o que significa Metablog?

Então se você já viu um hack/tutorial igual a algum daqui em outro blog não se assuste, realmente pode ser que o código javascript seja o mesmo, que o local onde colocar seja o mesmo. Mas nunca a forma que é explicado é a mesma. A não ser que seja um plagiador! Aí, infelizmente esta pessoa copiou o que eu fiz e apenas colou no seu “suposto metablog”.
Leia: Que tipo de plagiador você é?
Se você leu este artigo que indiquei acima vai ver que esta questão é complicada se tratando de Metablogs que ensinam hacks para o blogger.

Vamos entender melhor » Hack em inglês significa cortar, retalhar, picar. De acordo com a wikpedia é um termo que refere-se à re-configuração ou re-programação de um sistema.

Entendo que os hacks para os templates do blogger que são ensinados nos metablogs sejam recursos adicionais que queremos incluir em nossos blogs para deixá-los com a aparência mais legal, melhorar a navegação etc... Ou seja, deixá-los com a cara do autor!

Fazemos isso por meio de tutoriais, que segundo a wikipédia significam:

"Tutorial é uma ferramenta de ensino/aprendizagem, podendo ser tanto um programa de computador quanto um texto, contendo ou não imagens, que auxilia o processo de aprendizado exibindo passo a passo o funcionamento de algo."

Acredito que se o blogger não concordasse em fazermos alterações nos templates dos blogs não deixaria o Editor de HTML liberado para alterarmos.

Os hacks e tutoriais estão aí para todos aprenderem como alterar os seus blogs da forma que quiserem. É maravilhoso ver tanto conhecimento difundido através da internet.
Nunca aprendemos tanto como estamos aprendendo agora. Para isso basta querer, ler bastante e aplicar este conhecimento em seus blogs.

Como Retirar a Barra do Blogger do Topo

noreply@blogger.com (Áurea) — Fri, 26 Apr 2013 18:53:29 PDT

CLASSIFICAÇÃO DO TUTORIAL
FÁCIL

É muito fácil retirar a barra do blogspot do topo do seu blogger.

Para Retirar a Barra do Blogger do Topo dos Modelos 2010

Vá em Modelo → Editar HTML→ Clique para Expandir o CSS do seu blog na setinha ao lado da linha <b:skin>...</b:skin> → Copie este código:▼

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

» Cole este código acima da linha:

body {

Veja as imagens abaixo:

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

»Pronto a barra superior do blogger saiu, seu template ficou mais bonito e com a sua cara!

Para Retirar a Barra do Blogger do Topo dos outros Modelos Proceda da mesma forma

Atualização em 26/04/2013

Percebeu que o Editor de HTML do seu Blogger mudou?

noreply@blogger.com (Aurea Carvalho) — Wed, 17 Apr 2013 18:37:35 PDT

Pois é mudou desde dia 09/04/2013 o editor de HTML do blogger mudou e a maioria dos Metablogs que conheço já fez um post explicando como utilizá-lo.

O TPV não poderia ficar de fora...

Só que vou fazer de uma forma diferente:
Vocês já devem ter percebido que indico alguns metablogs que conheço, confio e gosto aqui no rodapé do blog né? Então, como quase todos já fizeram um artigo sobre as mudanças do editor de HTML do blogger vou indicar os links correspondentes para que você escolha qual tutorial irá escolher para entender as mudanças do editor de HTML do blogger.

Artigos que ajudam a entender as mudanças no editor de HTML do blogger

Serão ordenados com o seguinte critério:
1º Data de publicação.
2º Ordem alfabética do título do blog.

Templates e Acessórios	Mudanças no editor HTML do Blogger
Dicas Blogger	Novidades: Saiba tudo sobre o novo editor HTML no Blogger Onde está o CSS no novo editor HTML do Blogger
Dicas para Blogs	Mudanças na Pagina Editar HTML do Blogger Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F
Ferramentas Blog	Mudanças no Editor HTML de Templates do Blogger
Personalizar o Blogger	NOVIDADES BLOGGER – MUDANÇAS NO EDITOR DE HTML
Quero Criar um Blog	Novidade no editor de HTML de modelos do Blogger
Mundo Blogger	Mudanças e Melhorias no editor HTML do Blogger
Gerenciando Blog	O novo editor de HTML do Blogger – Análise completa

Templates para Você	Percebeu que o Editor de HTML do seu Blogger mudou?

Os artigos que não tinham data considerei a data do primeiro comentário.

E você? Já escreveu um post explicando como utilizar o novo editor de HTML do blogger? Indique-o para esta lista. Vou visitá-lo e se estiver tão bom quanto os que indico aqui ele estará entre eles!

Template Valentine

noreply@blogger.com (Aurea Carvalho) — Fri, 29 Mar 2013 20:38:47 PDT

Seguindo a linha do Template Pink A3 desenvolvi o Template Valentine.

Na época que criei os templates para distribuir - que foram a causa da criação do Templates para VOCÊ - não haviam tantos recursos como existem hoje.

Parece que foi a muito tempo, mas na verdade foi a apenas alguns anos atrás. Como as inovações tecnológicas desafiam o tempo né. Sempre em tão pouco tempo aparecem tantas coisas...

Mesmo com pouco tempo venho tentando criar mais templates para vocês, como é um processo trabalhoso e demorado a produção não está tão grande, mas estou me esforçando.

O Template Valentine nasceu inspirado no Pink A3 com algumas inovações dos atuais. Foi baseado no Simple do Blogger 2010 e possui alguns hacks já instalados.

DOWNLOAD | DEMO | LICENÇA

Hacks instalados:

QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NO LINK PARA ENTENDER MELHOR!

Observações:

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

♦ Para alterar os links da barra de navegação!
Encontre o seguinte código: (Use Ctrl+F)

<ul class='solidblockmenu'>
<li><a class='current' expr:href='data:blog.homepageUrl'>Home</a>/li>
<li><a href='URL do Link' title=''><b>Ítem2</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem3</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem4</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem5</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem6</b></a>/li>
</ul>

1- Substitua 'URL do Link' pelo endereço do Link que você quer colocar;
2- Em title=' ' » coloque entre as aspas '____' o título do link;
3- Substitua os Itens pelo título do link para que apareça na barra de navegação.

♦ 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:

Aproveitem :-P

NÃO Retire os Créditos! NÃO é Permitido redistribuir e ou copiar os tutoriais/hacks e os templates do TPV sem a prévia autorização de sua Autora.

URL Encurtada no Final do Post para Divulgalção

noreply@blogger.com (Aurea Carvalho) — Fri, 29 Mar 2013 19:09:16 PDT

Visitando alguns blogs vi no final dos posts a opção de URLs encurtadas facilitando para o leitor divulgar o post caso ele goste do que leu.
Então procurei uma alternativa para ensinar aqui como fazer para você colocar a opção do link do seu artigo encurtada no final do seu post de forma automática.
Já ativei esta opção aqui no TPV. Veja no final deste post:

O hack que encontrei é específico para o blogger e possui 3 alternativas de encurtar o link do seu artigo.
Utilizando estes 3 sites:

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.

Vamos lá:

1º Colocando o Código da URL Encurtada

»Vá em Modelo » Editar HTML » Marque a caixinha Expandir modelos de widgets
Procure por [post-footer-line-3]
<div class='post-footer-line post-footer-line-3'>
ou
<div id='post-footer'>
É importante que o código fique dentro da área dos posts.
Se seu blog não tiver post-footer-line-3 cole abaixo da line-2
Cole este código abaixo da linha » <div class='post-footer-line post-footer-line-3'>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
    // Shorten Blogger post URLs using urltinyfy javascript API, by MS-potilas 2012
    // Updated new shortener by Vinay Prajapati, Tech Prevue Labs 2013
    //<![CDATA[
    function loadscript(filename) {
      var scr=document.createElement('script');
      scr.setAttribute("type","text/javascript");
      scr.setAttribute("src",filename);
      document.getElementsByTagName("head")[0].appendChild(scr);
    }
    var waitElm=null;
    function urltinyfyprompt_callback(response) {
      if(waitElm) waitElm.style.display="none";
      var txt="Short URL";
      if(response.title && response.title!="") txt+=' for "'+response.title+'"';
      else if(response.longurl && response.longurl!="") txt+=" for "+response.longurl;
      if(response.tinyurl && response.tinyurl!="")
        prompt(txt+":", response.tinyurl);
      else
        alert("Could not get short URL, try again later." + ((response.error && response.error != "") ? ("\nError: " + response.error) : ""));
    }
    function shortenUrl(elm, long_url, service) {
      waitElm=elm.parentNode.nextSibling;
      if(waitElm) waitElm.style.display="inline";
      loadscript("http://urltinyfy.appspot.com/"+service+"?unify=1&url="+encodeURIComponent(long_url) + "&callback=urltinyfyprompt_callback");
    }
    //]]>
    </script>
    <span class='shorturls'>Links do Artigo:
    <a expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;googl&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Click to get short URL'>goo.gl</a>,
    <a expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;mcafee&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Click to get short URL'>mcaf.ee</a>,
    <a expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;cligs&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Click to get short URL'>cli.gs</a>
    </span><span style='display:none;'><img border='0' src='data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA'/></span><div style='clear:both'/>
</b:if>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Observações Importantes:

Se a linha <div class='post-footer-line post-footer-line-3'> estiver desta forma→ <div class='post-footer-line post-footer-line-3'/>

Você deve tirar a / e fechar com </div> no final do código que colou acima.

Resultado:

Quando você clicar sobre um dos links para encurtar a URL do post irá aparecer uma caixinha pop-up para você copiar o link e divulgá-lo da forma que achar melhor.

2º Configure o Link Encurtado do seu Post

Você pode configurar o CSS do link encurtado para se destacar ou não no final do seu post
Para isso copie este código e cole logo acima da linha ]]></b:skin>:

/*---ShortURLs---*/
.shorturls {
text-align: left;
float: left;
width: auto;
height: auto;
text-shadow: 1px 1px 1px #ccc;
margin: 0px 10px 0px 0px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #ccc;
padding: 5px 5px 3px 3px;
display: block;
vertical-align: middle; }
.shorturls a { text-transform: uppercase; }
.shorturls img {
padding: 0px;
position: relative; }

Ficará desta forma:

O encurtador de URL é uma maneira muito legal de distribuir os links do seu blog/site na internet.

Você pode usar o link encurtado no Twitter, Facebook, Google + e em todos as redes sociais que fizer parte. Divulgando os artigos que acha legal.

Aproveite e divulgue este artigo do TPV para que outras pessoas possam instalar este encurtador de URL nos seus blogs.

Fonte:
Tradução e adaptação do artigo: ♦Automatic Google (goo.gl) url shortener for Blogger blogs

Mais de 50 Twitter Icons

noreply@blogger.com (Aurea Carvalho) — Sun, 24 Mar 2013 03:58:13 PDT

Encontre neste link mais de 50 tipos de ícones do Twitter para colocar em seu site.

Twitter Icons

Aproveite e Aprenda O que é Social Bookmarking

Lista de Posts Relacionados no Fim do Post

noreply@blogger.com (Áurea) — Sun, 17 Mar 2013 19:09:46 PDT

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Recebi uns e-mails perguntando como fiz para colocar a lista de posts relacionados no fim dos posts. Este recurso é legal, porque ajuda o leitor a encontrar mais posts relacionados ao que ele se interessou baseado no marcador que escolhemos para os posts!
Como este blog é para ajudar aos blogueiros a melhorar seus blogs e aprimorar com recursos legais.
Encontrei o tutorial no blog do Paulo - Códigos Blog muito bem explicado. Pedi a ele para publicar a dica aqui e ele concordou!
Clique em continue lendo e aprenda a colocar no Fim do Post uma Lista de Posts Relacionados.

1º - Passo

»Faça login no blogger , clique em → "Modelo" → "Editar HTML".

»Encontre a tag </head> e cole este código acima desta tag.

<!-- Javascript Posts Relacionados -->
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script><!-- Fim Javascript Posts Relacionados -->

Outra Opção

» O código em LARANJA é o Javascript dos Posts Relacionados.
» COPIE as linhas em LARANJA acima COLE em um bloco de notas;
» Salve no bloco de notas em seu computador com a extensão .js no nome do arquivo - Ex: Clique em Salvar Como e escreva o nome: PostsRelacionados.js
»Hospede este arquivo em um site de sua preferência - Sugestão Googlecode →Como Hospedar Javascript no seu Googlecode - colocando o LINK fornecido por sua hospedagem onde está indicado abaixo e cole esta linha abaixo da tag </head>:

<script src='Endereço do Arquivo Java' type='text/javascript'/>

»Desta forma não haverá o risco de seus posts relacionados não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

2º Passo – Ativando o Código dos Posts Relacionados

» Marque a caixinha “Expandir modelos de widgets”

» Procure o seguinte código:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

»Copie este código em azul abaixo:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>

» Cole entre as linhas ▼:

<b:if cond='data:label.isLast != "true"'>,</b:if>
e
</b:loop>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Observação Importante:

Para modificar a quantidade de artigos que serão exibidos.
Veja o número que está em vermelho no código acima.

Mude o número 10 para qualquer coisa que você queira.

Esse número não indica o total de posts, mas o máximo de posts que são mostrados por cada categoria.

3º Passo – Colocando os Posts Relacionados no Final dos Posts

»Procure essa linha:

<p class='post-footer-line post-footer-line-3'/>

» Adicione este código logo abaixo desta linha:

<div class='relacionados'><b:if cond='data:blog.url != data:blog.homepageUrl'><h2>Posts Relacionados</h2></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script></div>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

→Agora quando clicar no link do post você pode ver a lista de postagens relacionadas antes dos comentários!

4º Passo – Configurando o CSS dos Links e Título dos Posts Relacionados

»Está vendo as palavras em azul Posts Relacionados?
Pois é, você pode mudar como quiser. Por exemplo: Leia mais, Continue lendo, etc…

Para editar os links dos posts relacionados e o título » Use o código CSS abaixo colando-o logo acima da linha → ]]></b:skin>

/*---Posts Relacionados---*/
.relacionados ul{padding-left:0px;}
.relacionados ul li{/*Edita os links*/
background: url(URL-imagem de setinha) no-repeat left; /*img-flecha*/
margin:5px 0; border-bottom:1px dotted $bordercolor; list-style:none;
padding:0 0 2px 20px;  color:$linkcolor; font-size: 12px;
text-indent:0px;
line-height:1em;}
.relacionados h2{/*Edita o Título*/
font-size: 18px; font-weight:bold;
}

Onde:
☺font-size→ indica o tamanho da fonte;
☺font-weight→ indica se a fonte está em negrito;
☺color→cor da fonte;
☺padding-top→indica a distância superior;
☺padding-left→indica a distância da esquerda.

Este post foi originalmente escrito em 26/04/2008 e atualizado em 17/03/2013

Fonte: Códigos Blog

Como Utilizar o Feedly Leitor de Feeds

noreply@blogger.com (Aurea Carvalho) — Sun, 17 Mar 2013 06:34:28 PDT

Com o cancelamento do Google Reader em Junho/2013 teremos que encontrar alternativas de leitores de feeds para continuarmos acessando os conteúdos dos blogs/sites que gostamos.

Leia e Entenda:

→O que são Feeds?
→O que é Social Bookmarking

O Feedly é uma boa opção para quem usa o navegador Google Chrome e possui celulares com os sistemas operacionais Android e iOS.

Aprenda a configurar e migrar do Google Reader para o Feedly

» Acesse o site http://www.feedly.com/ usando o Google Chrome.

» Clique em Get Feedly for Chrome.

» Irá aparecer a caixinha para adicionar ao Google Chrome

» Clique em Adicionar – Ele irá instalar o complemento para o Chrome.

» Irá aparecer esta tela▼ » Clique em START Find and add your favorite sites

» Clique em Google Reader

» O aplicativo irá pedir permissão para acessar a sua conta do Google Reader para importar seus feeds.

» Feito isso irá abrir a tela do seu novo leitor de feeds com todos os feeds importados do seu Google Reader.

Muito fácil né?

Ótima opção para substituir o Google Reader que irá nos abandonar em breve!

O que são Feeds?

noreply@blogger.com (Áurea) — Sun, 17 Mar 2013 05:56:03 PDT

Até há pouco tempo eu não entendia muito a função dos feeds.
Nesta semana, navegando no Blog do Xavier, vi no cabeçalho uma frase assim:"Não sei o que é feed". Cliquei nela e li a explicação do Felipe.
Foi aí que entendi qual a real importância dos feeds e como eles podem ser úteis.

Acredito que muitos de nós nos deparamos, muitas vezes, com vários blogs de conteúdo muito bom, então colocamos nos favoritos para voltarmos neles assim que pudermos. É assim que eu sempre faço. Meu favoritos é enorme, estou sempre fazendo backup porque se der algum problema no firefox ou no computador eu não vou perdê-los, como já aconteceu.

Você já deve ter visto as opções RSS, Feed RSS, inscrever RSS, nestes blogs que visita - o meu também tem - com ícones legais, como os que postei aqui nestes dias.

Isso tudo é para oferecer novas formas de acessar seu conteúdo e distribuí-lo.

Mas para que ícones tão lindos que chamam a atenção se você não sabe o que é um RSS Feeds.

O termo Feed vem do verbo em inglês "alimentar". Na Internet, este sistema também é conhecido como "RSS Feeds" (RDF Site Summary ou Really Simple Syndication).
Na prática, Feeds são usados para que um usuário de internet possa acompanhar os novos artigos e demais conteúdos de um site ou blog sem que precise visitar o site em si. Sempre que um novo conteúdo for publicado em determinado site, o "assinante" do feed poderá ler imediatamente, desta maneira o usuário se mantém informado das atualizações em diversos sites sem precisar visitá-los um a um.

Ter que visitar um a um os seus blogs e sites favoritos toma muito tempo e acaba cansando, é ai que entram os Feeds.

Leia: O que é Social Bookmarking

RSS e Atom são os dois formatos de feed mais populares.

Como faço para assinar os Feeds dos blogs que gosto de ler?

Com um programa(software) chamado agregador de Feeds, você recebe as atualizações dos sites escolhidos sem ter que visitá-los. Este programa se parece com o Outlook(para e-mails), por exemplo, só que para Feeds.
Já existem web sites que funcionam como agregadores de Feeds, mostram as atualizações no próprio navegador e assim dispensam a instalação de softwares específicos. Dentre eles podemos citar o Google Reader, o BlogLines, o BlogTok, o Origo, o Netvibes e o Feedys, há também o leitor de email com Feeds agregado, da organização Mozilla o Thunderbird, todos gratuitos.

Eu uso o Google Reader, uma vez que já tenho a conta de email, blog, orkut, etc, o Google me oferece esta opção e outras com um único login. Aprendi com o Felipe Xavier como fazer.
O Google Reader está apto a ler os dois tipos de formatos de feed, RSS e Atom.

Como usar o Google Reader?

É muito simples:
►Quando você visita o bog/site e vê o ícone . Você clica nele ou onde tem a opção para se Inscrever nos feeds deste blog/site. Assim você será direcionado para uma página de feeds como esta aqui:

Você clica no botão do Google ► Será direcionado para uma outra página onde deve clicar em pronto já será direcionado ao seu Gloogle Reader onde poderá se conectar a partir do login do seu gmail e ler as atualizações dos seus sites favoritos sem ter que ir até eles sempre.

►Pode ser que a página de feeds não seja como esta que mostrei acima. Calma!
Se for assim:

Faça da forma que está explicado na imagem. Ao clicar em Inscrever agora ► Será direcionado para uma outra página onde deve clicar em.

►Você pode também copiar o link feed do blog/site que gosta e adicionar ao seu Google Reader clicando em .

►Existem mais opções de assinar o Feed de um blog/site:

Os navegadores modernos, como o Firefox, o Chrome geralmente exibirão um na barra de endereços quando o site possuir um feed.

Basta clicar neste ícone da barra de endereços e selecionar como assinar o Feed do blog/site.

» Você também pode utilizar o Feedly um aplicativo para o Chrome que importa sua lista de feeds do google reader e pode ser utilizado em celulares com sistema Android, iOS e Kindle

IMPORTANTE:

O Google anunciou o fim do Google Reader em junho de 2013. Uma notícia triste por este ser um leitor de feeds amplamente utilizado e muito bom.
Mas você pode utilizar outros programas ou sites de agregadores de feeds que citei no começo deste artigo.

Para complementar o conteúdo:

♦Lista de Agregadores de Feeds - Wikipédia
♦Diretório de Fontes RSS
♦Vai de feed completo ou parcial
♦Sobre Feeds RSS e Atom

Fontes:
•Não sei o que é feed
•O que é RSS, Atom, feed, Bloglines, etc...
•Wikipédia RSS
•Wikipédia Feed

7 Packs de Ícones de Feeds Grátis

noreply@blogger.com (Aurea Carvalho) — Mon, 11 Mar 2013 17:35:01 PDT

Lindos ícones de Feeds Grátis para você deixar o seu site com uma aparência moderna e legal.

Para você entender O que são feeds acesse este link.

Cut RSS Feed

RSS Icons - By ICONHOT

Newspaper RSS Feed

RSS na Praia

Kawai RSS icon pack

RSS Icones das 4 Estações do Ano

Spray RSS Feed

Baixe 2 estilos de Ícones Sociais para o seu Blog

noreply@blogger.com (Aurea Carvalho) — Mon, 11 Mar 2013 17:19:19 PDT

Clique nos Títulos das imagens para baixar os lindos ícones sociais e deixar o seu blog mais bonito.

Se você não sabe para o que servem estes ícones leia este artigo: O que é Social Bookmarking

Estilo Livre - Freestyle

Estilo Quadrado - Square

Condicionais no Blogger–Parte 02–Exibindo Elementos em Páginas Específicas

noreply@blogger.com (Aurea Carvalho) — Tue, 12 Mar 2013 10:59:50 PDT

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

No artigo anterior ensinei Como Ocultar Elementos em Páginas Específicas.
Este artigo é basicamente a mesma coisa, somente muda o código que define que a exibição ou não do gadget/widget.
Achei mais fácil separar os artigos para que não ficasse muito longo e para o leitor ter a chance de entender melhor sem se confundir em um artigo só.

Então vamos lá:

Se você já leu o artigo anterior pode pular os 1º, 2º e 3º passos e ir direto ao 4º passo para aplicar os códigos para Exibir os elementos em páginas específicas em seu blog.

1º – Acesse o Código Fonte do seu Blog

Vá em Modelo » Editar HTML » Marque a caixinha Expandir modelos de widgets

2º – Como encontrar o gadget/widget que você deseja exibir.

Utilize o Ctrl+F e procure pelo Título do gadget.
Se o gadget/widget não tiver Título identifique o gadget/widget clicando na sua página inicial em cima dele com o botão direito do mouse em Inspecionar elemento para o Chrome e Firefox.
Veja o exemplo abaixo ▼ para o Chrome:

No código fonte do seu blog você encontrará algo parecido esta linha do exemplo acima:

<b:widget id='PageList1' locked='false' title='Título' type='PageList'>

Mas pode ser um gadget tipo HTML sem título, então é importante que você saiba qual o número deste gadget no seu código. Ex:

<b:widget id='HTML1' locked='false' title='' type='HTML'>

Este é o HTML1. Você pode ter vários gadgets HTML no seu blog e cada um terá um número de acordo com a ordem em que são criados.

Não precisa ser um gadget tipo HTML. Este é apenas um exemplo e agora você já sabe como identificar o gadget que deseja exibir em apenas uma página específica.

3º – Onde colocar o Código para Exibir o Gadget

Este é o código do gadget expandido:

<b:widget id='HTML1' locked='false' title='Título' type='HTML'>
<b:includable id='main'>

[código específico para Exibir o Gadget]

- código fonte do Widget -

</b:if>

</b:includable>
</b:widget>

Note que você deve colocar o [código específico para Exibir o Gadget] no interior do b:widget, logo abaixo da linha <b:includable id='main'> e logo acima da linha </b:includable>

4º Comandos para Exibir os Gadgets nas Páginas Específicas

Substitua a linha [código específico para Exibir o Gadget] de acordo com a sua necessidade e mantenha o </b:if> acima da linha </b:includable>

Exibir apenas nas Páginas de Postagens

<b:if cond='data:blog.pageType == "item"'>

Exibir apenas na Página Inicial

<b:if cond='data:blog.homepageUrl == data:blog.url'>

Exibir somente em uma Postagem Específica:

<b:if cond='data:blog.url == "URL do post"'>

Exibir na página inicial, de marcadores e arquivo:

<b:if cond='data:blog.pageType != "item"'>

Exibir em uma página de marcador específica:

<b:if cond='data:blog.homepageUrl == “http://URL_do_Blog/search/label/Marcador”'>

Exibir nas páginas de arquivo:

<b:if cond='data:blog.pageType == "archive"'>

Exibir na página de marcadores e postagens:

<b:if cond='data:blog.homepageUrl != data:blog.url'>

Exibir apenas nas páginas de marcadores:

<b:if cond='data:blog.homepageUrl != data:blog.url'>  
<b:if cond='data:blog.pageType != "item"'> 
→Não se esqueça de fechar as 2 tags com 2 </b:if> antes de </b:includable>

Exibir nas Páginas Estáticas

<b:if cond='data:blog.pageType == "static_page"'>

Exemplo:

» Quero exibir um gadget HTML apenas na Página Inicial do Blog.

Vou procurá-lo pelo Título ou pelo número (HTML1) e o código vai ficar assim:

<b:widget id='HTML1' locked='false' title='Título' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

- código fonte do Widget -

</b:if>

</b:includable>
</b:widget>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Condicionais no Blogger–Parte 01–Ocultando Elementos em Páginas Específicas

noreply@blogger.com (Aurea Carvalho) — Tue, 12 Mar 2013 10:55:51 PDT

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Todo Metablogger que se preze tem que ter pelo menos um artigo ensinando como Ocultar Elementos nas páginas do Blogger e como Exibir Elementos em páginas específicas no Blogger.

Demorei muito tempo para escrever sobre este assunto, mas resolvi que não deveria mais adiar. Vou dividí-lo em 2 artigos: 1 que ensina a Ocultar elementos e 1 que ensina a Exibir elementos.
Aplico estes recursos o tempo todo nos meus blogs e irá ficar mais fácil eu consultar um tutorial meu do que ficar sempre procurando no google quando quero utilizá-los.

Vocês já devem ter percebido que ao ler este artigo as colunas do lado esquerdo aqui do TPV sumiram dando espaço exclusivamente ao conteúdo do artigo.

Achei interessante fazer isso, porque o TPV é um blog didático e fica mais fácil o entendimento quando não temos outras coisas na tela nos atrapalhando de aprender o que queremos. Muitos dos tutoriais aqui ensinados necessitam de bastante atenção ao ler para serem aplicados.

Ah, mas pode te atrapalhar na monetização. Nas colunas laterais tem links que o leitor pode se interessar.
Não tem problema, podemos colocar anúncios Apenas nas páginas dos posts- Objetivo deste artigo- e, no final dos posts também temos links de Posts Relacionados.
Então vamos lá:

1º – Acesse o Código Fonte do seu Blog

Vá em Modelo » Editar HTML » Marque a caixinha Expandir modelos de widgets

2º – Como encontrar o gadget/widget que você deseja ocultar.

<b:widget id='PageList1' locked='false' title='Título' type='PageList'>

Mas pode ser um gadget tipo HTML sem título, então é importante que você saiba qual o número deste gadget no seu código. Ex:

<b:widget id='HTML1' locked='false' title='' type='HTML'>

3º – Onde colocar o Código para Ocultar o Gadget

Este é o código do gadget expandido:

<b:widget id='HTML1' locked='false' title='Título' type='HTML'>
<b:includable id='main'>

[código específico para Ocultar o Gadget]

- código fonte do Widget -

</b:if>

</b:includable>
</b:widget>

Note que você deve colocar o [código específico para Ocultar o Gadget] no interior do b:widget, logo abaixo da linha <b:includable id='main'> e logo acima da linha </b:includable>

4º Comandos para Ocultar os Gadgets nas Páginas Específicas

Substitua a linha [código específico para Ocultar o Gadget] de acordo com a sua necessidade e mantenha o </b:if> acima da linha </b:includable>

Ocultar nas Páginas de Postagens

<b:if cond='data:blog.pageType != "item"'>

Ocultar na Página Inicial

<b:if cond='data:blog.homepageUrl != data:blog.url'>

Ocultar em uma Postagem Específica:

<b:if cond='data:blog.url != "URL do post"'>

Ocultar na página inicial, de marcadores e arquivo:

<b:if cond='data:blog.pageType == "item"'>

Ocultar em uma página de marcador específica:

<b:if cond='data:blog.homepageUrl != “http://URL_do_Blog/search/label/Marcador”'>

Ocultar nas páginas de arquivo:

<b:if cond='data:blog.pageType != "archive"'>

Ocultar na página de marcadores, postagens e arquivo:

<b:if cond='data:blog.homepageUrl == data:blog.url'>

Ocultar nas Páginas Estáticas

<b:if cond='data:blog.pageType != "static_page"'>

Exemplo:

» Quero ocultar um gadget HTML apenas na Página Inicial do Blog.

Vou procurá-lo pelo Título ou pelo número (HTML1) e o código vai ficar assim:

<b:widget id='HTML1' locked='false' title='Título' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

- código fonte do Widget -

</b:if>

</b:includable>
</b:widget>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Observação Importante

Acima ensinei a ocultar apenas um elemento de página por vez, mas se você quiser ocultar uma coluna toda (sidebar) como fiz aqui no TPV, é muito mais simples.
Você deve ir em Modelo » Editar HTML » NÃO precisa marcar a caixinha Expandir modelos de widgets

Identifique a coluna que deseja ocultar e coloque o [código específico para Ocultar o Gadget] antes do código da coluna e feche com </b:if> no final.
Veja a imagem:

Como criar Gadgets de Marcadores com Thumbnails

noreply@blogger.com (Aurea Carvalho) — Fri, 10 May 2013 10:47:20 PDT

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Finalmente consegui configurar a gadget de marcadores com as miniaturas das imagens dos posts.

Estou prometendo este post há algum tempo e agora vou poder ensinar o que aprendi.
Muito feliz por ter encontrado a solução.

Ensinei posteriormente Como criar um Gadget com Posts de um determinado Marcador. Muito fácil né.

Pois é, este tutorial é um pouco mais complexo, mas é fácil também. Por ter que acessar o HTML do blog etc, classifiquei como intermediário.
Vamos lá.

1º Passo – Instalando o arquivo Javascript no HTML do blog

No artigo anterior Como Hospedar Javascript no seu Googlecode mostrei o javascript a ser utilizado neste artigo. » Este artigo será muito útil para que você possa fazer bom uso do javascript deste hack e de todos os outros que você instala em seu blog.

Para colocar o javascript da gadget marcadores com miniaturas.

Vá em Modelo » Editar HTML » Encontre a tag </head> e cole o código javascript abaixo desta tag.
Código:

<script type='text/javascript'>
/*Recent posts with thumbnails of label*/
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More ?</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]> 
</script>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Ou você pode Hospedá-lo no seu Google code e colar apenas esta linha abaixo da tag </head>.


<script src='URL do arquivo javascript' type='text/javascript'/>

2º Passo – Configurando o CSS da Gadget

Ainda no HTML do seu blog: Acima da tag ]]></b:skin> » Cole o este código CSS:

/*Gadget-Marcadores*/
img.label_thumb{
width:50px;
height:50px;
float:left;
padding:1px;
margin: 0px 5px 0px 0px;
border:1px solid #ccc}

♦ Clique em Salvar modelo.

3º Passo – Crie a Gadget de um Determinado Marcador com as Miniaturas

Crie um gadget HTML onde desejar em seu blog:

Copie e cole nele este código abaixo e faça as alterações necessárias:

<script type="text/javascript">
var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;
</script>

<script src="/feeds/posts/default/-/MARCADOR?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript">
</script>

<a href="URL DO SEU BLOG/search/label/MARCADOR" style="float:right;font:normal 10px Arial;padding:5px 0;">MAIS DESTA CATEGORIA</a>

Entendendo e Configurando o Código.

Substitua no código do gadget onde aparecerem estas palavras:

»URL DO SEU BLOG→ Coloque o endereço do seu blog.
Ex: Usei no meu gadget a URL do Demoplate2006: http://demoplatetpv.blogspot.com.br

Veja como ficou: Demoplate2006

»MARCADOR→ Coloque o nome do marcador que você quer destacar os posts.
→ Importante: tem que ser o nome do mesmo jeito que está no seu marcador, ou seja, se seu marcador estiver todo em letras maiúsculas deve estar aqui da mesma forma.
Ex: O marcador do Demoplate2006 é Lorem. A primeira letra é maiúscula e as outras minúsculas então coloquei da mesma forma.

»var numposts = 4;→ Este número determina a quantidade de posts que você deseja exibir.

»MAIS DESTA CATEGORIA→ Este é o link para o seu marcador. Escreva da forma que desejar. Ex: Veja mais - Mais deste Marcador - Mais deste Tema - etc...

»showpostsummary = true;→ Marque true para mostrar um resumo do artigo ou marque false para mostrar apenas o título do post.

»var numchars = 60; → Este número determina o número de caracteres que o resumo dos artigos vai exibir. Altere da maneira que desejar → de acordo com a largura da coluna onde vai ficar sua gadget você pode alterar para melhorar a estética.

♦ Clique em Salvar.

Pronto! Seu gadget de posts recentes de um determinado marcador com as miniaturas da imagem do post está ativado.

Este recurso é Muito legal porque você pode destacar os posts de um marcador que deseja e ainda com um visual bonito com os thumbnails.

A fonte que utilizei para criar este artigo foi a mesma do artigo: Como criar um Gadget com Posts de um determinado Marcador.
Consegui adaptar e encontrar como usar nos meus blogs.

NÃO é Permitido redistribuir os tutoriais/hacks ou os templates do TPV sem a prévia autorização de sua Autora. A Citação da Fonte é Obrigatória.

Como Hospedar Javascript no seu Googlecode

noreply@blogger.com (Aurea Carvalho) — Mon, 18 Feb 2013 15:00:52 PST

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Existem muitas formas de hospedar os seus arquivos javascript e uma delas é utilizando o Google code.

Vou ensinar aqui como fazer para hospedar e utilizar os arquivos javascript no Google code. Pode parecer meio complicado, mas uma vez feito, fica bem legal e facilita bem o trabalho de usar javascript no blogger.

1º Passo – Salvar o Javascript

Salve o arquivo javascript no seu computador para fazer o upload posteriormente.

Você pode fazer isso de várias maneiras.

A maneira mais comum é usando o bloco de notas:

1- Copie o arquivo javascript que deseja hospedar
Este javascript que estou usando como exemplo é do próximo tutorial que vou publicar sobre Como criar Gadgets de Marcadores com Thumbnails.

function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More ?</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}

Obs: Se você encontrar um arquivo javascript que esteja entre as tags:

<script type='text/javascript'> 
//<![CDATA[ 
CÓDIGO JAVASCRIPT
//]]> 
</script>

Copie apenas o javascript que estiver entre as tags e cole no bloco de notas

2- Cole em um bloco de notas.

Clique em Arquivo » Salvar como

Irá aparecer esta tela▼

» Configure o Nome do código javascript com a extensão .js

» Selecione o Tipo como Todos os arquivos

» A Codificação deve permanecer como ANSI

Clique em Salvar. Salve em uma pasta do seu computador.

Outra maneira é usando o programa [Notepad ++]

Você pode também usar o programa Notepad ++ e já salvar o arquivo no formato .js automaticamente sem ter que ficar fazendo o que descrevi para o Bloco de notas.

Para baixar o Notepad ++ clique nesta imagem:

» Instale-o.
» Abra o programa.
» Selecione Novo para abrir um novo arquivo.
» Copie e cole o código javascript.

Clique em Arquivo » Salvar como » Coloque o nome do arquivo apenas(sem extensão .js) » Selecione o Tipo: JavaScript file (*.js) » Clique em Salvar.

Pronto! Seu código javascript já está salvo como [.js]!

2º Passo – Criar o Projeto

Entre no Google code com o seu login.

Clique em Create a new project

Preencha esta tela como está na imagem acima

» Em Project name: Coloque o nome do seu projeto.
Coloquei tpvjava em relação ao Templates para VOCÊ. Crie o seu.

» Use os mesmos da imagem para Project summary e Description

» Version control system marque Mercurial

» Source code license selecione: GNU GPL v3

» Project label(s) selecione as labels referentes ao seu projeto.

Sugestão estas que estão na imagem, mas pode acrescentar mais se quiser.

Clique em Create project.

Observação Importante:

Após criar o projeto e precisar fazer mais uploads de arquivos javascript você abre o Google code e vai em Meus favoritos » Escolha o projeto salvo e proceda da forma que é explicado nos próximos passos.

3º Passo – Fazer Upload do Arquivo JavaScript

Após clicar em Create project → Irá aparecer esta tela▼

» Clique em Downloads

▼ Aqui clique em New download

Nesta etapa você vai fazer o upload do arquivo javascript que salvou anteriormente.

» Em Summary →coloque o nome do seu arquivo javascript

» Em File → Selecione o arquivo java onde você o salvou em seu computador » Clique em abrir

» Clique em Submit file

4º Passo – Como usar o JavaScript

» Clique no link do nome do arquivo.

» Clique com o botão direito em cima do link do arquivo » Selecione Copiar link (no Firefox) ou Copiar endereço do link (no Chrome)

5º Passo -

Agora como você vai usar este link em seu blog:

Se no html do seu blog você estiver usando o arquivo JavaScript inteiro, ou seja, hospedado no código do próprio blogger. Para entender leia este artigo→ Como hospedar javascript no Blogger do Dicas Blogger.

Você pode substituí-lo pelo arquivo hospedado no seu Google code:

Veja as imagens abaixo▼

▲Selecione o javascript antes de ser hospedado no Google code.

Substitua pela linha:

<script src='URL do arquivo javascript' type='text/javascript'/>

Espero que vocês tenham gostado!

Esta dica é muito boa para diminuir o tempo de carregamento do seu blog/site. Porque o arquivo javascript hospedado no SEU Google code será menos usado e quanto menos pessoas usarem mais rápido sua página irá carregar.

NÃO é Permitido redistribuir os tutoriais/hacks ou os templates do TPV sem a prévia autorização de sua Autora. A Citação da Fonte é Obrigatória.

Fonte:
♦ Tradução e adaptação do artigo: Mengatasi Loading Blog dengan Google Code

Como Pesquisar Imagens no Google

noreply@blogger.com (Aurea Carvalho) — Tue, 12 Feb 2013 11:36:14 PST

Muitas vezes encontramos imagens que não sabemos o nome ou de quem são. Mas queremos muito encontrar mais imagens semelhantes.
Isso aconteceu comigo recentemente quando estava atualizando os posts de um outro blog sobre imagens.
Eu tinha a imagem, não sabia o nome da personagem e nem seu criador, mas queria encontrar mais destas imagens.
Aí tentei fazer como vou explicar aqui e consegui encontrar mais algumas semelhantes.
Eu não sabia como fazer isso e acho que muitas pessoas ainda não sabem, por isso vou ensinar aqui para você encontrar a imagem que deseja.

Como fazer?

Ao entrar no site do Google.
» Clique em Imagens no topo da página (1ª seta).
Irá aparecer a página abaixo▼:

Veja que na 2ª seta você tem a opção de Pesquisa por Imagem representada por uma máquina fotográfica.
» Clique na máquina fotográfica.
Irá aparecer a tela abaixo ▼:

Esta página dá a opção de você pesquisar uma imagem pelo seu URL.
Copie o URL da imagem desejada, cole no espaço reservado para isso.
» Clique em Pesquisa por Imagem.

» Se você clicar em Envie uma imagem ▼.

Você deve clicar em Escolher arquivo e selecionar a imagem do seu computador que deseja encontrar.
Aí é só clicar em Pesquisa por Imagem.

Esta opção é muito útil para encontrarmos imagens semelhantes àquelas que gostamos e também para encontrarmos os autores das mesmas, uma vez que esta imagem pode estar guardada no seu computador a tanto tempo que você nem se lembra mais onde a encontrou. Que foi o que aconteceu comigo!

Encontrou a imagem que queria?

E quer mais detalhes sobre ela como Identificar as Cores, então acesse: Como identificar cores

Como Ativar o Leia Mais Automático sem Javascript com Thumbnails

noreply@blogger.com (Aurea Carvalho) — Sun, 17 Feb 2013 05:35:22 PST

CLASSIFICAÇÃO DO TUTORIAL
FÁCIL

Já ensinei aqui no TPV como ativar o Recurso Leia Mais do Blogger. Neste recurso você tem que definir onde o seu post ficará partido dando um pouco de trabalho.

Este hack que estou ensinando hoje é diferente porque ativa o leia mais automaticamente e é muito simples de ser implementado.

A única desvantagem que vejo em relação aos outros recursos é que não é possível definir a quantidade de caracteres que aparecem no resumo do post da página inicial.

Mesmo assim é muito legal porque não precisamos usar javascripts, auxiliando no tempo de carregamento do blog.

Veja no blog de testes: Demoplate 2010

1º Passo: Aplicar o Leia mais Automático com Miniaturas

Entre no seu blog: Vá em Modelo → Editar HTML → Marque a caixinha Expandir modelos de widgets

» Procure pela linha:

<data:post.body/>

» Substitua esta linha pelo código abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Observações Importantes:

1- Se você usa um template personalizado ou modelo 2006:

♥ Deverá substituir a primeira linha <data:post.body/> que encontrar.
♥ Quando você aplica o código original (dos sites onde aprendi este tutorial) as páginas estáticas podem ficar resumidas e não funcionar ou não. Mas encontrei uma solução para isto. Por isso o código acima já está modificado para que as páginas estáticas funcionem corretamente.

2- Se você usa um template do blogger 2010:

♥ Provavelmente irá encontrar a ocorrência de 3 linhas <data:post.body/>, substitua a 1ª linha clique em Visualizar se os seus posts não ficarem resumidos, desfaça a 1ª tentatica e substitua a 2ª linnha <data:post.body/>. Uma delas vai dar certo.

♥Minha experiência: Durante os meus testes no Blog de Demonstração 2010: Demoplate 2010
quando substitui a 1ª linha não deu certo e na 2ª deu certo, mas tentei novamente em outro blog de testes 2010, deu certo quando substitui a 1ª linha.

♥ Com relação às páginas estáticas elas funcionam corretamente mesmo com o código original (dos sites onde aprendi este tutorial).

2º Passo: Configurar o CSS do post Resumido

» Encontre a linha ]]></b:skin>

» Cole este código acima da linha ]]></b:skin> para configurar o link do Leia Mais.

.jump-link{ 
background: #F4F4F4;/*Cor do fundo do botão*/
display: inline;
border: 1px solid #DDD;
padding: 1px 10px 2px 10px;
float: right;/*Onde o botão se localiza-Pode colocar left se quiser que fique à esquerda*/
border-radius: 13px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
}
.jump-link a {
color: #666666; /*Cor do link Leia mais*/
text-shadow:0 1px 0 #FFF;
font-size: 10px;/*Tamanho da fonte*/
text-transform: uppercase;/*Define o texto todo em maiúsculo*/
font-weight: bold;
}
.jump-link:hover { /*botão leia mais quando o mouse passa sobre ele*/
background: #F1F1F1;
display: inline;
border: 1px solid #B1B1B1;
}
.jump-link a:hover, .jump-link:hover a {
text-decoration: none;
color: pink;/*Cor do texto quando passa o mouse sobre*/
}
.thumb img {float: left; margin: 0 10px 10px 0; }

→ O tamanho da miniatura (thumbnail) da imagem original é de 72px X 72px, mas você pode alterá-lo na linha .thumb img {float: left; margin: 0 10px 10px 0; } do código CSS. Bem como o lado onde você quer que fique a imagem: left=esquerda, right=direita.

O botão Leia mais do seu blog ficará assim:

3º Passo: Configurar o Texto do Link Leia Mais

Para alterar o texto do leia mais vá em Layout » em Postagens no blog » Clique em Editar » Altere o texto do link como a imagem abaixo▼

Neste exemplo coloquei: “Continue Lendo”, mas você pode editar o texto da maneira que quiser.

Fontes – Tradução e adaptação dos posts:
♦ Auto Read More Without Requiring JavaScript
♦ Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!
♦Sumarios Automáticos sin javascripti para blogger

Como aumentar a Visibilidade do seu Site!

noreply@blogger.com (Aurea Carvalho) — Wed, 22 May 2013 19:19:17 PDT

Durante as pesquisas que fiz sobre mídias sociais para aprimorar o meu artigo anterior a este – O que é Social Bookmarking - encontrei um artigo divulgando o E-book: “Tire o máximo partido do seu conteúdo” criado pela equipe do Google que visa ajudar os editores da Web a melhorar a visibilidade dos sites, ensina também como o Google indexa os Web sites, etc.

Este e-book é uma excelente forma de aprendermos técnicas de SEO e assim nos tornarmos mais visíveis aos sites de buscas e ao Google que é o maior site de buscas da internet.

Seguindo este raciocínio aumentamos nossas visitas e podemos ganhar dinheiro com nossos blogs. O que imagino ser a aspiração de um grande número de blogueiros na Web.

Aqui está o E-book, você pode salvá-lo em seu computador a partir deste pdf ▼ ou clique no botão do link abaixo:

Download do e-book: Tire o máximo partido do seu conteúdo
Tenho estudado bastante sobre SEO e pretendo publicar aqui no TPV o que estou aprendendo, sempre que possível.

Fonte: Encontrei esta informação neste link

O que é Social Bookmarking

noreply@blogger.com (Aurea Carvalho) — Wed, 22 May 2013 19:19:17 PDT

Ao ler este post você verá no fim alguns ícones muito simpáticos iguais aos da imagem ao abaixo.

Estes ícones sugerem que você compartilhe o post lido caso tenha gostado do conteúdo

Agora você me pergunta: Para que isso? O que são estes ícones? O que significa "ShareThis"? Porque usá-los?

Na verdade esta foi a pergunta que eu me fiz e dediquei este artigo para responder para mim e para os leitores do TPV.

O que é Social Bookmarking?

De acordo com a Wikipédia= O Social Bookmarking, resumidamente, é um sistema de bookmarks (também conhecido como favoritos ou marcadores) online, público e gratuíto, que tem por finalidade disponibilizar seus favoritos na internet para o seu fácil acesso e para compartilhar com os usuários deste tipo de serviço. Pode ser classificado como parte do conceito que é chamado de Web 2.0.

[Bookmark = Marcar]

[Social bookmarking = Marcador social]

Quando o seu leitor se interessa pelo conteúdo do seu post e o considera relevante ele pode adicionar ou "favoritar" o seu post ou site em mecanismos de Social Bookmarking para que possa acessar de qualquer computador. O usuário do site de social bookmarking pode compartilhar ou não o conteúdo da página adicionada com outros internautas tornando seus favoritos públicos ou não.

Para facilitar a vida do seu leitor você coloca os ícones dos principais sites de social bookmarking ao final (no rodapé) dos seus posts. Aí ele clica sobre um dos ícones que o direciona ao site respectivo e o inclui, na lista dos seus links favoritos (bookmarks), atribuindo a ele uma palavra-chave (tag). Para isso o leitor deve ser cadastrado no site em questão.

Esta é uma maneira muito boa de DIVULGAR o conteúdo do seu site pela internet, ganhar visibilidade na rede e, consequentemente, AUMENTAR OS ACESSOS À SUA PÁGINA. Quanto mais links, mais acessos e mais visibilidade nos sites de busca. Pode-se considerar que usar os sites de bookmarking para divulgar o seu site é uma técnica de SEO.

Uma forma muito interessante de entender os sites de social bookmarking foi dita no blog Antisocial (cujo link não está mais disponível).

"...O fato de você poder ter a chance de popularizar aquilo que você acha relevante é o máximo. Os usuários acabam “levantando um bandeira” quando adicionam um post, um conteúdo qualquer em seu bookmarking, isso é muito mais que popularidade, isso gera relevância por terceiros! Não são mecanismos determinando o que é relevante sobre determinado assunto, é “Nós gerando relevância” para web! Democratizar a classificação do conteúdo na web é manter a web evoluindo, porque dando o direito ao usuário de “votar” naquilo que considera interessante para determinado assunto é garantir a todos o direito de mostrar ao mundo o que é realmente interessante para “mim” usuário...."

Quais são os sites de Social Bookmarking?

Estes sites também podem receber outros nomes como Agregadores de Conteúdo como o Marcos Lemos (autor do Ferramentas Blog) os chama em Usando Agregadores de Conteúdo para atrair visitas. Porém de acordo com os meus estudos a essência de todos é a mesma. Me corrija se estiver enganada. Estamos aqui para aprender.

Vou enumerar os sites que encontrei e as classificações encontradas na internet sobre eles.

Links
(Usados para Favoritar links na web)

del.icio.us - O mais popular serviço de social bookmarking atualmente.

StumbleUpon – Considerado um social discovery, visa facilitar pesquisas de determinadas áreas.

FavoritUs.com.br - Guardar seus links favoritos. Monte uma página inicial com seus links e seus ícones.

BlinkList

Blogmarks.net

Connotea - Essencialmente dedicado a bookmarks da área academica.(cientistas e pesquisadores).

Buffer – É um serviço de agendamento de publicações em redes sociais.

diigo – Oferece múltiplos serviços integrados como salvar links, criar tags, criar documentos de texto, salvar imagens da web ou do computador, escrever notas ou fazer destaques por meio de um marcador. Possui apps para smartphones.

evernote – Muito semelhante ao diigo e possui tradução para português.

Google Bookmarks

Yahoo! Bookmarks

Notícias
(Usados para Favoritar Notícias - É necessário que seu blog seja atualizado Regularmente)

digg - Social bookmarking especializado em notícias.

Reddit

diHITT – Similar nacional ao digg

Fark

Botões
(Usados para Facilitar a Vida dos Blogueiros)

SoBoo - Primeiro botão de Social Bookmarking do Brasil
AddThis - Botão de Social Bookmarking internacional
Share This – Semelhante ao AddThis
Shareaholic- Possui extensão para o navegador Chrome facilitando o uso e seus botões de compartilhmento podem ser colocados nos sites.

Blogs – Blogmarking
(Usados para Favoritar Blogs na web)

Technorati - Social bookmarking especializado em blogs.

boglovin’ – Marcador social para blogs, onde você segue aquele que se interessou e é avisado sempre que há um post novo, semelhante ao serviço de Feeds.

Xanga

BlogMarks

Bloglines

Blog Engage

Uêba – Divulga na sua maioria links de blogs cadastrados

Ocioso – Similar ao Uêba

Colmeia – Similar ao Uêba

Imagens

Pinterest

Fickr

we♥it

FFFFOUND!

vi.sualize.us

Vídeos

youtube

vimeo

blip – É uma rede de links de séries

Redes Sociais

Não podemos esquecer das redes sociais que são sites de relacionamento muito importantes na divulgação do seu blog. Podem ser chamados de Sites de Social Networking.
Twitter

Facebook

Google Plus

MySpace

linkedin

orkut

Feeds

Leia o artigo O que são feeds? que você vai entender a função social bookmarking que eles exercem.

Seguindo este mesmo raciocínio encontrei esta classificação destes sites no post How Search-Like Are Social Media Sites?(Como são as pesquisas nos sites de social media) do site Search Engine Land.

» Social Notícias Sites(tais como Digg, Reddit, o Yahoo Buzz)
» Social Bookmarking Sites (tais como Delicious, StumbleUpon)
» Social Networking (tais como Facebook, MySpace, LinkedIn)
» Conhecimentos sociais (tais como a Wikipedia, Yahoo Answers)
» Partilha Social (tais como YouTube, Flickr, Twitter, Urban Spoon, ganir)

Este artigo foi originalmente escrito em julho de 2009 e atualizado em 20/01/2013.

Aproveite a Oportunidade e Comente este Post!
Esta também é uma forma de você Receber Clicks em seu Blog!
Principalmente se seu comentário for Inteligente e Procedente com o Assunto do Post!

Como Ativar a Função Descrição do Post no seu Blogger e para as Redes Sociais

noreply@blogger.com (Aurea Carvalho) — Sat, 18 May 2013 09:13:18 PDT

O blogger está evoluindo muito, principalmente com relação as configurações para a divulgação dos seus blogs na web, os chamados recursos de SEO.

Um recurso muito importante é a descrição do seu blog (a meta tag description) que é o texto que aparece nos sites de busca embaixo do título. Uma descrição bem feita é a porta de entrada para visitantes em seu blog, faz com que se interessem por ele.

Antes do blog acrescentar o recurso de colocar a descrição precisávamos incluir a meta tag: <meta name=”description” content=”Descrição da sua página” /> diretamente no código fonte do blog.

Quando ativamos a descrição do blog na nova interface, ativamos também outra função interessante » a descrição de cada post individualmente, que é um recurso muito legal.

Esta descrição individual dos seus posts aparece quando você compartilha o post nas redes sociais como o Facebook e o Google Plus, sem que você tenha que ficar editando todas as vezes que compartilha.

Se você gostar deste artigo e quiser compartilhá-lo clicando em Share para o Facebook ou Google +, ali em cima logo abaixo do Título ou, quando terminar de ler.

A descrição que dei para ele aparecerá no seu link de compartilhamento e será esta:

Uma descrição bem feita é a porta de entrada para visitantes em seu blog, faz com que se interessem por ele.
Ative a descrição dos seus posts lendo este artigo.

Isso é ótimo para a divulgação dos seus posts.

Após ativar a função descrição do blog quando você vai criar o post as Configurações de postagens ficam como nas imagens abaixo. Com a opção da Descrição da Pesquisa.

Antes	Depois

Quando você coloca a Descrição da pesquisa no seu post ele aparece assim no site de busca:

1º- Como Ativar a Descrição do Blog

Vá em Configurações » Preferências de pesquisa » Em Descrição clique em Editar	Selecione Sim para Ativar descrição de pesquisa?

Escreva a descrição do seu blog no espaço reservado, em poucas palavras para não ficar cansativo.

2º Como fazer descrição dos Seus Posts

Ao criar o post nas Configurações de postagens você vai clicar em Descrição de pesquisa e adicionar a Descrição do seu post.

Quando seu post já foi criado você pode editar o post e atualizá-lo.

Clique em Editar	Adicione a Descrição do post » Clique em Concluir » Clique em Atualizar

Compartilhe o seu post nas Redes Sociais

Faça o teste na hora de compartilhar o seu post. Se a descrição não aparecer é porque você tem a metatag description no código fonte do seu blog.

» Descobri isso tentando compartilhar meus posts e a descrição do post individual não aparecia, então fiz o que estou ensinando abaixo e deu certo.

Vá em Modelo » Clique em Editar HTML » Encontre a tag parecida com esta: <meta name=”description” content=”Descrição da sua página” /> desde que seja com o [name=”description”] e apague esta tag » Clique em Salvar Modelo e faça o teste para compartilhar o seu post.

Veja como fica o Compartilhamento do Link que Mostrei no começo deste artigo:

Uma Observação Importante

Se você estiver criando o seu post pelo Windows Live Writer publique-o como rascunho (veja a imagem abaixo) e lá no blogger faça a sua descrição como ensinei acima.

Clique em Postar rascunho no blog▼

Duas atualizações importantes

1ª Verificando se sua meta tag name='description' está funcionando

1- Encontrei no Gerenciando Blog uma explicação onde você visualiza o código fonte do seu blog e no código fonte procura pelas palavras [name='description'] usando o Ctrl+F, se você encontrar a descrição do blog na página inicial e a descrição do post quando visualizar o código fonte do post significa que funcionou.
Aprendi neste post também que, para visualizar o código fonte quando estamos usando o Chrome ou o Firefox é só usarmos o atalho Ctrl+U. (Amei isso)

2- Encontrei também um site onde você pode verificar se sua meta tag está funcionando:

Meta tag checker

Clique neste link e veja se sua meta tag description está funcionando.

2ª Se depois de tudo isso sua description não aparecer

Se nenhuma das descrições aparecem, é provável que seu modelo não contém o código necessário para importar a meta descrição do banco de dados do Blogger.
(Um template personalizado, muito alterado pode fazer isso).

Você vai ter que adicioná-lo ao manualmente:

Então vá em Modelo » Editar HTML » Encontre a linha <b:skin><![CDATA[ e cole o código abaixo acima desta linha.
Fonte 2ª Opção

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Estas atualizações foram motivadas pelo comentário do leitor David Soares.
Obrigada David

Ranking TOP BLOGGER da Língua Portuguesa 2012

noreply@blogger.com (Aurea Carvalho) — Wed, 09 Jan 2013 17:23:05 PST

Gente, estou muito feliz!

Estou de férias em Macaé-RJ e resolvi fazer uma visita nos meus blogs favoritos. Adivinhem o que encontrei!

O Templates para VOCÊ ficou em 11º lugar no Ranking TOP Blogger da Língua Portuguesa realizado pelo Adelson Smania autor do Gerenciando Blog. Um excelente blog que conheci em agosto de 2012 assim que voltei a trabalhar nos meus blogs.
Estou escrevendo este post do laptop, coisa que não gosto de fazer. Prefiro minha mesa em casa com todos os recursos que o desktop me oferece.
Mas mesmo assim não resisti e estou escrevendo.

Tenho me esforçado muito para publicar novos posts com os hacks que aprendo, além das dicas que garimpo na internet todos os dias.
Tenho também os meus outros blogs onde trabalho bastante para publicar bons conteúdos.

Só tenho a agradecer a VOCÊ leitor do TPV que, assim como eu, gosta de personalizar o seu blog e está sempre por aqui aplicando algum hack que ensino ou usando algum template que criei.

OBRIGADA!

Desejo que 2013 seja um ano Maravilhoso para VOCÊ, de muito sucesso, saúde, paz e boas energias!

Grande abraço.

PS: Para você conhecer a colocação dos Blogs participantes do Ranking TOP BLOGGER 2012 clique na imagem deste artigo.

Templates para Power Point de Graça

noreply@blogger.com (Aurea Carvalho) — Tue, 14 May 2013 15:21:47 PDT

A palavra TEMPLATE, em inglês, significa MODELO.
Daí o nome dos Templates para os Blogs = Modelos para Blogs.
Ou Templates para PowerPoint = Modelos para PowerPoint

Quando fiz meu curso de Licenciatura em Química precisei de usar o powerpoint e queria usar um tema bonito.
Me lembrei que em meus favoritos tem um site que disponibiliza Templates Grátis para o Power Point e um dia desses li no blog GFSoluções uma dica de outro site que também tem Templates do Power Point de graça.

Neste artigo fiz uma lista de 14 sites com templates para power point free.

O sites são estes:

Clique nas imagens ou no título para chegar até eles.

1- Templates Wise

Este é o site que estava no meu favoritos.

2- Indezine

» Este é o site que vi no GFSoluções.

3- fppt

4- Powerpoint Styles

5- Free ppt files

Estes dois sites 4 e 5 foram sugeridos por nossa leitora Jenny.
Thank you Jenny : )

6- My Templates Shop

Sugestão do nosso leitor Giedrius.

7- Templates Box

8- Smile Templates

9- Wondershare- Free Business PowerPoint Templates

10- TechSmith-Camtasia Studio Backgrounds for PowerPoint

11- Brainy Betty - Download 100% Free PowerPoint Backgrounds

12- FlashDemoStudio - 100% Free Power Point template download

13- Presentation Magazine - 6497 Free PowerPoint Templates and Backgrounds

14- Site do Oficial Office

15- Pesquisa de Imagens no Google com as palavras chave Powerpoint backgrounds

No Google você vai ter uma infinidade de modelos powerpoint para baixar, mas em alguns casos não terá a certeza de que aquele modelo ou tema é gratuito.

Neste artigo agrupei 14 sites que distribuem temas para o powerpoint gratuitamente já testados.
Fique a vontade e encontre o tema que mais lhe agradar.

Post Atualizado em 06/01/2013