Hello =)
Trouxe um tutorial que muitos não devem conhecer,
ou já viram no tumblr HTMLuv e super legal e dá a dimensão
de quando o seu novo layout estará pronto, ou qualquer
outra coisa desse tipo.
[Demo]
Eu mesma já testei e garanto que vai funcionar!
Se usarem peço que credite o HTMLuv e o Blog.
Adicione um HTML/Javascript e cole o código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script><script>$(function() {$(".meter > span").each(function() {$(this).data("origWidth", $(this).width()).width(0).animate({width: $(this).data("origWidth")}, 1200);});});</script>
Agora cole isso acima de ]]></b:skin>:
/* --- barra de progresso by luana castro - htmluv e great help --- */.meter{height: 20px; position: relative; background: #f7f7f7; border-radius: 25px; padding: 10px;}.meter > span {display: block; height: 100%; border-radius:20px; background-color: #b8accc; box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); position: relative; overflow: hidden;}.meter > span:after, .animate > span > span {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));background-image:-moz-linear-gradient(-45deg,rgba(255, 255, 255, .2) 25%,transparent 25%transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent); z-index: 1; background-size: 50px 50px; -webkit-animation: move 2s linear infinite; -moz-animation: move 2s linear infinite; border-radius:20px; overflow: hidden;}.animate > span:after {display: none;}@-webkit-keyframes move {0% {background-position: 0 0;}100% {background-position: 50px 50px;}}@-moz-keyframes move {0% {background-position: 0 0;}100% {background-position: 50px 50px;}}.nostripes > span > span, .nostripes > span:after {-webkit-animation: none;-moz-animation: none;background-image: none;}
Agora adicione outro HTML/Javascript e cole esse código:
<div class="meter animate"><span style="width: 50%"><span></span></span></div>re
nossa que legal , bem simples mais e muito eficaz , porque e muito chato quando as pessoas ficam entrando no blog , quando a genet ainda esta editando ele né , vou usar quando eu for trocar de layout ! Com creditos e claro .
ResponderExcluirbeijinhos flor
Liphistik
http://coisinhasdegarotas99.blogspot.com.br
E mesmo e muito chato, da próxima vez vou tentar colocar ela no blog
ExcluirXOXO ><
Que legal, adorei! haha Já salvei aqui! *-*
ResponderExcluirBeijos ~
Eu-Cotidiano (perfil)
Awn:) Obrigada Amora!
ExcluirAdorei seu blog ...super lindo e ja dei uma passeada por aqui tem muitos tutoriais legaiss ... ja ganhou mais uma seguidoraaa... faz uma visitinha pra mim... segue de volta da uma forcinhaa
ResponderExcluirbejosss.....
http://keepcalmandfacavocemesmo.blogspot.com.br/
Já estou seguindo =)
ExcluirBem legal!!
ResponderExcluirseguindo aqui :)
loucas-por-pink.blogspot.com