15 de out. de 2012

Personalize o título dos gadgets

Tumblr_mbwblivnf91ruh223o1_500_large

Ai, que fome que me deu esse sorvete! Enfim, oi, tudo bem com vocês? Comigo sim :) A pedido de umas leitoras, hoje vou postar um tutorial que tem um efeito bonito e diferente. Vocês vão aprender a personalizar o título dos gadgets como o meu. Eu nunca vi esse tipo em nenhum outro blog. O código foi criado por mim, portanto se usarem, creditem!



Desse jeito que vamos fazer. É muito fácil e fica bonito. Só mudar uns códigos aqui e ali e adicionar alguns. Aprenda agora! Os gadgets tem que estar SEPARADOS. Para isso, vá no Designer do Modelo > Avançado > Plano de Fundo da Barra Lateral e deixe tudo TRANSPARENTE. Salve. Agora vá no HTML no seu blog e pesquise (aperte F3) por /* Widgets Logo abaixo dessa linha, você cola esse código:
.sidebar .widget {
margin: 10px 0; /* não mexa */
background: #fff; /* cor de fundo dos gadgets separados */
border-top: 3px solid #FF8080; /* borda debaixo do título. mude a grossura, tipo e cor */
padding: 6px; /* não mexa */
}
Ficando tudo desse jeito:

Deixei tudo em destaque pra vocês entenderem melhor. Agora é a última parte. Pesquise por ]]></b:skin> e cole esse código acima:
.sidebar .widget {
padding: 10px; /* não mexa */
margin-bottom: 30px; /* espaço entre um gadget e outro */
}
.sidebar .widget h2 {
font-family: Fonte que você quiser; /* troque pela fonte desejada */
font-size: 18px; /* tamanho da fonte /*
padding: 1px; /* não mexa */
margin-top: -33px; /* você mexe se quiser deixar o título mais pra cima ou mais pra baixo */
text-align: center; /* alinhamento do texto: centro */
}
Pronto, fim! Basta prestar atenção que tudo sai do jeito certo. Espero que dê certo pra vocês e não se esqueçam dos créditos. Qualquer dúvida, fale comigo. Beijos e uma ótima semana!

79 comentários:

Kecy Costa disse...

Amei! Próximo layout vou usar.
Beijos
Garota Preciosa> acesse o perfil e entre.

Gabbi Santtos disse...

Olá linda , Ameei o seu blog , bom queria coloca-lo no meu blog , mas não entendi :\ , mas em fim amei amei
tudo , ja estou seguindo ! Beijinhos <3

cantinhodamooda.blogspot.com.br/

Michelle Anjos || Cupcake of Shine disse...

Fica muito divo :3, acho que vou usar no meu próximo layout. Parabéns ~


Beijos || cupcakeofshine.blogspot.com

Pancky disse...

Amei o post,até porque não adianta um blog perfeito com os títulos dos gadgets todo desorganizado!

go-garotaonline.blogspot.com

Samara Paes disse...

Adoro este estilo para título dos gadgets. Acho muito lindo, usarei em meu próximo layout, já até favoritei. :3

Beijos, Mollie.
Chassy Bomb.

Tamara Teixeira disse...

O meu layout tem o titulo personalizado, eu acho.. Pra falar á verdade, eu não sabia esse tutorial, pois meu layout não foi feito por mim hehe, então qualquer dia se eu quiser trocar, acho que já sei onde vou ver o tutu (aqui né =), amei demais e é super fácil!

Sweet Teen - Acesse o meu blog clicando no meu perfil -

Tamara Teixeira disse...

O meu layout tem o titulo personalizado, eu acho.. Pra falar á verdade, eu não sabia esse tutorial, pois meu layout não foi feito por mim hehe, então qualquer dia se eu quiser trocar, acho que já sei onde vou ver o tutu (aqui né =), amei demais e é super fácil!

Sweet Teen - Acesse o meu blog clicando no meu perfil -

Tamara Teixeira disse...

O meu layout tem o titulo personalizado, eu acho.. Pra falar á verdade, eu não sabia esse tutorial, pois meu layout não foi feito por mim hehe, então qualquer dia se eu quiser trocar, acho que já sei onde vou ver o tutu (aqui né =), amei demais e é super fácil!

Sweet Teen - Acesse o meu blog clicando no meu perfil -

Victoria disse...

Oi flor! Vim avisar que postei sobre seu blog lá no meu! Depois confere! Amo aqui!
xoxo, vickie♥
~~>Chiclete Violeta//Clica no Perfil

Camilla ♥ disse...

Nossa, parabéns pelo tutorial! Muito bacana ;) Seu blog é lindo, espero que saiba disso *-*

Bjos e boa segunda!

http://sugar-dance.org

Bianca disse...

Adorei o tutorial !!

morangohcomvermelho.blogspot.com

Paula disse...

Acho lindo e super original do GQ. ^^ Ótimo tutorial, super bem explicado! Acho que infelizmente meu próximo lay será gadgets juntas, mas ainda vou pensar! :3

Beijinhos, Paula! ♥
~Sweet Makeup~
(clica no perfil pra visitar meu blog)

- Azula ★ disse...

Owwn, que fofo que fica o resultado ♥ Adorei ! Beijos <3

your-smile-oficial.blogspot.com

Nathália Helena MR. ♥ disse...

Fica bem cute >< Mt bom o tuto e seu blog é perfeito u.u
Morangostambemfalam | blogspot

Kawanny Arruda disse...

Adorei o tutorial, vou ver se faço no coloco no próximo layout do Gertie Girl, e pode deixar que se eu por com certeza irei creditar. Beijos!

Gertie Girl, - Para acessar o blog basta clicar no perfil.

Kaah.MS-# disse...

Adoooooooooreii o tuto,precisava dele ^^ Talvez use em algum design do Meu Segredo

Bejoos~~> meusegredo-oficial.blogspot.com

Caroline Rodrigues disse...

Ficou lindo esse efeito Anna, quem sabe eu não use em algum futuro layout :D

thefashionwonderland.tk

Caroline disse...

Oi flor ameii seu blog !!
É uma fofura *-*
Seguindo se gostar segue lá !!
umbrilhodemenina(.blogspot.com.br)-> TIRE OS PARENTESE

Giulia disse...

Não sei se eu já comentei aqui, é que a net caiu e eu tive que reiniciar o PC. Mas caso o comentário não chegou, eu escrevo de novo:
Muito legal o tuto e o resultado fica lindo, né? Amei, vou ver se dá lá no blog!
Lindo seu blog! Eu amei e já estou seguindo, se puder visitar o meu:
Batom De Framboesa
BEEEIJOS.

Eduardo Felipe disse...

Ótimo tutorial ja usei ele.

construtordepensamentos.blogspot.com.br

JuliaMühl disse...

Muito boa a Dica,parabens pelo blog!!
passem lá meninas!!
batoneglos.blogspot.com

Unknown disse...

ótimo tuto, parece ser bem simples, no meu próx. layout vou usar na certa ^^
s2hay. blogspot.com

Natália disse...

Uma vez estava atras desse tutorial, mais nunca encontrei. Talvez um dia eu vou usar esse tutorial.
E com certeza gostaria que voltasse em meu mundo novamente...
Ah! E já estou seguindo!
Beijinhos da Nath
Visita?--->MundoFantasticoFeminino

LUANA ANDRADE disse...

ootimo tutoriaal! *--*
Obrigada por comentar la no meu blog, já viu o post novo?
http://www.paaradateen.com

Leandro disse...

Fica muito lindo *O* e muito bem explicado. Nossa muito obrigado por aceitar o meu convite ja vou te coloca la.
Abraço ~>prince-teen.blogspot.com.br

Elcimar Reis disse...

Estou impressionado! Primeira vez que visito seu blog, e já me deparo com um tutorial muito lindo e bom como este! Estou realmente impressionado com o blog, parabéns! Queria saber se tem um tutorial de como deixar o titulo do post assim como o seu? Como disse, sou novo aqui! kkkkkkk

Hoje no Acesso Permitido, está publicada a primeira postagem do F.Click, uma postagem com contém uma lista de quatro blogs que conheço há muito tempo e que admiro muito, é uma oportunidade de conhecer novos blogs, que não sinônimos de novos leitores, seguidores, visitantes, blogueiros e principalmente de novos amigos. Um beijo e um grande abraço do seu querido leitor, Acesso Permitido.Entre pelo perfil ~*

CarolSgalbiero disse...

Não consegui fazer no meu, ele ainda continuou tudo transparente, ele não foi.

http://thatyoudescide.blogspot.com

coisasdemeninamodernabydani disse...

Gostei vou tentar usar no meu próximo
layout.
Bjus!

Beleza Rara e Pura disse...

Adorei o post, mas tenho dificuldade de fazer rs
Te seguindo. Conheça meu blog, se gostar, me segue tb.
http://belezararaepura.blogspot.com.br/
bjs

ana disse...

Amei o tutorial , mto util , vou usar no proximo lay :)
seguindo akiii
bbeijooos
cupcakederendas.blogspot.com

Absolute Dream disse...

amor, sobre a entrevista que eu te mandei e você me respondeu ... eu vou postar amanhã, okay ?
bjos :*
absolutedream.

Anna Carollyne Oliveira disse...

Já estava de olho nesse estilo Anna haha. Eu testei o tutorial, mas não deu muito certo nos títulos mesmo do gadget, ficou branco e abaixo da linha. Talvez seja porque eu tirei o código de personalização que já havia no /* Widget. Depois eu testo novamente. Ah, e a enquete está bombando não? Beijos.

http://www.world-cutest.blogspot.com.br

Karen almiron, disse...

Oii ,o tutorial é bem,legal e fica bem bonito!
Super que adorei !
karenselajaalmiron . blogspot . com . br/

Abre Aspas disse...

Vou usar em um proximo Layout :)
Bjs <3 <3 Boa semana!

Anônimo disse...

O resultado fica fofinho e lindo! Adorei, e você explicou super bem *-*
Mil beijos, momamoraes.blogspot.com

Caroline Rodrigues disse...

Ei Anna, você poderia ensinar como colocar o hack ''continue lendo'', dentro do rodapé do post? Tipo o seu e do On the Fame, sabe? Obrigada ^^

thefashionwonderland.tk

Unknown disse...

ouwn amei o tutorial, mt fera...seuindo, seu blog é fofo d+, vem me visitar
http://domeujeito100.blogspot.com.br/

https://www.facebook.com/domeujeito100
bjoss

Maria disse...

Mt bom post , nunca tinha visto esse tuto .
- Retribuui ?! http://blog-foreverpretty(.blogspot.com.br)/ (retire os parêntes ou clique no meu perfil u.u) kissuuuuuus da Marii .

Alana Nadiéle disse...

Vou usar no próximo lay :D já estava a procura!

Espero você lá no meu blog!

RabiiiscosNoPapel(.blogspot.com) sem o parenteses :3

Stephane ~♥ disse...

Vou usar! Obg por fazer esse tutorial :)
http://sorvete--de--flocos.blogspot.com.br/

Luana disse...

Nossa! Não pensei que fosse tão simples. *oooo*
O segredo está na borda e na margem. Realmente bem bolado! :D
Parabéns!
Beijos,

republica-teen.blogspot.com.br/

Cecília Lins disse...

É muito bom esse tutorial ^^

http://manguitarosa.blogspot.com.br/

beijoos

Renata Souza disse...

ameeiii!! Super bem explicano Ana!! Tava louca para aprender a fazer mas sempre acho complicado.. Lendo assim pareceu bem mais facil, dps vou tentar fazer aqui *-*

Beijos linda!!
GRANDE CORAGEM

Renata Souza disse...

ameeiii!! Super bem explicano Ana!! Tava louca para aprender a fazer mas sempre acho complicado.. Lendo assim pareceu bem mais facil, dps vou tentar fazer aqui *-*

Beijos linda!!
GRANDE CORAGEM

Jessie disse...

Gostei do tutorial,bem útil.Adorei o blog,já estou seguindo.
Se tiver um tempinho visita lá meu blog,tem novos posts ^-^
Bjos

blogsugarskull.blogspot.com.br

Geisiane Caroline disse...

ótimo tutorial, ameei s2

A Little More Than Gloss (clica no perfil)

bjs !!

Bella M. △ disse...

Super kawaii *-* Achei lindo :3

Kissu ♥ || Querida Loucura - clica :3

Bella M. △ disse...

Super kawaii *-* Achei lindo :3

Kissu ♥ || Querida Loucura - clica :3

Unknown disse...

AI QUUE FOFO,Me gusta muito vou usar viu ? se sabe os os créditos estão né, anna parabéns se tem muuuita criatividade nunca ia pensar em coisa parescida !


Vem Me Vistar? hoje // smileretro.blogspot.com

Natália Marasco disse...

Obrigada pela visita no meu blog, seu blog ja esta como favoritos amei aqui *-* ...
Sempre que poder da uma passadinha la, estamos com post novo.. beijos..


maniaafeminina.blogs...*

amy disse...

Já sabia fazer deste jeito :/,mais é fofo :3

gisss. disse...

Achei super lindo o efeito, muito interessante e com certeza vou tentar usar por aí. Além da letra ser super fofa, o modo que fica...se superou.
Nhaaac<3 | viciadasemcupcake.blogspot.com.br

Vinicius Souza disse...

A não. para. você faz desenhos perfeitos. vc tem filckr ou algo onde poe esses seus desenhos? Posta alguns eu morro por eles. *-*

www.toddynhosemcanudo.|com

Lary Yah disse...

Muuuuuuito legal o tuto, não conhecia personalizar desta forma *0*, amei!

Aceito afiliação sim, claro, desculpe a demora para responder :C, ja ja , te coloco na elite viu ?

Beijos
The Lovers

Leeh WLNV~ disse...

Curti demais! É tipo com o efeito dos comentarios? Eu amei como ficou!
Viu que dessa vez minha sumida foi grande né? Mas vc não se esqueceu de mim não é??
Beijos Anna, saudades ^^

HistoriaAgridoce|blogspot

Bianca Albuquerque disse...

Oii, adorei o tutorial bem útil! Já estou seguindo aqui!

http://blog-the-dream-perfect.blogspot.com/

The baby disse...

amei o tutorial... e mas ainda o resultado!
muito boom, gostei muito da explicação!
kisses~~

#>>> http://www.the--baby.blogspot.com.br/

. gaabii oliveira disse...

Tava mesmo procurando esse tutorial.
Salvei nos favoritos para eu usar no próximo lay que eu fizer! *-*

Bêsos ;*
senhorita-insana.blogspot.com

Mariana Remiro disse...

Amei o tutorial, próximo layout vou usá-lo !
Obrigada pela visitinha, volte sempre.
Beijos,
http://girliethingspt.blogspot.com.br/

Madu disse...

Nossa, nossa, nossa!! ameei seu bloooog, demais demais demaaais!!! muito lindooo amei seu layout demaaais, td de booum *u*
meu blog é mais simples e tal kkkk, mas passa lá, bejus *O*
http://missglamur.blogspot.com.br/

Thayná Antonelli disse...

Acredita que eu ia pedir esse tuto? kk ai que tudo!
Boa quarta, beijos!
upgrade-br.blogspot.com.br

clécia souza disse...

Amei *-*
Vou usar no proximo lay ..
Blog perfeito :3
Bjoos

http://cleciasz.blogspot.com/

- Viniicius † disse...

Tutorial super útil,parabéns pelo Blog MARAVILHOSOOO!
connectadus.blogspot.com

Dayane Nascimento disse...

Adorei o tuto ♥
Quem saber eu usei ele no meu próximo lay ♥
bjinhos
conversando-com-a-lua. blogspot.com.br

Polliana disse...

Parabéns pelo blog! adorei esse tutorial! bjss

http://www.rosanautas.com/

ємilly B. disse...

Usei! Super aprovado ;)
The Memories ~ Click
Kissus~

Sabrina Neri disse...

Me ajudou muito, obrigada s2

Anonima disse...
Este comentário foi removido pelo autor.
Anonima disse...
Este comentário foi removido pelo autor.
Laura ♥ disse...

Lindo o post <3

Unknown disse...

me ajudou bastante!

Seu blog é lindo www.senhoritagemisteriosa.blogspot.com.br

Chaelin ♡ disse...

Awn me apaixonei pelo teu blog , primeira vez que o vejo e já amie , poderia visitar o meu ??
-Lost in Paradise

Victória Torres ^-^ disse...

Muito obrigada!
Ajudou muito *w*

Bjinhos ^-^
princesadeallstar-vick.blogspot.com.br

Ceres disse...

Amei! Ficou muito lindo no meu blog (:

Ceres disse...

Amei! Ficou muito lindo no meu blog (:

Anne Abreu disse...

Ameii o blog !!
Tambem gosto muito da demi lovato...
Já estou seguindo ...
Apaixonada por sonhos: apaixonadaporsonhos.blogspot.com

Bebê Cruel disse...

É simples e bem fofo, adorei.
Beijos Magia Teen

Unknown disse...

Não consigo de jeito nenhum :/

Unknown disse...

Tem como fazer isso na área dos posts? Obrigada!