Ely dicas 2.0
server-do-mes Nome: » EvilMu
Versão: » 1.5D+ S4
Xp: » 10.000x
Site: » Click Aqui
publicidade
Postador por Ely Designer as 10:24




Link da imagem:
Nome do Selo:
Descrição do selo:
Para gerar o código clique ao
lado


Aqui está o seu código, copie e cole na aba HTML das suas atualizações do Orkut:




Exemplo:



*O Gerador de Selos fake para o Orkut é apenas uma brincadeira, não

disponibilizamos códigos maliciosos nem conteúdo SPAM.

Não existe uma maneira de gerar selos oficiais para o seu perfil, o que fazemos aqui

é disponibilizar um código para a sua atualização de perfil que se parece com

a atuaização de um selo.
<< Página Inicial


Postador por Ely Designer as 21:08









Postador por Ely Designer as 06:59
Veja imagem demonstrativa abaixo:


Você pode personalizar a mensagem que deverá aparecer logo no final dos seus posts.
A mensagem aparecerá de forma automática, inclusive nos artigos já publicados.

Atenção:

Antes de mais nada quero deixar claro que como em todos os tutoriais publicados aqui, eu testo todos os recursos antes de publica-los, e utilizo sempre como base os códigos constantes nos templates padrões do Blogger (Minima), ou do Designer do modelo. Portanto, dependendo do template que você está usando, pode ocorrer que você não encontre algum dos códigos citados.
Sendo assim, você terá que procurar e testar sozinho(a) os códigos dentro do seu template, referentes à instalação do recurso em questão!
Nos trechos referentes a aplicação de estilos CSS dos códigos, eu sempre destaco o que cada trecho representa, para que você mesmo(a) personalize á sua maneira. Leia o tutorial com atenção, faça testes e boa sorte!


Mensagem automática no final dos artigos do blog:


Vá em "DesignEditar HTML" → marque a caixinha "Expandir modelos de widgets", e procure por este código:

<div class='post-footer'>

E logo ACIMA dele, cole o seguinte código:

<div id='finalpost'>
SEU TEXTO AQUI
</div>


Caso queira incluir uma imagem antes do seu texto, ao invés de utilizar o código acima, utilize este código:

<div id='finalpost'>
<img align='absmiddle' src='ENDEREÇO-DA-SUA-IMAGEM' style='width: 24px; height: 24px; float: left;'/>
SEU TEXTO AQUI
</div>

O código acima, está configurado para utilizar uma imagem no tamanho de 24x24.
Se for utilizar uma imagem maior, não se esqueça que você DEVE EDITAR os valores de "width e height", colocando o mesmo tamanho da imagem que está utilizando.

Aplicar estilos para personalizar a mensagem:


Volte na aba "Designeditar html",e procure pela tag: ]]></b:skin>
e cole ACIMA dela:

#finalpost{
margin:20px 0px 20px 0px;  /* distancia entre o texto e o post */
padding:10px 5px 10px 5px;  /* edite se quiser */
font-size:13px;  /* edite tamanho da fonte */
text-align:left;   /* alinhamento do texto */
color: #XXXXXX;  /* cor da fonte */
border: 1px solid #XXXXXX;   /* coloque borda se quiser  */
background: #XXXXXX;  /* coloque cor de fundo se quiser */
}

Não esqueça que você DEVE editar os campos de acordo com seu gosto.
Caso não queira incluir cor de fundo e borda, apague o trecho destacado em vermelho.

Vá visualizando para ver se está da maneira que você quer, e se for necessário, edite os valores em "padding e margin".
Se estiver tudo certinho, salve!

Você pode incluir o texto que quiser, seja uma mensagem sobre cópias de conteúdo, seja um convite para os leitores do blog deixar comentários, ou até mesmo, convite para assinar o Feed do Blog.
Use a imaginação!
Postador por Ely Designer as 06:53

Neste tutorial, trataremos apenas sobre as formas de personalizar os titulos dos posts.
Veremos como alterar tamanho e cor da fonte, como alinhar o texto do titulo, como configurar o tipo da fonte e como inserir bordas.
Para entender sobre a área dos títulos do post, requer que você já esteja familiarizado com os códigos referente ás postagens no seu blog e saiba sobre a personalização de fonte e texto. Se ainda não está,

Nos templates padrões, o titulo do post está representado pelas variáveis:

.post h3
.post h3 a - (link ativo)
.post h3 a:visited - (Link já visitado)
.post h3 a:hover - (Mouse em cima)

Todos os estilos que você quiser aplicar aos títulos deverão ser incluidos dentro destes trechos.

Na parte CSS dos templates padrões, as variáveis para os titulos das postagens estão da seguinte maneira:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}


Personalizar o tamanho da fonte:

Por padrão, o tamanho da fonte para os títulos, está configurado em 140%.
Mas você pode alterar o tamanho, basta substituir 140% pelo valor correspondente ao tamanho da fonte que você deseja.
Exemplo:
font-size:22px;

Personalizar cor da fonte:

Note que no código de exemplo postado acima, a cor do título do post está definido no Variable Definitions, que são valores que podem ser modificados diretamente no Painel "Fontes e Cores" do Blogger.
A maioria dos templates existentes, como os padrões do Blogger (mínima) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel , em "designer de modelo".
Mas você pode aplicar uma cor diretamente no trecho CSS, basta substituir $titlecolor pelo valor correspondente referente a cor que você deseja que o título do post tenha.
Exemplo:
color: #FFFFFF;

Se quiser, consulte a tabela de cores html.

Alinhamento do texto do título:

text-align:left -> titulo alinhado à esquerda.
text-align:right -> titulo alinhado à direita.
text-align:center -> titulo alinhado o centro.
text-align: justify -> titulo com alinhamento justificado (faz com que o texto contido em uma linha se estenda tocando as margens esquerda e direita).

Definir tipo de fonte para o título:

Você pode definir o tipo de fonte para o título diretamente no trecho CSS, basta incluir a definição da fonte que você deseja , defina sua fonte preferida, seguindo-se de algumas alternativas para ela, e encerre a listagem das fontes com uma fonte genérica, assim se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
Exemplo:
font-family: 'Trebuchet MS', Arial, Serif;

O Google API disponibiliza algumas fontes diferentes que podem ser usadas no Blogger.

Definir estilo da fonte:

Estilo da fonte: normal e italic.
Se você deseja que a fonte do título se apresente em itálico, devemos incluir no CSS a variável para o estilo da fonte.
Exemplo:
font-style: italic;
A fonte pode ser definida para se apresentar em negrito(bold).
Exemplo:
font-weight:bold;

Você também pode aplicar efeito sombra na fonte do título.
Exemplo:
text-shadow: 1px 2px 3px #000;

Definir Tranformação da fonte:

Você pode definir transformações da fonte do título do post no formato caixa-alta ou caixa-baixa.
Para definir a propriedade de transformação de textos, você pode atribuir as seguintes variaveis:
text-transform: none; -> sem efeito.
text-transform: capitalize; -> Primeira Letra Das Palavras Maiúsculas.
text-transform: uppercase; -> TODAS AS LETRAS MAIÚSCULAS.
text-transform: lowercase; -> todas letras minúsculas.
font-variant: small-caps -> transforma letras em maiúsculas de menor altura.
font-variant: normal -> sem efeito variante.

Definir decoração da fonte:


Para a decoração do fonte do título você pode atribuir as seguintes variáveis:

text-decoration: underline; -> título sublinhado.
text-decoration: line-through; ->título com linha em cima.
text-decoration: overline; -> título sobrelinhado.
text-decoration:none; -> sem efeito.

Definir espaço entre as letras do título:

Você pode definir o espaço entre os caracteres, ou seja, o espaço que existe entre as letras do título.
Exemplo:
letter-spacing:1px;

Inserir borda no título:

Se quiser acrescentar borda ao título, basta incluir no CSS a variável para borda.
Exemplos:
border: 1px solid #000000 -> borda em toda área do título.
border-bottom:1px solid #000000 -> borda apenas abaixo do título.
border-top: 1px solid #000000 -> borda apenas acima do titulo.


Você também pode incluir um efeito sombreado na borda.

Exemplos:
border:1px solid #000000;
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

No exemplo acima, as bordas estão arredondadas e possuem efeito sombreado.


Definir cor para plano de fundo do título:

Se quiser incluir uma cor como plano de fundo do título, basta acrescentar a linha "background" e aplicar os estilos a ela.
Exemplo:
background: #CFCFCF;

Se quiser você também poderá aplicar um efeito gradiente ao background do título.

Se quiser colocar uma imagem no título do post, veja neste tutorial como colocar imagem no titulo do post.


Todos os estilos que você aplicar em .post h3, você deverá aplicá-los também em:
.post h3 a, .post h3 a:visited, .post h3 strong


Agora que você entendeu as maneiras que pode personalizar o título das postagens, veremos um exemplo com código completo a seguir:

.post h3 {
margin:.25em 0 0;
font-family: 'Trebuchet MS', Arial, Serif;  /*--tipo da fonte--*/
padding:15x;
font-size:22px;  /*--tamanho da fonte--*/
font-weight:bold;  /*--fonte em negrito--*/
text-align: justify;  /*--alinhamento justificado--*/
text-decoration:none;  /*--sem decoração da fonte--*/
text-transform: uppercase;  /*--tudo em letra maiúscula--*/
letter-spacing:1px;  /*--espaçamento entre letras--*/
text-shadow: 1px 2px 3px #000;  /*--efeito sombra na fonte--*/
font-style: normal;  /*--estilo da fonte normal--*/
line-height:1.4em;  /*--espaçamento entre linhas--*/
color: #FFFFFF;  /*--cor da fonte--*/
border:1px solid #000000;  /*--borda em volta do titulo--*/
/*efeito sombreado na borda*/
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
/*borda arredondada*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background:#DADADA; /*--cor de fundo--*/
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;  /*--sem decoração da fonte--*/
text-transform: uppercase;  /*--tudo em letra maiúscula--*/
letter-spacing:1px;  /*--espaçamento entre letras--*/
text-shadow: 1px 2px 3px #000;  /*--efeito sombra na fonte--*/
font-style: normal;  /*--estilo da fonte normal--*/
line-height:1.4em;  /*--espaçamento entre linhas--*/
color: #FFFFFF;  /*--cor da fonte--*/
border:1px solid #000000;  /*--borda em volta do titulo--*/
/*efeito sombreado na borda*/
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
/*borda arredondada*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background:#DADADA; /*--cor de fundo--*/
}

.post h3 strong, .post h3 a:hover {
color: #000000;
}


Lembre-se, o código acima é apenas um exemplo, personalize o título do post de acordo com seu gosto e cores que combinem com seu template.
Postador por Ely Designer as 06:49
Se você quer definir o que será exibido ou não na sua área de post, e também definir o número de postagens na sua página inicial, aprenda aqui como fazer essas alterações.
No próprio layout do seu blog, na parte "postagens no blog", você pode marcar os itens que deverão aparecer em seus posts, como: data, hora de publicação, enviar postagens por email, nome do autor nas postagens, comentários, botões de compartilhamento etc.

Para acessar os elementos de página, clique na aba "Design" e em seguida na aba "Elementos de Página" no painel do Blogger.
Em seguida procure por "postagens no blog" e clique em "editar".



Marque as opções que você quer que apareça nas suas postagens.
Os itens que você não quiser que apareçam em suas postagens, basta deixá-los desmarcados.



Você também pode organizar o local dos itens que aparecem em suas postagens, para isso basta arrasta-los um a um para o local que você preferir.



Simples não?
Agora é com você
Postador por Ely Designer as 06:47

Esta Dica é bem fácil e você ainda tem a liberdade de usar a divisão das postagens em colunas apenas em determinadas trechos de suas postagens.

Se quiser dividir o conteúdo de uma postagem em colunas, siga as instruções a seguir.

Basta inserir em sua postagem o código abaixo:




<div style="float: left; width: 45%">Aqui o Texto da Coluna da Esquerda</div>
<div style="float: right; width: 45%">Aqui o Texto da Coluna da Direita</div>
<div style="clear: both"></div>


Cole este código apenas nas postagens que você desejar dividir o conteúdo e pronto!
Postador por Ely Designer as 06:42

FAZENDO BACKUP DO TEMPLATE NO BLOGGER:


Antes de realizar qualquer alteração no html do seu template, é altamente recomendável fazer um backup.
Veja como proceder:
1) Vá em design” > ”"editar html" e clique em "salvar modelo completo".

2) Salve o arquivo que você acabou de baixar no seu pc.
Se estiver usando o Firefox, marque a opção: "download".
Se estiver usando o IE, marque a opção: "salvar como".

3) Clique em ok para salvar seu arquivo.



Caso algo saia errado, basta fazer o upload deste arquivo que você salvou. Desta forma seu template voltará às configurações anteriores.

FAZENDO BACKUP DOS WIDGETS:

Um problema muito comum é que, após a troca de template, muitos dos widgets serão perdidos e ainda não há uma maneira simples de fazer um backup dos Widgets, para isso, você precisará abrir elemento por elemento e copiar o conteúdo para um bloco de notas ou word.
Portanto lembre-se sempre de usar uma das seguintes opções:
∙ fazer uma cópia de todos os códigos dos widgets no Bloco de Notas ou no Word.
∙ fazer uma cópia de todos os códigos em um blog de testes.
 
Copyright © 2010-2011 Top-Portais | Desenvolvido por Pricila - Melhor vizualização Mozilla Firefox.