Hi Gurias hoje eu não ia postar (domingo tédio aqui) mais achei um tutorial super legal no Mundo blogger (merecidos créditos) e vou passar a vocês (:
É super fácil e eu achei o resultado incrível vocês podem visualizar no meu blog de testes:
Quem desenrola mais no HTML também pode usar este efeito na barra lateral em algum Gadget, por exemplo tem blogs que usam este efeito na CBOX e fica bem legal também.
Quem desenrola mais no HTML também pode usar este efeito na barra lateral em algum Gadget, por exemplo tem blogs que usam este efeito na CBOX e fica bem legal também.
Vá no seu HTML e marque a opção expandir modelos de widgets dê um ctrl + f e pesquise por: ]]></b:skin> e cole o código abaixo ACIMA dessa tag:
#box-toggle {
margin:0 auto;
}
#box-toggle .tgl {
margin-bottom:20px;
}
#box-toggle span {
display:block;
cursor:pointer;
font-weight:bold;
font-size:14px; /* edite fonte */
color:#3D81EE; /* edite cor do link */
margin-top:15px;
}
Agora Procure pela tag </head> e cole o seguinte código ACIMA dela:
<!--ScriptjQuery Toggle revelar esconder Inicio -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.toggleText = function(a,b) {
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.tgl').before('<span>[Ver Conteúdo]</span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>
<!--ScriptjQuery Toggle revelar esconder Final-->
Agora salve!!
Atenção Toda vez que você for utilizar este efeito é necessário colar o código abaixo na aba HTML do post. Agora volte para a aba escrever e continue o post na parte que ficará oculta!
<div id="box-toggle">
<div class="tgl">
Coloque aqui o conteúdo que ficará Oculto
</div>
</div>
É só isso fácil né gurias?
gente adorei este efeito muito legal
ResponderExcluire pelo visto o Tutu tmb é fácil .. ;D
ei jackie você ~e sempre facilitando a vida das blogueiras
Beijinhoooos
Segunda :k: Adorei!! Bjss :l:
ResponderExcluirooi jackie muito facil , haha' *-*
ResponderExcluircomenta no meu blog?
#Bezos Rawr -----> Bikoti.blogspot.com
Que legal esse efeito, amei *-*
ResponderExcluirBeijo ;*
deluxegirlsblog.blogspot.com
Uaaau o Jackie Dream é muuuito fofo *-* e tá bombando! Já estou seguindo, segue de volta se gostaar?? http://camilaejustin.blogspot.com/
ResponderExcluirBeijinhoss de batom rosa chiclete
Se não for incômodo, você poderia me passar a URL da setinha da menininha de roupa azul daqui > http://isjackiezzdream.blogspot.com/2011/09/setas-para-o-topo-da-pagina.html
ResponderExcluirAgradeço desde já. http://camilaejustin.blogspot.com/
Bjs Mila
Adorei, vou usar XD. Só que antes tenho uma duvidazinha: Dá pra colocar outra coisa no lugar do texto [Ver conteúdo] ? Espero resposta
ResponderExcluirUm beijo e um abraço, Becky
~http://queloucura-blog.blogspot.com~
Leegal este tutu e bem fácil...
ResponderExcluirBeijo Grande Gurriia Preferida...
^^ amei o tuto.
ResponderExcluir#Bezos Rawr -----> Bikoti.blogspot.com
Muito fácil e bem legal!
ResponderExcluirHttp://isa-pequena.blogspot.com
É bem legal esse tuto, e nem é muito difícil né?!
ResponderExcluirAh flor, tá rolando um concurso lá no MN & 15, se puder votar em mim http://meianoiteequinze.blogspot.com/
Obrigada :)
Beijos,
http://menina-delicada.blogspot.com/
Nossa Jackie eu estava muito procurando esse tutorial :h: ...Obrigada mesmo me ajudou muito... :l:
ResponderExcluirAmeei,ameei,ameei
ResponderExcluirbjookas
http://sooulteen.blogspot.com/
Ah, agora sim, hehe. Obrigada por tudo Jackie, tuto super aprovado! Vou usar no lugar do Leia Mas, hihi!
ResponderExcluirNossa amr , to morrendo de raiva aqui não to conseguindo colocar no meu blog a atualisaçaõ dos comentarios :i: #amoesseblog aushusah Linda bjinhos , quero um uma postagem com alguns sites que tem bases para lyout eemm / <3 bye
ResponderExcluir@Bella s2 Que pena que não conseguiu guria! aqui um post linda>http://isjackiezzdream.blogspot.com/2011/12/seu-design-mais-profissional-10.html
ResponderExcluir:d:
Uii ficou demais esse tutorial!
ResponderExcluirNas proximas edições vou aplicar ao meu por que gostei muito!
http://novidadesdatekinha.blogspot.com
Ahhh até funcionou mas não fica direito :/
ResponderExcluiré pqe eu tenho um coisa de mais informações e não consigo tirar ....
Se souber pode me ajudar? :S
http://blogdadudafonseca.blogspot.com/ BJ BJ
que legal! Gostei bastante <3
ResponderExcluirBjs
TDiaryofteens.blogspot.com
Desculpa te incomodar de novo rsrs', eu até consegui colocar a setinha, mas quando eu clico não vai para o topo da pág... me ajuda!
ResponderExcluirhttp://camilaejustin.blogspot.com/
Beijinhoss
Nossa, fica muito lindo o efeito, adorei este tutorial.
ResponderExcluirBeijos,
http://blogtruegirl.blogspot.com/
Antigo Garotas Conectadas.
Tava atrás desse tuto ha um tempão! Obrigada Jackie! Beijos
ResponderExcluirwww.meninaimperfeita.tk
Oi minha linda ! Quanto tempo que eu não venho aqui ! E também faz tempo que vc não faz uma visitinha lá no blog ! Tem novo post , novo layout! Comenta o post ? Amei esse tutorial !!!
ResponderExcluirBeijos .
www.cachinhosdamel.blogspot.com
Pelo tutorial é fácil mesmo :c:
ResponderExcluirMas, estou procurando umas coisas diferentes pro meu blog, essa função não me interessa muito! Mas, deve ficar show^^
Estou seguindo!
http://leitoracompulsiva1.blogspot.com/
:l:
Amei o tutorial não conhecia ficou um arraso o efeito que você fez no seu blog de teste, achei fofinho quando cliquei e as imagens apareceram!
ResponderExcluirhttp://wwwgertiegirlcom.blogspot.com
Oi, tudo bom? Não sei se ainda lembra de mim, mas quero dizer que nosso blog e eu estamos sentindo sua falta! Por favor, visite-nos, um beijo grande ;* Deyse |Garotas Sonhadoras > www.mundogarotassonhadoras.blogspot.com
ResponderExcluirLegal esse efeito!!!:k:
ResponderExcluirTa tendo concurso lá participa?
Beijinhos da Luísa!!!:l:
Fiz um teste no meu blog de testes e deu super serto, muito bom o tutorial, logo vou começar a utilizar la no blog!
ResponderExcluirBjos!
Ameeei *-* Muuito legal!
ResponderExcluir1º Concurso no Blog, olha lá!
Beijos ;*
just-a-girl21.blogspot.com
Adorei o tutorial Jackie, o resultado final fica demais, amei <3
ResponderExcluirBlog Mundo da Moda / @_MundodaModa
kisses♥
Selinho pra vc
ResponderExcluirhttp://spice--girls.blogspot.com/2012/01/primeiro-selinho-do-spice-girls.html
aceita afiliação?
ResponderExcluirhttp://spice--girls.blogspot.com
Oi Jackie , adorei esse tutorial , muito útil !
ResponderExcluirJackie sou fã do seu trabalho , todo dia estou aqui para ver mais tutus , parabéns !
Faz uma visitinha no blog =)
Irei ficar muito feliz :D
Acesse >> http://meigaedelicada.blogspot.com
:h:
Yooo, muito bo o tuto :h:, amei! :l:.
ResponderExcluirvnmpoficial.blogspot.com
adoro seus tutos :3
ResponderExcluirvou usar algum dia ><
http://blogueiragabi.blogspot.com
Que bacana Jackie, ontem eu fiquei a tarde inteira no mundo blogger caçando esse tutorial (pra menu), só que não achei *-* ahsuahs e você vem e me salva.
ResponderExcluir@Mel Cardoso Eu tbm estava doida :k: atrás desse tutu guria (:
ResponderExcluirAssim que eu descongestionar meu template de scripts inúteis instalo ele :h:
beiju Mel
Adorei este efeito Jackie
ResponderExcluirPassa lá no meu Blog :
http://wekawaii.blogspot.com/
Beijos
e vc me ajudou muito , muito mesmo com este Post.
Ok, então.... achei o Tutu no seu blog sobre barra de rolagem colorida e usei tbm uma barrinha divisória... preciso creditar, neh?
ResponderExcluirhttp://camilaejustin.blogspot.com/
Que legal o tutorial , eu adorei esses emoticons também! ahahahha :k:
ResponderExcluirO blog é tãão lindo , to seguindo aqui e vou visitar sempre, me avisa quando tiver novo post por favor :D
Beeijo
www.blogbombaastic.blogspot.com
Oi guria , então vim aqui como anonimo para nao me prejudicar mais te copiaram e nao deram os creditos: http://lufashionteen.blogspot.com/2012/01/download-da-barra-de-plugins-no-pfs.html
ResponderExcluirliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiindo :d: concerteza vou usar no meu proximo lay :c:
ResponderExcluir:l:
vih-rockgirls.blogspot.com
Gente, eu estava olhando seus posts passados, e sério, gostei de todos, você tem muito criatividade e investe muito neles, parabéns!
ResponderExcluirhttp://cantinhodalivia.tk/
aah que legal, super útil *-*
ResponderExcluirgirl,eu passei para a segunda fase do concurso Tudo4Girls, se você puder votar no Realidade Imperfeita na barra lateral -http://tudo4girls.blogspot.com/- vai me ajudar muito, obrigado desde já rs ;]
http://realidade-imperfeita.blogspot.com ;*
Ótimo Tutu ! Amei (: Beijs
ResponderExcluirMuito legal. Vc explica bem demais. Adoro seus tutoriais. Foi coisa de Deus achar seu blog. Aqqui é muito perfeito.
ResponderExcluirUm beijo, e ah.. as inscrições para o meu concurso já estão abertas, se quiser participar, fique vontade.
http://diario-piink.blogspot.com/
@Anônimo Hooy brigada por avisar de verdade (:
ResponderExcluirFiquei com tanta raiva dessa garota que me copiou que seu deixar um comentário pra ela que eu vou acabar arranjando briga :e: que um dia ela tome consciência e saiba que é errado =/
Mais brigada (:
@Lívia.S Brigada Guria *------------*
ResponderExcluirAaaaaa ' amei, agora posso dispensar o 'leia mais' por esse script. Vou passar o tuto ao meu blog tá bom? Beijos e Beijos:
ResponderExcluirhttp://teenagesky.blogspot.com {eu estou no blogger da minha mãe rs}
@Karla Coutinho Tudo bem guria (:
ResponderExcluiraaah sua mãe tbm é blogueira que legal hahahaha
beijus!
:h:
Ameii :k: Como vc faz esse seu menu personalizado com imagens??
ResponderExcluir@jackie Zanini
ResponderExcluirJackie, ela encheeeeeeeee muito o meu saco para eu fazer o layout dela a cada três dias (para mudar) e eu não tenho tanta paciência assim ! Não é muito legal isso ... rs
Beijos e Beijos, obrigada *u*
http://teenagesky.blogspot.com
Recadinho para Jackie: Tem um post lá no meu blog super sua cara! Como você ama kawaii >.<
ResponderExcluirCute Bii
Beijos Açucarados ~õ~
@Clay *o* Eitaaa Guria eu não sabia do outro lado kkkkkkkkkkkk
ResponderExcluirbeijuuuuus *----------*
Jackie,você sabe como substitui o link por uma imagem? se você souber me ajuda por favor? beijos
ResponderExcluirCharme Cherry (c)
Eu n consegui :a: Só funciona se não tiver outro codigo de leia mais née? O.o
ResponderExcluirOi flor, eu achei o tutorial muito útil, tanto é que estou usando, mas achei que o seu ficou muito mais legal porque a fonte está personalizada, no meu eu não consegui fazer o mesmo, tem jeito?
ResponderExcluirBeijocas, Jeh Galvão
http://horadamake.blogspot.com
E como esconder na sidebar Jackie, pode postar o tutorial? Ou você não sabe?
ResponderExcluir@AnônimoAo invés de colocar no post vc adiciona na sidebar como HTML Java script (:
ResponderExcluirMas tem como editar o "[Revelar conteúdo]"?? =/
ResponderExcluir@Tina tem sim (:
ResponderExcluirJackie, me responde, tem como colocar DUAS coisas com esse efeito na mesma postagem?
ResponderExcluirAcho que estou fazendo alguma coisa errada !
@Dudinha B.Cara acho que nem tem como... Tente usar este aqui>>http://blogger-passo-a-passo.blogspot.com.br/2010/01/como-ocultar-e-mostrar-o-conteudo-de.html
ResponderExcluirÉ possível mudar o texto onde se clica para aparecer o conteúdo oculto?
ResponderExcluirEm vez de " [Ver Conteúdo] " colocar outro tipo de coisa...
É possível? Se sim... como?
--> www.downf.blogspot.pt <--
Modifique o texto: [Ver Conteúdo] do segundo código (:
Excluir