Hey, é isso mesmo amores ! Yoo~
Vocês não leram errado não ! Hoje estou trazendo um BIG-TUTORIAL de personalização de template. Você pode sim fazer um template rápido, fácil e muito bonito ! Más claro, configurando o template que o blog nos fornece. Clique EM Leia Mais Para Ver O Big Tutorial
Agora, quer saber como fazer tudo isso tão rápido e deixar o seu blog lindo e maravilhoso?! Então venha aprender comigo ! Let's Go Baby...
1. Vamos escolher o modelo:
- Siga como exemplo as imagens abaixo
Agora escolha seu plano de fundo
Ajuste a Largura do seu Design. Eu recomendo que use os valores como mostra a imagem
Modifique seu layout de acordo com a imagem !
- Agora, vá em "avançado" e modifique a fonte de sua postagem, do título do seu post como quiser...
2. Agora vamos remover esta parte branca que tem no cabeçalho do template:
Para fazer isso, vá em Disgn > Editar HTML e procure (CTRL + F) por isso:
color="$(content.background.color)" default="$(color) none repeat scroll top center" value="#ffffff url(http://www.blogblog.com/1kt/travel/bg_container.png) repeat-x scroll top left"/>
Veja a imagem. Ao achar o código, você vai encontrar uma URL, e é lá que iremos mecher... Na url da imagem, sómente na URL, coloque algo inválido, como por exemplo um pontinho, ou uma virgula, qualquer coisa do tipo. Veja o meu. Eu coloque um pequeno ponto final logo após o "//"
Agora salve e verá que o fundo branco sumiu!
3. Personalizando os Gadgets:
- Volte para Design de Modelo do Blogger, vá em avançado > Plano de fundo da barra lateral e altere as cores do Plano de Fundo e da Cor da Moldura para "transparente". E salve.
Separando os Gadgets:
- Vá de novo em Elementos da Pagina > Editar HTML > E preocure (CTRL+F) por: /* Wigets
Após margin: 10px 0; você irá colocar o seguinte código:
Background: #cccccc;
Você pode alterar a cor do background, recomendo que use a cor #ffffff (que é o branco) Veja a imegem abaixo:
E o salve.
Colocando Faixinha na Gadget:
Vamos colocar uma fixinha fofa como esta no seu gadget?
1. Vá em elementos da Página > adicione HTML/javasript e cole o seguinte código:
<style>/**PERSONALIZAÇÃO DA SIDEBAR**/.sidebar .widget {width:100% !important;background:#fff;margin:10px 0 !important;border-top:10px #66CDAA solid;border-radius:0 0 10px 10px;padding:10px;box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc;overflow:hidden}.sidebar .widget h2 {font: normal normal 20px Indie Flower;text-shadow: 0px 0px 1px #000;color: #000;text-align: center; /*Alinhamento do texto*/margin-top:-10px /** MARGIN **/;margin-left:-9px /** MARGIN **/;margin-bottom:10px /** MARGIN **/;padding:5px;width:107%;overflow:hidden}/** FIM DA SIDEBAR**/</style>
Onde está sublinhado é a cor da faixinha, se quiser outra cor é só alterar. E é só salvar !
4. Vamos agora arredondar a borda das postagens:
- Vá em Editar HTML > clique em CTRL+F e preocure por:
.main-inner .column-center-outer {Agora cole o seguinte código logo abaixo desta tag:
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
E ele irá ficar assim, como mostra a imagem abaixo e salve.
5. Colocando um Menu Sidebar HOVER
- Vá em Editar HTML > Procure por (CTRL+F) ]]>
Agora cole esse código logo acima da tag:
/*menu por Liah - Cherry Bomb - credite sempre*/#menucb {
float: left;
display: line;
margin:1px;
background:#f2eee8; /*Cor de fundo */
width: 87px; /*Largura de cada link do menu */
height: 25px;
text-align:center;
font-size: 16px; /*Tamanho da fonte*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 0px 9px #cccccc;
-webkit-box-shadow: 1px 0px 9px #cccccc;
box-shadow: 1px 0px 9px #cccccc;
text-shadow: 0px 1px 5px #cccccc;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
#menucb:hover {
background: #cfd9f6; /* Cor de funo quando passa o mouse*/
color: #fff; /*Cor do texto quando passa o mouse*/
}
E modifique-a como quiser !
Veja a imagem abaixo:
- Agora é só ir em elementos da pagina > Adicione um HTML/javascript e cole este pequeno código onde quer que o menu apareça:
<a href='LINK' id='menucb'>TÍTULO DO LINK</a>
E edite como pede.
O menu irá ficar assim:
Fofo né?!
6. Tirando a Navbar
- Para remover aquele treco feio
9. Colocando seus créditos
- Vamos colocar os créditos de um modo fácil e sem complicações?
Primeiramente vá em Elementos da pagina > vá até o finalzinho e ache attribution, veja a imagem abaixo (ele é o ultimo HTML)
- Agora clique em Editar e escreva algo na aba em branco: Veja o exemplo da imagem abaixo. Após isso, salve.
8. Cabeçalho
- Gente, a última coisa que eu coloco num blog quando estou editando é o cabeçalho ! Para mim, ele sempre deve ser a ultima coisa a colocar, pois primeiro temos que ver como o design do blog ficou sem o layout, para depois pegar as pecinha e formar um cabeçalho tudo haver com o blog... Mas enfim, a maioria de você já sabem colocar um cabeçalho né?
vá em elementos da pagina > cabeçalho > editar (e coloque sua linda imagem)
Trouxe uma pra vocês, quem quiser pegar fique a vontade! Clique na imagem e veja o tamanho original.
Eu fiz um cabeçalho super Simples só para ter como exemplo !
Gostaram do Mega-Super-Tutorial?
Gente eu decidi postar isso, pois as minhas aulas irão retornar segunda e por isso, acho que irei postar menos e para facilitar, eu vim trazer esse totorialzão pra vocês ><
Kissus kawaiis e espero que tenham gostado mesmo ♥
Creditos: Kawaii The World(www) e Famosos.com
Nenhum comentário:
Postar um comentário
- Não Ofenda Ninguem Aqui
- Deixe O Link Do Seu Blog Para Que Possa Ver E Se Gostar Eu Sigo
- Pode Deixar Qualquer Pergunta e ela vai ser respondida!
Agora Comenta,Vai *_*