✨ NAVEGUE PELAS CATEGORIAS ✨
Blogosfera Cotidiano Livros e Séries Estilo Freebies Inspiração Jogos Música Tech

Aqui tem muitos #FreebiesManeiros e dicas para Wordpress.

#Freebies . 04 de maio de 2015 . COMENTÁRIOS (7)

Freebies

Vocês curtiram, compartilharam e por este motivo: ele está de volta mais uma vez! Aproveitando o início de mês e esta data gloriosa jedi-ística (pra quem não sabe: 4 de maio é equivalente a “May the 4th (force)”), neste segundo post dos “Freebies Maneiros”, eu separei mais fontes bonitas pra vocês usarem, provavelmente eu sempre vou separá-las pra compartilhar aqui porque já se tornou um hábito (colecionar fontes, quem nunca?) e também separei alguns templates (pra blogger e wordpress, pra agradar a todos!) que eu gostei bastante! Que a força esteja com todos nós neste mês :D

Freebies

01 | 02 | 03 | 04

Freebies

template para blogger (05)

Freebies

template para wordpress (06)


#Freebies . 21 de abril de 2015 . COMENTÁRIOS (16)

Não existe coisa mais maravilhosa na internet que os freebies, e se você não sabe o que é, saiba que são materiais fornecidos gratuitamente via download por gente linda, estes materiais podem ser vetores, layouts, ilustrações, fontes, entre outros.

Freebies

Como já comentei outras vezes, a colméia tem como um dos objetivos ajudar suas abelhinhas a investirem nas suas próprias colméias, então nada mais justo do que compartilhar algumas coisas bonitas que eu encontro pela internet.

Neste primeiro post dos “Freebies Maneiros”, eu separei algumas fontes caligráficas e três pôsteres pra vocês abusarem da sua criatividade, aproveitando que muita gente tem aderido aos livros de colorir e a aquarela, então divirtam-se :)

Freebies

01 | 02 | 03 | 04

Freebies

05 | 06 | 07


#Freebies . 09 de dezembro de 2014 . COMENTÁRIOS (0)

Sabe aquele botão flutuante que aparece conforme você vai rolando a barra para baixo e que te salva quando você tem preguiça de subir toda a página novamente? Este tutorial vai ensinar você a colocar este botão ScrollTop que faz voltar ao topo do blog usando JQuery, isso mesmo, nada de plugins!

I. Inserir JQuery no código

Primeiro de tudo, você precisa inserir o JQuery no seu código para que ele funcione, né? E é bem simples, basta copiar esta linha de código no Header.php (topo), antes da tag < /head> que ele irá importar da biblioteca de JQuery do Google.

<*script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"><*/script>

II. Definindo o “topo”

Em seguida, você irá modificar, dentro do próprio Header.php (topo), esta tag:

<*body>

Por esta nova tag:

<*body id="VoltarAoTopo">

Pois é pra ela que será redirecionado o botão de subir id=”VoltarAoTopo”.

III. Botando o botão pra sambar

Depois de definir o local do botão, precisamos fazê-lo funcionar! Então você irá inserir o script do ScrollTop abaixo também no Header.php (topo), antes da tag < /head>.

<*script type="text/javascript">
// Use jQuery com a variavel $j(...)
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(".VoltarAoTopo").hide();
$j(function () {
$j(window).scroll(function () {
if ($j(this).scrollTop() > 200) {
$j('.VoltarAoTopo').fadeIn();
} else {
$j('.VoltarAoTopo').fadeOut();
}
});
$j('.VoltarAoTopo').click(function() {
$j('body,html').animate({scrollTop:0},600);
});
});});
<*/script>

O valor em destaque 200 é equivalente a 200px, que determina a distância da imagem do topo, quer dizer, a que distância o botão irá aparecer na página do blog, você tirá definir quando é que ele aparecerá.

IV. Amostra o botão

Inserir o código abaixo no Footer.php (rodapé), no local onde você quer que ele “pare”, através da função onclick, o botão será acionado e vai te levar pro topo do blog.

<*img src="URLDAIMAGE.JPG" class="VoltarAoTopo" onclick="$j('html,body').animate({scrollTop: $j('#VoltarAoTopo').offset().top}, 2000);" value="Voltar ao topo">

V. Pimp my button

E por fim, editar o CSS do código, né? Eu normalmente prefiro a opção anterior pra usar a imagem, mas se o seu botão tiver um texto, é interessante definir o fundo (background). Ali eu defini o tamanho do botão, mas você pode ficar a vontade pra usar o CSS como quiser.

.VoltarAoTopo { background: url('URLDAIMAGEM.JPG') none repeat scroll 0 0 !important; bottom: 0px !important; display: block; height: 49px; width: 55px; position: fixed; }

Nota: Preste a atenção que eu inseri alguns asteriscos no código para que ele fosse visualizado sem rodar, ok? Não esqueça de retirá-los ;)

O tutorial original de onde eu aprendi a criar o botão é do Quebrando a Cabeça, mas aqui eu postei a versão que modifiquei pra usar no blog, qualquer um dos dois funcionam :D

Espero que você tenha gostado e se tiver mais dúvidas de mais códigos, você também pode sugerir no grupo do Facebook, que assim que eu puder, eu posto aqui!



© 2010 - 2016 Babee. Todos os direitos reservados. Para o topo ▵
© 2010 - 2017 Babee. Todos os direitos reservados.