6.25.2013

Efeito Borda Galaxy para seu blog!


Olá meus peregrinos peregrinantes, tudo bom?. Meu Deus muitos aqui amam The Killers? É isso mesmo que eu li, eu adorei saber que muitos já conheciam a banda e para a minha surpresa apenas 1 pessoa não curte muito esse ''estilo de musica''. Emfim as minhas férias estão quase chegando estão tão, mas tão peto, só que para mim poder estrar nelas eu terei que fazer mais uma semana de provas (ai que vida difícil). Agora sim vamos nos ajeitar o estilo do post, eu estava esses dias fazendo uns códigos de CSS para afiliados e eu criei por acidentalmente um efeito que eu particularmente nunca tinha visto, parecido sim mas idêntico NUNCA! Emfim ele é super lindo e vale a pena ver.


| Live Preview, online porque é ao VIVO u_u*deixe a pagina carregar inteira para ver o efeito!*
>> Para aprender a colocar no seu blog esse feito vá em: na aba modelo do seu blog, logo após clique em editar HTML [www] > Depois clique dentro da caixa do editar de HTML e aperte as teclas Ctrl + F > Logo após cole na barrinha que apareceu esse código (sem as aspas) '']]></b:skin>'' e acima dessa tag já achada cole esse código abaixo:
.star{

background:#000;
padding:5px;
border-radius:50% 50% 0% 50%;
margin: 5px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
-webkit-filter: none;
}
.star:hover{
background:url(http://24.media.tumblr.com/tumblr_mafcngtSpf1rd5xsno1_400.jpg) repeat;
border-radius:50% 50% 50% 0%;
background-position:bottom left;
background-position:bottom left, top right, 0 0, 0 0;
-webkit-filter: grayscale(0.7);
}
Entenda o código: O que está em negrito é a cor da borda antes do hover se você quiser pode mudar usando esta tabela online [www]. O que está em itálico é o espaçamento entre elas se achar necessário mude para 3px e etc.

Depois de ter feita as configurações necessárias vá em: Layout e clique em adicionar ''Adicionar um Gadget'' e escolha a opção HTML/JavaScript e cole o seguinte código:
<a href="LINK"><img class="star" height="60px" src="LINK DA IMAGEM" width="60px" /></a>
Emfim galera é isso, gostaram? é esse o post de hoje, eu espero que tenham gostado desse efeito porque ele é realmente muito bonitinho né? E eu queria dizer que no ultimo post sobre html me pediram para fazer o mesmo código mas em forma de imagens para post e olha já está sendo atendido! Eu queria dizer que se você ainda não votou na enquete ao lado vote, porque assim você estará me ajudando! Até mais agora. Respondi essa TAG e vejam a resposta dela aqui [www].



37 comentários:

  1. Que lindo esse efeito! *ww*
    Sério, vou usar ele na minha elite de afiliados no próximo layout. U__U

    XOXO, Josh.

    ResponderExcluir
  2. Lindo, com certeza vou usar.
    Bjus
    http://coffein-paris.blogspot.com.br/

    ResponderExcluir
  3. fODÃAO' O efeitoo manoo'
    Tô me matando fazendo um layout galaxy' e vou usar o efeito claro !!!
    VLW aii'

    guriadaqui.tk

    ResponderExcluir
  4. Fica lindo! *-* Adorei!

    controversias-blog.blogspot.com

    ResponderExcluir
  5. Que perfeito, caramba >o<
    Quirky-tree.blogspot.com

    ResponderExcluir
  6. bem legal o tutorial ^
    http://melhor-e-impossivel.blogspot.com.br/
    beijoos

    ResponderExcluir
  7. G-zuis, esse efeito é muito perfeito *u*

    CONNECTADUS

    ResponderExcluir
  8. Que massa, adorei fica testando o efeito no Preview kkk :D

    ResponderExcluir
  9. Ai que lindo! eu vou usar esse efeito U.U no novo layout do space, com os créditos é claro *O*

    ResponderExcluir
  10. Hey Matheus, da onde vc tirou esse "peregrinos peregrinantes" ein? haha andou lendo a hospedeira? --' sqn-
    é pelo jeito gostam sim dessa banda haha' õ/
    mais vou bem e vc? kk
    Haha...semana de provas tbm né?! eu tbm, mais depois, que venham as férias né >0<'
    QUE EFEI-TO PER-FEI-TOOÔ! amei mesmo, vou usar em algum layout free ou sei lá o que, mais tenho que usar esse efeito em algo, amo os efeitos que você posta aqui, são tão originais e lindos!

    Adolescente Nerd

    ResponderExcluir
  11. Já vi esse efeito!!
    É muito legal!!
    Beijinhos

    mundo-desonhadores.blogspot.com

    ResponderExcluir
  12. Que perfeito, eu demorei um tempão pra entender, fica lindo
    beijos

    ResponderExcluir
  13. Jesus, que efeito mais divo, arrasou Matheus AUHSUAHSAUHSA
    Amei, usarei no próximo lay do GA! Queria saber se o background pode ser mudado que o efeito continuará a mesma coisa ?
    Beijos <3
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
  14. AAAh eu acho tão lindo essas coisas galaxys!! Imagina no blog então! *-*

    Adolecentro

    ResponderExcluir
  15. Oh céus! Como o Joven Club tá lindo! Ameeei esse layout ^~^
    Senti saudade daqui ;\
    Esse menu ficou lindo, gostei do efeito na borda que você colocou uma imagem se eu não me engano .-. ficou bem legal (:
    Um beijão (:

    Doce Quinta-feira

    ResponderExcluir
  16. Essas coisinhas galaxy são uma perfeição *--*

    Seguindo aqui!
    Beijos

    gabriela-amorim.blogspot.com

    ResponderExcluir
  17. Muito lindo esse efeito, Matheus! :3
    Vou usar no meu próximo lay nos afiliados também! <3
    Bjo, Sel ;*

    Jovens Gordinhas

    ResponderExcluir
  18. adorei a dica, vou tentar aproveitar. Beijocas
    http://bonequinhadepixe.blogspot.com

    ResponderExcluir
  19. aaanw esse efeito ficou lindo *0*
    # cute-bii.blogspot.com

    ResponderExcluir
  20. Amei a dica e esse efeito,ficou lindo.

    querida-adolescenciaa.blogspot.com

    ResponderExcluir
  21. nossa que legallll ameii a dicaaa
    adotadospelopai.com.br

    ResponderExcluir
  22. Adorei a dica, ótimo tutorial. (:

    haysahass.wordpress.com

    ResponderExcluir
  23. Muito boa a dica. Adoro todas as postagens do blog. Consigo realmente adorar visitá-lo.
    cronicasdeumlunatico.blogspot.com.br

    ResponderExcluir
  24. Que efeito bacana, estou pensando em fazer.
    Adorei.
    Beijos ♥

    DearItGirl.blogspot.com.br

    ResponderExcluir
  25. Gostei muito do efeito, muito legal ele !
    cr4zy-world.blogspot.com

    ResponderExcluir
  26. hehe, adorei o efeito, achei muito lindo e nunca tinha visto igual u.u
    Pequena Garota

    ResponderExcluir
  27. Muito Legal o Efeito !
    Será que poderia me Ajudar ?!! Bom meu blog esta com a Meta Para esse Mes de 250 Seguidores,e precisamos da sua ajuda para conquistar essa meta,se não pedir muito... se Pudesse Seguir o Blog Ficariamos Muito Contentes :) depois é só comentar avisando que ja esta seguindo que sigo o seu o mais rapido possivel !
    Conto Com Sua Ajuda ! Beijoos Até Logo :)
    garootassabem.blogspot.com

    ResponderExcluir
  28. Menino, amei aqui.
    Esse efeito é muito lindo.
    Adorei peregrinantes rsrsrsrs
    http://inspiracaoentrelinhas.blogspot.com.br/
    Beijo!

    ResponderExcluir
  29. Ai que borda lindinha, amei! *u*

    Beijos,
    adoravelmente.blogspot.com.br

    ResponderExcluir
  30. Passando para retribuir a visita! Quando tiver post novo avisa, tá Matheus? *-* bjs!

    Adolecentro

    ResponderExcluir

É o seguinte...
x Comente se você REALMENTE leu o post;
x NUNCA PEÇA para eu seguir deu blog de volta eu sempre visito, e seu eu gostar com certeza irei seguir;
x As tags são respondidas em um ''post'' privado geralmente anexadas em um servidor;
x Repeito os outros e eu, se quiser criticar critique!
Até e obrigado pela visita XOXO :)