TUTORIAL: Personalizando o titulo do sidebar

Ola pessoas, olha eu de volta e dessa vez com tutorial (aleluia). Hoje vou disponibilizar alguns códigos para vocês estarem personalizando o sidebar. É bem fácil.

Vamos la?!

Primeiramente você vai abrir um painel do seu blog, clicar em modelo > editar html > apertar "ctrl + F" e procurar por: .sidebar h2

Vai aparecer algo tipo assim:

Apague TODO esse código (vale lembrar que seu código pode estar diferente desse pois já pode ter sofrido alterações, mas não tem problema. É só apagar TODO ele). Apague desde .sidebar h2 até o }.

Depois de apagar escolha um dos códigos abaixo e cole no lugar. 

SIDEBAR 1

.sidebar h2 {

font-family: arial /*fonte do titulo*/ ;

color: #fff /* cor do texto */;

text-align: center;

background: url(http://i64.tinypic.com/2qxtk6v.png) no-repeat left;

background-color: #FFC1C1 /*cor do fundo */;

padding: 10px;

margin-left: -10px;

margin-right: -10px;

margin-top: -10px;

-webkit-border-top-left-radius: 3px;

-webkit-border-top-right-radius: 3px;

-moz-border-radius-topleft: 3px;

-moz-border-radius-topright: 3px;

}

SIDEBAR 2

.sidebar h2 {
font-family: arial /*fonte do titulo*/ ;
color: #e95179 /* cor do texto */;
text-align: center;
background: url(http://i67.tinypic.com/96ywi9.png) no-repeat left;
background-color: #FFC0CB /*cor do fundo */;
padding: 10px;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}


SIDEBAR 3

.sidebar h2 {
font-family: arial /*fonte do titulo*/ ;
color: #92c3d7 /* cor do texto */;
text-align: center;
background: url(http://i65.tinypic.com/14wd3ip.png) no-repeat left;
background-color: #E0FFFF /*cor do fundo */;
padding: 10px;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}

SIDEBAR 4

.sidebar h2 {

font-family: arial /*fonte do titulo*/ ;

color: #FFF /* cor do texto */;

text-align: center;

background: url(https://eagoradezoito.files.wordpress.com/2011/08/5561481690_baea1f430f_z_large.jpg?w=600) no-repeat left;

background-color: #FFE4E1 /*cor do fundo */;

padding: 10px;

margin-left: -10px;

margin-right: -10px;

margin-top: -10px;

-webkit-border-top-left-radius: 3px;

-webkit-border-top-right-radius: 3px;

-moz-border-radius-topleft: 3px;

-moz-border-radius-topright: 3px;

}

Espero que vocês tenham gostado do tuto. Deixem nos comentários o que acharam. 

#Bjs

Trabalho realizado: Blog + capa face + capa youtube 'Elas com ELE'

Oi gente, tem tempo que não posto trabalhos realizados né. então hoje ai vai um, o blog Elas com ELE. Que é um blog cristão, e que a autora é uma fofa. Vale a pena conferir. 

Segue abaixo o print do blog,capa do face e youtube. 

Visite o blog Clicando AQUI

Comunicado (:

Ola gente, sei que muitos perceberam que eu dei uma sumida. E creio que muitos até acreditaram que eu havia abandonado o blog. Enfim, não foi isso que aconteceu. Eu sempre comentei aqui que por causa dos estudos quase não tinha tempo para nada, e principalmente ano passado (e no ultimo semestre) estava realmente impossível atualizar o blog, tanto que cancelei todas as encomendas.
Entãããão, se preparem para a boa noticia: TERMINEI O ENSINO MÉDIO! (gloria amém), porem agora inicia a faculdade, e antes que vocês falem assim: "agora que ela some de vez", peraaaai afinal vou começar o curso de Design Gráfico...

Evitando as enrolações e sendo bem direta, agora em fevereiro começarei a graduação de Design Gráfico e usarei o blog para expor tudo que estou aprendendo (então se preparem para muitos tutos e brushs). O blog vai passar por uma mudança bem radical: Design, nome, o modo das encomendas. Vai ser tudo bem mais profissional.

Espero que vocês aprovem as mudanças que vão começar em breve. Bjs, e até mais. ;* 

Promoção de aniversario de 3 anos do blog

Dia 2 de outubro o blog comemora 3 anos. E para comemorar decidimos fazer uma super promoção. Bom quem já encomendou comigo sabe mais ou menos quanto custa o meu serviço, uma media de R$ 30,00 a R$ 80,00 (mas claro que a blogs que passam desse valor e saem menos que esse valor. Tudo dependo do que o cliente deseja).
Então para comemorar o Niver do blog vamos fazer promoção de pacotes.
Veja os pacotes abaixo:

Pacote Básico - R$ 20,00
Cabeçalho (central)
Barra de menu ABAIXO do cabeçalho ou DENTRO da sidebar
Personalização do sidebar
Comentários personalizados
Caixinha de Link-me

Pacote intermediário - R$: 30,00
Cabeçalho (central)
Menu ABAIXO do cabeçalho ou DENTRO da sidebar
Sidebar personalizada
Comentários personalizados
Data personalizada
Navegação (postagens recentes > antigas) personalizada
Caixinha de Link-me

Pacote completo - R$: 40,00 
Cabeçalho (Central ou da largura do blog)
Barra de menu (dentro do cabeçalho, abaixo do cabeçalho ou dentro do sidebar)
Sidebar personalizada
Comentários personalizados
Data personalizada
Navegação personalizada
rodapé personalizado
Assinatura nas postagens
Caixinha de link-me

Pacote Premium - R$: 50,00
Cabeçalho (Central ou da largura do blog)
Barra de menu (dentro do cabeçalho, abaixo do cabeçalho ou dentro do sidebar)
Sidebar personalizada
Comentários personalizados
Data personalizada
Navegação personalizada
rodapé personalizado
Assinatura nas postagens
Caixinha de link-me
Capa para facebook
Avatar para facebook
Uma logomarca (para assinar suas imagens)
Um desenho digital a desejo do cliente


Escolha o pacote que deseja, vá na aba "Encomende" siga o que manda e no formulário de contato informe o pacote que deseja e cole o link dessa postagem.

A promoção inicia hoje e vai até o ultimo dia de outubro. Não perca tempo!

Como colocar gadget em cima do cabeçalho do blog

Ola amores andei sumida né? (pra variar). Eu já estava enjoada daquele ultimo design do blog, achei ele muito simples. Então resolvi colocar esse, que é um pouquinho melhor. Como finalmente a minha vida esta menos corrida vou tentar postar bastante aqui, por isso façam pedidos de tutoriais pelos comentários para eu saber o que vocês querem.

   A um tempo atrás vi um tuto bem explicativo sobre como colocar gadget em cima do cabeçalho do blog. Quando eu tinha realizado o curso de web design eu já havia aprendido isso, porem de maneira bem mais complicada (para se aplicar em blog).
Abaixo esta o tutorial, créditos ao blog Lovelly Sumer.

Vá no painel do seu blog > Layout > adicionar um gadget > HTML/JavaScript > Deixe o titulo em branco > e na parte em que se coloca o conteúdo cole o código abaixo:

<div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div>

Onde se pede coloque o código do seu gadget. Altere os número com cor destacada para ir movendo seu gadget e o posicionando no lugar desejado. Vá clicando em "visualizar" para ver onde esta ficando o gadget.

"35" >> vai para a direita
"-292" >> vai pra cima
"50" >> distancia entre cabeçalho e área de postagem (quanto maior o numero maior a distancia) .

Se quiser colocar mais de um gadget no cabeçalho basta repetir o código no mesmo gadget (caso contrário não vai funcionar), por exemplo:

<div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div><div style="margin-left: 35px; margin-top:-292px;margin-bottom: 50px;"> CÓDIGO DO SEU GADGET</div>

E assim pode ser adicionado 3,4,5 ou mais gadgets. Vale lembrar que o gadget tem que esta posicionado abaixo da gadget do cabeçalho, caso contrario não dará certo. Quando terminar clique em "salvar".

Espero que tenham gostado do tutorial, eu particularmente acho ele muito legal e útil. Até a próxima postagem, Beijos ;*

Cód. basicos sobre HTML + novo Lay!

Oiii paixões, isso mesmo eu estou postando um tutorial, podem soltar fogos de artificio comemorar e pegar seus guarda-chuvas por que hoje vai chover (kkkkk ><), obviamente vocês devem ter reparado no novo layout, lindinho né? eu que fiz as ilustrações (*-*) era pra ser eu, mas enfim, deixa pra la kkk. O blog estava merecendo algo mais bonito e a tempos estava falando que ia fazer, por isso esta ai e espero que gostem.

Mas vamos ao tuto de hoje... Quando eu não conhecia muito html eu sempre penava pra colocar link em palavras, imagens, mudar a cor da letra, ou mudar a fonte, colocar negrito, mudar tamanho de fonte e etc. E hoje estava aqui imaginando: aposto que muitos também penam com essas códigos simples pra alguns e já complicados para outros. E então por isso hoje eu estou aqui trazendo alguns cód. básicos sobre HTML para vocês. Simbora?


Mudando a cor da fonte:

Para mudar a cor da fonte use o seguinte cod.

<font color="#000000"> Seu texto </font>

Aonde esta de vermelho você ira colocar a cor desejada para o seu texto, e onde esta azul você ira colocar o texto desejado. Não esqueça do </font> no final pois é ele quem indica que o cod. acabou. 

Mudando a fonte: 

Para mudar a fonte usada coloque o codigo abaixo:

<font face=*> Texto desejado</font>

Onde esta de vermelho você ira colocar o texto que deseja. Vale lembra que a fonte só ira ser visualizado se o outro computador tiver a fonte instalada, então por isso é sempre bom colocar fontes padrão como arial, Helvetica, Sans, Times, Verdana, Courrier, Georgia e etc. Onde esta de verde você ira colocar o nome da fonte desejada, ex: arial. 

Mudando o tamanho da fonte: 

Para muda o tamanho da fonte use o seguinte codigo: 

<font size=*> texto </font>

Onde esta de vermelho você ira colocar o seu texto desejado e onde esta de verde você ira colocar um numero de 1 a 7 onde 1 é menor e 7 é maior. 

Texto em negrito, itálico e sublinhado:

Para colocar um texto em negrito use a tag <b> 

Ex:   <b>Meu texto</b>  

Feche com o </b> para indicar que o código acabou e que você quer que seu texto em negrito acabe ali. 

Para colocar seu texto em Itálico use a tag <i>

Ex: <i>meu texto</i>

Feche com </i>. 

Para colocar seu texto em sublinhado use a tag <u>

Ex: <u>meu texto</u>

Feche com </u>.

Colocar link em TEXTO: 

Para colocar link em uma palavra/frase/texto use o cod. abaixo:

<a href="link-do-lugar">Texto</a>

Aonde esta de vermelho você ira colocar o link desejado e onde esta de verde ira colocar a descrição. Simples. 

Colocar link em uma IMAGEM: 

Para "linkar" uma imagem use o cod. abaixo: 

<a href= “link-desejado”><img src="url-da-imagem" border="0"></a>

Onde esta de vermelho você ira colocar o link da pagina que deseja ir, e onde esta de verde colocara o link da imagem. 

Bom é isso gente, espero que vocês tenham gostado do tuto. Espero por comentário hein, e se reblogar credite e deixe um comentário avisando. 

Beijo, até a próxima. ;* 

Ando sumida... explicações.

Bom gente, faz tempo que não posto nada e nem realizo encomendas e o motivo disso tudo é a escola, esse ano ta puxado estou em uma escola rigorosa e o ensino médio não esta nada fácil. Vou tentar voltar a ativa ainda esse mês, mas acho difícil. Talvez eu só volte aqui em novembro para colocar o novo designe (sim já estou fazendo *-* ta ficando meigo kk).  Bom e é isso, espero voltar logo.. Bjs :*

Meu desenho da Lana (não ficou bom, eu sei kkk)