Personalizando Blogsome - Parte I
Aprenda tambem a alterar as cores no Personalizando Blogsome - Parte II
BANNER:
O Blogsome eh um servidor que oferece blogagem gratuita com a ferramenta WP (Wordpress). Nao tenho certeza qual a versao WP que eles usam, acho que eh: 1.2. De qualquer forma eh diferente da versao disponivel no momento (2.02), eh mais simples e mais restrita, mas funciona perfeitamente e eh um otimo comeco para que nunca usou o WP.
Nessa primeira parte vou ensinar apenas como se mudar uma banner. So para constar, esquecam HTML, nos vamos mexer apenas no CSS.
1 - Faca o login no seu Blogsome.
2 - Click em: Manage > Themes - Voce vai ver uma tela assim:
3 - Escolha um dos temas disponiveis, antes de seguir adiante teste o tema, veja se ele eh adquado as suas necessidade, meu favorito eh o Green Track do Sadish, esse aqui:
4 - Escolhido o tema, click em: Manage> Files tela 2:
Observer que o arquivo Index.html eh o primeiro e ja vem aberto quando vc vai para essa pagina. Desce a barra de rolagem e va la embaixo na pagina, e vc vera essas opcoes:
You can also edit the following files.
|
File |
Backups |
Notes |
||||
|
Main Page |
1 |
2 |
3 |
4 |
5 |
When you edit a file a backup is made of the old file. |
|
Site Style Sheet |
1 |
2 |
3 |
4 |
5 |
|
|
Posts |
1 |
2 |
3 |
4 |
5 |
|
|
Comments |
1 |
2 |
3 |
4 |
5 |
|
Selecione a opcao: Site Style Sheet, esse eh o famoso arquivo CSS.
Daqui para frente requer ainda mais atencao, se voce fizer qualquer coisa errada e seu blog sumir, nao se disespere, volta ate voce ver novamente a opcao de escolher um tema e seleciona novamente.
5 - Como eu escolhi o Green Track, a tela que tenho na minha frente agora eh essa aqui:
6 - Leia com atencao os codigos dessa pagina, isso sao instrucoes dadas ao browser para formar a aparencia da pagina, como nesse primeira parte vamos mudar apenas a banner, vamos direto procurar por ela, no Green Track a banner esta nesse trecho aqui:
#header {
background: url(’/wp-inst/wp-content/sitetemplates/GreenTrack/img/rail.jpg‘);
height: 175px;
margin: 0;
padding:0;
Essa “declaracao” diz que a imagem esta hospedada no endereco: /wp-inst/wp-content/sitetemplates/GreenTrack/img/rail.jpg, esse endereco eh dentro dos servidores do Blogsome, voce nao pode mexer nela, mas vc pode substituir por outro endereco. Entao se voce ja tiver uma outra imagem (Banner) eh so colocar o endereco aonde ela esta hospedada ali, dentro dos “parenteses: ( )†e entre ‘apostrofo’.
ATENCAO: Antes de fazer qualquer mudanca, copie e cole todo o arquivo para dentro de um editor de texto qualquer, eu uso o notepad para isso, word nao eh aconselhavel.
Importante: Se a imagem que voce colocar no lugar dessa acima nao for exatamente no mesmo tamanho da imagem substituida, ela nao vai aparecer. Para saber o exato tamanho da imagem vc precisa copiar a imagem da banner e colar num editor de imagens: Paintshop ou Photoshop, ou outro aonde vc possa verificar o tamanho em pixel.
Outra forma eh ajustar o CSS ao um novo tamanho de banner. Voltando na declaracao eh possivel saber que:
#header {
background: url(’/wp-inst/wp-content/sitetemplates/GreenTrack/img/rail.jpg’);
height: 175px;
margin: 0;
padding:0;
Heigh ou altura eh igual a 175px. Agora a largura nao esta nessa declaracao e sim na de cima:
#rap
{
background:#fff;
border-left: 4px solid black;
border-right: 4px solid black;
width:760px;
margin:0 auto;
padding:8px;
text-align:left;
font-family: Trebuchet MS, Georgia, Arial, serif;
font-size: 0.9em;
Nesse CSS o “#rap” eh responsavel por toda a estrutura dessa parte central do blog. Observe o width ou largura eh igual a 760px.
Em geral eu preparo uma banner de 750×250px, e modifico a height para 250px, nao mexo na width, nesse caso especifico eu apenas alterei de 0 para 5 a margem na declaracao header, para compensar os 10px de diferenca. E a minha declaracao final da header (Banner) fica assim:
#header {
background: #FFFFFF url(’http://img183.imageshack.us/img183/2746/winter7vv.jpg‘);
height: 250px;
margin: 5px;
padding:0;
Outra coisa que alterei nesse caso foi a cor do background, acresentando um #FFFFFF (BRANCO) antes da url. Isso para dar um efeito que a banner esta colada num papel branco.
Se eu tiver um bom feedback desse tutorial irei adiante, e ensino mudar as cores, o lado da sidebar e outras coisinhas mais. Espero que ajude a quem me pediu!!
Leia outros Posts relacionados
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
5 Comentários
Formulário de comentários está fechado para este post.
Ale, muito 10 esse tutorial, já ajudou a começar a entender como funciona o blogsome, a preparar um principio de como montar um tem, valeu.
obrigado
beijos
Olá Ale, segui as suas informação e consegui mudar o baner , e acertei a altura das colunas, para não ficar em cima do banner, só não consegui achar onde fica a cor da fonte, eu acho q a cor q está não tem muito contraste com o fundo, ficando estranho queria mudar a cor para darmais constrasteficar melhor a leitura, o clog q criei é esse aki
http://cwm.blogsome.com
desde já agradeço suaatenção
beijos
[...] « Personalizando o Blogsome - Part I [...]
Ale que 10 este tutorial….
Entrei e gostei!
Vim deixar minha marquinha e um beijinho no seu coração!
Mary Help!!!