[Mega Quick List] Tutoriais Blogger - Imagine

[Imagine/Unknow 0]

WC Hoje está rica de postagens hoje , cheats , signatures , hackers etc.

Mas a Design Zone no tipo que digo é Web Design , Css Html , XMl está muito fraca.

Hoje para quem tem seu blogger e seguiu meu tutorial passado , vou por uma série de tutoriais para melhorar seu blogger ainda mais doque você pode imaginar.

Se não tiver oque quer na Lista , peça porfavor. Grato!

 

Créditos : Códigos Blog Anime design e eu por postar!

 

Widget contador de redes sociais, postagens e comentários para Blogger-

O widget mostra o ícone e o número de assinantes feed, seguidores do Twitter, fãs do Facebook, quantidade de postagens e comentários.

O widget funciona 100% apenas no Blogger.

Como instalar :

 

1º- Faça login no

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

- No antigo Blogger: Entre em “Layout” -> “Elementos da página”, clique em “Adicionar um Gadget” -> “HTML/JavaScript”

- No novo painel: Entre em “Layout”, clique em “Adicionar um Gadget”, escolha a opção “HTML∕JavaScript”;

2º - Ao abrir uma janela cole o seguinte código:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

3° - Faça as seguintes modificações:

NOME_FEED - pelo nome do feed do seu blog.

Exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

(no caso o NOME_FEED é: codigosblog)

 

ID_FACEBOOK - pelo id único da sua fan page. Para pegar entre na página, clique na foto de perfil e copie os últimos números depois do ponto até o “&”.

Exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

(id: 157140557643201)

Preste bem atenção para pegar o trecho certo!

 

É obrigatório colocar o ID (números) e não o nome da sua fan page.

 

NOME_FACEBOOK - Aqui sim você coloca o link completo da sua fan page.

 

NOME_TWITTER pelo nome de usuário do seu Twitter.

Exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

(no caso o NOME_DE_USUARIO é: pauloestevao)

 

4° - Salve e pronto!

Se você entende um pouco de HTML e CSS, faça quantas modificações quiser.

Faça tudo com atenção. Qualquer errinho atrapalha o funcionamento do widget.

 

Vocês podem notar que não coloquei créditos. Não esqueci e sim porque acho mais limpo o widget sem créditos. Seu blog fica mais bonito assim! =]

Eu peço apenas que coloque nosso link ou banner em qualquer parte do seu blog. Apenas como uma forma de agradecimento. Todavia, você não é obrigatório, apenas faço a solicitação.

 

-Bloqueando a seleção de textos e imagens no seu blog

Este tutorial evita muito o plagio de contéudo e é muito bom.

1° Vá em editar html do seu blog e procure por:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

2° Então cole o seguinte código ANTES:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Retirar mensagem “Mostrando postagens com marcador''-

Quando você adiciona um marcador no blog , ao clicar nele ( ou fazer uma pesquisa ) aparece a página das postagens com aquele marcador e acima aparece aquela mensagem.

Antes de editar o modelo, é recomendável salvar uma cópia do mesmo.

 

Nesse tutorial vou ensinar de um jeito fácil, de como retirar essa mensagem, que pra blogger de animes não combina muito.

 

Vá em Editar HTML , e procure pela linha:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

acima dessa linha cole o código abaixo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Imagem com OnClick -

Esse efeito funciona da seguinte maneira... ao passar o mouse sobre a imagem ela altera e ao tirar o mouse sobre a imagem ela volta para a imagem inicial.

 

Crie um Gadget ou uma postagem e cole o código abaixo alterando conforme os seus dados:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

-Adicionando Área de Widget

Primeiro vamos adicionar as configurações da área de widgets no css do template

procure pela linha:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Acima dela cole o código abaixo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

pronto as configurações estão adicionadas , agora vamos adicionar a área dos widgets no template

procure por:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Acima dela cole o código abaixo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

sempre quando adicionar uma área de widget novo, troque "HTML20" para HTML+qualquernumero ( os ID's não podem ser iguais , se tiver igual algum outro id do seu template irá dar erro ) e troque nome "newsidebar-widget" no css e na id da div ( atenção: o nome que estiver no css tem que ser exatamente igual o nome da ID da div )

Pronto visualize , alinhe sua área de widget e salve

 

-Editando Topo do post

Atenção: Este tutorial vale lembrar que não é algo facil requer reconhecimento em css para compriender melhor o tutorial. Então antes de criticar você está ciente disto.

 

Primeiro Procure por :

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Como padrão ele ja vem com algumas coisas dentro dos parametros eu irei utilizar uma imagem como exemplo do meu template de um anime que tenho a imagem é

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

cliquem e veja.

LEMBRE ELE TEM SISTEMA DE AVATAR NÃO IREI ENSINAR A COLOCAR POIS JA TEM TUTORIAL SOBRE ISSO

 

Para colocar a imagem no topo da postagem vc ira colocar o seguinte codigo dentro dos {} que tem no post h3

e também colocar o tamanho da imagem irei fazer de acordo com a citada logo acima.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Para posicionar a imagem de acordo com o template deve se usar a propriedade margin com seus determinados valores então deve saber um pouco de css e como utilizar o margin.No caso dessa imagem eu não irei arrumar ela de acordo com o template.

 

Para posicionar o titulo por cima da imagem você devera colocar outra propriedade css que é a padding, sua função é posicionar tudo que estiver dentro de uma div .E tambem irei colocar um valor para o tamanho do titulo que será a propriedade font-size ( ainda no post h3)

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Se quiser colocar cor ao titulo é so colocar a propriedade:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Resultado Final:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

e veja o resultado na imagem abaixo

 

OBS : Só deixe o código até '';'' o resto é só um detalhe.

 

-Avatar no Post (NEW)

 

 

Nesse tutorial vou ensinar como Colocar Avatar ao lado das postagens e cada Autor ( membro da equipe ) ter seu próprio avatar.

 

Edite a imagem que deseja utilizar. Deixe-a nas proporções adequadas e a hospede, por exemplo, no ImageShack.

Abra o painel do Blogger e clique em DESIGN > EDITAR HTML.

Marque a opção "Expandir modelos de widgets".

 

Procure a linha

acima desse linha , cole o código abaixo editando conforme os dados do seu avatar:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

pronto só salvar e ver seu avatar nas postagens...

 

agora vou ensinar como colocar pra cada autor ter seu próprio avatar.

 

pra cada autor seu próprio avatar, vamos utilizar o código abaixo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

no Lugar de "Imagine" coloque seu nome ( O nome de exibição do seu blogger... aquele nome que você colocou em seu perfil )

 

pra adicionar mais de 1 autor copie o código novamente e cole a baixo do primeiro autor , trocando o link do avatar e o nome de exibição.

 

 

 

Posto mais amanhã é que vou sair flw!

[NaToW 0]

isso aki naum ta na area errada naum?

[Imagine/Unknow 0]

Precisa entender um pouco de Css Html para

saber o mínimo -> é ligado a Web Designer.

Areá Web Designer e Designer são bem diferentes

Como não tem Área Web Designer o mais perto

a chegar é Designer Zone .

['Leozin 34]

Tópico em Área Errada, tome mais cuidado antes de criar um tópico, verifique se a área onde você se encontra tem ligação com o assunto do seu tópico.

 

Tópico movido para » Web programação

Abraços.