Author Archives: elciomartinsbfilho@gmail.com

Adicionando código jQuery no WordPress

Fala meu povo!!!

Seguinte, vamos dar uma olhada em como adicionar um script próprio no WordPress usando o jQuery.

Estou usando o tema Twentytwelve do WordPress.

Na pasta do tema do WordPress, abra uma pasta chamada js.

Nela vamos criar o arquivo “script.js”

Criado o arquivo coloque o script desejado jQuery dentro dele e salve.. como no exemplo:


jQuery(document).ready(function(){
jQuery('#teste').html("teste de exemplo");

\\seu código aqui

});

Importante observer que ao invés de usar o ” $(document).ready(function(){ \\………… }); “, utiliza-se “jQuery(document).ready(function(){ \\………… }); “.

Salve o arquivo scritp.js , e vamos editar outro arquivo functions.php que esta também na pasta do tema.

Nele vamos inserir o seguinte código no final do arquivo.


function adicionandoScript () {
 wp_register_script('nome-do-seu-novo-script',
 get_template_directory_uri() . '/js/script.js',
 array('jquery')
 );
 wp_enqueue_script('nome-do-seu-novo-script');
 }
add_action('wp_enqueue_scripts', 'adicionandoScript');

Pronto!

Lembre-se de limpar o cache do Wordpres se estiver habilitado, e do navegador.

Agora é só curtir o resultado!

Abs!

Código Jquery para scrollTop plugin

Fala galera!

Hoje vamos de mais uma dica de jquery….

Vou ensinar um modo beeem básico de como desenvolver um pequeno script em jQuery para criar seu próprio funcionalidade scrollTop ( aqueles botõeszinhos que retornam ao topo da página automaticamente).

Unha neles…

Primeiramente adicione em sua página o seguinte Código HTML:

<span class="push-top"></span>

Adicionamos alguns elementos básicos de CSS.

É importante observar… o position: fixed, e o bottom:- 70px.

 

O bottom: -70px, vai dar o efeito visual de subir…do botão.


.push-top{
 background: #d3d3d3;
 width: 56px;
 height:56px;
 position: fixed;
 -webkit-transform: rotate(-90deg);
 bottom: -70px;
 right:60px;
 opacity: 1;
 z-index: 4;
 }
 .push-top:hover{
 background: #d3d3d3;
 width: 56px;
 height:56px;
 position: fixed;
 bottom: -70px;
 right:60px;
 opacity: 0.3;
 z-index: 4;
 }

E agora o código jQuery…


$(document).ready(function(){<span style="line-height: 1.714285714; font-size: 1rem;">$('.push-top').click(function(){</span>

$('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
 });

$(window).scroll(function(event){
 if($(window).scrollTop() > 200){
 $('.push-top').stop().animate({bottom:'40px'}, 300);
 }
 if($(window).scrollTop() < 200){
 $('.push-top').stop().animate({
 bottom: '-70px'
 }, 300);
 return false;
 }
 });

Pronto! Adicionado, você pode estilizar o CSS a sua maneira… como bem… entender… para conferir dá uma olhada aqui mesmo no blog, pois esse script tá rodando aqui….

Abs!

E ai Galera da TI!

Bom, hoje venho dar uma dica de como instalar o eclipse no Ubuntu 14.04….que diga-se de passagem é uma baita OS.

Sem dor, e sem mouse kkkkkk, como usuário de linux gosta!

Pressione Ctrl + Alt + T (no funciona em toda distro, mas como se trata do Ubuntu 14….).

Ao abrir a janela do terminal digite:

sudo apt-get update

sudo apt-get install eclipse-platform

Pronto….sem dor….kkkkkkk!

Abraço a todos!

 

Ajustando relógio com o servidor em uma rede com domínio

Fala pessoal!

Hoje quero dar uma dica rápida, fácil, mas muito útil pra os profissionais de suporte de TI.

Como sabemos muitos componentes de segurança do windows, verificam a data e até mesmo a hora do servidor como parâmetros de segurança, e ou de validação para garantir essa segurança.

Muitos sistemas de controle e de gerenciamentos de empresas, também utilizam como parâmetro o tempo, para segurança e outras tarefas como emissão de comprovantes, pedidos, ordens de serviço e etc.

Portanto sem mais delongas…..

Primeiro vamos abrir o prompt, ou CMD que é o console ou terminal do Windows.

Para isso vá em Iniciar -> executar. Digite cmd e pressione ENTER, ou…. Pressione a tecla com o símbolo do Windows + ‘R’, e digite CMD e pressione ENTER.

Com a janela do terminal aberta digite:

“net time //nomedoservidor \set”

Irá aparecer uma mensagem no prompt. Para confirmar digite ‘s’ e pressione ENTER.

Pronto!

O horário do computador será o mesmo do servidor!

Valeu galera é isso…. vou ficando por aqui.

Abs!

 

Relógio com Jquery e Javascript

Galera!

Mais um tutorial simples para que possamos praticar um pouco de Javascript/Jquery

Vamos fazer um Relógio que marca simplesmente a hora de seu navegador (lembrando que é javascript).

Primeiro um html simples!


<html>
 <head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 </head>
 <body>
 <p id="hora"></p>
 </body>
</html>

Acho que o html num precisa de explicação então vamos ao Javascript e JQuery!


$(document).ready(function(){
 setInterval( function() {
 var data = new Date();

var hora = data.getHours();
 var minuto = data.getMinutes();
 var segundo = data.getSeconds();

$('#hora').html(
 (
 hora < 10 ? "0" : "" ) + hora + " : "
 + (minuto < 10 ? "0" : "" ) + minuto + " : "
 + ( segundo < 10 ? "0" : "" ) + segundo);
 },1000 );
 });

É isso ai galera!!! Se quiserem utilizar um CSS e incluirem data fiquem a vontade! ok?

Abraços!

Utilizando SintaxHighlighter do google

Olá galera!

Vamos aprender como inserir em seu blog ou site o Google Sintax Highlighter. Pra quem não sabe ele é um plugin que formata um conteúdo para ficar bem parecido com uma aparência de um editor de html/css/jquery e etc…

Bom primeiro vamos baixar o Google Sintax Highlighter.

Após baixar o código, extraia o mesmo em uma pasta em seu computador.

Procure na pasta “Styles” pelo arquivo SyntaxHighlighter.css.

Copie o conteúdo e cole em seu arquivo “.css” do seu blog ou site. Geralmente no WordPress é o style.css que está dentro da pasta de seu tema!

Agora vamos abrir a pasta “Scripts”, e nela conterá vários arquivos com o início shBrush + (o nome da linguagem).js. Ex: shBrushPhp.js, shBrushCss.js, shBrushJScript.js, etc.

Abra o arquivo referente a linguagem que vc deseja, copie o conteúdo e cole no fim do arquivo shCore.js que se encontra na mesma pasta.

Copie este código para a pasta js do seu tema WordPress ou do seu site.

<?php if( is_singular() ){ ?>

<script language="javascript" src="url-do-script-shCore.js"></script>
<script language="javascript">
     dp.SyntaxHighlighter.HighlightAll('code');
</script>

<?php } ?>

Fonte: para a parte de mesclagem do tutorial .js e .css usei a dica daqui.

OK?