Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 29 de outubro de 2012

    Slider de imagens com efeitos em jQuery

    Bom galera, hoje  vou mostrar como colocar um slidershow em cima dos arquivos aqui no blogger, estou devendo este artigo  só que o tempo é muito corrido pra mim por isso demorei um pouco, vamos lá, é um slider de imagens e tem efeitos Jquery, e tem também um controle no canto superior esquerdo que mostra qual imagem está mostrando no momento e com botão de pausa no canto direito.


    Vamos ao Tutorial: 


    OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final. 

    1º - Depois clique em na Caixa Expandir Modelos de Widgets.
    2º - aperte as Teclas CTRL+F e procure por: </head>  e cole antes o seguinte código.

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

    <!--[if IE]>
    <style type="text/css">
    .timer { display: none !important; }
    div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
    </style>
    <![endif]-->

    <script type='text/javascript'>
    $(window).load(function() {
    $(&#39;#featured&#39;).orbit({
    advanceSpeed: 5000,
    &#39;bullets&#39;: true,
    &#39;timer&#39; : true,
    &#39;animation&#39; : &#39;horizontal-slide&#39;
    });
    });
    </script>

    <script type='text/javascript'>
    //<![CDATA[
    /*
    * jQuery Orbit Plugin 1.1
    * www.ZURB.com/playground
    * Copyright 2010, ZURB
    * Free to use under the MIT license.
    * http://www.opensource.org/licenses/mit-license.php
    */

    (function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
    x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
    a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
    a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
    d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
    a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
    j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
    //]]>
    </script>

     3º- Agora procure por ]]></b:skin> antes cole o seguinte código,

    /* ORBIT SLIDER
    ----------------------------------------------- */
    #featured {height: 1px; width: 1px; overflow: hidden;}
    div.orbit {
    width: 1px;
    height: 1px;
    position: relative;
    overflow: hidden;
    }

    div.orbit img {
    position: absolute;
    top: 0;
    left: 0;
    }
    div.orbit a img {border: none;}

    div.timer {
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    right:10px;
    opacity: .6;
    cursor: pointer;
    z-index: 1001;
    }

    span.rotator {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: -20px;
    background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/s1600/rotator-black.png);
    background-repeat: no-repeat;
    z-index: 3;
    }

    span.mask {
    display: block;
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    overflow: hidden;
    }

    span.rotator.move {left: 0;}
    span.mask.move {
    width: 40px;
    left: 0;
    background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/s1600/timer-black.png);
    background-repeat: repeat;
    background-position: 0px 0px;
    }

    span.pause {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0px;
    background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/s1600/pause-black.png);
    background-repeat: no-repeat;
    z-index: 4;
    opacity: 0;
    }

    div.timer:hover span.pause,
    span.pause.active,
    div.timer:hover span.pause.active { opacity: 1; }

    div.caption {
    background: #000;
    background: rgba(0,0,0,.6);
    width: 100%;
    z-index: 1000;
    position: absolute;
    bottom:-100px;
    color: #fff;
    padding: 8px 0;
    text-align: center;
    }

    div.caption span {
    padding: 0 10px;
    font-size: 14px;
    text-shadow: 0px 1px 0px rgba(0,0,0,.8);
    margin: 0;
    }
    .orbit-caption { display: none; }

    div.orbit:hover div.slider-nav { display: block; }
    div.slider-nav { display: none; }
    div.slider-nav span {
    width: 33px;
    height: 33px;
    text-indent: -9999px;
    position: absolute;
    z-index: 1000;
    top: 43%;
    cursor: pointer;
    }

    div.slider-nav span.right {
    background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
    right: 10px;
    }
    div.slider-nav span.left {
    background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/s1600/left-arrow.png);
    left: 10px;
    }

    .orbit-bullets {
    position: absolute;
    z-index: 1000;
    list-style: none;
    top: 10px;
    left: 7px;
    margin: 0;
    padding: 0;
    }

    .orbit-bullets li {
    float: left;
    margin-left: 5px;
    cursor: pointer;
    color: #999;
    text-indent: -9999px;
    background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 7px;
    height: 7px;
    overflow: hidden;
    }

    .orbit-bullets li.active { color: #222; background-position: -7px 0; }

    Va  Layout →Adicionar um Gadgat→ HTml/Javascript e cole o seguinte código.

     <div id='featured'>

    <a href='URL do artigo'><img rel='foto1' src="URL da imagen" style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto1'>descrição do artigo.</span>

    <a href="URL do artigo"><img rel='foto2' src="URL da imagen" style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto2'>Este é um exemplo da descrição do artigo: <a href='URL do artigo' style='color: #fff';'>Tecno Blogger</a></span>

    <a href="URL do artigo"><img rel='foto3' src="URL da  imagen" style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto3' style='text-align:center;'>Descrição do artigo.</span>

    <a href='URL do artigo'><img rel='foto4' src="URL da imagen" style='width:490px; height:238px;'/></a>
    <span class='orbit-caption' id='foto4'>Este é um exemplo da descrição do artigo: <a href='URL do artigo' style='color: #fff';'>Tecno Blogger</a></span>

    </div>

     Para configurar o tamanho basta substituir o numero em azul pelo tamanho que deseja width:490px; height:238px pelo tamanho que deseja

    Salve e pronto,
     
    28 de outubro de 2012

    Botão de paginação estilo youtube

    Bom galera hoje vou encinar a vocês como personalizar o botão de paginação do seu blog,  esse estilo é muito elegante e são usados no Youtube, no Blogger e atpe mesmo no Google+  e agora usado também aqui no TB, tem efeitos CSS, bordas arredondadas, sombra e etc..., veja a imagem de exemplo abaixo:



    OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final.

    Vamos o Tutorial:



    1º- Clique em Editar HTML e expandir modelos de widgets.
    2º- Aperte Ctrl + F e procure por ]]></b:skin> e cole antes o  seguinte código.

    /*Botones en los enlaces de Navegación*/
    a.home-link, a.blog-pager-newer-link, a.blog-pager-older-link {
    display:inline-block;
    border:1px solid #DDD;
    border-radius:3px;
    text-shadow:0 1px 1px #fff;
    text-decoration:none;
    font: bold 11px Sans-Serif;
    padding:6px 10px;
    white-space:nowrap;
    vertical-align:middle;
    color: #666;
    background: #F1F1F1;
    }
    a.home-link:hover, a.blog-pager-newer-link:hover, a.blog-pager-older-link:hover, a.home-link:focus, a.blog-pager-newer-link:focus, a.blog-pager-older-link:focus {
    border-color: #999;
    background: -webkit-linear-gradient(top, white, #E0E0E0);
    background: -moz-linear-gradient(top, white, #E0E0E0);
    background: -ms-linear-gradient(top, white, #E0E0E0);
    background: -o-linear-gradient(top, white, #E0E0E0);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    }
    a.home-link:active, a.blog-pager-newer-link:active, a.blog-pager-older-link:active {
    border: 1px solid #AAA;
    border-bottom-color: #CCC;
    border-top-color: #999;
    -webkit-box-shadow: inset 0 1px 2px #aaa;
    -moz-box-shadow:inset 0 1px 2px #aaa;
    box-shadow:inset 0 1px 2px #aaa;
    background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);
    background:-moz-linear-gradient(top, #E6E6E6, gainsboro);
    background:-ms-linear-gradient(top, #E6E6E6, gainsboro);
    background:-o-linear-gradient(top, #E6E6E6, gainsboro);
    }

    Visualize e se tiver certinho salve.
    27 de outubro de 2012

    Mangos: Template magazine

    Bom galera começaremos hoje com uma serie de templates para seu blog, os templates por enquanto não serão desenvolvidos por mim, sei que é chato procurar pelo layout perfeito e por esse motivo para facilitar a vida de vocês eu irei postar os templates mais profissionais no meu ponto de vista que acho navegando pela net e o melhor de tudo gratis, e hoje começaremos com um elegante e com os principais hacks que um blog de sucesso precisa vale a pena conferir.


       Demo            Download

    25 de outubro de 2012

    Gadget de anunciantes com efeitos css3

    Bom galera ainda não falei em mometização de blog e nem vou falar muito, por motivos óbvios que é está começando agora e não tenho experiências neste assunto mas uma das melhores formas que já pude notar é os anunciantes direto, para conquistar esse tipo de anunciante não basta apenas entrar no Blogger ou qualquer outra plataforma e postar qualquer coisa, devemos conquistar cada um deles, isso começa primeiro com a aparença do seu blog por isso vou mostrar um gadget de anunciantes com efeitos em CSS3.



    OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final. 

    Vamos o tutorial:

    1º- Clique em Editar HTML e expandir modelos de widgets.
    2º- Aperte Ctrl + F e procure por ]]></b:skin> e cole antes o  seguinte código.
    .redondeado {
    border-radius: 50%; /* Borda redondado */
    box-shadow: 0px 0px 15px #000; /* Sombra */
    padding:0;
    border:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .redondeado:hover {
    box-shadow: 0; /* Com isso eliminamos a  sombra */
    border-radius: 0; /* Com isso eliminamosa borda redondado */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }
    3º- Layout →Adicionar um Gadgat→ HTml/Javascript e cole o  seguinte código onde deseja

    <div class="ads">
    <a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a>
    <a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a>
    <a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a>
    <a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a>
    </div>

     Em Azul ficará a URL do anunciante e em vermelho a URL da imagem ( recomendamos tamanho 125x125)

    Agora salve. 

    Botões de compartilhar com efeitos para seu blog

    Olá galera no artigo anterior eu ensinei como colocar um menu de redes sociais animado com css, hoje mais um vez vamos falar de redes sociais, mas dessa vez são botões de compartilhamento completo com efeito de opacidade,  ótima opção para o leitor dividir um artigo com seus amigos e deixar o blog com outro visual, claro que sem perder o costume recomendo que faça um backup do layout.

    Foto demostrativa

    Ver demostração

    1º- Clique em Editar HTML e expandir modelos de widgets.
    2º- Aperte Ctrl + F e procure por <div class='post-footer-line post-footer-line-3'>  cole Abaixo o seguinte código.

    <style type='text/css'>
    .custom_images ul {display:inline; list-style:none}
    .custom_images ul li {float:left; margin-right:1px}
    </style>
    <div class='addthis_toolbox'>
    <div style='margin: 50px 0px 10px; font-size: 30px;'>Compartir este Post</div>
    <div class='custom_images'>
    <span class='fade'><ul>
      <li><a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='57' src='https://lh3.googleusercontent.com/-ErgrNe7VaTM/T4ywntBsxGI/AAAAAAAAJHA/79YM4bBqnf4/s57/Facebook%2520alt%25202.png' width='57'/></a></li>
      <li><a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='57' src='https://lh5.googleusercontent.com/-jZW7xfQfo5c/T4ywo5r5yBI/AAAAAAAAJHM/4ZtK0i8IXyA/s57/Twitter%2520alt%25204.png' width='57'/></a></li>
      <li><a class='addthis_button_google_plusone_share'><img alt='Share to Google+' border='0' height='57' src='https://lh5.googleusercontent.com/-l682ZOmTPl8/T4ywn1Z13TI/AAAAAAAAJG8/ncHs61veQOo/s57/Google%252B%2520alt%25202.png' width='57'/></a></li>
      <li><a class='addthis_button_stumbleupon'><img alt='Share to Stumble Upon' border='0' height='57' src='https://lh4.googleusercontent.com/-OBxyCfQlXV4/T4ywonzZx6I/AAAAAAAAJHI/UBRTcapYwCw/s57/StumbleUpon%2520alt.png' width='57'/></a></li>
      <li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png' width='57'/></a></li>
      <li><a class='addthis_button_blogger'><img alt='Share to Blogger' border='0' height='57' src='https://lh6.googleusercontent.com/-DkPVHUpO5Mc/T4y73abYX4I/AAAAAAAAJH0/1xfolEU-Y_k/s57/Google%2520Blogger.png' width='57'/></a></li>
      <li><a class='addthis_button_email'><img alt='Share to Email' border='0' height='57' src='https://lh4.googleusercontent.com/-CxGRg2HeAXc/T4y73bmCVAI/AAAAAAAAJHw/gaA6Y7GwQZU/s57/Mail%2520alt.png' width='57'/></a></li>
      <li><a class='addthis_button_yahoomail'><img alt='Share to Yahoo Messenger' border='0' height='57' src='https://lh6.googleusercontent.com/-z9ucAlSwZ1o/T4y-uaIEpNI/AAAAAAAAJIc/YL6sPfqvFkk/s57/Yahoo%2521%2520alt%25201.png' width='57'/></a></li>
      <li><a class='addthis_button_more'><img alt='More...' border='0' height='57' src='https://lh3.googleusercontent.com/-R_-TACJvUQY/T4y73dnBoTI/AAAAAAAAJH4/KWAUNXbnq8A/s57/Share%2520alt%25201.png' width='57'/></a></li>
    </ul></span>
    </div>
    </div>
     Obs: o numero 57 destacado de vermelho é o tamanho do icone, troque pelo tamanho que deseja

    3º- Agora procure por </body> e logo a cima cole o seguinte código.
    <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=nguoiaolam' type='text/javascript'/> 
    Salve e pronto

    24 de outubro de 2012

    Menu de redes sociais animado com css3

    Olá queridos leitores, o blog com poucos dias de vida já vem ganhando elogios bacanas de quem passa por aqui e fico muito satisfeito em ver que meu trabalho está agradando vocês, pelo menos é o que eu acho. Então por isso vou presenteá-los com um menu de redes sociais animados com css3, ótimo para dar um estilo diferente em seu blog, Antes recomendo que Faça um bakup deu seu layout caso ocorra algum erro terá como recuperá-lo.  

    Clique aqui e veja demostração



      Vamos ao Tutorial.

    1º- Clique em Editar HTML e expandir modelos de widgets.
    2º- Aperte Ctrl + F e procure por ]]></b:skin> e cole antes o seguinte código.


    }
    .nav-tt{
     padding: 50;
     width: 70%;
     height: 70px;
     margin: 80px auto 30px auto;
    }
    .nav-tt li{
     float: left;
     list-style: none;
    }
    .nav-tt li a{
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 2px;
        outline: none;
     position: relative;
     z-index: 2;
        text-indent: -9000px;
        text-decoration: none;
    }
    .nav-tt li .gplus{
        background: url(https://lh4.googleusercontent.com/-4cFkVuK-J9o/UHxDNROuW2I/AAAAAAAAElY/abNRRK-8Qqc/s128/google_plus.png) no-repeat;
    }
    .nav-tt li .twitter{
        background: url(https://lh4.googleusercontent.com/-wfBGqdU25u0/UHxDPNm_SgI/AAAAAAAAEl4/7k_oJBtjSJY/s128/twitter_1.png) no-repeat;
    }
    .nav-tt li .pinterest{
        background: url(https://lh3.googleusercontent.com/-qyf8onE2vGQ/UHxDOOke6YI/AAAAAAAAElo/2fVKKCD2Kvw/s128/pinterest.png) no-repeat;
    }
    .nav-tt li .facebook{
        background: url(https://lh6.googleusercontent.com/-MJZ3ppOsD3g/UHxDNlVHuxI/AAAAAAAAElg/k8f5b_DVM4E/s128/fb_1.png) no-repeat;
    }
    .nav-tt li .linkedin{
        background: url(https://lh5.googleusercontent.com/-2-olf15YoqY/UHxDNzIdb1I/AAAAAAAAElk/5kHZeTBfdlA/s128/linkedin.png)no-repeat;
    }
    .nav-tt li .tumblr{
        background: url(https://lh5.googleusercontent.com/-6rP4L0v2_68/UHxDO2hBAJI/AAAAAAAAEls/tm1r69EhCRw/s128/tumblr.png) no-repeat;
    }
    .nav-tt li .youtube{
     background: url(https://lh5.googleusercontent.com/-X49px-YaEfY/UHxDPEPM7DI/AAAAAAAAEl0/230Z4oxHNzE/s128/you_tube.png) no-repeat;
    }
    .nav-tt li .mail{
     background: url(https://lh4.googleusercontent.com/-Z4beVXz8HJI/UHxDNbnCR2I/AAAAAAAAElU/BfBkHDhqkd8/s32/email.png) no-repeat;
    }
    .nav-tt li .rss{
     background: url(https://lh4.googleusercontent.com/-_EyfM2ruhco/UHxDOsct_rI/AAAAAAAAEl8/GuByt66SWxk/s128/rss.png) no-repeat;
    }
    .nav-tt li a span{
     width: 80px;
     height: 80px;
     line-height: 80px;
     padding: 10px;
     left: 50%;
     margin-left: -60px;
     font-family: 'Alegreya SC', Georgia, serif;
     font-weight: 400;
     font-style: italic;
     font-size: 14px;
     color: #719DAB;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
     text-align: center;
     border: 5px solid #ffffff;
     background: rgba(255,255,255,0.5);
     text-indent: 0px;
     position: absolute;
     pointer-events: none;
     border-radius: 50%;
     bottom: -40px;
     opacity: 0;
     box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
     -o-transform: scale(0);
     -ms-transform: scale(0);
     transform: scale(0);
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
    }
    .nav-tt li a span:before,
    .nav-tt li a span:after{
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     margin-left: -9px;
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 11px solid rgba(0,0,0,0.1);
    }
    .nav-tt li a span:after{
     bottom: -13px;
     margin-left: -10px;
     border-top: 10px solid #ffffff;
    }
    .nav-tt li a:hover span{
     opacity: 0.9;
     bottom: 50px;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -o-transform: scale(1);
     -ms-transform: scale(1);
     transform: scale(1);
    }
    3º- Agora cole o código seguinte onde deseja que apareça o menu.
    <ul class="nav-tt">
    <li><a class="twitter" href="URL-DO-TWITTER" target="_blank"><span>Twitter</span></a></li>
    <li><a class="gplus" href="URL-DO-PERFIL" target="_blank"><span>Google Plus</span></a></li>
    <li><a class="facebook" href="URL-DO-FACEBOOK" target="_blank"><span>Facebook</span></a></li>
    </ul>

    E Salve.

     Obs: No último passo você pode escolher onde deseja que o menu apareça basta colocá-lo no local desejado.



     

    23 de outubro de 2012

    Dar estilos ao gadget marcadores do blog (Vesão 2)

    No artigo de ontem eu mostrei como dar estilo ao gadget de marcadores do blog mesmo estilo que eu uso em meu blog, hoje mostrarei mais dois codigos semelhantes apenas cores e pequenos detalhes diferentes, como costume recomendo que faça um backup do layout para não ter transtono no final caso venha ocorrer um erro.

    Dar estilo ao gadget marcadores do blog (Versão #1)

     

     

    Estilo #1

     

    1º- Clique em Editar HTML e expandir modelos de widgets.
    2º- Aperte Ctrl + F e procure por ]]></b:skin> e cole o código abaixo antes.

    .label-size{
    margin:0;
    padding:0;
    position:relative;
    }
    .label-size a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:12px;
    margin-bottom: 9px;
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#0089e0;
    color:#fff;
    text-decoration:none;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
    border-top-right-radius:4px;
    }
    .label-size a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #0089e0 transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;
    }
    .label-size a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#fff;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
    }

    .label-size a:hover{background:#555;}
    .label-size a:hover:before{border-color:transparent #555 transparent transparent;}

    Estilo#2 

     

    1º- Clique em Editar HTML e expandir modelos de widgets.
    2º- Aperte Ctrl + F e procure por ]]></b:skin> e cole o código abaixo antes.

    .label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: 'Helvetica Neue', helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    }


    .label-size a {
    color: #996633;
    border: 1px solid #DDA13C;

    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
    }

    .label-size a:before {
    content: '\2022';
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;

    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
    }

    .label-size a:hover {
    text-decoration: none;

    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
    }


    Salve e pronto.

    Gadget de últimos tweet simples

    Olá galera hoje vou mostrar como colocar um gadget com o ultimo tweet em seu blog, é interessante mostrar ao seu leitor o que rola também nas redes sociais, cansando do modelo padrão comecei a procurar na internet o modelo mais interessante  foi assim que cheguei neste, simples e ao mesmo tempo bonito como mostra a imagem abaixo.

     Vamos ao Tutorial:

     Em Layout →Adicionar um Gadgat→ HTml/Javascript e cole o código abaixo

    <style>
    #ultimotweet { position:relative; width:335px; height:94px; margin:0 auto;
    background:url(http://2.bp.blogspot.com/-8jKyQz1JLTY/UHr-nCVNijI/AAAAAAAAFtU/T2XgWuNy2Uk/s1600/twitter.png);}
    .twtr-widget .twtr-tweet-wrap { position:absolute; top:10px; left:90px; overflow: hidden; padding:0px; margin:0; zoom:1; width:235px !important;}
    .twtr-doc { font-size:12px;}
    .twtr-hd, .twtr-user, .twtr-ft { display:none;}</style>
    <div id="ultimotweet">
    <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 1,
    interval: 5000,
    width: 335,
    height: 94,
    theme: {
    shell: {
    background: 'transparent',
    color: '#000'
    },
    tweets: {
    background: 'transparent',
    color: '#333',
    links: '#999'
    }
    },
    features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'all'
    }
    }).render().setUser('Trollada_boa').start();
    </script></div>

     Troque o nome Trollada_Boa pelo usename de seu Twitter e pronto