Hello babies! Quero começar me desculpando pelo sumiço, to trabalhando bastante no novo layout do blog (que ta ficando muito lindinho modéstia parte s2 ). Para compensar esse tempo todo sem posts vim trazer um tutorial bem rápido, porém pouco conhecido, que fica lindo! Todos aí já estão cansados de leia mais com imagem, admitam. Então hoje vamos aprender a colocar um fundo colorido e com efeito hover. Assim:
Antes de começar o tutorial quero dar os créditos ao blog lindo da Tete, o Sweet Cherry! Ele é nossa fonte de hoje :3 -com algumas alterações minhas, não esqueçam hihi-
Faça o caminho da roça, (como diz a Gizaa) e vá em Design > Editar HTML > Ctrl+F (na nova interface: Modelo > Editar HTML > Prosseguir > Ctrl+F) E procure por: ]]></b:skin> logo acima cole:
.jump-link{As instruções estão no código, entre os /* */ é só mudar de acordo com o desejado.
float: right; /* no lado direito ou esquero, pode mudar para left */
background-color: #FF80FF; /* cor do fundo */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
font-size: 10pt; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: center; /* alinhamento do texto */
width: 100px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */
border-radius: 20px;
}
.jump-link:hover{
background-color: #CFD9F6; /* cor do fundo com o mouse em cima */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
color: #000000; /* cor da fonte */
width: 100px; /*largura do fundo com o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
}
Obs: - Mude a largura de acordo com o tamanho do seu texto, 100px se encaixa muito bem para "leia mais", se for um maior como "Mais informações »" 110px se ajusta direitinho!
É isso galerê, se usar credite o GI e o SC (:
Ai, que lindo *-* Nunca tinha visto esse tuto, ficou show ^^
ResponderExcluirA Anny e seus tutos perfeitos <3
#BEIJO s2rita.blogspot.com
Fica lindo o resultado, amei a dica *-*
ResponderExcluirhttp://themudancas.tk/
Anny, eu te amo, tu é tudo pra mim, quero te fazer esuqecer esse negócio de forever alone!
ResponderExcluirEu amo você, só quero você, vem pra mim, eu teeee amoooooooo
Pra sempre vou comentar aqui dizendo isso, porque você é tudo pra essa anony aqui!
ESSA QUE ESCREVE É PRA SEMPRE QUEM TE AMA S2
...kkk...
ExcluirLindo demais, vou tentar no próx.h
ResponderExcluirttp://cappuccinoeaconta.blogspot.com.br/
Anny, eu tentei, mas não deu! Não aconteceu NADA ¬¬
ResponderExcluirBeijos, s2rita.blogspot.com
adorei a post muito criatova s2 adorei também o blog estou seguindo se querer visita meu blog e se gostar segui ?www.menina-incrivel.blogspot.com
ResponderExcluirNossa amei o tutu, vou usar.
ResponderExcluiramor, só avisando, sabe o menu do blog, sabe aquele tutorial que você usou, então eu peguei, e estou dando os devidos créditos, lá numa das páginas do blog, tem os créditos (se não quiser que eu use, é só falar, )
beijos
http://garotamarte.blogspot.com.br/
Eu não uso a tecnologia do Blogger e sim a do Wordpress,mais achei o tutorial muito legal.Eu adorei o teu blog,tem um otimo conteudo.Bjs
ResponderExcluirwww.sonhonoblog.wordpress.com
Peeeeerfeito! :D
ResponderExcluirRaawwr --> Kiara-loveluv.blogspot.com
Anny Adorei o Tutu acho que vou usar.Nunca vi um tutu desse jeito. Beijos modaecia.net.tc
ResponderExcluirAdorei, nunca vi o leia mais com hover que show *O* kkk' beijão,http://letsgoficial.blogspot.com.br/
ResponderExcluirÓtimo tutorial ! ^^ Bjs, Stardolleiras
ResponderExcluiramei o tutorial!!
ResponderExcluirhttp://editionskatyperrysonhos.blogspot.com.br/2012/06/concurso.html participe valendo um lay exclusivo por mim!
Amei o tutorial, vou ver se uso no próximo lay.
ResponderExcluirKisses ♥
www.bloggarotainocente.blogspot.com
Amei o tutorial *-* Super lindo o efeito. Beijos!
ResponderExcluirhttp://dreamsofagirl-blog.blogspot.com.br/
Oi flor, estou aqui para dizer que foi criado o blog chamado bora denunciar onde a gente irá denunciar qualquer tipo de plagio bom espero que visite fizemos esse blog em função do bora plagiar beijão http://boradenunciar.blogspot.com.br/
ResponderExcluirAmei o tuto!O efeito final é lindo!
ResponderExcluirhttp://balaio-sonhos.blogspot.com
Ótimo tutorial.
ResponderExcluiradorei seu blog
Eu vendo chaveiros e outras coisinhas que eu mesma faço ^-^
da uma olhada lá, quem sabe você goste de algo
;)
http://cutekurafuto.blogspot.com.br/
otimo tutorial!ameei o blog,ele esta no blogrool do meu!bjs
ResponderExcluirhttp://balaio-sonhos.blogspot.com
Muito bom o tuto!
ResponderExcluirÉ verdade, muita gente cria blog apenas para ser famosa, e acaba fazendo um blog ruim porque não escreve com gosto.
Kissus e feliz dia dos namorados!
Cherry Bomb || Fanpage
Verdade, Liah. Que sorte, Alana! Até a Liah comenta aqui!
ExcluirAdorei o post ! Que pena que eu não consigo colocar leia mais no meu blog :-( . Estou seguindo!
ResponderExcluirsweetgirls-sg.blogspot.com
Hooy, flor !
ResponderExcluirAdorei seu blog, ele eh fofo, demais, criativo, legal, as cores combinam, fala sobre coisas legais, tem um conteudo muito bom...!
Enfim, me apaixonei *-*
Quer me ajudar com minha meta de 90 seguidores?
Se sim, aqui esta meu link:
http://meublogblogueiro.blogspot.com.br/
Ahh, e ja estou seguindo :)
Um beijo e te espero la!
Anny,otimo tutorial ;D,bem anny queria pedir uma coisa a você.meu blog está precisando de um layout novo.tem como você fazer pra min um novo?Eu queria bem teen do rosa da sua seleção colorida e de um marron bem legal.se poderia fazer?Se não tiver tempo,Eu entendo.
ResponderExcluirBj♥
@Leetiicia_Lopes
http://blog-allthelovers.blogspot.com.br/
mt bom mesmo *-*
ResponderExcluirAdorei seu blog, muito lindo, amei tudo. Parabéns mesmo, vou sempre estar aqui (:
ResponderExcluirontendency.blogspot.com
Oii flor,eu indiquei seu blog em uma post! confira lá!
ResponderExcluirhttp://1cerejavermelha.blogspot.com.br/2012/06/blogs-da-semana.html
Beijinhos! <3
adorei =0
ResponderExcluire já coloquei no meu
Emilie Escreve
Amei esse efeito *u* Estou usando lá no blog, já te creditei ok?
ResponderExcluirKissus ~~> http://blog-letsbehappy.blogspot.com.br/
Adooreei , vou fazer isto no meu blog !
ResponderExcluirBeijos,passa la no meu blog?
www.paradateen1.blogspot.com !
Não funciona no meu blog esse tutorial D:
ResponderExcluirEle pega o link leia mais + a parte das postagens relacionadas.
me-and-myfriends.blogspot.com
Totalmente perfeito!!! Adorei o tuto *---*
ResponderExcluirblogthistime.blogspot.com
No meu blog não tem nenhum resultado.Que problema vc sugere?
ResponderExcluirBeijos
Jade Marlla
ain posha, eu ja tentei em varios sites de blog colocar o link ''leia mais'' e eu não consigo faço tudo direitnho e nunca vai, porque sera ? :/
ResponderExcluirolá, adorei seu blog!
ResponderExcluirtentei colocar o leia mais no meu mas nao consegui = (
venha nos visitar http://www.lasmuchachasfashion.blogspot.com.br/,
e tb nossa fanpage https://www.facebook.com/profile.php?id=100004127287788, nós vendemos muitos acessórios lindos!
Oi, adorei o tuto. Já coloquei no meu blog, mas como faço para por "Leia mais" ao invés de "Mais informações" ?
ResponderExcluirvanille-vie.blogspot.com.br
Mais um tuto que eu ameeeei! Estou editando e colocando no meu novo lay, quando terminar colocarei os devidos créditos =]
ResponderExcluirDa uma olhadinha depois?
http://caprichadasbr-oficial.blogspot.com.br/
Adorei o tuto!vou fazer...Não muda o nome do blog não flor, ta perfeito assim..
ResponderExcluirbeijokas
Brigadeironoglitter.tk
Era o que eu estava procurando. Realmente eu estava enjoando colocar imagem
ResponderExcluirAdorei o efeito e já estou usando
Já coloquei na page de "Créditos" do meu blog
Obg e abraços
recantodafadaalice.blogspot.com.br/
Como faço para por "Leia mais" em vez de "Mais informações" ? :(
ResponderExcluirFinalmente consegui! Obrigada!
ResponderExcluirNo meu não funcionou T.T, mas é pq meu theme adora zoar com a minha cara :C!
ResponderExcluirMas, obrigada!
Quase 4
Fiz no meu blog e funcionou ^^
ResponderExcluirAnny, queria sugerir um post. É uma dúvida que eu tenho há muito tempo. Quero saber como colocar o hack "leia mais" para abrir o restante do post na página inicial, como se fosse uma postagem estendida, sabe? Eu particularmente não gosto de ter que abrir outra página para ler o post todo. Se você puder postar como fazer isso, eu ficaria muito grata. bjs
consegui personalizar o "leia mais". No efeito hover eu aumentei a largura, ai quando a pessoa passa o mouse acontece uma animação '-' Mas ainda não estou 100% satisfeito! u.u Vou personalizar mais algumas coisinhas e arrumar a cor...algo nela me incomoda '-'
ResponderExcluirNão deu aqui :( pqqqqq
ResponderExcluir