Blogueiro em Foco #3 – Entrevista com Gustavo Freitas

Tweet

Olá Pessoal, é com muita honra que hoje trago para vocês a terceira entrevista da série Blogueiro em Foco, a série tem sido um sucesso com diversos acessos, recebendo muitos comentários e compartilhamentos nas redes sociais. O entrevistado de hoje é o problogger Gustavo Freitas, dono de diversos projetos de sucesso ele aceitou o meu convite para participar dessa entrevista que com certeza será muito enriquecedora para nós, vamos lá.

→ Acesse Também: Blogueiro em Foco #2 – Entrevista com Adelson Smania

→ Acesse Também: Blogueiro em Foco #1 – Entrevista com Samanta Sammy
→ Acesse Também: Como ganhar dinheiro com o Segredos do Google Adsense

Conte-nos um pouco sobre você!

R: Meu nome é Gustavo Freitas, tenho 40 anos, duas filhas e sou casado há 19 anos. Sou Bacharel em Sistemas de Informação (área de Tecnologia), pós graduado em Planejamento educacional e docência do ensino superior e tenho como atividade principal a administração de meus vários blogs que podem ser conferidos em www.gustavofreitas.net/blogs.

Quando começou o seu interesse pela blogosfera?

R: Em janeiro de 2008 li o livro Wikinomiks – Como a colaboração em massa pode mudar o seu negócio (http://compare.buscape.com.br/wikinomics-como-a-colaboracao-em-massa-pode-mudar-o-seu-negocio-don-tapscott-8520919979.html#precos) e esse livro falava muito sobre colaboração em massa, compartilhamento do conhecimento... Depois de ler o livro entendi que tinha que criar um blog e começar a compartilhar o que eu sabia, na época era profissional de Tecnologia da Informação e comecei a escrever sobre isso. Daí o nome GF Soluções.

Quais foram sua principais dificuldades ao criar o seu primeiro blog?

R: A principal dificuldade foi o total desconhecimento de linguagem de programação. O básico mesmo como HTML e css. Mas rapidamente aprendi e consegui fazer meus projetos se tornarem realidade.

Em meio a essas dificuldades na blogosfera, já pensou em desistir de blogar?

R: Uma dificuldade que quase me fez desistir foi o tempo que eu gastava com meu blog. Não era mais um hobby após o 3º mês, mas não me rendia nada. Gastava muito tempo e não tinha retorno financeiro. Foi ai que resolvi profissionalizar o blog e também a mim.

Quando ganhou dinheiro pela primeira vez com seu blog?

R: Em torno de uns 5 meses após começar o projeto, uns dois meses depois de começar o processo de profissionalização.

Quando decidiu se tornar um problogger?

R: A partir do momento que meus ganhos com a internet estavam muito maiores que meus ganhos com meu emprego público. Em 2009 (fevereiro) isso já acontecia. Em 2011 consegui deixar meu emprego público e trabalhar no meu home Office que construí em minha casa.

O que mudou na sua vida e da sua família após essa decisão?

R: Na minha vida a principal mudança foi não ter que pegar um carro e dirigir mais de 6 quilômetros pra chegar ao trabalho e fazer o trajeto novamente no horário de almoço. Apesar de minha cidade ter pouco mais de 120 mil habitantes, o trânsito está uma loucura e não tenho mais esse stress desnecessário.

Na vida da minha família mudou a questão de me ter agora em casa, assim minha esposa e minhas filhas me vêem mais e não precisam ligar pra conversar comigo.

Como funciona sua rotina como blogueiro profissional?

R: Geralmente acordo as 6:00hs da manhã pra levar minha filha na escola e quando retorno, já começo a trabalhar. Paro para almoçar as 11:20 e retorno as 13:00hs, trabalhando até as 18:00hs.

Isso nos dias de semana. Sábado, domingos e feriados trabalho também, mas procuro diminuir o ritmo.

Nesse período de tempo eu trabalho produzindo conteúdo para meus blogs, analisando estatísticas, planejando estratégias e divulgando os artigos.

Qual a sua principal forma de monetização?

R: No momento minha principal forma de monetização é o Google Adsense e meu Curso Como criar um blog de nicho e ganhar dinheiro na internet.

Atualmente você é autor e administrador de diversos blogs, pretende criar outros?

R: No momento em que respondo essa entrevista, acabei de vender 2 blogs e estou em planejamento pra criar, pelo menos, mais 3.

Recentemente você vendeu alguns de seus blogs, pretende vender mais algum?

R: Sempre estou comprando e vendendo blogs. Crio muitos projetos que tem potencial, mas as vezes o meu tempo não me permite tirar o máximo dele, então prefiro vender pra que outra pessoa possa dar continuidade ao projeto.

Com a sua experiência conte para nós o caminho para se tornar um problogger?

R: O primeiro passo é se profissionalizar. Pense que você será um profissional então é necessário fazer cursos, buscar conhecimentos, seguir os melhores profissionais de sua área de atuação. Depois de obter o conhecimento necessário é o momento de colocar em prática, aprender com seus erros e continuar se aperfeiçoando.

Deixe uma mensagem para os leitores do Personalizar o Blogger!

R: Quero agradecer ao Cláudio Luiz pela oportunidade de falar para os leitores do Personalizar o Blogger. Fica o convite para visitarem e conhecerem meus projetos, principalmente o GF Soluções e o Quero Criar um Blog.

Conclusão

Eu Claudio Luiz, espero que essa entrevista tenha sido enriquecedora para sua vida como blogueiro, e que o exemplo de sucesso do Gustavo Freitas seja de grande influência para sua trajetória na blogosfera.

 

O que achou dessa entrevista? Comente e dê sua opinião.

Siga o Personalizar o Blogger Facebook / Twitter / Google+ / Feed

Continue Lendo →

Widget Barra fixa no topo com postagens recentes

Tweet

Olá pessoal, hoje estarei compartilhando com você um excelente widget, trata-se de uma barra que fica passando as postagens recentes do seu blog. Essa barra fica fixa no topo do blog e desce junto com a navegação do usuário. Ela é um ótimo recurso para você que deseja divulgar as postagens recentes do seu blog ou até mesmo de outro blog, se você tem mais de um blog pode usar essa barra para divulgar seus novos posts e assim conseguir mais visitas. Esse recurso é muito fácil de instalar, basta seguir atentamente o tutorial abaixo.

 

Demonstração

 

→ Acesse Também: Widgets Social estilo Windows 8
→ Acesse Também: Widget com espaço para anunciar em seu blog
→ Acesse Também: Widget Postagens Recentes com efeito rotativo nas imagens

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.

Instalando o Jquery

Acesse o Painel do Blogger, clique na guia Modelo, Editar Html e procure pela tag </head> e antes dela cole o código a seguir e salve.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

Instalando o recurso

Acesse mais uma vez o painel do blogger, clique na guia Layout, adicionar Gadget do tipo Html/JavaScript e cole todo o código a seguir e salve.

<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json) {
    var sHeadLines;
    var sPostURL;
    var objPost;
    var sMoqueeHTMLStart;
    var sMoqueeHTMLEnd;
    var sPoweredBy;
    var sHeadlineTerminator;
    var sPostLinkLocation;try {
        sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";

        if (nWidth) {
            sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
        } else {
            sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
        }
        if (nScrollDelay) {
            sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
        }
        if (sDirection) {
            sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";

            if (sDirection == "left" || sDirection == "right") {
                sHeadlineTerminator = "&nbsp;&nbsp;";
            } else {
                sHeadlineTerminator = "\<br/\>";
            }
        }
        if (sOpenLinkLocation == "N") {
            sPostLinkLocation = " target= \"_blank\" ";
        } else {
            sPostLinkLocation = " ";
        }
        sMoqueeHTMLEnd = "\</MARQUEE\>"

        sHeadLines = "";

        for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
            var objPost = json.feed.entry[nFeedCounter];

            if (nFeedCounter == json.feed.entry.length) break;

            for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
                if (objPost.link[nCounter].rel == 'alternate') {
                    sPostURL = objPost.link[nCounter].href;
                    break;
                }
            }
            sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
        }
        sPoweredBy = "<a tareget =\"_blank\" href=\"http://gj37765.blogspot.com/2011/06/auto-scrolling-recent-posts-widget-for.html\"\>Instale esse Widget\</a\> - \<a tareget =\"_blank\" href=\"http://www.personalizaroblogger.com.br\"\>Personalizar o Blogger\</a\>";

        if (sDirection == "left") {
            sHeadLines = sHeadLines + "&nbsp;&nbsp;" + sPoweredBy;
        } else if (sDirection == "right") {
            sHeadLines = sPoweredBy + "&nbsp;&nbsp;" + sHeadLines;
        } else if (sDirection == "up") {
            sHeadLines = sHeadLines + "\<br/\>" + sPoweredBy;
        } else {
            sHeadLines = sPoweredBy + "\<br/\>" + sHeadLines;
        }
        document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
    } catch (exception) {
        alert(exception);
    }
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
function makingdifferent_stickybar()  {
var mdwh = jQuery(window).height();
var mdpph = jQuery("#md-stickybar").height();
var mdfromTop = jQuery(window).scrollTop()+0;
jQuery("#pb-stickybar").css({"top":mdfromTop});
}jQuery(window)
.scroll(makingdifferent_stickybar)
.resize(makingdifferent_stickybar)
//alert(jQuery.cookie('sreqshown'));
//var mdww = jQuery(window).width();
//var mdppw = jQuery("#md-stickybar").width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 0;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery("#md-stickybar").height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery("#pb-stickybar").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show();      
jQuery("#pbclose").click(function() {
jQuery("#pb-stickybar").animate({opacity: "0", left: "-1500"}, 1500).show(); });});
//]]>
</script>

<style>#pb-stickybar{background:#000000 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#pb-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#pb-stickybar a:hover{text-decoration:underline;}#pb-stickybar p{margin:0;list-style:none;}#pb-stickybar img{vertical-align:middle;margin-right:6px;}#pbclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style>

<div id='pb-stickybar'><script>var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style=""  src="LINK DO BLOG SEU BLOGfeeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script> <noscript></noscript><a href="#" id="pbclose"  onclick="return false;"><img src="http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png"/></a></div id='md-stickybar'>

OBS: Não esqueça de colocar o link do seu blog no local destacado em vermelho, lembrando que o link deve conter o http:// e aquela barrinha do final, siga o exemplo abaixo.

Link errado: www.seublog.com.br
Link correto: http://www.seublog.com.br/

 

O que achou deste recurso? Tem alguma dúvida?
Comente e deixa sua opinião.

Siga o Personalizar o Blogger Facebook / Twitter / Google+ / Feed

Continue Lendo →

Widget de busca com botões para as redes sociais e Feeds

Tweet

Olá Pessoal, hoje estarei ensinando a vocês como adicionar em seu blog um excelente widget para redes sociais com um campo de busca. Esse widget é bem elegante e chama atenção do seu leitor para os seus perfis das redes sociais, aumentando assim as chances de fidelização através das redes sociais e até mesmo dos feeds. Fidelizar um leitor é extremamente importante, por isso você deve oferecer recursos como esse widget, assim facilitando o interesse do leitor na fidelização. Se você deseja utilizar esse widget, basta seguir atentamente o tutorial abaixo, ele é muito simples de se adicionar, vamos lá.

 

Demonstração

 

→ Acesse Também: Ganhe dinheiro usando o programa de afiliados Netaffiliation
→ Acesse Também: Como ganhar dinheiro com o Segredos do Google Adsense
→ Acesse Também: E-book grátis - Erros que todo blogueiro deve evitar

Acesse o painel do blogger, cliquem Layout, adicionar Gadget e escolha um gadget do tipo Html/JavaScript e adicione o código abaixo e salve.

<style>
#search {
border: 1px solid
#DDD;
background:
white url(http://1.bp.blogspot.com/-t-XnlJf5iIE/Tu_lRFYsvkI/AAAAAAAABqc/qtXhiIEeTpY/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color:
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>
<div id="search" title="Type and hit enter">
<form action="/search" id="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Busca&quot;;}" onfocus="if (this.value == &quot;Busca&quot;) {this.value = &quot;&quot;;}" type="text" value="Busca" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="Assine rss feed" src="http://3.bp.blogspot.com/-hEgZHK7jgaU/TzwJGEghh9I/AAAAAAAAAf4/GgLBaLyxAAc/s1600/rss.png" /><a href="http://feeds.feedburner.com/NOME DO FEED" target="_blank">Subscreva via RSS Feed</a>
</div>
                       
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="Seguir no Twitter" src="http://1.bp.blogspot.com/-w3rrG7CcZOg/TzwJGr77q-I/AAAAAAAAAgA/uFsohpve_Tc/s1600/twitter.png" title="Seguir no Twitter" /><a href="http://twitter.com/USUÁRIO DO TWITTER target="_blank">Siga-nos no Twitter</a>
</div><div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="Torne-se um fã" src="http://2.bp.blogspot.com/-wv3o68M5bGk/TzwJFto27GI/AAAAAAAAAf0/Grrv9oHANiw/s1600/facebook.png&#39; title="Torne-se um fã" /><a href="URL DA FANPAGE FACEBOOK" target="_blank">Siga-nos no Facebook</a>
</div><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="google plus" src="http://4.bp.blogspot.com/-oq9HRonnmDk/T2jQsYl_PRI/AAAAAAAABOI/9OB4NGbN0y8/s1600/g-plus-logo.png" /><a href="URL DO GOOGLE+" target="_blank">Siga-nos no Google+</a>
</div>

OBS: Não esqueça de alterar as partes destacadas em vermelho pelo que é pedido.

 

O que achou deste widget? Tem alguma dúvida?
Comente e se expresse.

Siga o Personalizar o Blogger Facebook / Twitter / Google+ / Feed

Continue Lendo →

E-book Grátis – Série empreendedorismo

Tweet

Olá Pessoal, quero informar que este é um Guest Post enviado por Alessander Raker do blog Descontruir. Se você deseja ter um artigo publicado aqui, basta entrar em contato através do nosso formulário de contato.

→ Acesse Também: E-book grátis - Erros que todo blogueiro deve evitar
→ Acesse Também: Como ganhar dinheiro com o Segredos do Google Adsense
→ Acesse Também: Quais as 5 vantagens de anunciar em blogs?

Guest Post de Alessander Raker

Queridos amigos do Personalizar o Blogger tudo bem?

A convite do Claudio Luiz vim trazer um presente a vocês. Meu nome é Alessander Raker e fundei o blog DESCONSTRUIR para ajudar micro e pequenos empreendedores a alavancar ou criar suas empresas/projetos. Trabalho desde 2007 com marketing e pude ajudar diversas empresas. A experiência que obtive repassei em um ebook gratuito que tem por tema:

→ SÉRIE EMPREENDEDORISMO - PRIMEIROS PASSOS

Este e-book poderá ser baixado gratuitamente através do link acima e espero que ele lhe ajude a alavancar sua empresa ou projeto.

Agradeço ao Claudio Luiz pelo espaço e aguardo todos no DESCONSTRUIR para obterem este presente

Um forte abraço amigos do Personalizar o Blogger

 

O que acharam deste e-book? Já baixou?
Comente e dê sua opinião.

Siga o Personalizar o Blogger Facebook / Twitter / Google+ / Feed

Continue Lendo →

Widget Formulário de Contato estilo Popup

Tweet

Olá Pessoal, hoje estarei ensinando a vocês como adicionar em seu blog um widget de formulário de contato estilo popup, esse é um recurso que uso aqui no blog a bastante tempo e o mesmo é bastante pedido, por isso atendendo a esses pedidos hoje publico esse tutorial. Sabemos que um formulário de contato é muito importante para o blog e ajuda muito a estreitar a relação entre leitor e blogueiro, por isso recomendo fortemente o uso de um formulário de contato, para usa-lo em estilo popup, basta seguir o tutorial abaixo.

→ Acesse Também: Novidades Blogger: Novo Gadget formulário de Contato
→ Acesse Também: Como ganhar dinheiro com o Segredos do Google Adsense
→ Acesse Também: Como usar os comentários do Blogger e Google+ ao mesmo tempo

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.

Passo 1 - Adicionando o CSS

Acesse o painel do blogger, clique na guia Modelo, Editar Html e procure por skin, logo em seguida clique na setinha preta ao lado esquerdo para expandir o código CSS e logo em seguida procure por ]]></b:skin> e antes da tag encontrada cole o código a seguir.

.feedcss1 {
position: fixed;
box-shadow: 0 0 6px #808080;
bottom: -1px;
right: 1140px;
cursor: pointer;
z-index: 996;
-webkit-box-shadow: 0 0 6px #808080;
}
.feedcss2 {
color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: #000; *cor de fundo do botão
font-size: 14px;
text-align: center;
border-radius: 2px;
height: 27px;
line-height: 27px;
padding: 0 8px;
display: inline-block;
border-image: initial;
}

Passo 2 – Adicionando o Script

Ainda dentro do template do seu blog, procure pela tag </head> e antes dela cole o código a seguir.

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.fancyZoom=function(p){var p=p||{};var m=p&&p.directory?p.directory:"http:/";var e=false;if(a("#zoom").length==0){var f=a.browser.msie?"gif":"png";var k='<div id="zoom" style="display:none;">                   <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;">                     <tbody>                       <tr>                         <td class="tl" style="background:url('+m+"/2.bp.blogspot.com/-hvj7gw9QUTs/UBQ_yauOavI/AAAAAAAAIOc/le_uDsGN7Lc/s1600/tl."+f+') 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" />                         <td class="tm" style="background:url('+m+"/4.bp.blogspot.com/-vPmdRlLd2fg/UBQ_zKZKeOI/AAAAAAAAIOk/5A_-A7RTvxI/s1600/tm."+f+') 0 0 repeat-x; height:20px; overflow:hidden;" />                         <td class="tr" style="background:url('+m+"/1.bp.blogspot.com/-oHxmf05ktm0/UBQ_0J9SQaI/AAAAAAAAIOs/nR3jnzSh5tw/s1600/tr."+f+') 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" />                       </tr>                       <tr>                         <td class="ml" style="background:url('+m+"/4.bp.blogspot.com/-APEGAmogf5Q/UBQ_wp3fmEI/AAAAAAAAIOM/bb1s2R7KN6M/s1600/ml."+f+') 0 0 repeat-y; width:20px; overflow:hidden;" />                         <td class="mm" style="background:#fff; vertical-align:top; padding:10px;">                           <div id="zoom_content">                           </div>                         </td>                         <td class="mr" style="background:url('+m+"/3.bp.blogspot.com/-WvlzpnzlYJc/UBQ_xZBkRpI/AAAAAAAAIOU/YC0V1AKuNe4/s1600/mr."+f+') 100% 0 repeat-y;  width:20px; overflow:hidden;" />                       </tr>                       <tr>                         <td class="bl" style="background:url('+m+"/1.bp.blogspot.com/-kbRw-jmlLg8/UBQ_tTG9nHI/AAAAAAAAINs/OXSy33swjos/s1600/bl."+f+') 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" />                         <td class="bm" style="background:url('+m+"/2.bp.blogspot.com/-c5T65-OgU7Y/UBQ_uVfMb3I/AAAAAAAAIN0/sqymdxz4gBw/s1600/bm."+f+') 0 100% repeat-x; height:20px; overflow:hidden;" />                         <td class="br" style="background:url('+m+"/2.bp.blogspot.com/-3D81xvq7yLI/UBQ_vKg8OiI/AAAAAAAAIN8/Zm4z_gXTFVg/s1600/br."+f+') 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" />                       </tr>                     </tbody>                   </table>                   <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;">                     <img src="'+m+"/1.bp.blogspot.com/-21niTSpnbsc/UBQ_v3HKu8I/AAAAAAAAIOE/xM_TU0EBLlU/s1600/closebox."+f+'" alt="Close" style="border:none; margin:0; padding:0;" />                   </a>                 </div>';a("body").append(k);a("html").click(function(q){if(a(q.target).parents("#zoom:visible").length==0){l();}});a(document).keyup(function(q){if(q.keyCode==27&&a("#zoom:visible").length>0){l();}});a("#zoom_close").click(l);}var o=a("#zoom");var j=a("#zoom_table");var i=a("#zoom_close");var h=a("#zoom_content");var b=a("td.ml,td.mm,td.mr");this.each(function(q){a(a(this).attr("href")).hide();a(this).click(n);});return this;function n(w){if(e){return false;}e=true;var q=a(a(this).attr("href"));var u=p.width;var v=p.height;var r=window.innerWidth||(window.document.documentElement.clientWidth||window.document.body.clientWidth);var E=window.innerHeight||(window.document.documentElement.clientHeight||window.document.body.clientHeight);var C=window.pageXOffset||(window.document.documentElement.scrollLeft||window.document.body.scrollLeft);var B=window.pageYOffset||(window.document.documentElement.scrollTop||window.document.body.scrollTop);var F={width:r,height:E,x:C,y:B};var r=(u||q.width())+60;var E=(v||q.height())+60;var z=F;var A=Math.max((z.height/2)-(E/2)+B,0);var D=(z.width/2)-(r/2);var s=w.pageY;var t=w.pageX;i.attr("curTop",s);i.attr("curLeft",t);i.attr("scaleImg",p.scaleImg?"true":"false");a("#zoom").hide().css({position:"absolute",top:s+"px",left:t+"px",width:"1px",height:"1px"});g();i.hide();if(p.closeOnClick){a("#zoom").click(l);}if(p.scaleImg){h.html(q.html());a("#zoom_content img").css("width","100%");}else{h.html("");}a("#zoom").animate({top:A+"px",left:D+"px",opacity:"show",width:r,height:E},500,null,function(){if(p.scaleImg!=true){h.html(q.html());}d();i.show();e=false;});return false;}function l(){if(e){return false;}e=true;a("#zoom").unbind("click");g();if(i.attr("scaleImg")!="true"){h.html("");}i.hide();a("#zoom").animate({top:i.attr("curTop")+"px",left:i.attr("curLeft")+"px",opacity:"hide",width:"1px",height:"1px"},500,null,function(){if(i.attr("scaleImg")=="true"){h.html("");}d();e=false;});return false;}function c(s){a("#zoom_table td").each(function(u){var t=a(this).css("background-image").replace(/\.(png|gif|none)\"\)$/,"."+s+'")');a(this).css("background-image",t);});var r=i.children("img");var q=r.attr("src").replace(/\.(png|gif|none)$/,"."+s);r.attr("src",q);}function g(){if(a.browser.msie&&parseFloat(a.browser.version)>=7){c("gif");}}function d(){if(a.browser.msie&&a.browser.version>=7){c("png");}}};})(jQuery);
//]]>
</script>

Passo 3 – Criando o formulário

Aqui é onde devemos criar o formulário de contato, existem diversos serviços para criação de formulário de contato, mas eu uso e recomendo o Jotform, aqui no PB já publiquei um tutorial ensinando a usar o serviço, se desejar pode conferir no artigo abaixo, lembrando que o código do formulário deve ser um IFRAME.

→ Acesse: Crie um formulário de contato para seu blog com o JotForm

Passo 4 – Adicionando o recurso

Depois de tudo instalado corretamente, vamos adicionar o HTML que chamará todas as funções da popup, para isso basta adicionar um Gadget do tipo Html/JavaScript e colar o código a seguir.

<div href="#feedback" id="idfb" class="feedcss1" tabindex="0">
<a class="feedcss2">Fale Conosco</a>
</div>
<div id="feedback">
  <div align="center" class="style1">BREVE DESCRIÇÃO</div>
  <p>IFRAME DO FORMULÁRIO DE CONTATO</p>
</div>
<script type="text/javascript">
    $('#idfb').fancyZoom();
</script>

OBS: Existem três partes do código que estão destacadas em vermelho, a primeira esta no CSS (passo 1).

#000 – Troque pela cor de fundo do botão.
BREVE DESCRIÇÃO – Adicione uma descrição antes do formulário (opcional).
IFRAME DO FORMULÁRIO DE CONTATO – Adicione o código do formulário criado.

Conclusão

Espero que vocês tenham dostado desse widget, em breve estarei publicando outros recursos e atendendo ao pedidos que são muitos.

 

O que achou desse recurso? Comente e dê sua opinião.

Siga o Personalizar o Blogger Facebook / Twitter / Google+ / Feed

Continue Lendo →

Conheça o blog Foco em Tecnologia – A Tecnologia a nosso alcance

Tweet

A tecnologia esta cada vez mais presente em nossas vidas seja no trabalho, escola, faculdade e até mesmo para entretenimento, cada dia que passa estamos mais conectados a ela. E o mercado tecnológico mobile esta crescendo a todo vapor, a uma disputa enorme das grandes empresas na fabricação de smartphones, tablets, notebooks e outros recursos voltados para essa área tecnológica. Por isso, nós blogueiros, devemos estar atento para esse mercado e acompanhar sempre as novidades e dicas do mesmo, afinal, estamos inteiramente envolvidos com a tecnologia, independente do nicho em que atuamos, e por isso, devemos evoluir juntamente com ela, para que possamos extrair o que há de melhor para nossos projetos, por isso recomendo que acompanhe o blog "Foco em Tecnologia".

Sobre o Foco em Tecnologia

O "Foco em Tecnologia" é um site/blog totalmente voltado para a tecnologia móvel, nele são publicados artigos sobre Tablets, Notebooks, Smartphones, Tutoriais para Android e IOS, Reviews de novos aparelhos, Aplicativos, Dicas de configuração, Notícias e muito mais. O Foco em Tecnologia ainda é um blog recente (desde 10/04/13), mas que tem um ótimo conteúdo e foi criado por Claudio Luiz.

Sobre o Autor

Claudio Luiz é Analista de Sistema, Administrador de Redes, Web Designer e Blogueiro. Um grande admirador e usuário constante da Tecnologia Móvel, com mais de seis anos trabalhando no mercado tecnológico, ele tem uma boa experiência e ótimas dicas para os leitores do Foco em Tecnologia.

sete Artigos mais acessados

Mesmo sendo um blog novo, o Foco em Tecnologia conta com um bom número de visitantes diários que estão à procura de informação de qualidade sobre smartphones, tablets, notebooks, dispositivos androids e muito outros assuntos.

Veja os sete artigos mais acessados do Foco em Tecnologia:

1. 4 smartphones baratos que custam até R$ 600

2. 5 novos smartphones lançados em Abril de 2013

3. Dúvidas? Confira 4 ótimos Tablets para se comprar

4. Como deixar seu Smartphone Android mais rápido

5. Tablet Samsung Galaxy Tab 10.1 com Wi-Fi

6. Nokia Lumia 620 com Windows Phone 8

7. Qual a diferença do Galaxy S3 para o Galaxy S4?

Visite o Foco em Tecnologia

Se você gosta de tecnologia móvel e deseja conferir mais sobre o trabalho feito por mim ( Claudio Luiz), recomendo que visite o Foco em Tecnologia e deixe sua opinião aqui nos comentários e também no do próprio blog.

 

Acesse o “Foco em Tecnologia”

 

Visitou o Foco em Tecnologia? O que achou do blog?
Comente e dê sua opinião.

Siga o Personalizar o Blogger Facebook / Twitter / Google+ / Feed

Continue Lendo →