Facebook Popup Like Box

Facebook Popup Like Box

<script type="text/javascript" language="javascript">
function ccpop()
{
document.getElementById("overlay").style.display = 'block';
}
window.onload = ccpop;
</script>
<!--CodingCrazy.com Popup Like and Subscribtion Box-->
<style>
@import url(http://fonts.googleapis.com/css?family=Electrolize);
#overlay {
background:url('http://4.bp.blogspot.com/-6nW7fK26v0Q/VO4CHaK134I/AAAAAAAAKCM/vVOfX9BsHoA/s1600/overlay.png');
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;

}
.fb-box {
box-shadow: 0px 0px 6px #ccc;
-webkit-box-shadow: 0px 0px 6px #ccc;
-o-box-shadow: 0px 0px 6px #ccc;
background: #fff;
}
#ccpop {
position:fixed;
top: 50px;
width:300px;
margin-left:-150px;
left:50%;
height:auto;
border:5px solid #fafafa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background: #fff url('http://3.bp.blogspot.com/-sM3Bsx_fA1s/TpA0he8PmyI/AAAAAAAABr0/MtUP_DWddp0/s000/body-pattern-1.png');
padding: 15px;
z-index: 9999;
color: #333;
}
h2#ccpop-h2 {
font-size:12px;
color: #333;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
-webkit-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
-o-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
-moz-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-family: 'Electrolize', Arial, sans-serif;
text-align:center;
text-transform:uppercase;
}
#ccpop-h2 img {
position: relative;
width: 20px;
top: 5px;
right: 3px;
}
#thebutton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
background-color:#007dc1;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #124d77;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:13px;
padding:6px 47px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
font-family: Electrolize , Arial, sans-serif;
}
#thebutton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
background-color:#0061a7;
}
#thebox {
padding:6px 69px;
margin: 10px 0px;
background: #fff url('http://2.bp.blogspot.com/-v5h4oiQZCYM/VIXBUFCbDEI/AAAAAAAAJxY/_wNsrurCw70/s1600/email_go.png') no-repeat right center;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
border: 1px solid #d2d2d2;
font-family: Electrolize , Arial, sans-serif;
font-size:14px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
#thebox:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
.copyright {
float:right;
width: 110px;
}
.copyright a{
font-size:10px;
color: #999;
font-family: Electrolize , Arial, sans-serif;
}
</style>
<div id="overlay" style="display:none;">
<div id='ccpop'>
<h2 id='ccpop-h2'><img src="http://2.bp.blogspot.com/-zoUX4edfJXc/VIdLsHEEY6I/AAAAAAAAJyc/zBZKMB-Pl8A/s1600/facebook-messenger-like.png" />Like Our Facebook Fan Page</h2>
<div class='fb-like-pop'>
<!--Facebook Page Username Which You Should Replace With Your Own-->
<div class="fb-box">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=580729428720958";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/karthikofficialpage" data-width="258" data-height="258" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/karthikofficialpage"><a href="https://www.facebook.com/karthikofficialpage">Karthik</a></blockquote></div></div>
</div>
</div><!--FB Like Box-->
<hr width="300" align="center"/>
<div class="copyright">
<!--Do not remove the credit-->
<a href="https://youtu.be/AL4nFXTqAJg"target="_blank" >Get This</a> | <a href="#" onclick="document.getElementById('overlay').style.display='none'">X Close This</a>
</div><!--Copyright-->
</div><!--ccpop-->
</div><!--Overlay-->
<!--End Of All-->