Mini PopUp Animada para curtir a Fan Page no Facebook Versão #2

Nesta postagem compartilho com vocês mais um código esta box de curtir página no Facebook.

Veja uma demonstração:
http://dicashotteste2.blogspot.com.br/

Para colocar em seu blog

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<style>

#SlideBoxDicasHot{

    width:380px;

    height:100px;

    padding:10px;

    padding-left:30px;

    background-color:#000;

    position:fixed;

    z-index:9999;

    bottom:0px;

    right:-450px;

 -moz-box-shadow:-2px 0px 5px #000;

 -webkit-box-shadow:-2px 0px 5px #000;

 box-shadow:-2px 0px 5px #000;

}

#SlideBoxDicasHot p, a.more{

    font-size:11px;

    text-transform:uppercase;

    font-family: Arial,Helvetica,sans-serif;

    letter-spacing:1px;

    color:#e93237;

}

a.more{

    cursor:pointer;

    color:#E28409;

}

a.more:hover{

    text-decoration:underline;

}

#SlideBoxDicasHot h2{

    color:#E28409;

    font-size:18px;

    margin:10px 10px 10px 10px;

}




a.close{

display:block;

width:24px; height: 24px;

cursor: pointer;

text-align: center;

line-height: 26px;

position: absolute;

right: 64px; top:1px;

background: #e93237;

color:#000;

border-bottom-left-radius: 8px;

-moz-border-bottom-left-radius: 8px;

-webkit-border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

-moz-border-bottom-right-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

font-size: 15px;

font-weight: bold;

}

a.close:hover{

    background-position:0px -13px;

}

a.copyright{

display:block;

width:24px; height: 24px;

cursor: pointer;

text-align: center;

line-height: 26px;

position: absolute;

right: 35px; top:1px;

background: #ff9900;

color:#555;

border-bottom-left-radius: 8px;

-moz-border-bottom-left-radius: 8px;

-webkit-border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

-moz-border-bottom-right-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

font-size: 13px;

font-weight: bold;

}

</style>

<p id='last'>

</p>

<div id='SlideBoxDicasHot'>

<p>Curta você também!!!</p>

<a class='close'>&#215;</a>

<a class='copyright' href='http://www.dicashot.blogspot.com/' target='_blank'>?</a>

<h2>

<iframe allowtransparency='false' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/dicashot&amp;width=300&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=105' style='background: trasparent; border: 0px solid #222; height: 105px; overflow: hidden; width: 300px;'/></iframe>

</h2>

<span style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/" target="_blank">DicasHot</a></span>




<a class='more'></a>

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

<script type='text/javascript'>

$(function() {

    $(window).scroll(function(){

        var distanceTop = $('#last').offset().top - $(window).height();



        if  ($(window).scrollTop() > distanceTop)

            $('#SlideBoxDicasHot').animate({'right':'0px'},300);

        else

            $('#SlideBoxDicasHot').stop(true).animate({'right':'-450px'},100);

    });



    $('#SlideBoxDicasHot .close').bind('click',function(){

        $(this).parent().remove();

    });

});

</script>

<div style="text-align: right;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/2014/05/mini-popup-animada-para-curtir-fan-page.html" target="_blank">DicasHot</a></span></div>

</div>

Na parte destacada de azul, coloque o nome da sua página no facebook, tendo feito isto, está pronto!!!