Como criar um tema para Wordpress

Preparei este tutorial principalmente para quem está iniciando seus conhecimentos sobre o desenvolvimento de temas para wordpress. É bem simples, aborda o mais básico possível, e acredito que será muito útil para quem está iniciando, pois o tutorial está bem objetivo.

Por | @marcianodias Softwares

Preparei este tutorial principalmente para quem está iniciando seus conhecimentos sobre o desenvolvimento de temas para wordpress. É bem simples, aborda o mais básico possível, e acredito que será muito útil para quem está iniciando, pois o tutorial está bem objetivo. Criar tema para wordpress basicamente é simples. No entanto, pode-se também criar temas super avançados usando as mais variadas funções e plug-ins disponíveis para wordpress.

Neste tutorial iremos criar um tema simples, iniciando primeiramente por um template padrão em html, depois iremos estrutura-lo e formata-lo com css. Depois disso iremos fatiar o template para wordpress, desse modo iremos criar index.php, header.php, footer.php e usar as folhas de estilos que iremos criar no decorrer deste tutorial. O ultimo passo é atribuir algumas funções dinâmicas para pegar dados e informações dinamicamente.
Vamos ao tutorial!

Crie um novo documento em html e salve-o com um nome qualquer. É nele onde iremos definir as divs. A primeira div a ser criada será a div "geral". Ela será responsável pela largura do template e pelo alinhamento centralizado. Dentro dela ficará as demais dvi. Veja:

</div>


Em seguida defini as divs header, menu, contente, footer:


Adicionando conteúdo às divs


Vamos agora definir conteúdos para as divs header, menu e footer. O content iremos personalizar por último. Na div header será adicionado um titulo e uma descrição. Ambos serão pegos dinamicamente. Pelo enquanto é só para ilustrar para depois formatarmos em css, e para quando tiver pegando dinamicamente já esta com o cabeçalho formatado. Veja:


Agora adicionaremos a div menu uma lista não ordenada. Também será apenas para ilustrar, pois quando formos configurar para wordpress o menu será pego dinamicamente. Veja:


Como disse, a div contente ficará sem conteúdo pelo enquanto, então definiremos o copyright do footer. Veja:


Todas as divs já estão prontas, agora iremos para a tag e vamos chamar uma folha de estilo com o nome style. Veja:


Detalhe: ainda não temos folha de estilo. Crie um documento em css e salve como style (style.css). poderia ser qualquer outro nome, mas como, por padrão o wordpress reconhece or style.css, vamos obedecer. Logicamente, é possível também usar outros nomes, porém não iremos abordar isso agora, portanto salve como style.css mesmo.

Resultado final do index.html




Tema para Wordpress, o Básico</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="geral">
    <div id="header">
        <h1><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Marciano Dias</a></h1>
        <p>Aqui fica uma breve descrição</p>
    </div>
    <div id="menu">
        <ul>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
        </ul>
    </div>
    <div id="content"></div>
    <div id="footer">
        <address>Copyright © 2010. Marciano Dias - Serviços de Internet.</address>
    </div>
</div>
</body>
</html></code></pre><br />
<strong>Resultado no navegador:</strong><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Como criar um tema para Wordpress" src="http://www.oficinadanet.com.br//imagens/coluna/2760/7.png" alt="Como criar um tema para Wordpress" ></div></blockquote><br />
<br />
<h2>Estruturando e formatando o template com css</h2><br />
Agora vamos estruturar e formatar o template. Crie um documento em css e salve-o com o nome style.css.<br />
Zerando as margens:<br />
<pre><code>*{margin:0; padding:0;}</code></pre><br />
<br />
Alinhando o site ao centro do navegador.<br />
<pre><code>body{margin:0; text-align:center; background:#CCCCCC;}
#geral{text-align:left; margin:auto; width:960px;}</code></pre><br />
<br />
Estruturando e formatando o cabeçalho do blog.<br />
<pre><code>#header{height:60px; background:#747E80; padding:10px;}
#header h1 a{font:26px "Trebuchet MS", Tahoma, Verdana, Arial; color:#D5E1DD; text-decoration:none;}
#header h1 a:hover{color:#F7F3E8;}
#header p{font:14px Verdana, Arial, Helvetica, sans-serif; color:#F7F3E8;}</code></pre><br />
<br />
Estruturando e formatando o menu.<br />
<pre><code>#menu {background:#D5E1DD; height:30px;}
#menu ul{font:14px "Trebuchet MS", Tahoma, Verdana, Arial; list-style:none; padding:0; margin:0; }
#menu ul li{border-left:1px solid #06374F; border-top:0px; border-right:1px solid #06374F; border-bottom:none; line-height:30px; float:left; margin:0 1px 0 0; padding:0;}
#menu ul li a {text-align:center; display:block; padding-left:30px; padding-right:30px; text-decoration:none; color:#F2583E; font-size:11px; font-weight:bold;}
#menu ul li a:hover {background:#F7F3E8; color:#2B3E42; float:left;}</code></pre><br />
<br />
A div content ainda não iremos formatar. Segue abaixo, portanto, a estrutura do footer e sua formatação.<br />
<pre><code>#footer{height:20px; background:#77BED2; padding:15px;}
#footer address{font:13px Verdana, Arial, Helvetica, sans-serif; color:#2B3E42;}</code></pre><br />
<br />
Resultado do código css:<br />
<pre><code>*{margin:0; padding:0;}
body{margin:0; text-align:center; background:#CCCCCC;}
#geral{text-align:left; margin:auto; width:960px;}

#header{height:60px; background:#747E80; padding:10px;}
#header h1 a{font:26px "Trebuchet MS", Tahoma, Verdana, Arial; color:#D5E1DD; text-decoration:none;}
#header h1 a:hover{color:#F7F3E8;}
#header p{font:14px Verdana, Arial, Helvetica, sans-serif; color:#F7F3E8;}

#menu {background:#D5E1DD; height:30px;}
#menu ul{font:14px "Trebuchet MS", Tahoma, Verdana, Arial; list-style:none; padding:0; margin:0; }
#menu ul li{border-left:1px solid #06374F; border-top:0px; border-right:1px solid #06374F; border-bottom:none; line-height:30px; float:left; margin:0 1px 0 0; padding:0;}
#menu ul li a {text-align:center; display:block; padding-left:30px; padding-right:30px; text-decoration:none; color:#F2583E; font-size:11px; font-weight:bold;}
#menu ul li a:hover {background:#F7F3E8; color:#2B3E42; float:left;}

#footer{height:20px; background:#77BED2; padding:15px;}
#footer address{font:13px Verdana, Arial, Helvetica, sans-serif; color:#2B3E42;}</code></pre><br />
<br />
<strong>Como ficou nosso template:</strong><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Como criar um tema para Wordpress" src="http://www.oficinadanet.com.br//imagens/coluna/2760/td_css.png" alt="Como criar um tema para Wordpress" ></div></blockquote><br />
<br />
Como você pode observar a área de conteúdo não aparece. Isso porque não temos conteúdo adicionado e nem definimos uma altura. A primeira parte concluímos. O próximo passo é fatiar o template para wordpress.<br />
<br />
[PG1]<br />
<h2>Fatiando o template para wordpress</h2><br />
Fatiar o tema é dividir cada parte do template em um arquivo. Por exemplo, você pega < html > até o fechamento da div menu e salva como header.php. A div content até seu fechamento, será o index.php.  A div footer ate seu encerramento será salvo como footer.php. É necessário que você tenha o wordpress instalado em sua máquina. Crie uma pasta com o nome do seu tema dentro da pasta themes do wordpress. Crie um novo documento em php e salve-o como header.php. Abra o index.html que criamos anteriormente, e copie de < html > até o fechamento da div menu em seguida cole em header.php.<br />
<br />
<strong>Resultado do header.php:</strong><br />
<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tema para Wordpress, o Básico</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="geral">
    <div id="header">
        <h1><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Marciano Dias</a></h1>
        <p>Aqui fica uma breve descrição</p>
    </div>
    <div id="menu">
        <ul>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
            <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MENU</a></li>
        </ul>
    </div></code></pre><br />
<br />
Agora crie um novo documento em php e salve-o como index.php. Feito isso, copie a div content do template que trabalhamos anteriormente para o index.php. <strong>Segue abaixo o código do index.php:</strong><br />
<pre><code><div id="content"></div></code></pre><br />
<br />
Crie novamente mais um arquivo em php e salve-o como footer.php. Agora copie da div footer ate o fechamento da tag html. <strong>Codigo do footer.php:</strong><br />
<pre><code>    <div id="footer">
        <address>Copyright © 2010. Marciano Dias - Serviços de Internet.</address>
    </div>
</div>
</body>
</html></code></pre><br />
Por ultimo, salve o style.css que criamos anteriormente na pasta de temas. Arquivos que temos até agora na pasta do tema que estamos trabalhando:<br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Como criar um tema para Wordpress" src="http://www.oficinadanet.com.br//imagens/coluna/2760/4.png" alt="Como criar um tema para Wordpress" ></div></blockquote><br />
<br />
Mas o tema ainda não está pronto! Continuando...<br />
<br />
<h2>Header:</h2><br />
Abra o index.php e adicione <strong>< ?  get_header(); ? ></strong> no começo e <strong>< ?  get_footer(); ? ></strong> no fim. Isso funciona como include no php. Isso faz com que chame o header.php e footer.php para o index.php.<br />
<br />
<strong>Veja:</strong><br />
<pre><code><?php get_header(); ?>
    <div id="content"></div>
<?php get_footer(); ?></code></pre><br />
<strong>< ?  get_header(); ? ></strong> - Chama  header.php para o index.php.<br />
<strong>< ?  get_footer(); ? ></strong> - Chama o footer.php para o index.php.<br />
<br />
<strong>Resultado no navegador:</strong><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Como criar um tema para Wordpress" src="http://www.oficinadanet.com.br//imagens/coluna/2760/7.png" alt="Como criar um tema para Wordpress" ></div></blockquote><br />
<br />
Se você acessar a área administrativa do wordpress, você notará que o tema ainda não está disponível para usa-lo em seu blog. Para torna-lo visível em sua lista de temas na área administrativa do wordpress é necessário adicionar os comentários abaixo no inicio do style.css. Veja:<br />
<pre><code>/*
Theme Name: Meu Primeiro Tema
Theme URI: http://www.marcianodias.com.br/
Description: Tema criado no tutorial para o Oficina da Net
Version: 1.0
Author: Marciano Dias
*/</code></pre><br />
<br />
<strong>Agora você pode ativar seu tema.</strong><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Como criar um tema para Wordpress" src="http://www.oficinadanet.com.br//imagens/coluna/2760/5.png" alt="Como criar um tema para Wordpress" ></div></blockquote><br />
<br />
<h2>Formatação CSS:</h2><br />
Como você pode observar agora o template está completinho, porém ainda não está pegando a formatação.<br />
Abra o header.php. Substitua de < !DOCTYPE html ... > até < body > por:<br />
<pre><code><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<?php bloginfo( 'charset' ); # Exibe o conjunto de caracteres ?>
<?php wp_title(); # mostra o titulo do post ou da pagina na barra de títulos do navegador.?>
<?php bloginfo( 'name' ); # mostra o nome definido na instalação do wordpress na barra de títulos. ?>
<?php bloginfo( 'stylesheet_url' ); # isso chama o style.css.?>
<?php bloginfo( 'pingback_url' ); # o pingback envia mensagens quando alguém faz referencia de seu blog.?>
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); # aqui temos uma condição para mostrar a opção de comentários, caso esteja disponível.?>
<?php wp_head(); # chama os scripts de plug-ins. Sem ele seu tema não aceitará plug-ins.</code></pre><br />
<br />
<strong>Agora, vamos pegar o titulo do blog dinamicamente. Para isso dentro da tag h1 adicione:</strong><br />
<pre><code><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_<?php echo home_url( '/' ); ?>']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%3C%3Fphp+echo+home_url%28+%27%26%2347%3B%27+%29%3B+%3F%3E" rel="nofollow" ><?php bloginfo( 'name' ); ?></a></code></pre><br />
<br />
E para pegar a descrição dininamicamente adicione:<br />
<pre><code><?php bloginfo( 'description' ); ?></code></pre><br />
<br />
<strong>Código completo:</strong><br />
<pre><code>    <div id="header">
        <h1><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_<?php echo home_url( '/' ); ?>']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%3C%3Fphp+echo+home_url%28+%27%26%2347%3B%27+%29%3B+%3F%3E" rel="nofollow" ><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </div></code></pre><br />
<br />
<strong>Resultado no navegador:</strong><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Como criar um tema para Wordpress" src="http://www.oficinadanet.com.br//imagens/coluna/2760/td_css.png" alt="Como criar um tema para Wordpress" ></div></blockquote><br />
<br />
<h2>Pegando o menu dinamicamente:</h2><br />
Apague toda a ul, incluindo as li e adicione:<br />
<pre><code><?php wp_page_menu( $args ); ?></code></pre><br />
<br />
Apartir de agora os menus serão pegos dinamicamente, basta criar novas páginas na área administrativa do wordpress para ver o resultado.<br />
Pegando conteúdo das páginas e posts. Para pegar conteúdo adicione o código abaixo dentro da div content:<br />
<pre><code><?php if (have_posts()): while (have_posts()) : the_post();?>
<h1><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_<?php the_Permalink()?>']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%3C%3Fphp+the_Permalink%28%29%3F%3E" rel="nofollow" ><?php the_title();?></a></h1>
<p><?php the_content();?></p>
<?php endwhile; ?>
<?php endif; ?></code></pre><br />
<br />
<strong>Resultado no navegador:</strong><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Como criar um tema para Wordpress" src="http://www.oficinadanet.com.br//imagens/coluna/2760/13.png" alt="Como criar um tema para Wordpress" ></div></blockquote><br />
<br />
<h2>Aplicando CSS do Conteúdo:</h2><br />
Como você pode ter percebido, não há formatação ainda na área de conteúdo. Vamos formatar agora, portanto abra o arquivo style.css.<br />
<pre><code>#content {background:#FFFFFF; padding:10px;}
#content h1 a{font:24px Arial, Helvetica, sans-serif; color:#2B3E42; text-decoration:none; margin:10px 5px 0px 10px;}
#content h1 a:hover{text-decoration:underline;}
#content p{font:13px Verdana, Arial, Helvetica, sans-serif; color:#333333; margin:10px 5px 0px 10px;}</code></pre><br />
<br />
<strong>Resultado:</strong><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Como criar um tema para Wordpress" src="http://www.oficinadanet.com.br//imagens/coluna/2760/td_14.png" alt="Como criar um tema para Wordpress" ></div></blockquote><br />
<br />
Logicamente isso é apenas o seu primeiro passo para o desenvolvimento de temas para wordpress. Você viu aqui como criar o template HTML, como instalar o template no WordPress e como formatar o CSS de cada área no blog.<br />
<br />
O template criado encontra-se disponível para <a onclick="_gaq.push(['_trackEvent', 'link_interno', 'de_post-POSTURI', 'para_url_http://www.oficinadanet.com.br//imagens/coluna/2760/tema-download.zip']);"   target="_blank" rel="nofollow"  href="http://www.oficinadanet.com.br//imagens/coluna/2760/tema-download.zip">download</a>.</p></p><script src="https://painel.m3midia.com.br/lib/prism/prism.js"></script><link rel="stylesheet" type="text/css" href="https://painel.m3midia.com.br/lib/prism/prism.css"></p>
                    </div>                    
                </div>
                <div class="wifl assuntosfim">
                    <div class="box_new_cmt bcmt">
                        <span class="tit_new_cmt">DEIXE SEU COMENTÁRIO</span><span data-post_id="2398" data-url="https://www.oficinadanet.com.br/artigo/wordpress/como_criar_um_tema_para_wordpress" data-tipo="1" data-comentariosnrs="0" id="bt_new_cmt" class="bt_new_cmt">Comente aqui</span>
                    </div>
                    <div class="box_new_cmt btag">
                        <span class="tit_new_cmt">MAIS SOBRE</span>
                        <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2398', 'para_wordpress']);"  href="https://www.oficinadanet.com.br/wordpress" >wordpress</a> <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2398', 'para_tutorial']);"  href="https://www.oficinadanet.com.br/tutorial" >tutorial</a> <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2398', 'para_criando tema']);"  href="https://www.oficinadanet.com.br/criando-tema" >criando tema</a> <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2398', 'para_wordpress template']);"  href="https://www.oficinadanet.com.br/wordpress-template" >wordpress template</a>
                    </div>
                </div>
                <script type="text/javascript">try { _402_Show(); } catch(e) {}</script>
            </div>  
        <div class="bar2 p-rel" id="out_post_barra" data-distance="30" >
            <div class="bar2" id="post_barra" ><!-- /6524261/ON_300x600_LATERAL -->
                <div class='wifl m-b-40'>
                <div id='div-gpt-ad-1519730196190-0' style='height:600px; width:300px;'>
                <script>
                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1519730196190-0'); });
                </script>
                </div></div><div class="wifl m-b-40"><span class="titulo1" ><span>Últimas em Wordpress</span></span><ul class="lst12  wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/microsoft/22003-microsoft-dara-computador-para-professor-que-ensina-informatica-desenhando-em-quadro-negro"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2398', 'pto22003']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22003/01091437703008-t1200x480_750x469_5a98314845a7c_14080.jpg" title="Microsoft dará computador para professor que ensina informática desenhando em quadro negro" alt="Microsoft dará computador para professor que ensina informática desenhando em quadro negro" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Microsoft</span>
                                    <h3 class="tit tit2" >Microsoft dará computador para professor que ensina informática desenh...</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/16532-como-um-dominio-e-hospedagem-pagos-podem-ajudar-seu-blog"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2398', 'pto16532']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/16532/td_hospedagem_14080.jpg" title="Como um domínio e hospedagem pagos podem ajudar seu blog?" alt="Como um domínio e hospedagem pagos podem ajudar seu blog?" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Softwares</span>
                                    <h3 class="tit tit2" >Como um domínio e hospedagem pagos podem ajudar seu blog?</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/16143-novo-plugin-do-facebook-transforma-post-wordpress-em-instant-articles"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2398', 'pto16143']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/16143/13facebook3-master675_14080.jpg" title="Novo Plugin do Facebook transforma post WordPress em Instant Articles" alt="Novo Plugin do Facebook transforma post WordPress em Instant Articles" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Redes sociais</span>
                                    <h3 class="tit tit2" >Novo Plugin do Facebook transforma post WordPress em Instant Articles</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/15523-review-mobiloud-plugin"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2398', 'pto15523']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/15523/capa_14080.jpg" title="Review Mobiloud plugin - A fábrica de Apps" alt="Review Mobiloud plugin - A fábrica de Apps" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Smartphones</span>
                                    <h3 class="tit tit2" >Review Mobiloud plugin - A fábrica de Apps</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/15368-alterando-as-urls-e-o-nome-do-usuario-nas-tabelas-do-wordpress-via-sql"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2398', 'pto15368']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/15368/wordpressmysql_14080.jpg" title="Alterando as URLs e o nome do usuário nas tabelas do Wordpress via SQL" alt="Alterando as URLs e o nome do usuário nas tabelas do Wordpress via SQL" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Softwares</span>
                                    <h3 class="tit tit2" >Alterando as URLs e o nome do usuário nas tabelas do Wordpress via SQL</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/13817-o-que-e-wordpress"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2398', 'pto13817']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/13817/capa-wordpress_14080.jpg" title="O que é Wordpress?" alt="O que é Wordpress?" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Softwares</span>
                                    <h3 class="tit tit2" >O que é Wordpress?</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10763-wordpress-10anos"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2398', 'pto10763']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/10763/td_logo_14080.jpg" title="WordPress completa 10 anos de existência" alt="WordPress completa 10 anos de existência" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Internet</span>
                                    <h3 class="tit tit2" >WordPress completa 10 anos de existência</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10696-apos-yahoo-comprar-tumblr-wordpress-registra-aumento-significativo-de-usuarios"  onclick="_gaq.push(['_trackEvent', 'barra_ultimos', 'pfr2398', 'pto10696']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/10696/wordpress_14080.jpg" title="Após Yahoo comprar Tumblr, WordPress registra aumento significativo de usuários" alt="Após Yahoo comprar Tumblr, WordPress registra aumento significativo de usuários" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Negócios</span>
                                    <h3 class="tit tit2" >Após Yahoo comprar Tumblr, WordPress registra aumento significativo de...</h3>
                                </div>
                            </a>
                        </li></ul></div>
                    <div class="box1 full rss m-b-40" >
                        <span class="tit" >Assine a nossa newsletter</span>
                        <div class="form" >
                            <form
                                    action="https://www.oficinadanet.com.br/cadastro"
                                    method="post"
                                    onsubmit="_gaq.push(['_trackEvent', 'barranewsletter', 'barranewsletter', 'barranewsletter']); return true;">

                                <input type="hidden" value="oficinadanet_rss" name="uri"/>
                                <input type="hidden" name="loc" value="pt_BR"/>
                                <input class="form_campo" type="email" name="email" id="email" placeholder="seu e-mail" >
                                <input class="bt bt1" type="submit" value="OK" >
                            </form>
                        </div>
                    </div><div class="wifl m-b-40"><span class="titulo1" ><span>Últimos reviews</span></span><ul class="lst12  wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/reviewsmartphones/22667-review-galaxy-note-8"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2398', 'pto22667']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22667/capa_14080.jpg" title="Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]" alt="Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Reviews de smartphones</span>
                                    <h3 class="tit tit2" >Review Galaxy Note 8 - O melhor da Samsung, em 2017 [vídeo]</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/zenfone4/22618-review-zenfone-4-max"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2398', 'pto22618']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22618/capa_14080.jpg" title="Review Zenfone 4 Max - é só bateria mesmo? [vídeo]" alt="Review Zenfone 4 Max - é só bateria mesmo? [vídeo]" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Zenfone 4</span>
                                    <h3 class="tit tit2" >Review Zenfone 4 Max - é só bateria mesmo? [vídeo]</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/gadgets/22556-review-moto-power-pack-e-tv-digital"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2398', 'pto22556']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22556/capa_14080.jpg" title="Review Moto Power Pack e TV Digital" alt="Review Moto Power Pack e TV Digital" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Gadgets</span>
                                    <h3 class="tit tit2" >Review Moto Power Pack e TV Digital</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/smartphones/22399-review-samsung-galaxy-a8"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2398', 'pto22399']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22399/capa_14080.jpg" title="Review Galaxy A8 - Quase... [vídeo]" alt="Review Galaxy A8 - Quase... [vídeo]" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Smartphones</span>
                                    <h3 class="tit tit2" >Review Galaxy A8 - Quase... [vídeo]</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/perifericos/22458-review-mouse-corsair-glaive"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2398', 'pto22458']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22458/capa_14080.jpg" title="Review Corsair Glaive - Um ''grande'' mouse, em todos os sentidos" alt="Review Corsair Glaive - Um ''grande'' mouse, em todos os sentidos" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Periféricos</span>
                                    <h3 class="tit tit2" >Review Corsair Glaive - Um ''grande'' mouse, em todos os sentidos</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/smartphones/22315-review-alcatel-a5-max-led-edition"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2398', 'pto22315']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22315/capa_14080.jpg" title="Review Alcatel A5 Max Led Edition" alt="Review Alcatel A5 Max Led Edition" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Smartphones</span>
                                    <h3 class="tit tit2" >Review Alcatel A5 Max Led Edition</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/mouses/22294-review-redragon-dagger"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2398', 'pto22294']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/22294/review-redragon_dagger_14080.jpg" title="Review Redragon Dagger - Um bom projeto mal executado" alt="Review Redragon Dagger - Um bom projeto mal executado" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Mouses</span>
                                    <h3 class="tit tit2" >Review Redragon Dagger - Um bom projeto mal executado</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/reviewsmartphones/20599-review-moto-z2-force-power-edition"  onclick="_gaq.push(['_trackEvent', 'barra_reviews', 'pfr2398', 'pto20599']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/20599/capinha2_14080.jpg" title="Review Moto Z2 Force - Power Edition" alt="Review Moto Z2 Force - Power Edition" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Reviews de smartphones</span>
                                    <h3 class="tit tit2" >Review Moto Z2 Force - Power Edition</h3>
                                </div>
                            </a>
                        </li></ul></div><div class="wifl m-b-40">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ON_BARRA_LATERAL -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-5305121862343092"
     data-ad-slot="1333529744"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>      
        </div>
    </div>
<div class="wifl bottom_pause_post_barra"><div style="float:left;">
<div style="width: 300px; float: left;">
<!-- /6524261/ON_FOOTER -->
<div id="div-gpt-ad-1512402583744-0" style="height:250px; width:300px;">
<script>
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1512402583744-0"); });
</script>
</div>
</div></div>
    <div style="float:left; max-width:750px; margin-left:20px" class="wifl"><span class="titulo1" ><span>O QUE LER EM SEGUIDA</span></span><ul class="lst4 post wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/17738-como-transcrever-uma-gravacao-usando-o-google"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2398', 'pto17738']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Softwares</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/17738/capa-som_200113.jpg" title="Como transcrever uma gravação usando o Google" alt="Como transcrever uma gravação usando o Google" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Como transcrever uma gravação usando o Google</h2>
                                <div class="wifl nfo">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Debora Pricila Silveira</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/13670-veja-como-deixar-o-google-chrome-como-navegador-padrao"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2398', 'pto13670']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Softwares</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/13670/chrome123_200113.jpg" title="Como deixar o Google Chrome como navegador padrão" alt="Como deixar o Google Chrome como navegador padrão" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Como deixar o Google Chrome como navegador padrão</h2>
                                <div class="wifl nfo">
                                    <span class="comment cinza">1 | </span><span class="ass-autor cor2">por Rafaela Pozzebom</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/artigo/1779/tutorial_-_cartao_de_visita_no_corel_draw"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2398', 'pto1485']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Softwares</span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="Criando cartão de visita no Corel Draw" alt="Criando cartão de visita no Corel Draw" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Criando cartão de visita no Corel Draw</h2>
                                <div class="wifl nfo">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Luiz André Júnior</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/11737-criando-uma-camiseta-no-corel-draw-speed-art"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2398', 'pto11737']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Softwares</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/11737/td_camisetacoreslwww_200113.jpg" title="Criando uma camiseta no Corel Draw - Speed-Art" alt="Criando uma camiseta no Corel Draw - Speed-Art" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Criando uma camiseta no Corel Draw - Speed-Art</h2>
                                <div class="wifl nfo">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Piter Fuentes</span></div>
                            </a>
                        </li></ul>
    </div>
</div>  
        <div class="wifl post-bottom1" style="margin:0">
            
        </div>
        
        
        
    </section>
    <div id="box_new_cmt_open" class="box_new_cmt_open">
        <div style="height:100%" class="content1">
            <div id="bt_new_cmt_orelha" class="bt_new_cmt_orelha"><p>COMENTÁRIOS</p></div>
            <div id="bt_new_cmt_orelha_close" class="bt_new_cmt_orelha"><p>COMENTÁRIOS</p></div>

            <div class="titulo1"><span>Comentários</span></div>
            <div class="wifl" style="height:100%" id="box_new_cmt_retorno"></div>
        </div>
    </div>       
</div>
                <script async="async" src="https://api.cazamba.com/03303c1e265cde1d3eac045f1de60862.js" type="text/javascript"></script>
                
                                <div class="wifl" >
                                    <div class="content-fix content10 bg2" >
                                        <!-- /6524261/ON_BLOCOFIM -->
                                        <div id="div-gpt-ad-1489748718845-0" style="height:250px; margin:auto; width:970px;">
                                        <script>
                                        googletag.cmd.push(function() { googletag.display("div-gpt-ad-1489748718845-0"); });
                                        </script>
                                        </div>
                                    </div>
                                </div></div>
                </section>
<footer class="footer wifl" id="footer">
    <div class="corpo">
        <a href="https://www.oficinadanet.com.br" class="logo2"></a>
        <div class="out-menu-footer">
            <ul class="menu-footer lst-footer1 wifl">
                <li><a href="https://www.oficinadanet.com.br/sobre">Sobre</a></li>
                <li><a href="https://www.oficinadanet.com.br/contato">Contato</a></li>
                <li><a href="https://www.oficinadanet.com.br/colunista" >Seja colunista</a></li>
                <li><a href="https://www.oficinadanet.com.br/privacidade" >Política de Privacidade</a></li>
                <li><a href="https://www.oficinadanet.com.br/equipe" >Equipe</a></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><a rel="nofollow" href="https://www.facebook.com/oficinadanet">Facebook</a></li>
                <li><a rel="nofollow" href="https://twitter.com/OficinadaNet">Twitter</a></li>
                <li><a rel="nofollow" href="https://www.youtube.com/user/oficinadanettv">Youtube</a></li>
                <li><a rel="nofollow" href="https://www.instagram.com/oficinadanetoficial/">Instagram</a></li>
                <li><a rel="nofollow" href="https://www.oficinadanet.com.br/rss">RSS</a></li>
            </ul>
        </div>
        <div class="box-m3"  >
            <p class="wifl txt1">Um site do grupo</p>
            <a class="m3midia" href="http://www.m3midia.com.br"></a>
            <p class="wifl txt2">© 2018 <span>M3 Mídia</span></p>
            <p class="wifl txt2">Todos os direitos reservados</p>
        </div>
    </div>
</footer>
            <span title="Ir para o topo" class="top_page" id="top_page" ><span></span></span>
        <script type='text/javascript'>
                var tempo = '1800';
                window.setTimeout('location.reload();', tempo*1000);
                </script>
                <div class="wifl hgt100 blackoverlay" id="blackoverlay"></div>
<div style="display:none" id="flgcomment"></div>
<div id="out_lib" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</div>
<script type="text/javascript">
    
    var vv={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=vv._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=vv._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
    function BV(str){return vv.decode(str);}

    function scrollPageToID(id)
    {
        $('html,body').animate({ scrollTop: $('#'+id).offset().top - ( $(window).height() - $('#'+id).outerHeight(true) ) / 2  }, 700);
    }

    function serializeDataAttr(form)
    {
        var dataarr = new Array();
        for(var i in form.data()) {
            var subarr = new Array();
            subarr['name'] = i;
            subarr['value'] = form.data()[i];
            dataarr.push(subarr);
        }
        return $.param(form.serializeArray().concat(dataarr));
    }

    function testaVazio(campo,comparacao,mensagem,erro)
    {
        if (erro == true) {return true;}
        if (document.getElementById(campo).value == comparacao)
        {
            alert (mensagem);
            document.getElementById(campo).value = "";
            document.getElementById(campo).focus();
            return true;
        }
        else {return false;}
    }
    function testaCheckBox(classe,mensagem)
    {
        erro = true;
        checkboxes = document.getElementsByClassName(classe);

        for(var i=0, n=checkboxes.length; i<n; i++)
        {
            if(checkboxes[i].checked)
                erro = false;
        }

        if(erro == true)
        {
            alert(mensagem);
            checkboxes[0].focus();
            return true;
        }
        else
            return false;
  }
    function ajaxDireto(url,param,retorno,tipo) //usa jquery
    {
        if(!tipo) tipo = "POST"
         $.ajax({
           type: tipo,
           url: url,
           data: param,
           success: function(html){
             $("#"+retorno).html(html);
           }
         });

    }

    function newsletterCad(e,step)
    {
//        alert(step);
//        alert(e);

        if(step == 1)
        {
            alert('1');
            $(e+' .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
            alert('2');
//            $('#news_bb_right_plan').css('left','-306px');
        }
        else
        {
            /*
            ajaxDireto('',$('#newscad_form1').serialize()+'&'+$('#newscad_form2').serialize(),'out_new_cad');
            */
        }
    }

    function populaSelectCidade(ele)
    {
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=populaSelectCidade&sigla='+$(ele).val(),'select_cidade');
    }

    $(document).ready(function (e) {
       var header_height = $("header").height();
       $(window).scroll(function(){
           var scrolltop = $(window).scrollTop();
           if(scrolltop > 0)
               $('#out-img-curso-aberto').css('top',(($(window).scrollTop()/2) *-1) + header_height);
           else
               $('#out-img-curso-aberto').css('top',header_height+'px');
       });
    });

    var scroll_aux      = 0;
    var header_top      = $("#header").offset().top;
    var header_height   = $("#header").outerHeight();
    var window_height   = $(window).height();
    var height_document = $(document).height();

    function fixedMenu()
    {
        var scroll = $(window).scrollTop();

        if( scroll >= (header_top+header_height) )
        {
            if(scroll < scroll_aux )
            {
                $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
            }
            else
            {
                if( (scroll+window_height+20) > height_document )
                {
                    $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
                }
                else
                {
                    var v_tra  = '0.3s';
                    if( scroll <= ( header_top + header_height + 100) )
                        v_tra  = '0s';

                    $('#mov_header').css({'position':'fixed',transition: v_tra,'top':'-'+header_height+'px'});
                }
            }
        }
        else if(scroll <= header_top)
        {
            $('#mov_header').css({'position':'absolute',transition: '0.3s','top':'0px'});

        }
        scroll_aux = scroll;
    }

    function boxHoverSite(act,cic,e)
    {
        var top     = $(e).offset().top+$(e).outerHeight();
        var e_hover = '';

        if($(e).data('box-hover'))
        {
            e_hover = '#'+$(e).data('box-hover')+'_hover';

            switch(act)
            {
                case 2:
                    $('.contr_hov_itens').fadeOut(0);
                    $(e_hover).fadeIn(400);
                    $(e_hover).addClass('contr_hov_itens');
                    boxHoverSite(0,0,e);
                break;
                case 0:
                    if(cic < 5)
                    {
                        var timeBoxHoverSite = setTimeout(function()
                        {
                            cic++;
                            boxHoverSite(0,cic,e);
                        }, 500);
                    }
                    else
                    {
                        clearTimeout(timeBoxHoverSite);
                        if(!$(e_hover).is(":hover") && !$(e).is(":hover") && !$(e_hover+' *').is(":focus"))
                        {
                            $(e_hover).fadeOut(400);
                        }
                        else
                            boxHoverSite(0,0,e);
                    }

                break;
            }
        }
        else
        {
            $('.contr_hov_itens').fadeOut(0);
        }
    }

    function blackoverlay(act)
    {
        if(act)
        {
            $('#blackoverlay').fadeIn(400);
            $('html').addClass('no_scroll');
        }
        else
        {
            $('#blackoverlay').fadeOut(400);
            $('html').removeClass('no_scroll');
        }
    }

    function actAovivo()
    {
        window.location = "";
    }

    function actBodyPago()
    {
        window.open("");
    }

    function actMenuMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_mobile').trigger('classChange');

            if(!$('#menumobile-act').data('post-left'))
            {
                $('#menumobile-act').data('post-left',$('#menumobile-act').css('left'));
            }
            $('#menumobile-act').css('left','0');
            $('#menumobile').css('display','none');
            $('#fechar_menumobile').css('display','block');
        }
        else
        {
            $('#menumobile-act').css('left',$('#menumobile-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_mobile').trigger('classChange');
            $('#menumobile').css('display','block');
            $('#fechar_menumobile').css('display','none');
        }
        blackoverlay(act);
    }

    function actAbreComments(act)
    {
        if(act)
        {
            var post_id        = $('#bt_new_cmt').data('post_id');
            var url            = $('#bt_new_cmt').data('url');
            var tipo           = $('#bt_new_cmt').data('tipo');
            var comentariosnrs = $('#bt_new_cmt').data('comentariosnrs');
            
            if($("#box_new_cmt_retorno").html() == '')
            {
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=getCommentsBox&post_id='+post_id+'&url='+url+'&tipo='+tipo+'&comentariosnrs='+comentariosnrs,'box_new_cmt_retorno');
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id='+post_id,'flgcomment');
            }
            
            $('#box_new_cmt_open').css('right','0');
            $('#bt_new_cmt_orelha').css('display','none');
            $('#bt_new_cmt_orelha_close').css('display','block');
            $('#bt_new_cmt_orelha_close').css('left','-30px');
        }
        else
        {
            var window_width = $(window).width();
            var right        = 'calc(-37% - 15px)';
            
            if(window_width < 1400)
            {
                right = '-330px';
            }
            
            $('#box_new_cmt_open').css('right',right);
            $('#bt_new_cmt_orelha_close').css('display','none');
            $('#bt_new_cmt_orelha').css('display','block');
            $('#bt_new_cmt_orelha').css('left','-43px');
        }
    }
    
    function actPopup(act,tipo)
    {
        if(act == 'fechar')
        {
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome='+tipo+'&valor=1','box_popup');
            $('#box_popup').css('display','none');
            $('#box_popup_big').css('display','none');
            $('#box_popup_mobile').css('display','none');
            blackoverlay();
        }
    }

    function actSmartMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_smart').trigger('classChange');

            if(!$('#smart_filtro_m-act').data('post-left'))
            {
                $('#smart_filtro_m-act').data('post-left',$('#smart_filtro_m-act').css('left'));
            }
            $('#smart_filtro_m-act').css('left','0');
            $('#smart_filtro_m_abre').css('display','none');
            $('#smart_filtro_m_fecha').css('display','block');
            $('#smart_filtro_ud_out').css('display','block');
        }
        else
        {
            $('#smart_filtro_m-act').css('left',$('#smart_filtro_m-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_smart').trigger('classChange');
            $('#smart_filtro_m_abre').css('display','block');
            $('#smart_filtro_m_fecha').css('display','none');
            $('#smart_filtro_ud_out').css('display','none');
        }
        blackoverlay(act);
    }

        function actContatoEmpresa(act,tipo)
    {
        if(act && tipo != 0)
        {

            if(tipo == 1)
                $('#empresa_contato_titulo').html('Entre em contato');
            else
                $('#empresa_contato_titulo').html('Solicite um orçamento');

            $('#hidden_tipo').val(tipo);

            $('#blackoverlay').addClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato').fadeIn(400);
            $('#empresa_contato').height($('#empresa_contato'+' > *').outerHeight());
        }
        else
        {
            $('#empresa_contato').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato_titulo').html('');
        }
        blackoverlay(act);
    }

    function actBuscaDesktop(act)
    {
        $('#busca_clique').toggle();
        $('#busca_input').focus();
        $('#blackoverlay').addClass('blackoverlay_busca_desktop').trigger('classChange');
        blackoverlay(act);
    }

    function actBuscaObjeto()
    {
        $('#box_marca_closed').hide();
        $('#box_marca_busca').show();
        $('.box_marca').css('background-color','#f3661a');
        $('#busca_marca_input').focus();
    }

    function actCorrigirTexto(act,e)
    {
        if($('#modal_corrigir_txt').length == 0)
        {
            $(e).data('corrigir_titulo');
            $("html").append('<div class="modal modal-s block corrigir" id="modal_corrigir_txt" ><span class="load-ico" ></span></div>');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=corrigirTexto&monta=1&corrigir_titulo='+$(e).data('corrigir_titulo')+'¶_email='+$(e).data('para_email'),'modal_corrigir_txt');
        }


        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_corrigir').trigger('classChange');
            $('#modal_corrigir_txt').fadeIn(400);
        }
        else
        {
            $('#modal_corrigir_txt').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_corrigir').trigger('classChange');
        }
        blackoverlay(act);
    }

    function newsletterCad(ele,s)
    {
        if(s == '1')
        {
            var cad_idx = $(ele).data('idx');
            $('#'+cad_idx+'_form2 .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
            $('#'+cad_idx+'_ulcad').css('left',$('#'+cad_idx+'_ulcad').outerWidth()*-1);
//            $('#'+$(ele).data('id_ulout')).css('height',$('#'+cad_idx+'_ulcad .stp2').outerHeight());
        }
        else
        {
            var cad_idx = $(ele).data('idx');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#'+cad_idx+'_form1').serialize()+'&'+$('#'+cad_idx+'_form2').serialize(),$(ele).data('id_ulout'));
        }
    }

    function fixedMenuDiagramado()
    {
        var scrolltop = $(window).scrollTop();

        if(scrolltop >= 350)
            $('.conteudo .out_menu_diagramado').css('top','0');
        else
            $('.conteudo .out_menu_diagramado').css('top','850px');
    };

    $(document).ready(function()
    {

        /*$(function ()
        {
            $(window).scroll(atcFixedOnScroll);
        });*/

        $('.disabled').click(function(e)
        {
           e.preventDefault();
        })

        $('.box_hover').mouseenter(function()
        {
            boxHoverSite(2,0,this);
        });

        $(window).scroll(fixedMenu);
        $(window).scroll(fixedMenuDiagramado);
        fixedMenu();
        fixedMenuDiagramado();
        $(".amenu_diagramado").click(function(){scrollPageToID($(this).attr('href').substring(1));});
        $(".bt_ver_mais").click(function(){ actBtVerMais(this); });
        $(".ver_mais_preco_obj").click(function(){ scrollPageToID('precos'); });
        $('#bt_header_busca').click(function(){ $('#busca_input').focus();});
        $('#smart_filtro_ud_dwn').click(function(){$(".smart_filtro").animate({scrollTop: '+=200px'}, 300);});
        $('#smart_filtro_ud_up').click(function(){$(".smart_filtro").animate({scrollTop: '-=200px'}, 300);});
        $('#mobile_busca').click(function(){ $('#mobile_bf').css('display','block');});
        $('#aovivo').click(function(){ actAovivo(); });
        $('#smart_filtro_m_abre').click(function(){ actSmartMobile(true); });
        $('#bt_new_cmt').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha_close').click(function(){ actAbreComments(false); });
        $('.bt1-comment').click(function(){ actAbreComments(true); });
        $('#busca_clique_open').click(function(){ actBuscaDesktop(true); });
        $('#box_marca_closed').click(function(){ actBuscaObjeto(); });
        $('#smart_filtro_m_fecha').click(function(){ actSmartMobile(false); });
        $('#menumobile').click(function(){ actMenuMobile(true); });
        $('#fechar_menumobile').click(function(){ actMenuMobile(false); });
        $('.fechar_newsletter_big').click(function(){ actPopup('fechar','NEWSBIG'); });
        $('.fechar_youtube_big').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('.fechar_youtube_mobile').click(function(){ actPopup('fechar','YOUTUBEMOBILE'); });
        $('.fechar_rss_big').click(function(){ actPopup('fechar','RSSBIG'); });
        $('.fechar_twitter_big').click(function(){ actPopup('fechar','TWITTERBIG'); });
        $('.fechar_instagram_big').click(function(){ actPopup('fechar','INSTAGRAMBIG'); });
        $('#fechar_newsletter').click(function(){ actPopup('fechar','ONNEWS'); });
        $('#fechar_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $('#popup_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $("#form_envia").click(function(){ submitFormulario(); });
        $("#mostra_fone").click(function(){ $('#empresa_fone').html(BV($('#empresa_fone').data('info'))); $('#mostra_fone').hide(); });
        $(".empresa_contato").click(function(){ actContatoEmpresa(true,$(this).data('tipo'));});
        $('#empresa_contato_fechar').click(function(){ actContatoEmpresa(false,0) });
        $('.act_corrigir_texto').click(function(){ actCorrigirTexto(true,this) });
        $('#btcarregarcomments_disqus').click(function(){ carregaComentariosDisqus() });
        $('#btcarregarcomments_facebook').click(function(){ carregaComentariosFacebook() });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,"1"); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,"2"); });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,'1'); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,'2'); });

        $('#blackoverlay').on('classChange',function()
        {
            $('.blackoverlay_mobile').click(function(){ actMenuMobile(false) });
            $('.blackoverlay_smart').click(function(){ actSmartMobile(false) });
            $('.blackoverlay_cont_empresa').click(function(){ actContatoEmpresa(false,0) });
            $('.blackoverlay_corrigir').click(function(){ actCorrigirTexto(false,'') });
            $('.blackoverlay_busca_desktop').click(function(){ actBuscaDesktop(false)});
        });


        $('.accordion_act1 .i-tit').click(function(e)
        {
            if($(this).prop("tagName") != 'A')
            {
                $(this).addClass('click');
                $('.li-wrapper:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });
                $('.i-tit:not(\'.click\')').removeClass('ativo');

                if(!$(this).hasClass('ativo'))
                {
                    $(this).addClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:$(this).find('+ .li-wrapper > .accordion_act1').outerHeight()}, { duration: 400, queue: false });
                }
                else
                {
                    $(this).removeClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:0},400);
                }
                $(this).removeClass('click');
            }
        });

        $('.accordion_act2 .tit_1').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp1:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_id         = 'wrapper_'+$(this).data('wrap0');
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_1').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                $('.tit_1').removeClass('ativo');
            }
            $(this).removeClass('click');
        });

        $('.accordion_act2 .tit_2').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp2:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            var wrapper1_id = 'wrapper_'+$(this).data('wrap0');
            var wrapper2_id = 'wrapper_'+$(this).data('wrap0')+'_'+$(this).data('wrap1');

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();
                var wrapper2_height     = $('#'+wrapper2_id+' > .accordion_act2 > li').length* $('#'+wrapper2_id+' > .accordion_act2 > li').outerHeight();


                $('#'+wrapper1_id).animate({height:wrapper1_height+wrapper2_height}, { duration: 400, queue: false });
                $('#'+wrapper2_id).animate({height:wrapper2_height}, { duration: 400, queue: false });

                $('.tit_2').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length*$('#'+wrapper1_id+' > .accordion_act2 > li > .tit_2').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_2').removeClass('ativo');
            }
            $(this).removeClass('click');
        });
    });

    var lst_carregamento        = 1;
    var txtstatus               = 'ok';
    var html_ico_load_auto_load = '<span id="icoload_autoload" class="wifl p-rel" ><span class="load-ico" ></span></span>';
    function carregaConteudo()
    {
        if($('#auto_load_wrapper').length > 0)
        {
            var scrollPosition      = window.pageYOffset;
            var windowSize          = window.innerHeight;
            var footerHeightTop     = $('#footer').offset().top;

            var stop_load           = document.getElementById('auto_load_wrapper').getAttribute('data-stop-load');

            if((scrollPosition + windowSize + 800) > footerHeightTop && stop_load == '0')
            {
                if(txtstatus == 'ok')
                {
                    $("#auto_load_wrapper").append(html_ico_load_auto_load);
                    txtstatus = 'timeout';
                    $.ajax({
                        type: 'POST',
                        url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                        data: 'act=autoLoadConteudo&lst_carregamento='+lst_carregamento+'&'+serializeDataAttr($('#auto_load_wrapper')),
                        success: function(html)
                        {
                            $("#auto_load_wrapper").append(html);
                            $("#icoload_autoload").remove();
                            txtstatus = 'ok';
                        }
                    });
                    lst_carregamento++;
                }
            }
        }
    }

    $(function () {
        $(window).scroll(carregaConteudo);
        carregaConteudo();
    });

    $(window).scroll(function() {
        if ($(this).scrollTop() >= 150) {
            $('#top_page').fadeIn(200);
        } else {
            $('#top_page').fadeOut(200);
        }
    });
    $('#top_page').click(function() {
        $('body,html').animate({
            scrollTop : 0
        }, 500);
    });


    if ($(".carousel_destaque")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/slick/slick.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/slick/slick.js", function(){
            $('.carousel_destaque').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                pauseOnHover: true,
                autoplaySpeed: 10000
            });
            setTimeout(function(){
                $('.carousel_destaque').removeClass('carregando');;
            }, 1500);
        });
    }

    if ($(".conteudo_galeria")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.js", function(){
            $('.conteudo_galeria').lightSlider({
           item: 3,
           loop:false,
           slideMove:3,
           easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
           speed:600,
           responsive : [
               {
                   breakpoint:800,
                   settings: {
                       item:3,
                       slideMove:1,
                       slideMargin:6,
                     }
               },
               {
                   breakpoint:480,
                   settings: {
                       item:2,
                       slideMove:1
                     }
               }
           ]
            }).lightGallery({

            });
            $('.out_conteudo_galeria').css('display','block');
        });
    }

    $(function (){

        function countdown()
        {

            if ($(".promo_relogio")[0])
            {
                $(".promo_relogio").each(function( index )
                {
                    clearTimeout(timer_promo);
                    var now         = new Date();
                    var eventDate   = new Date($(this).data('data-fim'));
                    var currentTime = now.getTime();
                    var evenTime    = eventDate.getTime();

                    var remTime = evenTime - currentTime;

                    var sec = Math.floor(remTime / 1000);
                    var min = Math.floor(sec / 60);
                    var hur = Math.floor(min / 60);
                    var day = Math.floor(hur / 24);

                    hur %= 24;
                    min %= 60;
                    sec %= 60;

                    hur = (hur < 10) ? "0" + hur : hur;
                    min = (min < 10) ? "0" + min : min;
                    sec = (sec < 10) ? "0" + sec : sec;

                    hur = parseInt(parseInt(day*24)+parseInt(hur));

                    if(hur > 0 || min > 0 || sec > 0)
                    {
                        $(this).find('.promo_hora').html(hur);
                        $(this).find('.promo_minuto').html(min);
                        $(this).find('.promo_segundo').html(sec);
                    }
                    else
                    {
                        $(this).find('.promo_hora').html('00');
                        $(this).find('.promo_minuto').html('00');
                        $(this).find('.promo_segundo').html('00');
                        $('#sale-relogio'+$(this).data('key')).addClass('tpl2');
                        $('#promo_txt'+$(this).data('key')).html('A oferta expirou');
                    }
                });
                var timer_promo = setTimeout(countdown, 1000);
            }
        }
        countdown();
    });

    </script>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = OneSignal || [];
OneSignal.push( function() {
    OneSignal.setDefaultTitle("Oficina da Net");
    OneSignal.setDefaultNotificationUrl("https://www.oficinadanet.com.br");
    var oneSignal_options = {appId: "c28261c1-6765-4517-bc5f-38bbeb9f2ec3"};
    //oneSignal_options['persistNotification'] = false;
    oneSignal_options['autoRegister'] = true;
    oneSignal_options['welcomeNotification'] = { };
    oneSignal_options['welcomeNotification']['title'] = "Oi. Obrigado pela inscrição =)";
    oneSignal_options['welcomeNotification']['message'] = "As melhores novidades avisaremos por aqui ;) - Siga @oficinadanet";
    oneSignal_options['safari_web_id'] = "web.onesignal.auto.2068edc0-2ec7-4d8d-bc37-83913e3acbff";
    OneSignal.init(oneSignal_options);
});

</script>
        <div class="box_news_big instagram" id="box_popup_big">
            <div class="act fechar_box_popup box_hover p-rel fechar_instagram_big" ></div>
            <strong>Siga o nosso Instagram!</strong>
            <p>Estamos lá também: @oficinadanetoficial</p>
            <span class="botaoinstagram" onclick="_gaq.push(['_trackEvent', 'popseguir', 'instagram', 'instagram']);window.open('https://www.instagram.com/oficinadanetoficial/')">Seguir o Instagram do Oficina da Net</span>
        </div>
        <script type="text/javascript">
            function abreBoxBigOficina()
            {
                $('#box_popup_big').css('display','block');
                //blackoverlay(1);
            }
        </script>
        <script type="text/javascript">setTimeout('abreBoxBigOficina();','30000');</script>
        <script type="text/javascript">
    function actSininho()
    {
        _gaq.push(['_trackEvent', 'sininho', 'sininho', 'sininho']);
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONSININHO&valor=1&tempo=36000','box_sininho');
        setTimeout("document.location = 'https://www.oficinadanet.com.br/novidades'",1000);
    }

    function actAvisoTopo(act)
    {
        switch(act)
        {
            case 'instagram':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONINSTAGRAM&valor=1&tempo=36000','box_instagram');
            break;
            case 'youtube':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONYOUTUBE&valor=1&tempo=36000','box_youtube');
            break;
            case 'user_topo':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONUSERTOPO&valor=1&tempo=36000','box_user_topo');
            break;
        }
    }

    $(document).ready(function()
    {
        $('#sininho').click(function(){ actSininho(); });
        $('#instagram_topo').click(function(){ actAvisoTopo('instagram');});
        $('#youtube_topo').click(function(){ actAvisoTopo('youtube'); });
        $('#user_topo').click(function(){ actAvisoTopo('user_topo'); });
    });

</script>

    <script type="text/javascript">
       setTimeout("$('#box_instagram').fadeIn(1000)",1000);
       setTimeout("$('#box_instagram').fadeOut(1000)",5000);
    </script>
    <link rel="stylesheet" type="text/css" href="https://www.oficinadanet.com.br/_template/css/geral.css?v=760">    </body>
</html>