✨ 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 . 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!


#Freebies . 20 de setembro de 2014 . COMENTÁRIOS (5)

Não sabia como nomear exatamente este tutorial do slider com post thumbnail, mas consigo explicá-lo: Muitos blogs recentemente aderiram a um tipo de slider de posts mais simples, apenas com quadros de imagens linkando para os posts mais recentes de determinadas categorias no WordPress. Lá na colméia do Facebook, uma das abelhinhas pediu ajuda pra entender COMOFAS? E eu fui atrás, pesquisei e estudei algumas tags e parâmetros pra finalmente estruturar esse “slider”. Queria só ressaltar que eu não encontrei nenhum tutorial específico disso, então eu mesma montei e testei o código pra colocar aqui ensinar vocês. Vamos lá?

Criando um slider com Imagens em Destaque

A primeira coisa que você precisa fazer é ir no Functions.php e verificar se o seu tema tem suporte para as miniaturas (thumbnails). Se não tiver o código abaixo, pode inserí-lo, ele vai dar a opção de colocar a imagem destacada na página do post.

//suporte thumbnail
add_theme_support('post-thumbnails');

thumbnail

(Clique aqui pra continuar lendo o post)



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