Mostrando postagens com marcador Blogger. Mostrar todas as postagens
Mostrando postagens com marcador Blogger. Mostrar todas as postagens

8 de out de 2012


"botão para responder 
comentários do Blogger"










Esta imagem não tem texto alternativo 


...como você pode adicionar 
um botão de resposta legal 
para comentários do Blogge:

Siga estes  simples  passos: 

Vá para Painel do Blogger> 
Modelo> 
Editar HTML. 
Clique em Continuar> 

clique na caixa Expandir Widget Templates. 

 Procure este código no HTML do seu modelo. 

  •  No HTML do seu modelo.
  • Procure este código:<data:commentPostedByMsg/>
  • Encontrando-o,


 

   cole , abaixo dele,
    esse código :
   ▼
<a href='http://www.BlueKut.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a class="h12" expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Reply it</a></span><a href='http://www.blueKut.com'><img alt='Best Blogger Templates' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>










  • Salve!





veja como fica clicando aqui

...

Para você personalizar o 

botão/responder comentários, na 

sua cor de preferência!


Vide Exemplos:


...Querendo o botão na sua cor de 

preferência,

siga as instruções a seguir!



...Se você quiser fazer a cor  prata ,

no botão, 

siga as instruções abaixo:

(PASSO 3)

no css 

  •  Encontre:
    
    
    .post h3 { 
    
    
    ...
    encontrando-o,
    ...copiecole 
    acima  de 
    .post h3 { 
    o código abaixo 
     ▼
    .h12 {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
        background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
        background-color:#ededed;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #dcdcdc;
        display:inline-block;
        color:#777777;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        padding:1px 21px;
        text-decoration:none;
        text-shadow:1px 1px 0px #ffffff;
    }
    /*Bluekut.com */
    .h12:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
        background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
        background-color:#dfdfdf;
    }.h12:active {
        position:relative;
        top:1px;
    }
    /* This imageless css button was generated by Bluekut.com */ 


 

.post h3 { 
  • Salve!.








botão vermelho::
.h12 {
    -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
    box-shadow:inset 0px 1px 0px 0px #f29c93;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #d83526;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:1px 21px;
    text-decoration:none;
    text-shadow:1px 1px 0px #b23e35;
}
/*Bluekut.com */
.h12:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background-color:#ce0100;
}.h12:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by Bluekut.com */




botão azul


.h12 {
    -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    box-shadow:inset 0px 1px 0px 0px #97c4fe;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
    background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
    background-color:#3d94f6;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #337fed;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:1px 21px;
    text-decoration:none;
    text-shadow:1px 1px 0px #1570cd;
}.h12:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
    background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
    background-color:#1e62d0;
}.h12:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by Bluekut.com */



botão na cor:

.h12 {
    -moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
    box-shadow:inset 0px 1px 0px 0px #fff6af;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
    background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
    background-color:#ffec64;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    color:#333333;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:1px 21px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffee66;
}.h12:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
    background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
    background-color:#ffab23;
}.h12:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by Bluekut.com */




Esta dica vi em: allblogtools




fonte e créditos deste tutorial :
Esta imagem não tem texto alternativoWajahat Alves de  BlueKut


4 de out de 2012

Primeiramente meus agradecimentos ao grande Paulo Estevão!
Depois de muito pesquisar, encontrei sobre o tema em epígrafe,


a saber:
fonte e créditos:

Que tal colocar um menu em forma de barra no topo do blog? É uma forma interessante para divulgar suas redes sociais e links principais do seu blog, como por exemplo, a página de início e a página de contato.
Foi pensando nisso que desenvolvi um código que faz esse papel, tudo muito simples de configurar e personalizar.
Veja o exemplo do menu funcionando nessa página aqui ou na imagem abaixo:
Com um único código vou ensinar a mudar a cor de fundo, inserir novos links, inserir novos ícones e como fixar o menu no topo quando rolarem a página para baixo.  Abaixo teremos um tutorial para Blogger e WordPress, mas isso não impede você de usar em outras plataformas ou sites.

Blogger

1) Faça login no Blogger
entre em “Modelo” -> “Editar HTML” -> “Proseguir”.
2) Procure por <body> e 
cole logo em seguida 
o código:

<div class="bar_top">
<div class="bar_topd">
 <ul class="menu_barrax">
  <li><a href="/" title="Início">Início</a></li>
  <li><a href="http://LINK_AQUI" title="Sobre">Sobre</a></li>
 </ul>
 <div class="transit">
  <a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-espzqjF5p38/T9ieDflylZI/AAAAAAAAD4Q/rGSC3YoAGxg/s1600/rss.png" title="Feed RSS"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-4di8wyO8reU/T9ieCNjxkrI/AAAAAAAAD34/n9mdGQl36go/s1600/facebook.png" title="Facebook"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://1.bp.blogspot.com/-V6AUHhYK_tw/T9ieDhXQM3I/AAAAAAAAD4Y/2SX5sC04x2c/s1600/twitter.png" title="Twitter"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-inXXbVbM-pQ/T9ieDGHlKLI/AAAAAAAAD4I/jnthUijJjmo/s1600/google+.png" title="Google Plus"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-IKeAb8OgXfU/T9ieEKLi8JI/AAAAAAAAD4g/8FnePnFsnwk/s1600/youtube.png" title="YouTube"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-reMynxRhgfw/T9ieClin7NI/AAAAAAAAD4A/1JXcZtwjPMk/s1600/flickr.png" title="Flickr"/></a>
 </div>
</div>
</div>
3) Procure por ]]></b:skin> 
e cole o seguinte código ANTES do código encontrado:

.bar_top {width: 100%;height: 32px;background: #000;}
.bar_top img {height: 22px;float: right;margin: 5px 7px 0 0;opacity:0.8;filter:alpha(opacity=80);}
.bar_top img:hover {opacity:1.0;filter:alpha(opacity=100);}
.menu_barrax {float: left;margin: 0;padding: 0;}
.menu_barrax li {float: left;list-style: none;font-size: 10px;font-weight: bold;font-family: Verdana, Arial;text-transform: uppercase;margin: 0 0 0 10px;padding: 10px 0 0 0;}
.menu_barrax li a{color: #dfdfdf;text-decoration: none;}
.menu_barrax li a:hover {text-decoration: none;color: #fff;}
.transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}
.bar_topd {width: 900px;margin: 0 auto;}
4) Teste e salve, 
caso tenha dúvidas de como personalizar a barra, 
alterar cores, inserir links, etc., 
siga os passos no tópico logo depois da instalação 
para WordPress (final do post).






WordPress

1) Faça login, entre em “Aparência” -> “Editor”;
2) Procure a página que contenha a tag <body>, geralmente é a página Cabeçalho (header.php). Insira o código abaixo logo após a tag encontrada:
<div class="bar_top">
<div class="bar_topd">
 <ul class="menu_barrax">
  <li><a href="/" title="Início">Início</a></li>
  <li><a href="http://LINK_AQUI" title="Sobre">Sobre</a></li>
 </ul>
 <div class="transit">
  <a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-espzqjF5p38/T9ieDflylZI/AAAAAAAAD4Q/rGSC3YoAGxg/s1600/rss.png" title="Feed RSS"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://4.bp.blogspot.com/-4di8wyO8reU/T9ieCNjxkrI/AAAAAAAAD34/n9mdGQl36go/s1600/facebook.png" title="Facebook"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://1.bp.blogspot.com/-V6AUHhYK_tw/T9ieDhXQM3I/AAAAAAAAD4Y/2SX5sC04x2c/s1600/twitter.png" title="Twitter"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-inXXbVbM-pQ/T9ieDGHlKLI/AAAAAAAAD4I/jnthUijJjmo/s1600/google+.png" title="Google Plus"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-IKeAb8OgXfU/T9ieEKLi8JI/AAAAAAAAD4g/8FnePnFsnwk/s1600/youtube.png" title="YouTube"/></a>
  <a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-reMynxRhgfw/T9ieClin7NI/AAAAAAAAD4A/1JXcZtwjPMk/s1600/flickr.png" title="Flickr"/></a>
 </div>
</div>
</div>
3) Procure a Folha de estilos (style.css) e insira no final de tudo o código abaixo:
.bar_top {width: 100%;height: 32px;background: #000;}
.bar_top img {height: 22px;float: right;margin: 5px 7px 0 0;opacity:0.8;filter:alpha(opacity=80);}
.bar_top img:hover {opacity:1.0;filter:alpha(opacity=100);}
.menu_barrax {float: left;margin: 0;padding: 0;}
.menu_barrax li {float: left;list-style: none;font-size: 10px;font-weight: bold;font-family: Verdana, Arial;text-transform: uppercase;margin: 0 0 0 10px;padding: 10px 0 0 0;}
.menu_barrax li a{color: #dfdfdf;text-decoration: none;}
.menu_barrax li a:hover {text-decoration: none;color: #fff;}
.transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}
.bar_topd {width: 1000px;margin: 0 auto;}
Salve a modificação.
4) Para personalizar a barra siga as orientações abaixo.

Personalizando a barra

Colocando os links nos ícones
Coloque no lugar de http://LINK_AQUI o link correspondente a cada rede sociais (A ordem é: Feed, Facebook, Twitter, Google+, YouTube, Flickr) ou de cada item do menu;
Apagar um ícone
Caso queira tirar um ícone de qualquer rede social, apague a linha correspondente a ela, por exemplo: Tirar o ícone do YouTube, apague:
<a href="http://LINK_AQUI" target="_blank"><img src="http://3.bp.blogspot.com/-IKeAb8OgXfU/T9ieEKLi8JI/AAAAAAAAD4g/8FnePnFsnwk/s1600/youtube.png" title="YouTube"/></a>
Inserir novos itens no menu
Para colocar links no menu, insira o código antes de </ul>:
<li><a href="http://LINK_DA_PAGINA" title="NOME DA PÁGINA">PÁGINA</a></li>
Depois edite com o nome da página e o link correspondente.
Apagar itens do menu
Para apagar links do menu, apague a linha correspondente de <li> a </li>.
Aumentar largura da barra
Para aumentar a largura da barra, altere o style de .bar_topd, aumentando ou diminuindo o valor de width: 900px;
Exemplo: .bar_topd {width: 820px;margin: 0 auto;}
Fixar a barra no topo
É possível fixar a barra no topo, assim quando você rolar a página, a barra continua fixa no topo da página, acompanhando a sua visualização. Para isso, procure por .bar_topd e insira depois da primeira chave ({) o seguinte código:
position: fixed; right: 0; top: 0; vertical-align: top; 
Deve ficar mais ou menos assim: 

.bar_topd { position: fixed; 
right: 0; top: 0; 
vertical-align: top; 
width: 900px;
margin: 0 auto;}

Mudar cor do fundo

Podemos mudar a cor do fundo da barra também, 
basta alterar o estilo de 
.bar_top,

insira o código da cor no lugar de 
background: #000

Veja a tabela de cores em HTML aqui.

Você pode fazer várias mudanças, 

basta entender um pouquinho de 
HTML. 
Tudo isso você encontra no Google também.

25 de set de 2012


O blog é um diário pessoal. 


Uma tribuna diária. 


Um espaço 
interativo. 

Um local para discussões 
políticas. 

Um canal com as últimas 
notícias. 

Um conjunto de links. 

Suas 
idéias. 

Mensagens para o mundo.


O seu blog pode ter a forma que você quiser. 

Há milhões de blogs, de todos os tamanhos e formatos. Na verdade, não há regras.
Dito de forma simples, o blog é um site onde você está sempre escrevendo coisas. As novidades aparecem na parte de cima, para que os visitantes vejam. Em seguida, os visitantes fazem comentários sobre a novidade, acrescentam um link ou enviam emails. Ou não.
Desde o lançamento do Blogger , em 1999, os blogs redesenharam a Web, dinamizaram a política, sacudiram a imprensa e deram voz a milhões de pessoas.
E temos certeza de que tudo isso é mesmo só o começo.



Publique suas idéias

A interface de publicação do  Blogger
Seu blog é sua voz na web. 

É um local para juntar e compartilhar coisas que você considera interessantes comentários sobre política, um diário ou links para sites da internet que você deseja lembrar.
Muitas pessoas usam o blog apenas para organizar as idéias, enquanto outros controlam discussões importantes com milhares de pessoas ao redor do mundo. 
Jornalistas profissionais e amadores usam blogs para divulgar as últimas notícias, e jornalistas particulares revelam suas idéias íntimas.
Não importa o que você tem a dizer, o Blogger pode ajudar a dar o recado.


Cative os seus amigos

Ter um blog é muito mais do que colocar suas ideias na web, é estabelecer uma conexão com as pessoas que leem o seu blog e ouvir suas opiniões. Com o Blogger, você controla quem pode ler e quem pode escrever no seu blog. Compartilhe o que você tem a dizer com apenas alguns amigos ou com o mundo inteiro.
Os comentários do Blogger permitem que qualquer pessoa em qualquer lugar envie comentários sobre as suas postagens. Você pode escolher permitir comentários em cada postagem e excluir os comentários de que não gostar.
Os Controles de acesso permitem que você decida quem pode ler e quem pode escrever no seu blog. Você pode usar um blog de grupo com vários autores como uma ferramenta de comunicação para pequenas equipes, famílias e outros grupos. Como um único autor, você pode criar um espaço particular on-line para reunir notícias, links e ideias, apenas para você ou para compartilhar com quantos leitores desejar.
Os Perfis do Blogger permitem que você encontre pessoas e blogs com os mesmos interesses que os seus. Seu Perfil do Blogger, no qual você pode listar seus blogs, seus interesses e muito mais, permite que as pessoas encontrem você (mas apenas se você quiser ser encontrado).

Crie um design para o seu blog

Não importa se você está fazendo seu primeiro blog ou pensando em renovar o look do seu blog. As ferramentas de edição do Blogger, projetadas para a facilidade do usuário, ajudam a criar uma página com um visual diferente.
Designer de modelo — nosso Designer de modelo permite que você crie facilmente um blog com uma aparência exclusiva. Com apenas um clique depois de selecionar um modelo, você pode escolher as cores, a fonte, o layout e o plano de fundo do seu blog. Para os usuários que desejam ter ainda mais controle, existem os recursos avançados de design que permitem desde a alteração das cores dos links até a adição de CSS personalizado.
Arrastar e soltar elementos da página — o sistema "arrastar e soltar" do Blogger é simples e permite que você escolha facilmente onde suas postagens, seus perfis, seus arquivos e outras partes do seu blog devem estar na página.

Fotos

Você estará sempre a um clique de compartilhar a sua foto favorita. Basta clicar no ícone de foto no seu computador. Se a foto que deseja inserir no seu blog já estiver na web, tudo bem. Cole o URL e incluiremos a imagem na sua postagem.
Você também pode enviar fotos de câmera de telefone direto para o seu blog ao usar o Blogger Móvel.


No celular


O BlogSpot para celular 

otimiza o layout do seu blog para as pessoas que o 
acessarem de um aparelho celular. 

Para saber como o seu blog seria exibido em um aparelho 

celular, use a funcionalidade de visualização em Painel > 

Configurações > guia E-mail e celular.
A postagem via SMS/MMS permite que você envie texto, fotos e até vídeos diretamente para o seu blog, de onde você estiver. 
Basta enviar uma mensagem para go@blogger.com do seu celular. 
Não é necessário ter uma conta do Blogger. 
A mensagem é o suficiente para criar um novo blog e postar a foto ou o texto enviado. 

Depois, você pode reivindicar o seu blog para celular ou transferir suas postagens para outro blog. 

Acesse go.blogger.com e use o código de reivindicação que o Blogger enviou para o seu celular.
A postagem via e-mail é outra opção, caso a postagem por SMS/MMS não esteja disponível na sua operadora de celular. 
Descubra como você pode usar o recurso Mail-to-Blogger para postar via e-mail.

Primeiros passos

A maneira mais rápida de entender o que é ter um blog é experimentando. 
Trabalhamos muito para tornar essa experiência bem simples. 
Basta clicar no link abaixo e você começará a fazer parte do fenômeno que está transformando a web e a mídia em uma atividade participativa em menos de cinco minutos.
O que vai acontecer em seguida? Ninguém sabe. Mas pode ser divertido.
Lembre-se: o Blogger é gratuito. Se você tiver problemas, basta clicar no botão Ajuda em qualquer tela para encontrar a resposta que está procurando.


fonte:


Seguidores

Follow by Email