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:
Amei! Próximo layout vou usar.
Beijos
Garota Preciosa> acesse o perfil e entre.
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/
Fica muito divo :3, acho que vou usar no meu próximo layout. Parabéns ~
Beijos || cupcakeofshine.blogspot.com
Amei o post,até porque não adianta um blog perfeito com os títulos dos gadgets todo desorganizado!
go-garotaonline.blogspot.com
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.
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 -
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 -
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 -
Oi flor! Vim avisar que postei sobre seu blog lá no meu! Depois confere! Amo aqui!
xoxo, vickie♥
~~>Chiclete Violeta//Clica no Perfil
Nossa, parabéns pelo tutorial! Muito bacana ;) Seu blog é lindo, espero que saiba disso *-*
Bjos e boa segunda!
http://sugar-dance.org
Adorei o tutorial !!
morangohcomvermelho.blogspot.com
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)
Owwn, que fofo que fica o resultado ♥ Adorei ! Beijos <3
your-smile-oficial.blogspot.com
Fica bem cute >< Mt bom o tuto e seu blog é perfeito u.u
Morangostambemfalam | blogspot ♥
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.
Adoooooooooreii o tuto,precisava dele ^^ Talvez use em algum design do Meu Segredo
Bejoos~~> meusegredo-oficial.blogspot.com
Ficou lindo esse efeito Anna, quem sabe eu não use em algum futuro layout :D
thefashionwonderland.tk
Oi flor ameii seu blog !!
É uma fofura *-*
Seguindo se gostar segue lá !!
umbrilhodemenina(.blogspot.com.br)-> TIRE OS PARENTESE
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.
Ótimo tutorial ja usei ele.
construtordepensamentos.blogspot.com.br
Muito boa a Dica,parabens pelo blog!!
passem lá meninas!!
batoneglos.blogspot.com
ótimo tuto, parece ser bem simples, no meu próx. layout vou usar na certa ^^
s2hay. blogspot.com
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
ootimo tutoriaal! *--*
Obrigada por comentar la no meu blog, já viu o post novo?
http://www.paaradateen.com
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
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 ~*
Não consegui fazer no meu, ele ainda continuou tudo transparente, ele não foi.
http://thatyoudescide.blogspot.com
Gostei vou tentar usar no meu próximo
layout.
Bjus!
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
Amei o tutorial , mto util , vou usar no proximo lay :)
seguindo akiii
bbeijooos
cupcakederendas.blogspot.com
amor, sobre a entrevista que eu te mandei e você me respondeu ... eu vou postar amanhã, okay ?
bjos :*
absolutedream.
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
Oii ,o tutorial é bem,legal e fica bem bonito!
Super que adorei !
karenselajaalmiron . blogspot . com . br/
Vou usar em um proximo Layout :)
Bjs <3 <3 Boa semana!
O resultado fica fofinho e lindo! Adorei, e você explicou super bem *-*
Mil beijos, momamoraes.blogspot.com
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
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
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 .
Vou usar no próximo lay :D já estava a procura!
Espero você lá no meu blog!
RabiiiscosNoPapel(.blogspot.com) sem o parenteses :3
Vou usar! Obg por fazer esse tutorial :)
http://sorvete--de--flocos.blogspot.com.br/
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/
É muito bom esse tutorial ^^
http://manguitarosa.blogspot.com.br/
beijoos
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
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
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
ótimo tutorial, ameei s2
A Little More Than Gloss (clica no perfil)
bjs !!
Super kawaii *-* Achei lindo :3
Kissu ♥ || Querida Loucura - clica :3
Super kawaii *-* Achei lindo :3
Kissu ♥ || Querida Loucura - clica :3
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
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...*
Já sabia fazer deste jeito :/,mais é fofo :3
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
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
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
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
Oii, adorei o tutorial bem útil! Já estou seguindo aqui!
http://blog-the-dream-perfect.blogspot.com/
amei o tutorial... e mas ainda o resultado!
muito boom, gostei muito da explicação!
kisses~~
#>>> http://www.the--baby.blogspot.com.br/
Tava mesmo procurando esse tutorial.
Salvei nos favoritos para eu usar no próximo lay que eu fizer! *-*
Bêsos ;*
senhorita-insana.blogspot.com
Amei o tutorial, próximo layout vou usá-lo !
Obrigada pela visitinha, volte sempre.
Beijos,
http://girliethingspt.blogspot.com.br/
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/
Acredita que eu ia pedir esse tuto? kk ai que tudo!
Boa quarta, beijos!
upgrade-br.blogspot.com.br
Amei *-*
Vou usar no proximo lay ..
Blog perfeito :3
Bjoos
http://cleciasz.blogspot.com/
Tutorial super útil,parabéns pelo Blog MARAVILHOSOOO!
connectadus.blogspot.com
Adorei o tuto ♥
Quem saber eu usei ele no meu próximo lay ♥
bjinhos
conversando-com-a-lua. blogspot.com.br
Parabéns pelo blog! adorei esse tutorial! bjss
http://www.rosanautas.com/
Usei! Super aprovado ;)
The Memories ~ Click
Kissus~
Me ajudou muito, obrigada s2
Lindo o post <3
me ajudou bastante!
Seu blog é lindo www.senhoritagemisteriosa.blogspot.com.br
Awn me apaixonei pelo teu blog , primeira vez que o vejo e já amie , poderia visitar o meu ??
-Lost in Paradise
Muito obrigada!
Ajudou muito *w*
Bjinhos ^-^
princesadeallstar-vick.blogspot.com.br
Amei! Ficou muito lindo no meu blog (:
Amei! Ficou muito lindo no meu blog (:
Ameii o blog !!
Tambem gosto muito da demi lovato...
Já estou seguindo ...
Apaixonada por sonhos: apaixonadaporsonhos.blogspot.com
É simples e bem fofo, adorei.
Beijos Magia Teen
Não consigo de jeito nenhum :/
Tem como fazer isso na área dos posts? Obrigada!
Postar um comentário