All Stories
Mostrar mensagens com a etiqueta Como adicionar botões css demo e download nas postagens do blogger. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta Como adicionar botões css demo e download nas postagens do blogger. Mostrar todas as mensagens

sábado, 30 de novembro de 2013

Tutorial como adicionar blockquote no blogger.

A função blockquote são as citações que aparecem quando você posta algo que você quer melhorar no post.

Exemplo:


Então eu decidi diferenciar os hacks códigos citações usando um recurso muito simples que pode ser incorporado em seu posto durante a sua criação,  esta caixa de código que você vê éum exemplo de quando você postar os códigos. 



Vamos aprender um pouco sobre o BLOCKQUOTE função E COMO ADICIONAR:

Em primeiro entrem no vosso painel de control.
Modelo,Editar HTML.
Aberto o HTML dà um CTRL + F para abrir a busca.
Na caixa de busca coloque  ]]></b:skin>  para procurar esta mesma tag.

Ver exemplo:


Feito isso adicione um dos codigos a seu gosto logo por cima da tag ]]></b:skin>
Baixar <blockquote> exemplos de.
Depois de personalizar finalmente salvar o modelo e visualizá-lo e ver a nova mudança interessante.

Guia: - Para alguns blockquotes acima mencionados, você precisa adicionar algumas tags extras dentro editor blogger como explicado abaixo, agora sempre que você escreveu um orçamento dentro do modo de composição do Blogger Editor de simplesmente mudar para o modo HTML e adicionar duas tags ou seja
<div> e </ div> entre as tags blockquote como demonstrado abaixo,

 Exemplo:
 <blockquote> <div> Your Quote vai estar aqui </ div> </ blockquote>

Tutorial como adicionar blockquote

Tugazug   at   13:13   No comments

Tutorial como adicionar blockquote no blogger.

A função blockquote são as citações que aparecem quando você posta algo que você quer melhorar no post.

Exemplo:


Então eu decidi diferenciar os hacks códigos citações usando um recurso muito simples que pode ser incorporado em seu posto durante a sua criação,  esta caixa de código que você vê éum exemplo de quando você postar os códigos. 



Vamos aprender um pouco sobre o BLOCKQUOTE função E COMO ADICIONAR:

Em primeiro entrem no vosso painel de control.
Modelo,Editar HTML.
Aberto o HTML dà um CTRL + F para abrir a busca.
Na caixa de busca coloque  ]]></b:skin>  para procurar esta mesma tag.

Ver exemplo:


Feito isso adicione um dos codigos a seu gosto logo por cima da tag ]]></b:skin>
Baixar <blockquote> exemplos de.
Depois de personalizar finalmente salvar o modelo e visualizá-lo e ver a nova mudança interessante.

Guia: - Para alguns blockquotes acima mencionados, você precisa adicionar algumas tags extras dentro editor blogger como explicado abaixo, agora sempre que você escreveu um orçamento dentro do modo de composição do Blogger Editor de simplesmente mudar para o modo HTML e adicionar duas tags ou seja
<div> e </ div> entre as tags blockquote como demonstrado abaixo,

 Exemplo:
 <blockquote> <div> Your Quote vai estar aqui </ div> </ blockquote>
Continue Reading→

segunda-feira, 25 de novembro de 2013


A tabela apareceu pela primeira vez no HTML versão 3.2 em 1995 e desde então tem sido um dos principais recursos de otimização da página permitindo o alinhamento de textos, imagens e blocos de informações, muitas vezes criado pela própria tabela.


Pode ainda ver outro exemplo:
Como dividir texto de postagem em duas colunas.

  Uma forma de incrementar a apresentação de sua homepage é dividir o texto em duas ou mais colunas, estilo manchete de revista. Vou montar um exemplo com um texto formatado em duas colunas.



Primeiro digite o texto em modo simples, sem qualquer formatação.
Depois divida o texto exatamente no meio criando uma linha em branco entre o texto superior e o inferior (conforme o exemplo do texto em itálico, abaixo). O texto superior será a coluna direita e o inferior a esquerda.

PASSE O MOUSSE:


Ver:
LINHAS VERTICAIS SEPARADORES DE TEXTO


Vamos ao exemplo:

Bloco de texto superior:
O ciclo da água na costa terrestre possui um percurso bastante complexo, parcialmente dirigido pelo ciclo da atmosfera, importante veículo transportador da água, quer sob a forma de gotículas finamente dispersas, quer sob a forma gasosa.

A energia necessária para este ciclo provém do calor solar, e assim, por um número infinitamente grande de vezes, uma molécula de água é evaporada do oceano e a ele retorna, precipitada pelas chuvas, podendo também cair no continente, infiltrando-se solo adentro, ser absolvida por uma planta qualquer que em pouco tempo devolverá a mesma molécula à atmosfera, podendo então, direta ou indiretamente, por meio dos regatos e rios retornar ao oceano.
Bloco de texto superior:
Estes são os ciclos mais freqüentes, havendo, contudo, um número ilimitado de outros ciclos mais complexos e de importância geológica. Se considerarmos uma molécula de água saindo pela primeira vez à superfície terrestre, provinda das profundezas da crosta e trazida pelas atividades vulcânicas como água juvenil (que nem sempre é realmente juvenil, pois o magma pode ter assimilado sedimentos ricos em água, sendo esta novamente devolvida à superfície), poderá ela tomar diversos rumos. Condensando-se em chuva e caindo no oceano, poderá ser levada às grandes profundezas e novamente aprisionada junto aos sedimentos abissais por várias centenas de milênios, até ser novamente incorporada a um magma e novamente expulsa.


Dividir texto de postagem em duas colunas com imagem.

Tugazug   at   17:34   No comments


A tabela apareceu pela primeira vez no HTML versão 3.2 em 1995 e desde então tem sido um dos principais recursos de otimização da página permitindo o alinhamento de textos, imagens e blocos de informações, muitas vezes criado pela própria tabela.


Pode ainda ver outro exemplo:
Como dividir texto de postagem em duas colunas.

  Uma forma de incrementar a apresentação de sua homepage é dividir o texto em duas ou mais colunas, estilo manchete de revista. Vou montar um exemplo com um texto formatado em duas colunas.



Primeiro digite o texto em modo simples, sem qualquer formatação.
Depois divida o texto exatamente no meio criando uma linha em branco entre o texto superior e o inferior (conforme o exemplo do texto em itálico, abaixo). O texto superior será a coluna direita e o inferior a esquerda.

PASSE O MOUSSE:


Ver:
LINHAS VERTICAIS SEPARADORES DE TEXTO


Vamos ao exemplo:

Bloco de texto superior:
O ciclo da água na costa terrestre possui um percurso bastante complexo, parcialmente dirigido pelo ciclo da atmosfera, importante veículo transportador da água, quer sob a forma de gotículas finamente dispersas, quer sob a forma gasosa.

A energia necessária para este ciclo provém do calor solar, e assim, por um número infinitamente grande de vezes, uma molécula de água é evaporada do oceano e a ele retorna, precipitada pelas chuvas, podendo também cair no continente, infiltrando-se solo adentro, ser absolvida por uma planta qualquer que em pouco tempo devolverá a mesma molécula à atmosfera, podendo então, direta ou indiretamente, por meio dos regatos e rios retornar ao oceano.
Bloco de texto superior:
Estes são os ciclos mais freqüentes, havendo, contudo, um número ilimitado de outros ciclos mais complexos e de importância geológica. Se considerarmos uma molécula de água saindo pela primeira vez à superfície terrestre, provinda das profundezas da crosta e trazida pelas atividades vulcânicas como água juvenil (que nem sempre é realmente juvenil, pois o magma pode ter assimilado sedimentos ricos em água, sendo esta novamente devolvida à superfície), poderá ela tomar diversos rumos. Condensando-se em chuva e caindo no oceano, poderá ser levada às grandes profundezas e novamente aprisionada junto aos sedimentos abissais por várias centenas de milênios, até ser novamente incorporada a um magma e novamente expulsa.


Continue Reading→

quarta-feira, 20 de novembro de 2013



Se você tem um blogger de tutorial, e muito importante organizar bem as postagens na primeira pagina para caber mais postagens mostrando aos visitantes a sua movimentação No blog e, seu trabalho.



Com o link ler mais personalizado com foto combinando com seu Menu, ou hover se preferir .





Adicionando imagem no Link "Leia Mais"
   
 1. Para substituir o link "leia mais" por uma imagem, primeiramente você deve criar a imagem e depois hospeda-lá na internet. aqui vai  dois sites bons tinypic   e picasaweb
 
2. Agora vá até "Layout" > "Editar Html" e marque a opção "Expandir modelos de     
Widget" e  procure pelo código abaixo:
 
 
PASSE O MOUSSE:


 
EXEMPLO:
 
 
3.  E substitua o <data:post.jumpText/> pelo código abaixo .
 <p align='right'><a expr:href='data:post.url'><img src='aqui url IMAGEM'/></a></p>

4. lenbrando Onde está em vermelho deve ser substituído pelo Url da imagem que você
criou e hospedou na internet.

 5. Salve o modelo e veja o resultado!



 
 

Como trocar o Ler mais, mais informações ,continue lendo , no blogger

Tugazug   at   14:52   No comments



Se você tem um blogger de tutorial, e muito importante organizar bem as postagens na primeira pagina para caber mais postagens mostrando aos visitantes a sua movimentação No blog e, seu trabalho.



Com o link ler mais personalizado com foto combinando com seu Menu, ou hover se preferir .





Adicionando imagem no Link "Leia Mais"
   
 1. Para substituir o link "leia mais" por uma imagem, primeiramente você deve criar a imagem e depois hospeda-lá na internet. aqui vai  dois sites bons tinypic   e picasaweb
 
2. Agora vá até "Layout" > "Editar Html" e marque a opção "Expandir modelos de     
Widget" e  procure pelo código abaixo:
 
 
PASSE O MOUSSE:


 
EXEMPLO:
 
 
3.  E substitua o <data:post.jumpText/> pelo código abaixo .
 <p align='right'><a expr:href='data:post.url'><img src='aqui url IMAGEM'/></a></p>

4. lenbrando Onde está em vermelho deve ser substituído pelo Url da imagem que você
criou e hospedou na internet.

 5. Salve o modelo e veja o resultado!



 
 
Continue Reading→

terça-feira, 29 de outubro de 2013



Integre o formulário de contato ao seu Website.




Entre no Website http://br.foxyform.com/http://br.foxyform.com/ copie o código HTML e cole-o em algum lugar do seu Website ou Blogge!


Os e-mails enviados através deste formulário de contato serão enviados para o seu Exemplo@hotmail.com.



Veja Tambem:



 
















Se quiser pode ainda visualizar um
 formularios de contacto .



formulário de contato para seu website com proteção anti-spam

Tugazug   at   21:22   No comments



Integre o formulário de contato ao seu Website.




Entre no Website http://br.foxyform.com/http://br.foxyform.com/ copie o código HTML e cole-o em algum lugar do seu Website ou Blogge!


Os e-mails enviados através deste formulário de contato serão enviados para o seu Exemplo@hotmail.com.



Veja Tambem:



 
















Se quiser pode ainda visualizar um
 formularios de contacto .



Continue Reading→



O cabeçalho ou “Header” é o local onde fica a logo do seu blog.
E se você está querendo deixar essa parte um pouco maior, seja por qualquer motivo, sigas os passos mais abaixo.

A modificação é bem simples, mas sempre temos que ter um pouco de cuidado.




1. Faça o login no blogger e acesse o painel principal do seu blog;

2. Clique na guia “Modelo” –> “Editar Modelo”;

3. Aperte CTRL + F e procure por: #header-wrapper {




4. Abaixo dessa linha tem um código chamado “Width”.

 

Este determina a largura do cabeça, apenas altere o valor dele para um número maior ou menor dependendo do caso.


Aumentar tamanho do cabeçalho do blogger

Tugazug   at   10:50   No comments



O cabeçalho ou “Header” é o local onde fica a logo do seu blog.
E se você está querendo deixar essa parte um pouco maior, seja por qualquer motivo, sigas os passos mais abaixo.

A modificação é bem simples, mas sempre temos que ter um pouco de cuidado.




1. Faça o login no blogger e acesse o painel principal do seu blog;

2. Clique na guia “Modelo” –> “Editar Modelo”;

3. Aperte CTRL + F e procure por: #header-wrapper {




4. Abaixo dessa linha tem um código chamado “Width”.

 

Este determina a largura do cabeça, apenas altere o valor dele para um número maior ou menor dependendo do caso.


Continue Reading→

segunda-feira, 28 de outubro de 2013


Ola galera nesse tutorial   vamos ver como colocar números nos comentários do blog e blogger,

Nesse estilo fica um balão com números de acordo com o numero de comentários, 1 2 3 4 5 etc. dando um ar bem divertido ao blog. na parte dos comentários.

  Se você gosta de personalização e números poderá gostar disso, a instalação e bem rápida e as alterações também são bem simples você podendo trocar a cor dos números e o balão que aparece nos comentários do seu blogger.

Vá em modelo editar HTML Expandir modelos de widgets e
copie o código abaixo e cole acima de ]]></b:skin>


PASSE O MOUSSE:
.comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 22px; color: #555555; /*cor dos numeros*/ padding-left:15px; /*Afastar a imagem esquerda ou direita */ padding-top:3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJnnnZvNZKkdxZM1QI_AqtkYmcUKI8HtQjFcG_6CR1N7vnZw9-0Hodi3UeqX3iKVCUiFOaYa5CM4fvnaUWb5nJMszMhnSa-JDZKgwCOWgtUTBL8PPDLjL9RlUVGo2U9YBirrYFi3TBgne/s1600/comment+bubble2.png) no-repeat; margin-top:7px; margin-left:10px; width: 50px; /*largura da imagem*/ height: 48px; /*altura da imagem*/ } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; color: #666666; }
 

Salve o modelo.
Você pode trocar o balão por outro de sua preferência se quiser claro.

Como Colocar comentários numerados no blogger

Tugazug   at   18:41   No comments


Ola galera nesse tutorial   vamos ver como colocar números nos comentários do blog e blogger,

Nesse estilo fica um balão com números de acordo com o numero de comentários, 1 2 3 4 5 etc. dando um ar bem divertido ao blog. na parte dos comentários.

  Se você gosta de personalização e números poderá gostar disso, a instalação e bem rápida e as alterações também são bem simples você podendo trocar a cor dos números e o balão que aparece nos comentários do seu blogger.

Vá em modelo editar HTML Expandir modelos de widgets e
copie o código abaixo e cole acima de ]]></b:skin>


PASSE O MOUSSE:
.comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 22px; color: #555555; /*cor dos numeros*/ padding-left:15px; /*Afastar a imagem esquerda ou direita */ padding-top:3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJnnnZvNZKkdxZM1QI_AqtkYmcUKI8HtQjFcG_6CR1N7vnZw9-0Hodi3UeqX3iKVCUiFOaYa5CM4fvnaUWb5nJMszMhnSa-JDZKgwCOWgtUTBL8PPDLjL9RlUVGo2U9YBirrYFi3TBgne/s1600/comment+bubble2.png) no-repeat; margin-top:7px; margin-left:10px; width: 50px; /*largura da imagem*/ height: 48px; /*altura da imagem*/ } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; color: #666666; }
 

Salve o modelo.
Você pode trocar o balão por outro de sua preferência se quiser claro.
Continue Reading→



Nesse tutorial vou disponibilizar o código  de  botões  que  uso  nas  postagens do  blog.



Esse código  é  para dois  botões,
o de download,e o de demo para suas postagens  ficarem  mais  organizadas,e atrativas.



A instalação  é  bem  simples,e o  uso  deles  também.
Esse tutorial  é  para  a  interface do blogspot e Blogger.





Veja Tambem:


Bom vamos  ao tutorial.

Copie  o código  abaixo  e cole  acima de e salve ]]></b:skin> de um CTRL+F para facilitar a busca.
 
 

PASSE O MOUSSE:
.button { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px 19px 9px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; } .demobutton { background-color:#999999; text-align:center; width:150px; } .demobutton:hover { background-color:#00A0EE; } .downloadbutton { background-color:#91BD09; text-align:center; width:150px; } .downloadbutton:hover { background-color:#00AC00; } .button:hover { -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); }
 

Agora os códigos abaixo são dos botões de demo e download

DEMO:


DOWNLOAD:



EXEMPLO:

Live DemoDownload

Como adicionar botões css demo e download nas postagens do blogger

Tugazug   at   17:41   No comments



Nesse tutorial vou disponibilizar o código  de  botões  que  uso  nas  postagens do  blog.



Esse código  é  para dois  botões,
o de download,e o de demo para suas postagens  ficarem  mais  organizadas,e atrativas.



A instalação  é  bem  simples,e o  uso  deles  também.
Esse tutorial  é  para  a  interface do blogspot e Blogger.





Veja Tambem:


Bom vamos  ao tutorial.

Copie  o código  abaixo  e cole  acima de e salve ]]></b:skin> de um CTRL+F para facilitar a busca.
 
 

PASSE O MOUSSE:
.button { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px 19px 9px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; } .demobutton { background-color:#999999; text-align:center; width:150px; } .demobutton:hover { background-color:#00A0EE; } .downloadbutton { background-color:#91BD09; text-align:center; width:150px; } .downloadbutton:hover { background-color:#00AC00; } .button:hover { -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); }
 

Agora os códigos abaixo são dos botões de demo e download

DEMO:


DOWNLOAD:



EXEMPLO:

Live DemoDownload
Continue Reading→

Subscrever: Mensagens ( Atom )

Discussion

Blogger templates . Proudly Powered by Blogger .