Pop Up Full HD Green Para Blogger

Nesta postagem compartilho com vocês esta nova pop up personalizada. No meu caso eu gostei da cor verde na pop up, mas, você pode personalizar.

Para colocar no blogger é bem simples...  Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte estilo css

#popupfacebook {position:absolute;} #popupfacebook {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8vI9qJwFReAZeIA_W2T9Cal5mBjjfd9YUKbQXNhgDCVvKr6EOm-2fgPTfw3Iq7nCs00AW4fBhz32vO6i4I-pJ_p3djOnb1kMUvCeL0fErRSYxqCq7GWTzmOe-c60TN7EMzSe6_7hjQg/s128/popupideasopacity0.5.png');margin:0; overflow-y:auto;z-index:999999;} #facebookpopup {background-color: #000; overflow:none;z-index:999999;} .facebookpopup {width:290px; height:300px; position:fixed; top:45%; left:50%; margin-top:-200px; margin-left:-200px; border: 10px solid #52e052; padding: 20px;z-index:999999;} #popup-title {background:#52e052;color:#000;font-size:20px !important;font-weight:bold;width:324px;margin: 0 -27px 10px -27px;padding:10px;line-height:25px;text-align: center;font-family:Arial !important; float:left;} .likefaceblogevolutions { width: 280px; height: 200px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 10px 15px 0; margin-top:60px; } .likefaceblogevolutions,.likefaceblogevolutions:before,.likefaceblogevolutions:after { background: #E9FBE9; border: 1px solid #52E052; } .likefaceblogevolutions:before,.likefaceblogevolutions:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .likefaceblogevolutions:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #52E052; }

Agora, salve e feche a parte de edição.

Agora, entre em "Layout" - "Adicionar um Gadget" -  "HTML/JavaScript" e cole o seguinte código

<div id="popupfacebook">

<div id="facebookpopup" class="facebookpopup">

<h3 id="popup-title">AJUDE, DÊ UM CURTIR!!!</h3>

<div class="likefaceblogevolutions">

<div style="height:200px;overflow:hidden">

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

</div>

</div>

<center style=" float:left; font-size:14px;cursor:pointer;" ><a style="background: #52E052; padding:5px 5px 10px 5px; font-size:12px; color:#000; text-decoration:none;" onmouseup="document.getElementById('popupfacebook').style.display='none'">[X] FECHAR</a></center>

<center style="float:right;"><a target='_blank' style="font-size:xx-small; color:#52E052; text-decoration:none;" href="http://dicashot.blogspot.com">Widget by Dicashot</a></center>

</div>

</div>

Tendo colado o código, modifique as partes destacadas de AZUL no código; Tendo feito isto, está pronto!!!