Caixa PopUp do Facebook com Efeito JQuery - Versão #2 - Personalizada

Nesta postagem compartilho com você mais uma novidade. Dessa vez mostro para vocês como vocês podem estar colocando em seu blog/site esta elegante e criativa PopUp. E, como você pode ver na demonstração acima, ela não ocupa espaço algum em seu blog; basta clicar no ícone do Facebook no canto da tela que automaticamente uma janela se abre automaticamente. Eu coloquei nela também um subtitulo personalizado com efeito Shadow. Enfim.

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

Para coloca-lo no blogger... Entre em "Layout" - "Adicionar um Gadget" e cole o seguinte código

<style type="text/css">
#FacebookBotãoDicasHot { float: right; position: fixed; bottom: 5%; right: 0; z-index: 999; }
#DicasHotWidget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:500px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(https://www3.comprasnet.gov.br/SICAFWeb/public/resources/images/fechar.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#DicasHotFormulario { padding: 15px; }
#DicasHotFormulario p { margin: 0 0 10px; }
#DicasHotFormulario input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#DicasHotFormulario input:not([type="checkbox"]):active,
#DicasHotFormulario input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#DicasHotFormulario .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif;   font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#DicasHotFormulario .button input:hover{ background: #4ab3c6; text-decoration: none; }
#DicasHotFormulario .button input:active,
#DicasHotFormulario .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www3.comprasnet.gov.br/SICAFWeb/public/resources/images/fechar.png',sizingMethod='scale'); }
#DicasHotFormulario  input{ padding: 10px 5px 10px 32px; width: 93%; }
#DicasHotFormulario  input[type=checkbox]{ width: 10px; padding: 0; }
<![endif]-->
</style>
<div id="FacebookBotãoDicasHot">
<a class="subscribe" href="#"><img src="http://massagejanny.com/wp-content/uploads/2013/10/facebook.png" alt="subscribe" /></a></div>
<div id="DicasHotWidget">
<div id="DicasHotFormulario">
<center><img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkuoKVOFXAubQy7zKS4KA3l8GBqu0cJ8SfAFmY7mMF-BpVbbk1BDhutUTE1Ai-j_xO992NxRA4guTAXFvir1mGwUTmQ3MXxFRF8LUzBby7lT-QnjqQEfva-SR_5ed_crrJbKUQGVuQgmE/s1600/subscribe.gif" /></center>
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYj3w7ht54lBZZG0bIpWOyU22mtFud8518RRzJoRGJa25Vq_SaV8gu3DUdfMzN0s_zKn-8IJhTiobcbmF39N2rPFGWxAxWmlrpEEJoD_Vl9vsGvmF17wrdBBouCbnvKLz-v80YL98LB3CX/s1600/facebook-icon.png" />


<style>
a.BloggerDicasHot {
font:normal 40px Impact,Arial,Sans-Serif;
background:transparent;
  color:#ccc;
  text-decoration:none;
  text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
a.BloggerDicasHot:hover {
  color:#fff;
  text-shadow:
    0px 1px 0px #4169E1,
    0px 0px 3px #4169E1,
    0px 0px 5px #4169E1,
    0px 0px 30px #4169E1,
    0px 3px 50px #4169E1;
}
</style>
<center><a class="BloggerDicasHot" href="http://dicashot.blogspot.com/">O seu "Curtir" ajuda muito no crescimento do blog!!!</a></center>


</div>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FDicashot&amp;width=850&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=216502231893793" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:850px; height:290px;" allowtransparency="true"></iframe>

</center>
</div>
 
<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(function ($) {
    // Load dialog on page load
    //$('#DicasHotWidget').modal();
 
    // Load dialog on click
    $('#FacebookBotãoDicasHot .subscribe').click(function (e) {
        $('#DicasHotWidget').modal();
 
        return false;
    });
});
</script>
<div style="text-align: right;">
<span style="font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/2014/05/caixa-popup-do-facebook-com-efeito.html" target="_blank">DicasHot</a></span></div>
</div>

Tendo colado o código, faça as modificações somente nas partes destacadas de azul no código.

 Depois é só salvar e pronto!!!